Skip to content

Commit

Permalink
refactor: remove jquery from flight scripts
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArthurHetem
ArthurHetem committed Jan 1, 2025
1 parent e093717 commit 3176589
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 81 deletions.
35 changes: 18 additions & 17 deletions resources/views/layouts/seven/flights/bids_aircraft.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
<div class="modal fade" id="bidModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addBidLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="bidModalLabel">Aircraft booking</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<select name="" id="aircraft_select" class="bid_aircraft form-control"></select>
</div>
<div class="modal-footer">
<button type="button" id="without_aircraft" class="btn btn-secondary" data-bs-dismiss="modal">Don't book aircraft</button>
<button type="button" id="with_aircraft" class="btn btn-primary" data-bs-dismiss="modal">Book aircraft</button>
</div>
<div class="modal fade" id="bidModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="addBidLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="bidModalLabel">Aircraft booking</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<select name="" id="aircraft_select" class="bid_aircraft form-control"></select>
</div>
<div class="modal-footer">
<button type="button" id="without_aircraft" class="btn btn-secondary" data-bs-dismiss="modal">Don't
book aircraft</button>
<button type="button" id="with_aircraft" class="btn btn-primary" data-bs-dismiss="modal">Book
aircraft</button>
</div>
</div>
</div>
</div>
</div>
76 changes: 46 additions & 30 deletions resources/views/layouts/seven/flights/scripts.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,35 +14,52 @@
e.preventDefault();
const btn = e.target;
const class_name = btn.getAttribute('x-saved-class'); // classname to use is set on the element
const class_name = btn.getAttribute(
'x-saved-class'); // classname to use is set on the element
const flight_id = btn.getAttribute('x-id');
sel.setAttribute('x-saved-class', class_name);
sel.setAttribute('x-id', flight_id);
if (!btn.classList.contains(class_name)) {
$('#bidModal').modal();
const bidModal = new bootstrap.Modal(document.getElementById('bidModal'))
bidModal.show();
fetch(`{{ Config::get('app.url') }}/api/flights/${flight_id}/aircraft`, {
headers: {
'X-API-KEY': document.querySelector('meta[name="api-key"]').getAttribute('content')
}
})
.then(response => response.json())
.then(data => {
aircrafts = [];
data.forEach(ac => {
const text = `[${ac.icao}] ${ac.registration} ${ac.registration !== ac.name ? ` ${ac.name}` : ''}`;
aircrafts.push({
id: ac.id,
text: text
headers: {
'X-API-KEY': document.querySelector('meta[name="api-key"]')
.getAttribute('content')
}
})
.then(response => response.json())
.then(data => {
aircrafts = [];
data.forEach(ac => {
const text =
`[${ac.icao}] ${ac.registration} ${ac.registration !== ac.name ? ` ${ac.name}` : ''}`;
aircrafts.push({
id: ac.id,
text: text
});
});
sel.innerHTML = '';
// Initialize Tom Select only if it hasn't been initialized yet
const selectElement = document.getElementById(
'aircraft_select');
if (!selectElement.tomselect) {
new TomSelect(selectElement, {
options: aircrafts,
valueField: 'id',
labelField: 'text',
searchField: 'text'
});
} else {
// Update the existing Tom Select instance with new options
selectElement.tomselect.clearOptions();
selectElement.tomselect.addOptions(aircrafts);
}
});
sel.innerHTML = '';
new TomSelect(sel, {
options: aircrafts,
placeholder: 'Select an aircraft',
create: false
});
});
} else {
phpvms.bids.removeBid(flight_id).then(() => {
console.log('successfully removed flight');
Expand All @@ -62,8 +79,8 @@
const flight_id = sel.getAttribute('x-id');
const class_name = sel.getAttribute('x-saved-class');
phpvms.bids.addBid(flight_id, ac_id).then(() => {
console.log('successfully saved flight');
document.querySelector(`button.save_flight[x-id="${flight_id}"]`).classList.add(class_name);
document.querySelector(`button.save_flight[x-id="${flight_id}"]`).classList.add(
class_name);
location.reload();
}).catch((error) => {
if (error.response && error.response.data)
Expand All @@ -76,9 +93,9 @@
const flight_id = sel.getAttribute('x-id');
const class_name = sel.getAttribute('x-saved-class');
phpvms.bids.addBid(flight_id).then(() => {
console.log('successfully saved flight');
document.querySelector(`button.save_flight[x-id="${flight_id}"]`).classList.add(class_name);
alert('@lang('flights.bidadded')');
document.querySelector(`button.save_flight[x-id="${flight_id}"]`).classList.add(
class_name);
location.reload();
}).catch((error) => {
if (error.response && error.response.data)
alert(`Error adding bid: ${error.response.data.details}`);
Expand All @@ -95,23 +112,22 @@
e.preventDefault();
const btn = e.target;
const class_name = btn.getAttribute('x-saved-class'); // classname to use is set on the element
const class_name = btn.getAttribute(
'x-saved-class'); // classname to use is set on the element
const flight_id = btn.getAttribute('x-id');
if (!btn.classList.contains(class_name)) {
phpvms.bids.addBid(flight_id).then(() => {
console.log('successfully saved flight');
btn.classList.add(class_name);
location.reload();
}).catch((error) => {
if (error.response && error.response.data)
alert(`Error adding bid: ${error.response.data.details}`);
else alert(`Error adding bid: ${error.message}`);
});
} else {
phpvms.bids.removeBid(flight_id).then(() => {
console.log('successfully removed flight');
btn.classList.remove(class_name);
location.reload();
}).catch((error) => {
Expand Down
71 changes: 37 additions & 34 deletions resources/views/layouts/seven/flights/show.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,44 +104,47 @@ class="d-none d-sm-inline">({{ \App\Models\Enums\FlightType::label($flight->flig
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-title">
<h4 class="card-header">Weather</h4>
</div>
<div class="card-body">
<ul class="nav nav-tabs" id="weatherTabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="dpt-tab" data-bs-toggle="tab" href="#dpt" role="tab" aria-controls="dpt" aria-selected="true">
DPT: {{$flight->dpt_airport_id}}
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="arr-tab" data-bs-toggle="tab" href="#arr" role="tab" aria-controls="arr" aria-selected="false">
ARR: {{$flight->arr_airport_id}}
</a>
</li>
@if ($flight->alt_airport_id)
<li class="nav-item" role="presentation">
<a class="nav-link" id="alt-tab" data-bs-toggle="tab" href="#alt" role="tab" aria-controls="alt" aria-selected="false">
ALT: {{$flight->alt_airport_id}}
</a>
</li>
@endif
</ul>
<div class="tab-content mt-3" id="weatherTabsContent">
<div class="tab-pane fade show active" id="dpt" role="tabpanel" aria-labelledby="dpt-tab">
{{ Widget::Weather(['icao' => $flight->dpt_airport_id]) }}
</div>
<div class="tab-pane fade" id="arr" role="tabpanel" aria-labelledby="arr-tab">
{{ Widget::Weather(['icao' => $flight->arr_airport_id]) }}
<div class="card-title">
<h4 class="card-header">Weather</h4>
</div>
@if ($flight->alt_airport_id)
<div class="tab-pane fade" id="alt" role="tabpanel" aria-labelledby="alt-tab">
{{ Widget::Weather(['icao' => $flight->alt_airport_id]) }}
<div class="card-body">
<ul class="nav nav-tabs" id="weatherTabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="dpt-tab" data-bs-toggle="tab" href="#dpt" role="tab"
aria-controls="dpt" aria-selected="true">
DPT: {{ $flight->dpt_airport_id }}
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="arr-tab" data-bs-toggle="tab" href="#arr" role="tab"
aria-controls="arr" aria-selected="false">
ARR: {{ $flight->arr_airport_id }}
</a>
</li>
@if ($flight->alt_airport_id)
<li class="nav-item" role="presentation">
<a class="nav-link" id="alt-tab" data-bs-toggle="tab" href="#alt" role="tab"
aria-controls="alt" aria-selected="false">
ALT: {{ $flight->alt_airport_id }}
</a>
</li>
@endif
</ul>
<div class="tab-content mt-3" id="weatherTabsContent">
<div class="tab-pane fade show active" id="dpt" role="tabpanel" aria-labelledby="dpt-tab">
{{ Widget::Weather(['icao' => $flight->dpt_airport_id]) }}
</div>
<div class="tab-pane fade" id="arr" role="tabpanel" aria-labelledby="arr-tab">
{{ Widget::Weather(['icao' => $flight->arr_airport_id]) }}
</div>
@if ($flight->alt_airport_id)
<div class="tab-pane fade" id="alt" role="tabpanel" aria-labelledby="alt-tab">
{{ Widget::Weather(['icao' => $flight->alt_airport_id]) }}
</div>
@endif
</div>
@endif
</div>
</div>
</div>
</div>
</div>
@endsection

0 comments on commit 3176589

Please sign in to comment.