Cleanup frontend user bid add/remove to use the API, script and html cleanup #172

This commit is contained in:
Nabeel Shahzad 2018-02-22 11:34:57 -06:00
parent 6dfab75f08
commit ad5f36f85e
9 changed files with 88 additions and 108 deletions

View File

@ -97,41 +97,6 @@ class FlightController extends Controller
]); ]);
} }
/**
* @param Request $request
* @return \Illuminate\Http\JsonResponse
* @throws \Exception
*/
public function save(Request $request)
{
$user_id = Auth::id();
$flight_id = $request->input('flight_id');
$action = strtolower($request->input('action'));
$cols = ['user_id' => $user_id, 'flight_id' => $flight_id];
if($action === 'save') {
$uf = UserBid::create($cols);
$uf->save();
return response()->json([
'id' => $uf->id,
'message' => 'Saved!',
]);
}
elseif ($action === 'remove') {
try {
$uf = UserBid::where($cols)->first();
$uf->delete();
} catch (\Exception $e) { }
return response()->json([
'message' => 'Deleted!'
]);
}
}
/** /**
* Show the flight information page * Show the flight information page
* @param $id * @param $id

View File

@ -27,7 +27,6 @@ Route::group([
Route::resource('dashboard', 'DashboardController'); Route::resource('dashboard', 'DashboardController');
Route::get('flights/search', 'FlightController@search')->name('flights.search'); Route::get('flights/search', 'FlightController@search')->name('flights.search');
Route::post('flights/save', 'FlightController@save')->name('flights.save');
Route::resource('flights', 'FlightController'); Route::resource('flights', 'FlightController');
Route::resource('pireps', 'PirepController'); Route::resource('pireps', 'PirepController');

View File

@ -1,34 +1,27 @@
@inject('moduleSvc', 'App\Services\ModuleService') @inject('moduleSvc', 'App\Services\ModuleService')
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
<link rel="shortcut icon" type="image/png" href="{!! public_asset('/assets/frontend/img/favicon.png') !!}"/>
<title>@yield('title') - {!! config('app.name') !!}</title> <title>@yield('title') - {!! config('app.name') !!}</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
<link href="{!! public_asset('/assets/frontend/css/bootstrap.min.css') !!}" rel="stylesheet"/> <link href="{!! public_asset('/assets/frontend/css/bootstrap.min.css') !!}" rel="stylesheet"/>
<link href="{!! public_asset('/assets/frontend/css/now-ui-kit.css') !!}" rel="stylesheet"/> <link href="{!! public_asset('/assets/frontend/css/now-ui-kit.css') !!}" rel="stylesheet"/>
<link href="{!! public_asset('/assets/system/css/vendor.css') !!}" rel="stylesheet"/>
<link href="{!! public_asset('/assets/frontend/css/styles.css') !!}" rel="stylesheet"/> <link href="{!! public_asset('/assets/frontend/css/styles.css') !!}" rel="stylesheet"/>
{{-- This is required to include --}}
<link href="{!! public_asset('/assets/system/css/vendor.css') !!}" rel="stylesheet"/>
@yield('css') @yield('css')
<script> {{-- This is required to include --}}
@if (Auth::user()) @include('system.scripts')
const PHPVMS_USER_API_KEY = "{!! Auth::user()->api_key !!}";
@else
const PHPVMS_USER_API_KEY = false;
@endif
</script>
</head> </head>
<body> <body>
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar navbar-toggleable-md" style="background: #067ec1;"> <nav class="navbar navbar-toggleable-md" style="background: #067ec1;">
@ -71,6 +64,7 @@
</footer> </footer>
</div> </div>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="{!! public_asset('/assets/system/js/vendor.js') !!}?v={!! time() !!}"></script> <script src="{!! public_asset('/assets/system/js/vendor.js') !!}?v={!! time() !!}"></script>
<script src="{!! public_asset('/assets/system/js/phpvms.js') !!}?v={!! time() !!}"></script> <script src="{!! public_asset('/assets/system/js/phpvms.js') !!}?v={!! time() !!}"></script>

View File

@ -9,7 +9,7 @@
<div class="card card-primary text-white" style="background: #067ec1; color: #FFF;"> <div class="card card-primary text-white" style="background: #067ec1; color: #FFF;">
<div class="card-block text-center"> <div class="card-block text-center">
<div style="float: left; position: absolute; display:block; top: 0px;font-size: 150px"> <div style="float: left; position: absolute; display:block; top: 0px;font-size: 150px">
<i class="fa fa-plane " style="opacity: .1;"></i> <i class="fas fa-plane" style="opacity: .1;"></i>
</div> </div>
<h4 class="">{!! $user->flights !!}</h4> <h4 class="">{!! $user->flights !!}</h4>
<h5 class="description" style="color: white;">{{ str_plural('flight', $user->flights) }}</h5> <h5 class="description" style="color: white;">{{ str_plural('flight', $user->flights) }}</h5>
@ -20,7 +20,7 @@
<div class="card card-primary text-white" style="background: #067ec1; color: #FFF;"> <div class="card card-primary text-white" style="background: #067ec1; color: #FFF;">
<div class="card-block text-center"> <div class="card-block text-center">
<div style="float: left; position: absolute; display:block; top: 0px;font-size: 150px"> <div style="float: left; position: absolute; display:block; top: 0px;font-size: 150px">
<i class="fa fa-clock-o" style="opacity: .1;"></i> <i class="far fa-clock" style="opacity: .1;"></i>
</div> </div>
<h4 class="">{!! \App\Facades\Utils::minutesToTimeString($user->flight_time, false)!!}</h4> <h4 class="">{!! \App\Facades\Utils::minutesToTimeString($user->flight_time, false)!!}</h4>
<h5 class="description" style="color: white;">total hours</h5> <h5 class="description" style="color: white;">total hours</h5>
@ -32,7 +32,7 @@
<div class="card card-primary text-white" style="background: #067ec1; color: #FFF;"> <div class="card card-primary text-white" style="background: #067ec1; color: #FFF;">
<div class="card-block text-center"> <div class="card-block text-center">
<div style="float: left; position: absolute; display:block; top: 0px;font-size: 150px"> <div style="float: left; position: absolute; display:block; top: 0px;font-size: 150px">
<i class="fa fa-location-arrow" style="opacity: .1;"></i> <i class="fas fa-map-marker" style="opacity: .1;"></i>
</div> </div>
@if($user->current_airport) @if($user->current_airport)
<h4 class="">{!! $user->current_airport->icao !!}</h4> <h4 class="">{!! $user->current_airport->icao !!}</h4>

View File

@ -19,37 +19,5 @@
</div> </div>
@endsection @endsection
@section('scripts') @include("layouts.${SKIN_NAME}.flights.scripts")
<script>
$(document).ready(function() {
$("button.save_flight").click(function(e) {
var btn = $(this);
var flight_id = btn.attr('x-id');
var params = {
method: 'POST',
data: {'flight_id': flight_id, _token: "{{ csrf_token() }}"},
//headers: { 'X-CSRF-Token': "{{ csrf_token() }}" }
};
if(btn.hasClass('btn-danger')) {
params.data.action = 'remove';
params.success = function() {
console.log('successfully removed flight');
btn.removeClass('btn-danger');
}
} else {
params.data.action = 'save';
params.success = function() {
console.log('successfully saved flight');
btn.addClass('btn-danger');
}
}
$.ajax("/flights/save", params);
e.preventDefault();
});
});
</script>
@endsection

View File

@ -0,0 +1,39 @@
@section('scripts')
<script>
$(document).ready(function () {
$("button.save_flight").click(function (e) {
e.preventDefault();
const btn = $(this);
const class_name = btn.attr('x-saved-class');
let params = {
data: {
'flight_id': btn.attr('x-id')
},
headers: {
'x-api-key': "{!! Auth::user()->api_key !!}"
}
};
if (btn.hasClass(class_name)) {
params.method = 'DELETE';
params.success = function () {
console.log('successfully removed flight');
btn.removeClass(class_name);
alert('Your bid was removed');
}
} else {
params.method = 'PUT';
params.success = function () {
console.log('successfully saved flight');
btn.addClass(class_name);
alert('Your bid was added');
}
}
$.ajax('/api/user/bids', params);
});
});
</script>
@endsection

View File

@ -1,26 +1,31 @@
@foreach($flights as $flight) @foreach($flights as $flight)
<div class="card border-blue-bottom"> <div class="card border-blue-bottom">
<div class="card-block" style="min-height: 0px"> <div class="card-block" style="min-height: 0">
<div class="row"> <div class="row">
<div class="col-sm-9"> <div class="col-sm-9">
<h5> <h5>
<a class="text-c" href="{!! route('frontend.flights.show', [$flight->id]) !!}"> <a class="text-c" href="{!! route('frontend.flights.show', [$flight->id]) !!}">
{!! $flight->airline->code !!}{!! $flight->flight_number !!} {!! $flight->ident !!}
@if($flight->route_code)
Code: {!! $flight->route_code !!}
@endif
@if($flight->route_leg)
Leg: {!! $flight->route_leg !!}
@endif
</a> </a>
</h5> </h5>
</div> </div>
<div class="col-sm-3 text-right"> <div class="col-sm-3 text-right">
<!-- use for saved: btn-outline-primary --> {{-- NOTE:
<button class="btn btn-icon btn-icon-mini btn-round Don't remove the "save_flight" class, or the x-id attribute.
{{ in_array($flight->id, $saved) ? 'btn-danger':'' }} It will break the AJAX to save/delete
save_flight" x-id="{!! $flight->id !!}" type="button">
<i class="now-ui-icons ui-2_favourite-28"></i> "x-saved-class" is the class to add/remove if the bid exists or not
If you change it, remember to change it in the in-array line as well
--}}
<button class="btn btn-round btn-icon btn-icon-mini
{{ in_array($flight->id, $saved, true) ? 'btn-info':'' }}
save_flight"
x-id="{!! $flight->id !!}"
x-saved-class="btn-info"
type="button"
title="Add/Remove Bid"
>
<i class="fas fa-map-marker"></i>
</button> </button>
</div> </div>
</div> </div>

View File

@ -2,7 +2,7 @@
@if(Auth::check()) @if(Auth::check())
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{!! url('/dashboard') !!}"> <a class="nav-link" href="{!! url('/dashboard') !!}">
<i class="fa fa-tachometer"></i> <i class="fas fa-tachometer-alt"></i>
<p>Dashboard</p> <p>Dashboard</p>
</a> </a>
</li> </li>
@ -10,14 +10,14 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{!! url('/livemap') !!}"> <a class="nav-link" href="{!! url('/livemap') !!}">
<i class="fa fa-globe"></i> <i class="fas fa-globe"></i>
<p>Live Map</p> <p>Live Map</p>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{!! url('/pilots') !!}"> <a class="nav-link" href="{!! url('/pilots') !!}">
<i class="fa fa-users"></i> <i class="fas fa-users"></i>
<p>Pilots</p> <p>Pilots</p>
</a> </a>
</li> </li>
@ -35,13 +35,13 @@
@if(!Auth::check()) @if(!Auth::check())
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{!! url('/login') !!}"> <a class="nav-link" href="{!! url('/login') !!}">
<i class="fa fa-sign-in"></i> <i class="fas fa-sign-in-alt"></i>
<p>Login</p> <p>Login</p>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{!! url('/register') !!}"> <a class="nav-link" href="{!! url('/register') !!}">
<i class="fa fa-id-card-o"></i> <i class="far fa-id-card"></i>
<p>Register</p> <p>Register</p>
</a> </a>
</li> </li>
@ -50,19 +50,19 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{!! url('/flights') !!}"> <a class="nav-link" href="{!! url('/flights') !!}">
<i class="fa fa-plane"></i> <i class="fab fa-avianex"></i>
<p>Flights</p> <p>Flights</p>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{!! url('/pireps') !!}"> <a class="nav-link" href="{!! url('/pireps') !!}">
<i class="fa fa-cloud-upload"></i> <i class="fas fa-cloud-upload-alt"></i>
<p>PIREPs</p> <p>PIREPs</p>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{!! url('/profile') !!}"> <a class="nav-link" href="{!! url('/profile') !!}">
<i class="fa fa-user-circle-o"></i> <i class="far fa-user"></i>
<p>Profile</p> <p>Profile</p>
</a> </a>
</li> </li>
@ -70,7 +70,7 @@
@role('admin') @role('admin')
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{!! url('/admin') !!}"> <a class="nav-link" href="{!! url('/admin') !!}">
<i class="fa fa-circle-o-notch"></i> <i class="fas fa-circle-notch"></i>
<p>Admin</p> <p>Admin</p>
</a> </a>
</li> </li>
@ -88,7 +88,7 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{!! url('/logout') !!}"> <a class="nav-link" href="{!! url('/logout') !!}">
<i class="fa fa-external-link-square"></i> <i class="fas fa-sign-out-alt"></i>
<p>Log Out</p> <p>Log Out</p>
</a> </a>
</li> </li>

View File

@ -0,0 +1,10 @@
{{--
DO NOT MODIFY THIS FILE. THINGS WILL BREAK IF YOU DO
--}}
<script>
@if (Auth::user())
const PHPVMS_USER_API_KEY = "{!! Auth::user()->api_key !!}";
@else
const PHPVMS_USER_API_KEY = false;
@endif
</script>