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
@@ -19,37 +19,5 @@
</div>
@endsection
@section('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
@include("layouts.${SKIN_NAME}.flights.scripts")
@@ -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
@@ -1,26 +1,31 @@
@foreach($flights as $flight)
<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="col-sm-9">
<h5>
<a class="text-c" href="{!! route('frontend.flights.show', [$flight->id]) !!}">
{!! $flight->airline->code !!}{!! $flight->flight_number !!}
@if($flight->route_code)
Code: {!! $flight->route_code !!}
@endif
@if($flight->route_leg)
Leg: {!! $flight->route_leg !!}
@endif
{!! $flight->ident !!}
</a>
</h5>
</div>
<div class="col-sm-3 text-right">
<!-- use for saved: btn-outline-primary -->
<button class="btn btn-icon btn-icon-mini btn-round
{{ in_array($flight->id, $saved) ? 'btn-danger':'' }}
save_flight" x-id="{!! $flight->id !!}" type="button">
<i class="now-ui-icons ui-2_favourite-28"></i>
{{-- NOTE:
Don't remove the "save_flight" class, or the x-id attribute.
It will break the AJAX to save/delete
"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>
</div>
</div>