Set the baseURL for ajax requests (#373)

* Set the baseURL for ajax requests

* Use async/await on AJAX calls

* Add mix_public() cache generated asset cache busting

* Move storage container into separate class

* Fix some styling
This commit is contained in:
Nabeel S
2019-08-27 15:08:42 -04:00
committed by GitHub
parent fd2f4f2150
commit 09f3e3cfdf
16 changed files with 335 additions and 145 deletions

View File

@@ -1,5 +1,7 @@
@section('scripts')
<script>
'use strict';
function setEditable() {
const csrf_token = $('meta[name="csrf-token"]').attr('content');
const api_key = $('meta[name="api-key"]').attr('content');
@@ -81,26 +83,32 @@ $(document).ready(function() {
}
});
$('a.airport_data_lookup').click(function(e) {
$('a.airport_data_lookup').click(async function(e) {
e.preventDefault();
const icao = $("input#airport_icao").val();
if(icao === '') {
return;
}
phpvms.airport_lookup(icao, function(response) {
_.forEach(response.data, function(value, key) {
if(key === 'city') {
key = 'location';
}
let response;
try {
response = await phpvms.airport_lookup(icao);
} catch (e) {
console.log('Error looking up airport!', e);
return;
}
$("#" + key).val(value);
_.forEach(response.data, function (value, key) {
if (key === 'city') {
key = 'location';
}
if(key === 'tz') {
$("#timezone").val(value);
$("#timezone").trigger('change');
}
});
$("#" + key).val(value);
if (key === 'tz') {
$("#timezone").val(value);
$("#timezone").trigger('change');
}
});
});

View File

@@ -21,9 +21,9 @@
<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'/>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700,300" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="{{ public_asset('/assets/global/css/vendor.css') }}"/>
<link rel="stylesheet" href="{{ public_asset('/assets/admin/css/vendor.css') }}"/>
<link rel="stylesheet" href="{{ public_asset('/assets/admin/css/admin.css') }}"/>
<link rel="stylesheet" href="{{ mix_public('/assets/global/css/vendor.css') }}"/>
<link rel="stylesheet" href="{{ mix_public('/assets/admin/css/vendor.css') }}"/>
<link rel="stylesheet" href="{{ mix_public('/assets/admin/css/admin.css') }}"/>
<style type="text/css">
@yield('css')
@@ -91,47 +91,10 @@
</body>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script defer src="{{ public_asset('/assets/admin/js/vendor.js') }}"></script>
<script defer src="{{ public_asset('/assets/admin/js/app.js') }}"></script>
<script defer src="{{ mix_public('/assets/admin/js/vendor.js') }}"></script>
<script defer src="{{ mix_public('/assets/admin/js/app.js') }}"></script>
<script>
const getStorage = function(key) {
const st = window.localStorage.getItem(key);
// console.log('storage: ', key, st);
if(!st) {
return {
"menu": [],
};
}
return JSON.parse(st);
};
const saveStorage = function(key, obj) {
// console.log('save: ', key, obj);
window.localStorage.setItem(key, JSON.stringify(obj));
};
const addItem = function(obj, item) {
if (!obj) { obj = []; }
const index = obj.indexOf(item);
if(index === -1) {
obj.push(item);
}
return obj;
};
const removeItem = function (obj, item) {
if (!obj) { obj = []; }
const index = obj.indexOf(item);
if (index !== -1) {
obj.splice(index, 1);
}
return obj;
};
/**
* Initialize any plugins on the page
*/
@@ -144,14 +107,17 @@ const initPlugins = () => {
};
$(document).ready(function () {
initPlugins();
let storage = getStorage('phpvms.admin');
//let storage = getStorage('phpvms.admin');
const storage = new phpvms.Storage('phpvms.admin', {
"menu": [],
});
// see what menu items should be open
for(let idx = 0; idx < storage.menu.length; idx++) {
const id = storage.menu[idx];
const menu = storage.getList('menu');
for (const id of menu) {
console.log('found '+id);
const elem = $(".collapse#" + id);
elem.addClass("in").trigger("show.bs.collapse");
@@ -160,26 +126,26 @@ $(document).ready(function () {
caret.removeClass("pe-7s-angle-right");
}
$(".collapse").on("hide.bs.collapse", function () {
// console.log('hiding');
$(".collapse").on("hide.bs.collapse", function() {
const id = $(this).attr('id');
const elem = $("a." + id + " b");
elem.removeClass("pe-7s-angle-down");
elem.addClass("pe-7s-angle-right");
removeItem(storage.menu, id);
saveStorage("phpvms.admin", storage);
// console.log('hiding ' + id);
storage.removeFromList('menu', id);
storage.save();
});
$(".collapse").on("show.bs.collapse", function () {
// console.log('showing');
$(".collapse").on("show.bs.collapse", function() {
const id = $(this).attr('id');
const caret = $("a." + id + " b");
caret.addClass("pe-7s-angle-down");
caret.removeClass("pe-7s-angle-right");
addItem(storage.menu, id);
saveStorage("phpvms.admin", storage);
// console.log('showing ' + id);
storage.addToList('menu', id);
storage.save();
});
});
</script>

View File

@@ -96,7 +96,7 @@ $(document).ready(function () {
setFieldsEditable();
});
$('a.airport_distance_lookup').click(function (e) {
$('a.airport_distance_lookup').click(async function (e) {
e.preventDefault();
const fromIcao = $("select#dpt_airport_id option:selected").val();
const toIcao = $("select#arr_airport_id option:selected").val();
@@ -105,10 +105,16 @@ $(document).ready(function () {
}
console.log(`Calculating from ${fromIcao} to ${toIcao}`);
phpvms.calculate_distance(fromIcao, toIcao, function (response) {
console.log('Calculate distance:', response);
$("#distance").val(response.data.distance.nmi);
});
let response;
try {
response = await phpvms.calculate_distance(fromIcao, toIcao);
} catch (e) {
console.log('Error calculating distance:', e);
return;
}
$("#distance").val(response.data.distance.nmi);
});
});
</script>

View File

@@ -6,9 +6,11 @@
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
<title>@yield('title') - {{ config('app.name') }}</title>
{{-- Start of required lines block. DON'T REMOVE THESE LINES! They're required or might break things --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="api-key" content="{{ Auth::check() ? Auth::user()->api_key: '' }}">
<meta name="base-url" content="{!! url('') !!}">
<meta name="api-key" content="{!! Auth::check() ? Auth::user()->api_key: '' !!}">
<meta name="csrf-token" content="{!! csrf_token() !!}">
{{-- End the required lines block --}}
<link rel="shortcut icon" type="image/png" href="{{ public_asset('/assets/img/favicon.png') }}"/>
@@ -18,7 +20,7 @@
<link href="{{ public_asset('/assets/frontend/css/styles.css') }}" rel="stylesheet"/>
{{-- Start of the required files in the head block --}}
<link href="{{ public_asset('/assets/global/css/vendor.css') }}" rel="stylesheet"/>
<link href="{{ mix_public('/assets/global/css/vendor.css') }}" rel="stylesheet"/>
<style type="text/css">
@yield('css')
</style>
@@ -82,8 +84,8 @@
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
{{-- Start of the required tags block. Don't remove these or things will break!! --}}
<script src="{{ public_asset('/assets/global/js/vendor.js') }}"></script>
<script src="{{ public_asset('/assets/frontend/js/app.js') }}"></script>
<script src="{{ mix_public('/assets/global/js/vendor.js') }}"></script>
<script src="{{ mix_public('/assets/frontend/js/app.js') }}"></script>
@yield('scripts')
{{--

View File

@@ -1,41 +1,26 @@
@section('scripts')
<script>
$(document).ready(function () {
$("button.save_flight").click(function (e) {
$("button.save_flight").click(async function (e) {
e.preventDefault();
const btn = $(this);
const class_name = btn.attr('x-saved-class'); // classname to use is set on the element
const flight_id = btn.attr('x-id');
let params = {
url: '{{ url('/api/user/bids') }}',
data: {
'flight_id': btn.attr('x-id')
}
};
if (!btn.hasClass(class_name)) {
await phpvms.bids.addBid(flight_id);
if (btn.hasClass(class_name)) {
params.method = 'DELETE';
console.log('successfully saved flight');
btn.addClass(class_name);
alert('@lang("flights.bidadded")');
} else {
params.method = 'POST';
await phpvms.bids.removeBid(flight_id);
console.log('successfully removed flight');
btn.removeClass(class_name);
alert('@lang("flights.bidremoved")');
}
axios(params).then(response => {
console.log('save bid response', response);
if(params.method === 'DELETE') {
console.log('successfully removed flight');
btn.removeClass(class_name);
alert('@lang("flights.bidremoved")');
} else {
console.log('successfully saved flight');
btn.addClass(class_name);
alert('@lang("flights.bidadded")');
}
})
.catch(error => {
console.error('Error saving bid status', params, error);
});
});
});
</script>