diff --git a/public/css/bootstrap.min.css b/public/css/bootstrap.min.css index 8d241a6..6d52c42 100644 --- a/public/css/bootstrap.min.css +++ b/public/css/bootstrap.min.css @@ -205,7 +205,7 @@ code, kbd, pre, samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 1em } diff --git a/public/css/custom.css b/public/css/custom.css index 0d25f4e..9c0b4b5 100644 --- a/public/css/custom.css +++ b/public/css/custom.css @@ -1,52 +1,62 @@ - @import url('https://fonts.googleapis.com/css?family=Nova+Slim&display=swap'); -body, html { - line-height: 1.8; - font-family: 'Roboto', sans-serif; - color: #555e58; - text-transform:capitalize; - text-rendering: optimizeLegibility !important; - -webkit-font-smoothing: antialiased !important; - font-weight: 400; - margin:0px; - padding:0px; +body, +html { + line-height: 1.8; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + color: #555e58; + text-transform: capitalize; + text-rendering: optimizeLegibility !important; + -webkit-font-smoothing: antialiased !important; + font-weight: 400; + margin: 0px; + padding: 0px; } -h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4 { font-weight: 400; line-height: 1.5em; } p { - font-size: 15px; - margin: 12px 0 0; - line-height: 24px; + font-size: 15px; + margin: 12px 0 0; + line-height: 24px; } -a{ - color: #333; - font-weight: 400; +a { + color: #333; + font-weight: 400; } -button:focus{ - box-shadow:none; - outline:none; - border:none; +button:focus { + box-shadow: none; + outline: none; + border: none; } -button{ - cursor:pointer; +button { + cursor: pointer; } -ul, ol { - padding: 0; - margin:0px; - list-style: none; +ul, +ol { + padding: 0; + margin: 0px; + list-style: none; } @@ -66,41 +76,43 @@ a:focus { ==================================================*/ @font-face { - font-family: 'Material Icons'; - font-style: normal; - font-weight: 400; - src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */ - src: local('Material Icons'), - local('MaterialIcons-Regular'), - url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), - url(https://example.com/MaterialIcons-Regular.woff) format('woff'), - url(https://example.com/MaterialIcons-Regular.ttf) format('truetype'); + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url(https://example.com/MaterialIcons-Regular.eot); + /* For IE6-8 */ + src: local('Material Icons'), + local('MaterialIcons-Regular'), + url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), + url(https://example.com/MaterialIcons-Regular.woff) format('woff'), + url(https://example.com/MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { - font-family: 'Material Icons'; - font-weight: normal; - font-style: normal; - font-size: 24px; /* Preferred icon size */ - display: inline-block; - line-height: 1; - text-transform: none; - letter-spacing: normal; - word-wrap: normal; - white-space: nowrap; - direction: ltr; + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; + /* Preferred icon size */ + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; - /* Support for all WebKit browsers. */ - -webkit-font-smoothing: antialiased; - /* Support for Safari and Chrome. */ - text-rendering: optimizeLegibility; + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; - /* Support for Firefox. */ - -moz-osx-font-smoothing: grayscale; + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; - /* Support for IE. */ - font-feature-settings: 'liga'; + /* Support for IE. */ + font-feature-settings: 'liga'; } /*======================================================= @@ -110,9 +122,9 @@ a:focus { .wrapper { - position: relative; - width:100%; - overflow:auto; + position: relative; + width: 100%; + overflow: auto; } @@ -126,71 +138,73 @@ a:focus { #sidebar { - position:fixed; - height:100vh!important; + position: fixed; + height: 100vh !important; top: 0; bottom: 0; left: 0; - z-index:11; + z-index: 11; width: 260px; - overflow:auto; - transition:all 0.3s ; + overflow: auto; + transition: all 0.3s; background: #FFFFFF; box-shadow: 0 10px 30px -12px rgb(0 0 0 / 42%), 0 4px 25px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%); } -#sidebar::-webkit-scrollbar{ - width:5px; - border-radius:10px; - background-color:#eee; - display:none; +#sidebar::-webkit-scrollbar { + width: 5px; + border-radius: 10px; + background-color: #eee; + display: none; } -#sidebar::-webkit-scrollbar-thumbs{ - width:5px; - border-radius:10px; - background-color:#333; - display:none; + +#sidebar::-webkit-scrollbar-thumbs { + width: 5px; + border-radius: 10px; + background-color: #333; + display: none; } -#sidebar:hover::-webkit-scrollbar{ - display:block; +#sidebar:hover::-webkit-scrollbar { + display: block; } -#sidebar:hover::-webkit-scrollbar-thumbs{ - display:block; + +#sidebar:hover::-webkit-scrollbar-thumbs { + display: block; } #sidebar .sidebar-header { - padding:20px; - background-color:#ffffff; - border-bottom:1px solid #eee; + padding: 20px; + background-color: #ffffff; + border-bottom: 1px solid #eee; } -.sidebar-header h3{ - color:#333; - font-size:17px; - margin:0px; - text-transform:uppercase; - transition:all 0.5s ease; - font-weight:600; +.sidebar-header h3 { + color: #333; + font-size: 17px; + margin: 0px; + text-transform: uppercase; + transition: all 0.5s ease; + font-weight: 600; } -.sidebar-header h3 img{ - width:120px; - margin-right:10px; +.sidebar-header h3 img { + width: 120px; + margin-right: 10px; } -#sidebar ul li{ - padding:2px 7px; +#sidebar ul li { + padding: 2px 7px; } -#sidebar ul li.active>a{ +#sidebar ul li.active>a { color: #333; background-color: rgba(200, 200, 200, 0.2); } -#sidebar ul li a:hover{ +#sidebar ul li a:hover { color: #333; background-color: rgba(200, 200, 200, 0.2); } @@ -201,35 +215,35 @@ a:focus { top: 23px; } -#sidebar ul li.drodown{ - position:sticky; +#sidebar ul li.drodown { + position: sticky; } -#sidebar ul.components { +#sidebar ul.components { padding: 20px 0; } #sidebar ul li a { padding: 10px; - line-height: 30px; - border-radius:5px; + line-height: 30px; + border-radius: 5px; font-size: 15px; - position:relative; + position: relative; font-weight: 400; display: block; } -#sidebar ul li a span{ - text-transform:capitalize; - display:inline-block; +#sidebar ul li a span { + text-transform: capitalize; + display: inline-block; } #sidebar ul li a i { position: relative; margin-right: 10px; top: 5px; - color: #555555; + color: #555555; margin-left: 10px; } @@ -251,27 +265,27 @@ a:focus { #content { - position: relative; + position: relative; transition: all 0.3s; - background-color: #EEEEEE; + background-color: #EEEEEE; } -.top-navbar{ - width:100%; - z-index:9; - position:relative; +.top-navbar { + width: 100%; + z-index: 9; + position: relative; } -.main-content{ - padding:10px 20px 0px 20px; - position: relative; +.main-content { + padding: 10px 20px 0px 20px; + position: relative; width: 100%; } -.navbar{ +.navbar { background-color: #2196F3; color: #FFFFFF; } @@ -280,22 +294,23 @@ a:focus { color: #FFFFFF; } -.navbar button{ - background-color:transparent; - border:none; -} -.navbar button span{ - color:#fff; +.navbar button { + background-color: transparent; + border: none; } -#sidebarCollapse{ - border-radius:50%; - width:45px; - height:45px; - text-align:center; - line-height:45px; - margin-right:20px; - border:none; +.navbar button span { + color: #fff; +} + +#sidebarCollapse { + border-radius: 50%; + width: 45px; + height: 45px; + text-align: center; + line-height: 45px; + margin-right: 20px; + border: none; color: #FFFFFF; background-color: rgba(0, 0, 0, 0.09); } @@ -307,28 +322,28 @@ a:focus { -.navbar-nav > li.active{ - color: #FFFFFF; - border-radius:4px; - background-color: rgba(0, 0, 0, 0.08); - } +.navbar-nav>li.active { + color: #FFFFFF; + border-radius: 4px; + background-color: rgba(0, 0, 0, 0.08); +} -.navbar-nav > li > a { +.navbar-nav>li>a { color: #FFFFFF; } .navbar .notification { - position: absolute; + position: absolute; top: 5px; right: 10px; - display: block; + display: block; font-size: 9px; border: 0px; font-size: 10px; background: #d9534f; min-width: 15px; - text-align: center; + text-align: center; padding: 1px 5px; height: 15px; border-radius: 2px; @@ -336,23 +351,23 @@ a:focus { } - .navbar-nav > li.show .dropdown-menu { +.navbar-nav>li.show .dropdown-menu { transform: translate3d(0, 0, 0); - opacity:1; - visibility:visible; + opacity: 1; + visibility: visible; } -.dropdown-menu li > a { +.dropdown-menu li>a { font-size: 13px; padding: 10px 20px; margin: 0 5px; border-radius: 2px; - font-weight: 400; + font-weight: 400; transition: all 150ms linear; } -.navbar-nav > .active > a:focus { +.navbar-nav>.active>a:focus { color: #FFFFFF; background-color: rgba(0, 0, 0, 0.08); } @@ -361,7 +376,7 @@ a:focus { .navbar-nav li a { position: relative; display: block; - padding: 10px 15px!important; + padding: 10px 15px !important; } /*======================================================= @@ -385,18 +400,18 @@ a:focus { } .card { - border-radius: 0px!important; + border-radius: 0px !important; } .card { display: inline-block; position: relative; - border:none!important; + border: none !important; width: 100%; - margin:15px 0; + margin: 15px 0; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); border-radius: 6px; - color: rgba(0,0,0, 0.87); + color: rgba(0, 0, 0, 0.87); background: #fff; } @@ -408,8 +423,8 @@ a:focus { .card .card-header { padding: 15px 20px 0; z-index: 3; - background-color:#fff!important; - border-bottom:none; + background-color: #fff !important; + border-bottom: none; } .card .card-footer .stats .material-icons { @@ -432,21 +447,24 @@ a:focus { .icon.icon-rose { color: #e91e63; } + .icon.icon-success { color: #4caf50; } + .icon.icon-info { color: #00bcd4; } + .card .card-footer { margin: 0 7px 0px; padding-top: 10px; - background-color:#fff; + background-color: #fff; border-top: 1px solid #eeeeee; } .text-info { - color: #03A9F4!important; + color: #03A9F4 !important; } .card-stats .card-content { @@ -462,6 +480,7 @@ a:focus { .card .card-content .category { margin-bottom: 0; } + .card .category:not([class*="text-"]) { color: #555555; font-size: 14px; @@ -487,17 +506,17 @@ a:focus { display: inline-block; } -.card .card-header-text h4{ +.card .card-header-text h4 { margin-top: 0; margin-bottom: 3px; - font-size:19px; + font-size: 19px; font-weight: 400; - color: #222222; + color: #222222; text-decoration: none; - + } -.table > thead > tr > th { +.table>thead>tr>th { border-bottom-width: 1px; font-size: 16px; font-weight: 400; @@ -531,12 +550,15 @@ a:focus { height: 12px; border-radius: 100%; } -.streamline .sl-primary:before, .streamline .sl-primary:last-child:after { + +.streamline .sl-primary:before, +.streamline .sl-primary:last-child:after { background-color: #188ae2; } -.streamline .sl-danger:before, .streamline .sl-danger:last-child:after { +.streamline .sl-danger:before, +.streamline .sl-danger:last-child:after { background-color: #ff5b5b; } @@ -544,7 +566,8 @@ a:focus { border-left-color: #10c469; } -.streamline .sl-success:before, .streamline .sl-success:last-child:after { +.streamline .sl-success:before, +.streamline .sl-success:last-child:after { background-color: #10c469; } @@ -552,7 +575,8 @@ a:focus { border-left-color: #f9c851; } -.streamline .sl-warning:before, .streamline .sl-warning:last-child:after { +.streamline .sl-warning:before, +.streamline .sl-warning:last-child:after { background-color: #f9c851; } @@ -561,6 +585,7 @@ a:focus { .streamline .sl-danger { border-left-color: #ff5b5b; } + .streamline .sl-item .sl-content { margin-left: 24px; } @@ -568,12 +593,12 @@ a:focus { .streamline .sl-item .text-muted { color: inherit; opacity: .6; - font-size:12px; + font-size: 12px; } .streamline .sl-item p { - font-size:14px; - color:#333; + font-size: 14px; + color: #333; } @@ -586,15 +611,15 @@ a:focus { /*============================================= footer design start =========================================*/ - + .footer { border-top: 1px solid #e7e7e7; } footer { padding: 10px 0; - position:relative; - width:100%; + position: relative; + width: 100%; } footer ul li { @@ -616,7 +641,7 @@ footer ul li a { footer .copyright { padding: 15px; - font-size:14px; + font-size: 14px; margin: 0; } @@ -624,126 +649,19 @@ footer .copyright { /*============================================= footer design end =========================================*/ - - - -#sidebar.show-nav,.body-overlay.show-nav{ - transform:translatex(0%); - opacity:1; - display:block; - visibility:visible; - z-index:15; -} - - -/* --------------------------------------------------- - MEDIAQUERIES ------------------------------------------------------ */ - -@media only screen and (min-width:992px){ - #sidebar.active { - width:80px; - height:100%!important; - position:absolute!important; - overflow:visible!important; - top:0!important; - z-index:666; - float:left!important; - bottom: 0!important; -} - - -#sidebar.active .sidebar-header h3 span { - display:none; - transition:all 0.5s ease; -} - -#sidebar.active ul li a span{ - display:none; - transition:all 0.5s ease; -} - -#sidebar.active .dropdown-toggle::after { - display:none; - transition:all 0.5s ease; -} - -#content { - width: calc(100% - 260px); - position: relative; - float: right; - transition: all 0.3s; - background-color: #EEEEEE; -} - -#content.active { - width: calc(100% - 80px); -} - -#sidebar.active .menu { - position: absolute; - left: 81px; - background-color: white; - width: 180px; - height: auto; - margin: 5px 0; - top: 0; - border: 1px solid #dcd9d9; - z-index: 4; -} -} - - -@media only screen and (min-width:992px){ -.dropdown-menu { - border: 0; - box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%); - transform: translate3d(0, -20px, 0); - visibility: hidden; - transition: all 150ms linear; +#sidebar.show-nav, +.body-overlay.show-nav { + transform: translatex(0%); + opacity: 1; display: block; - min-width:15rem; - right: 0; - left: auto; - opacity: 0; -} - + visibility: visible; + z-index: 15; } -/*===============small-screen overlay sidebar design media queries==============*/ - -@media only screen and (max-width:992px){ -#sidebar { - position:fixed; - top: 0; - bottom:0; - z-index: 10; - width: 260px; - transform:translatex(-100%); - transition: all 150ms linear; - box-shadow:none!important; -} - -.body-overlay{ - position:fixed; - top:0; - left:0; - width:100%; - height:100%; - display:none; - visibility:hidden; - opacity:0; - z-index:3; - transition: all 150ms linear; - background-color:rgba(0,0,0,0.5); -} -} -/*===============small-screen overlay sidebar design media queries==============*/ - @@ -751,5 +669,111 @@ footer .copyright { MEDIAQUERIES ----------------------------------------------------- */ +@media only screen and (min-width:992px) { + #sidebar.active { + width: 80px; + height: 100% !important; + position: absolute !important; + overflow: visible !important; + top: 0 !important; + z-index: 666; + float: left !important; + bottom: 0 !important; + } + #sidebar.active .sidebar-header h3 span { + display: none; + transition: all 0.5s ease; + } + + #sidebar.active ul li a span { + display: none; + transition: all 0.5s ease; + } + + #sidebar.active .dropdown-toggle::after { + display: none; + transition: all 0.5s ease; + } + + #content { + width: calc(100% - 260px); + position: relative; + float: right; + transition: all 0.3s; + background-color: #EEEEEE; + } + + #content.active { + width: calc(100% - 80px); + } + + #sidebar.active .menu { + position: absolute; + left: 81px; + background-color: white; + width: 180px; + height: auto; + margin: 5px 0; + top: 0; + border: 1px solid #dcd9d9; + z-index: 4; + } +} + + +@media only screen and (min-width:992px) { + .dropdown-menu { + border: 0; + box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%); + transform: translate3d(0, -20px, 0); + visibility: hidden; + transition: all 150ms linear; + display: block; + min-width: 15rem; + right: 0; + left: auto; + opacity: 0; + } + +} + + +/*===============small-screen overlay sidebar design media queries==============*/ + +@media only screen and (max-width:992px) { + #sidebar { + position: fixed; + top: 0; + bottom: 0; + z-index: 10; + width: 260px; + transform: translatex(-100%); + transition: all 150ms linear; + box-shadow: none !important; + } + + .body-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: none; + visibility: hidden; + opacity: 0; + z-index: 3; + transition: all 150ms linear; + background-color: rgba(0, 0, 0, 0.5); + } +} + +/*===============small-screen overlay sidebar design media queries==============*/ + + + + +/* --------------------------------------------------- + MEDIAQUERIES +----------------------------------------------------- */ \ No newline at end of file diff --git a/resources/views/pages/add-station.blade.php b/resources/views/pages/add-station.blade.php new file mode 100644 index 0000000..2b0b5fd --- /dev/null +++ b/resources/views/pages/add-station.blade.php @@ -0,0 +1,86 @@ +@extends('layouts.app') + +@section('page_title', 'Add Station') + +@section('content') + +
+
Add New Station
+
+
+
+ @csrf +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ Cancel + +
+
+
+ + +@endsection diff --git a/resources/views/pages/station locator/stations.blade.php b/resources/views/pages/station locator/stations.blade.php index 282271f..5584ddc 100644 --- a/resources/views/pages/station locator/stations.blade.php +++ b/resources/views/pages/station locator/stations.blade.php @@ -1,14 +1,81 @@ @extends('layouts.app') -@section('page_title', 'Station Locator') +@section('page_title', 'Station Management') @section('content') -
-
- Stations -
-
-

This is the Stations page content.

-
-
+ @php + $stations = [ + [ + 'id' => 1, + 'station_code' => 'ST001', + 'station_name' => 'North Station', + 'branch_name' => 'Quezon City Branch', + 'date_created' => '2023-05-01', + 'created_by' => 'Maryse Howe', + 'modified_by' => 'Joseph Sazon', + 'date_modified' => '2023-06-15' + ], + [ + 'id' => 2, + 'station_code' => 'ST002', + 'station_name' => 'East Hub', + 'branch_name' => 'Pasig Branch', + 'date_created' => '2023-05-10', + 'created_by' => 'Graxia Montino', + 'modified_by' => 'Cine Rosimo', + 'date_modified' => '2023-07-01' + ], + [ + 'id' => 3, + 'station_code' => 'ST003', + 'station_name' => 'West Terminal', + 'branch_name' => 'Makati Branch', + 'date_created' => '2023-06-20', + 'created_by' => 'Cine Rosimo', + 'modified_by' => 'Graxia Montino', + 'date_modified' => '2023-08-05' + ], + [ + 'id' => 4, + 'station_code' => 'ST004', + 'station_name' => 'Central Depot', + 'branch_name' => 'Manila Branch', + 'date_created' => '2023-07-05', + 'created_by' => 'Maryse Howe', + 'modified_by' => 'Maryse Howe', + 'date_modified' => '2023-09-10' + ], + [ + 'id' => 5, + 'station_code' => 'ST005', + 'station_name' => 'South Station', + 'branch_name' => 'Parañaque Branch', + 'date_created' => '2023-08-15', + 'created_by' => 'Joseph Sazon', + 'modified_by' => 'Graxia Montino', + 'date_modified' => '2023-10-01' + ] + ]; + @endphp + + @include('components.table-component', [ + 'pageTitle' => 'Station Management', + 'data' => $stations, + 'columns' => [ + ['name' => 'Station Code', 'key' => 'station_code', 'sortable' => true], + ['name' => 'Station Name', 'key' => 'station_name', 'sortable' => true], + ['name' => 'Branch Name', 'key' => 'branch_name', 'sortable' => true], + ['name' => 'Date Created', 'key' => 'date_created', 'sortable' => true], + ['name' => 'Created By', 'key' => 'created_by', 'sortable' => true], + ['name' => 'Modified By', 'key' => 'modified_by', 'sortable' => true], + ['name' => 'Date Modified', 'key' => 'date_modified', 'sortable' => true] + ], + 'actions' => ['edit', 'view', 'delete'], + 'showAddButton' => true, + 'addButtonUrl' => '/add-station', + 'showCheckboxes' => false, + 'showBatchDelete' => false, + 'showEditModal' => true, + 'showViewModal' => true + ]) @endsection diff --git a/routes/web.php b/routes/web.php index d520e45..9782ef9 100644 --- a/routes/web.php +++ b/routes/web.php @@ -126,4 +126,8 @@ Route::get('/add-branches', function () { Route::get('/add-fuels', function () { return view('pages.add-fuels'); -})->name('add-fuels'); \ No newline at end of file +})->name('add-fuels'); + +Route::get('/add-station', function () { + return view('pages.add-station'); +})->name('add-station'); \ No newline at end of file