FGFS-4.1/phpvms
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor all JS API calls #360 (#375)

Browse Source 
* Refactor all JS API calls #360

* Remove unused imports

* Lint JS

* Fix doubled api key

* Formatting

* Added extra logging to distance lookup

* Remove the .editorconfig file in distrib

* shell check fixes

* Remove the .editorconfig file in distrib
This commit is contained in:
Nabeel S
2019-08-30 08:08:00 -04:00
committed by GitHub
parent e62e4a865d
commit 0d1f38cf85
39 changed files with 1397 additions and 745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
resources/js/admin/airport_lookup.js
View File

@@ -1,4 +1,5 @@
'use strict';
import request from '../request';
/**
* Lookup an airport from the server
@@ -6,12 +7,12 @@
* @param {String} icao
*/
export default async (icao) => {
let params = {
method: 'GET',
url: '/api/airports/' + icao + '/lookup',
};
const params = {
method: 'GET',
url: `/api/airports/${icao}/lookup`,
};
const response = await axios(params);
console.log('lookup raw response: ', response);
return response.data;
const response = await request(params);
console.log('lookup raw response: ', response);
return response.data;
};

6
resources/js/admin/app.js
View File

@@ -3,10 +3,10 @@
*/
require('./../bootstrap');
import airport_lookup from './airport_lookup';
import calculate_distance from './calculate_distance';
import airport_lookup from "./airport_lookup";
import calculate_distance from "./calculate_distance";
require('./../bootstrap');
window.phpvms.airport_lookup = airport_lookup;
window.phpvms.calculate_distance = calculate_distance;

17
resources/js/admin/calculate_distance.js
View File

@@ -1,3 +1,6 @@
import request from '../request';
/**
* Lookup an airport from the server
*
@@ -5,12 +8,12 @@
* @param {String} toICAO
*/
export default async (fromICAO, toICAO) => {
let params = {
method: 'GET',
url: '/api/airports/' + fromICAO + '/distance/' + toICAO,
};
const params = {
method: 'GET',
url: `/api/airports/${fromICAO}/distance/${toICAO}`,
};
const response = await axios(params);
console.log('distance raw response: ', response);
return response.data;
const response = await request(params);
console.log('distance raw response: ', response);
return response.data;
};

40
resources/js/bootstrap.js vendored
View File

@@ -2,49 +2,19 @@
* Bootstrap any Javascript libraries required
*/
import Storage from './storage';
import config from './config';
import request from './request';
window.axios = require('axios');
import Storage from "./storage";
/**
* Container for phpVMS specific functions
*/
window.phpvms = {
config: {},
config,
request,
Storage,
};
/**
* Configure Axios with both the csrf token and the API key
*/
const base_url = document.head.querySelector('meta[name="base-url"]');
if(base_url) {
console.log(`baseURL=${base_url.content}`);
window.phpvms.config.base_url = base_url.content;
window.axios.default.baseURL = base_url.content;
}
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
const token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.phpvms.config.csrf_token = token.content;
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token')
}
const api_key = document.head.querySelector('meta[name="api-key"]');
if (api_key) {
window.axios.defaults.headers.common['x-api-key'] = api_key.content;
window.phpvms.config.user_api_key = api_key.content;
window.PHPVMS_USER_API_KEY = api_key.content
} else {
window.phpvms.config.user_api_key = false;
window.PHPVMS_USER_API_KEY = false;
console.error('API Key not found!')
}
require('./common');

25
resources/js/common.js
View File

@@ -1,6 +1,3 @@
/**
*
*/
const rivets = require('rivets');
@@ -11,7 +8,7 @@ const rivets = require('rivets');
* @returns {*}
*/
rivets.formatters.prepend = function (value, prepend) {
return prepend + value
return prepend + value;
};
/**
@@ -19,10 +16,10 @@ rivets.formatters.prepend = function (value, prepend) {
* @param value
* @returns {string}
*/
rivets.formatters.time_hm = function(value) {
const hours = Math.floor(value / 60);
const mins = value % 60;
return hours + 'h ' + mins + 'm';
rivets.formatters.time_hm = function (value) {
const hours = Math.floor(value / 60);
const mins = value % 60;
return `${hours}h ${mins}m`;
};
/**
@@ -31,9 +28,7 @@ rivets.formatters.time_hm = function(value) {
* @param len
* @returns {boolean}
*/
rivets.formatters.gt = (value, len) => {
return value.length > len;
};
rivets.formatters.gt = (value, len) => value.length > len;
/**
*
@@ -41,9 +36,7 @@ rivets.formatters.gt = (value, len) => {
* @param len
* @returns {boolean}
*/
rivets.formatters.lt = (value, len) => {
return value.length < len;
};
rivets.formatters.lt = (value, len) => value.length < len;
/**
*
@@ -51,6 +44,4 @@ rivets.formatters.lt = (value, len) => {
* @param len
* @returns {boolean}
*/
rivets.formatters.eq = (value, len) => {
return value.length > len;
};
rivets.formatters.eq = (value, len) => value.length > len;

10
resources/js/config.js Normal file
View File

@@ -0,0 +1,10 @@
const base_url = document.head.querySelector('meta[name="base-url"]');
const token = document.head.querySelector('meta[name="csrf-token"]');
const api_key = document.head.querySelector('meta[name="api-key"]');
export default {
api_key: api_key.content || '',
base_url: base_url.content || '',
csrf_token: token.content || '',
};

9
resources/js/frontend/app.js
View File

@@ -1,11 +1,12 @@
// Import the bids functionality
import { addBid, removeBid } from './bids';
require('./../bootstrap');
// Import the bids functionality
import {addBid, removeBid} from './bids';
window.phpvms.bids = {
addBid,
removeBid,
addBid,
removeBid,
};
// Import the mapping function

39
resources/js/frontend/bids.js
View File

@@ -1,4 +1,5 @@
'use strict';
import request from '../request';
/**
* Add a bid to a flight
@@ -8,16 +9,16 @@
* @returns {Promise<*>}
*/
export async function addBid(flight_id) {
const params = {
method: 'POST',
url: '/api/user/bids',
data: {
'_method': 'POST',
'flight_id': flight_id
}
};
const params = {
method: 'POST',
url: '/api/user/bids',
data: {
_method: 'POST',
flight_id,
},
};
return axios(params);
return request(params);
}
/**
@@ -28,14 +29,14 @@ export async function addBid(flight_id) {
* @returns {Promise<*>}
*/
export async function removeBid(flight_id) {
const params = {
method: 'POST',
url: '/api/user/bids',
data: {
'_method': 'DELETE',
'flight_id': flight_id
}
};
const params = {
method: 'POST',
url: '/api/user/bids',
data: {
_method: 'DELETE',
flight_id,
},
};
return axios(params);
return request(params);
}

24
resources/js/maps/airspace_map.js
View File

@@ -1,16 +1,16 @@
import draw_base_map from './base_map';
import { addWMSLayer } from './helpers';
const leaflet = require('leaflet');
import draw_base_map from './base_map'
import { addWMSLayer } from './helpers';
/**
* Render a map with the airspace, etc around a given set of coords
* e.g, the airport map
* @param opts
* @param {Object} _opts
*/
export default (opts) => {
opts = Object.assign({
export default (_opts) => {
const opts = Object.assign({
render_elem: 'map',
overlay_elem: '',
lat: 0,
@@ -22,12 +22,12 @@ export default (opts) => {
// Passed from the config/maps.php file
metar_wms: {
url: '',
params: {}
url: '',
params: {},
},
}, opts);
}, _opts);
let map = draw_base_map(opts);
const map = draw_base_map(opts);
const coords = [opts.lat, opts.lon];
console.log('Applying coords', coords);
@@ -36,8 +36,8 @@ export default (opts) => {
leaflet.marker(coords).addTo(map).bindPopup(opts.marker_popup);
}
if(opts.metar_wms.url !== '') {
addWMSLayer(map, opts.metar_wms);
if (opts.metar_wms.url !== '') {
addWMSLayer(map, opts.metar_wms);
}
return map;

100
resources/js/maps/base_map.js
View File

@@ -1,62 +1,62 @@
//
const leaflet = require('leaflet');
require('leaflet-providers');
export default (opts) => {
export default (_opts) => {
const opts = Object.assign({
render_elem: 'map',
center: [29.98139, -95.33374],
zoom: 5,
maxZoom: 10,
layers: [],
set_marker: false,
providers: [
'Esri.WorldStreetMap',
],
tile_layers: [],
}, _opts);
opts = Object.assign({
render_elem: 'map',
center: [29.98139, -95.33374],
zoom: 5,
maxZoom: 10,
layers: [],
set_marker: false,
providers: [
'Esri.WorldStreetMap',
],
tile_layers: [],
}, opts);
/*
let feature_groups = [];
const openaip_airspace_labels = new leaflet.TileLayer.WMS(
"http://{s}.tile.maps.openaip.net/geowebcache/service/wms", {
maxZoom: 14,
minZoom: 12,
layers: 'openaip_approved_airspaces_labels',
tileSize: 1024,
detectRetina: true,
subdomains: '12',
format: 'image/png',
transparent: true
});
/*
let feature_groups = [];
const openaip_airspace_labels = new leaflet.TileLayer.WMS(
"http://{s}.tile.maps.openaip.net/geowebcache/service/wms", {
maxZoom: 14,
minZoom: 12,
layers: 'openaip_approved_airspaces_labels',
tileSize: 1024,
detectRetina: true,
subdomains: '12',
format: 'image/png',
transparent: true
});
openaip_airspace_labels.addTo(map); */
openaip_airspace_labels.addTo(map);*/
/*
const openaip_cached_basemap = new leaflet.TileLayer("http://{s}.tile.maps.openaip.net/geowebcache/service/tms/1.0.0/openaip_basemap@EPSG%3A900913@png/{z}/{x}/{y}.png", {
maxZoom: 14,
minZoom: 4,
tms: true,
detectRetina: true,
subdomains: '12',
format: 'image/png',
transparent: true
});
/*const openaip_cached_basemap = new leaflet.TileLayer("http://{s}.tile.maps.openaip.net/geowebcache/service/tms/1.0.0/openaip_basemap@EPSG%3A900913@png/{z}/{x}/{y}.png", {
maxZoom: 14,
minZoom: 4,
tms: true,
detectRetina: true,
subdomains: '12',
format: 'image/png',
transparent: true
});
feature_groups.push(openaip_cached_basemap);
*/
feature_groups.push(openaip_cached_basemap);
*/
const map = leaflet.map('map', {
// layers: [openaip_basemap_phys_osm],
center: opts.center,
zoom: opts.zoom,
scrollWheelZoom: false,
});
let map = leaflet.map('map', {
//layers: [openaip_basemap_phys_osm],
center: opts.center,
zoom: opts.zoom,
scrollWheelZoom: false,
});
// eslint-disable-next-line no-unused-vars
opts.providers.forEach((p, idx) => {
leaflet.tileLayer.provider(p).addTo(map);
});
for(const i in opts.providers) {
leaflet.tileLayer.provider(opts.providers[i]).addTo(map);
}
return map;
return map;
};

7
resources/js/maps/config.js
View File

@@ -1,4 +1,3 @@
export let
PLAN_ROUTE_COLOR = '#043758',
ACTUAL_ROUTE_COLOR = '#067ec1',
CIRCLE_COLOR = '#056093';
export const PLAN_ROUTE_COLOR = '#043758';
export const ACTUAL_ROUTE_COLOR = '#067ec1';
export const CIRCLE_COLOR = '#056093';

39
resources/js/maps/helpers.js
View File

@@ -11,25 +11,24 @@ const leaflet = require('leaflet');
* @param opts
*/
export function addWMSLayer(map, opts) {
if (opts.url === '') {
return null;
}
if(opts.url === '') {
return;
}
opts.params = Object.assign({
format: 'image/png',
transparent: true,
maxZoom: 14,
minZoom: 4,
}, opts.params);
opts.params = Object.assign({
format: 'image/png',
transparent: true,
maxZoom: 14,
minZoom: 4,
}, opts.params);
const mlayer = leaflet.tileLayer.wms(
opts.url, opts.params,
);
const mlayer = leaflet.tileLayer.wms(
opts.url, opts.params
);
mlayer.addTo(map);
mlayer.addTo(map);
return mlayer;
return mlayer;
}
/**
@@ -38,10 +37,10 @@ export function addWMSLayer(map, opts) {
* @param layer
*/
export function showFeaturePopup(feature, layer) {
let popup_html = '';
if (feature.properties && feature.properties.popup) {
popup_html += feature.properties.popup
}
let popup_html = '';
if (feature.properties && feature.properties.popup) {
popup_html += feature.properties.popup;
}
layer.bindPopup(popup_html)
layer.bindPopup(popup_html);
}

11
resources/js/maps/index.js
View File

@@ -2,16 +2,17 @@
* All of the functionality required for maps
*/
window.L = require('leaflet');
import render_airspace_map from './airspace_map';
import render_live_map from './live_map';
import render_route_map from './route_map';
require('Leaflet.Geodesic');
require('leaflet-rotatedmarker');
import render_airspace_map from './airspace_map'
import render_live_map from './live_map'
import render_route_map from './route_map'
window.L = require('leaflet');
export {
render_airspace_map,
render_live_map,
render_route_map,
}
};

359
resources/js/maps/live_map.js
View File

@@ -1,216 +1,185 @@
//
const geolib = require('geolib');
import draw_base_map from './base_map';
import { ACTUAL_ROUTE_COLOR } from './config';
import request from '../request';
// const geolib = require('geolib');
const leaflet = require('leaflet');
const rivets = require('rivets');
import draw_base_map from './base_map'
import { ACTUAL_ROUTE_COLOR } from './config'
/**
* Render the live map
* @param opts
* @param _opts
* @private
*/
export default (opts) => {
export default (_opts) => {
const opts = Object.assign({
center: [29.98139, -95.33374],
refresh_interval: 10, // seconds
zoom: 5,
update_uri: '/api/acars',
pirep_uri: '/api/pireps/{id}',
pirep_link_uri: '/pireps/{id}',
positions: null,
render_elem: 'map',
aircraft_icon: '/assets/img/acars/aircraft.png',
units: 'nmi',
}, _opts);
opts = Object.assign({
center: [29.98139, -95.33374],
zoom: 5,
update_uri: '/api/acars',
pirep_uri: '/api/pireps/{id}',
pirep_link_uri: '/pireps/{id}',
positions: null,
render_elem: 'map',
aircraft_icon: '/assets/img/acars/aircraft.png',
units: 'nmi',
}, opts);
const map = draw_base_map(opts);
const aircraftIcon = leaflet.icon({
iconUrl: opts.aircraft_icon,
iconSize: [42, 42],
iconAnchor: [21, 21],
});
const map = draw_base_map(opts);
const aircraftIcon = leaflet.icon({
iconUrl: opts.aircraft_icon,
iconSize: [42, 42],
iconAnchor: [21, 21],
/**
* Hold the markers
* @type {{}}
*/
const markers_list = {};
let pannedToCenter = false;
let layerFlights = null;
let layerSelFlight = null;
let layerSelFlightFeature = null;
let layerSelFlightLayer = null;
const liveMapController = {
pirep: {},
pireps: [],
has_data: false,
controller: {
/**
* Focus on a specific marker
* @param e
* @param model
*/
focusMarker: (e, model) => {
if (!(model.pirep.id in markers_list)) {
console.log('marker not found in list');
return;
}
const marker = markers_list[model.pirep.id];
onFlightClick(marker[0], marker[1]);
},
},
};
rivets.bind($('#map-info-box'), liveMapController);
rivets.bind($('#live_flights'), liveMapController);
const drawRoute = (feature, layer, route) => {
console.log('drawRoute');
if (layerSelFlight !== null) {
map.removeLayer(layerSelFlight);
}
layerSelFlight = leaflet.geodesic([], {
weight: 5,
opacity: 0.9,
color: ACTUAL_ROUTE_COLOR,
wrap: false,
}).addTo(map);
layerSelFlight.geoJson(route.line);
layerSelFlightFeature = feature;
layerSelFlightLayer = layer;
// Center on it, but only do it once, in case the map is moved
if (!pannedToCenter) {
map.panTo({
lat: route.position.lat,
lng: route.position.lon,
});
pannedToCenter = true;
}
};
/**
* When a flight is clicked on, show the path, etc for that flight
* @param feature
* @param layer
*/
const onFlightClick = (feature, layer) => {
const pirep_uri = opts.pirep_uri.replace('{id}', feature.properties.pirep_id);
const geojson_uri = `${opts.pirep_uri.replace('{id}', feature.properties.pirep_id)}/acars/geojson`;
/*
* Run these in parallel:
* 1. Get information about the PIREP and populate the bottom box/container
* 2. Draw out the flight route
*/
request(pirep_uri).then((response) => {
const pirep = response.data.data;
console.log(pirep);
liveMapController.pirep = pirep;
});
/**
* Hold the markers
* @type {{}}
*/
let markers_list = {};
request(geojson_uri).then((response) => {
const route = response.data.data;
console.log(route);
let pannedToCenter = false;
drawRoute(feature, layer, route);
});
};
let layerFlights = null;
let layerSelFlight = null;
let layerSelFlightFeature = null;
let layerSelFlightLayer = null;
let layerSelArr = null;
let layerSelDep = null;
const updateMap = () => {
const pirep_uri = opts.pirep_uri.replace('{id}', '');
/**
* Controller for two-way bindings
* @type {{focusMarker: focusMarker}}
*/
const mapController = {
/**
* Focus on a specific marker
* @param e
* @param model
*/
focusMarker: (e, model) => {
if(!(model.pirep.id in markers_list)) {
console.log('marker not found in list');
return;
}
request(pirep_uri).then((response) => {
const pireps = response.data.data;
liveMapController.pireps = pireps;
liveMapController.has_data = pireps.length > 0;
});
const marker = markers_list[model.pirep.id];
onFlightClick(marker[0], marker[1]);
request({ url: opts.update_uri }).then((response) => {
const flightGeoJson = response.data.data;
if (layerFlights !== null) {
layerFlights.clearLayers();
}
layerFlights = leaflet.geoJSON(flightGeoJson, {
onEachFeature: (feature, layer) => {
layer.on({
// eslint-disable-next-line no-unused-vars
click: (e) => {
pannedToCenter = false;
liveMapController.controller.onFlightClick(feature, layer);
},
});
let popup_html = '';
if (feature.properties && (feature.properties.popup !== '' && feature.properties.popup !== undefined)) {
popup_html += feature.properties.popup;
layer.bindPopup(popup_html);
}
// add to the list
markers_list[feature.properties.pirep_id] = [feature, layer];
},
};
pointToLayer(feature, latlon) {
return leaflet.marker(latlon, {
icon: aircraftIcon,
rotationAngle: feature.properties.heading,
});
},
});
const r_map_view = rivets.bind($('#map-info-box'), {pirep: {}, controller: mapController});
const r_table_view = rivets.bind($('#live_flights'), {pireps: [], controller: mapController});
layerFlights.addTo(map);
/**
* When a flight is clicked on, show the path, etc for that flight
* @param feature
* @param layer
*/
const onFlightClick = (feature, layer) => {
// Reload the clicked-flight information
if (layerSelFlight !== null) {
liveMapController.controller.onFlightClick(layerSelFlightFeature, layerSelFlightLayer);
}
});
};
const pirep_uri = opts.pirep_uri.replace('{id}', feature.properties.pirep_id);
const geojson_uri = opts.pirep_uri.replace('{id}', feature.properties.pirep_id) + "/acars/geojson";
const pirep_info = $.ajax({
url: pirep_uri,
dataType: 'json',
error: console.log
});
const flight_route = $.ajax({
url: geojson_uri,
dataType: 'json',
error: console.log
});
// Load up the PIREP info
$.when(flight_route).done((rte) => {
if (layerSelFlight !== null) {
map.removeLayer(layerSelFlight);
//map.removeLayer(layerSelArr);
//map.removeLayer(layerSelDep);
}
layerSelFlight = leaflet.geodesic([], {
weight: 5,
opacity: 0.9,
color: ACTUAL_ROUTE_COLOR,
wrap: false,
}).addTo(map);
layerSelFlight.geoJson(rte.line);
layerSelFlightFeature = feature;
layerSelFlightLayer = layer;
/*const dptIcon = leaflet.divIcon({
html: '<div class="map-info-label"><h5>' + rte.airports.d.icao + '</h5></div>'
});
layerSelDep = leaflet.marker([rte.airports.d.lat, rte.airports.d.lon], {icon:dptIcon}).addTo(map);
*/
// Center on it, but only do it once, in case the map is moved
if(!pannedToCenter) {
// find center
const c = geolib.getCenter([
{latitude: rte.airports.a.lat, longitude: rte.airports.a.lon},
{latitude: rte.airports.d.lat, longitude: rte.airports.d.lon},
]);
//map.panTo({lat: c.latitude, lng: c.longitude});
map.panTo({lat: rte.position.lat, lng: rte.position.lon});
pannedToCenter = true;
}
});
//
// When the PIREP info is done loading, show the bottom bar
//
$.when(pirep_info).done(pirep => {
r_map_view.update({pirep:pirep.data});
$('#map-info-box').show();
});
};
const updateMap = () => {
console.log('reloading flights from acars...');
/**
* AJAX UPDATE
*/
const pirep_uri = opts.pirep_uri.replace('{id}', '');
let pireps = $.ajax({
url: pirep_uri,
dataType: 'json',
error: console.log
});
let flights = $.ajax({
url: opts.update_uri,
dataType: 'json',
error: console.log
});
$.when(flights).done(flightGeoJson => {
if (layerFlights !== null) {
layerFlights.clearLayers()
}
layerFlights = leaflet.geoJSON(flightGeoJson, {
onEachFeature: (feature, layer) => {
layer.on({
click: (e) => {
pannedToCenter = false;
onFlightClick(feature, layer)
}
});
let popup_html = '';
if (feature.properties && (feature.properties.popup !== '' && feature.properties.popup !== undefined)) {
popup_html += feature.properties.popup;
layer.bindPopup(popup_html);
}
// add to the list
markers_list[feature.properties.pirep_id] = [feature, layer];
},
pointToLayer: function (feature, latlon) {
return leaflet.marker(latlon, {
icon: aircraftIcon,
rotationAngle: feature.properties.heading
})
}
});
layerFlights.addTo(map);
// Reload the clicked-flight information
if (layerSelFlight !== null) {
onFlightClick(layerSelFlightFeature, layerSelFlightLayer)
}
});
$.when(pireps).done(pireps => {
r_table_view.update({
pireps: pireps.data,
has_data: (pireps.data.length > 0),
});
});
};
updateMap();
setInterval(updateMap, 10000)
updateMap();
setInterval(updateMap, opts.refresh_interval * 1000);
};

243
resources/js/maps/route_map.js
View File

@@ -1,22 +1,24 @@
import draw_base_map from './base_map';
import { addWMSLayer } from './helpers';
import request from '../request';
import { ACTUAL_ROUTE_COLOR, CIRCLE_COLOR, PLAN_ROUTE_COLOR } from './config';
const leaflet = require('leaflet');
import draw_base_map from './base_map'
import {addWMSLayer} from './helpers';
import {ACTUAL_ROUTE_COLOR, CIRCLE_COLOR, PLAN_ROUTE_COLOR} from './config'
/**
* Show some popup text when a feature is clicked on
* @param feature
* @param layer
*/
export const onFeaturePointClick = (feature, layer) => {
let popup_html = '';
if (feature.properties && feature.properties.popup) {
popup_html += feature.properties.popup
}
let popup_html = '';
if (feature.properties && feature.properties.popup) {
popup_html += feature.properties.popup;
}
layer.bindPopup(popup_html)
layer.bindPopup(popup_html);
};
/**
@@ -25,143 +27,134 @@ export const onFeaturePointClick = (feature, layer) => {
* @param latlng
* @returns {*}
*/
export const pointToLayer = (feature, latlng) => {
return leaflet.circleMarker(latlng, {
radius: 5,
fillColor: CIRCLE_COLOR,
color: '#000',
weight: 1,
opacity: 1,
fillOpacity: 0.8
})
}
export const pointToLayer = (feature, latlng) => leaflet.circleMarker(latlng, {
radius: 5,
fillColor: CIRCLE_COLOR,
color: '#000',
weight: 1,
opacity: 1,
fillOpacity: 0.8,
});
/**
*
* @param opts
* @param _opts
* @private
*/
export default (opts) => {
export default (_opts) => {
const opts = Object.assign({
route_points: null,
planned_route_line: null,
actual_route_points: null,
actual_route_line: null,
render_elem: 'map',
live_map: false,
aircraft_icon: '/assets/img/acars/aircraft.png',
refresh_interval: 10,
metar_wms: {
url: '',
params: {},
},
}, _opts);
opts = Object.assign({
const aircraftIcon = leaflet.icon({
iconUrl: opts.aircraft_icon,
iconSize: [42, 42],
iconAnchor: [21, 21],
});
route_points: null,
planned_route_line: null,
actual_route_points: null,
actual_route_line: null,
render_elem: 'map',
live_map: false,
aircraft_icon: '/assets/img/acars/aircraft.png',
metar_wms: {
url: '',
params: {}
},
}, opts);
const map = draw_base_map(opts);
let layerLiveFlight;
const aircraftIcon = leaflet.icon({
iconUrl: opts.aircraft_icon,
iconSize: [42, 42],
iconAnchor: [21, 21],
if (opts.metar_wms.url !== '') {
addWMSLayer(map, opts.metar_wms);
}
const plannedRouteLayer = leaflet.geodesic([], {
weight: 4,
opacity: 0.9,
color: PLAN_ROUTE_COLOR,
steps: 50,
wrap: false,
}).addTo(map);
plannedRouteLayer.geoJson(opts.planned_route_line);
try {
map.fitBounds(plannedRouteLayer.getBounds());
} catch (e) {
console.log(e);
}
// Draw the route points after
if (opts.route_points !== null) {
const route_points = leaflet.geoJSON(opts.route_points, {
onEachFeature: onFeaturePointClick,
pointToLayer,
style: {
color: PLAN_ROUTE_COLOR,
weight: 3,
opacity: 0.65,
},
});
let map = draw_base_map(opts);
let layerLiveFlight;
route_points.addTo(map);
}
if (opts.metar_wms.url !== '') {
addWMSLayer(map, opts.metar_wms);
}
let geodesicLayer = leaflet.geodesic([], {
weight: 4,
opacity: 0.9,
color: PLAN_ROUTE_COLOR,
steps: 50,
wrap: false,
}).addTo(map);
geodesicLayer.geoJson(opts.planned_route_line);
try {
map.fitBounds(geodesicLayer.getBounds())
} catch (e) {
console.log(e)
}
// Draw the route points after
if (opts.route_points !== null) {
let route_points = leaflet.geoJSON(opts.route_points, {
onEachFeature: onFeaturePointClick,
pointToLayer: pointToLayer,
style: {
'color': PLAN_ROUTE_COLOR,
'weight': 3,
'opacity': 0.65,
},
});
route_points.addTo(map);
}
/**
/**
* draw the actual route
*/
if (opts.actual_route_line !== null && opts.actual_route_line.features.length > 0) {
let geodesicLayer = leaflet.geodesic([], {
weight: 3,
opacity: 0.9,
color: ACTUAL_ROUTE_COLOR,
steps: 50,
wrap: false,
}).addTo(map);
if (opts.actual_route_line !== null && opts.actual_route_line.features.length > 0) {
const actualRouteLayer = leaflet.geodesic([], {
weight: 3,
opacity: 0.9,
color: ACTUAL_ROUTE_COLOR,
steps: 50,
wrap: false,
}).addTo(map);
geodesicLayer.geoJson(opts.actual_route_line);
actualRouteLayer.geoJson(opts.actual_route_line);
try {
map.fitBounds(geodesicLayer.getBounds())
} catch (e) {
console.log(e)
}
try {
map.fitBounds(actualRouteLayer.getBounds());
} catch (e) {
console.log(e);
}
}
if (opts.actual_route_points !== null && opts.actual_route_points.features.length > 0) {
let route_points = leaflet.geoJSON(opts.actual_route_points, {
onEachFeature: onFeaturePointClick,
pointToLayer: pointToLayer,
style: {
'color': ACTUAL_ROUTE_COLOR,
'weight': 3,
'opacity': 0.65,
},
});
if (opts.actual_route_points !== null && opts.actual_route_points.features.length > 0) {
const route_points = leaflet.geoJSON(opts.actual_route_points, {
onEachFeature: onFeaturePointClick,
pointToLayer,
style: {
color: ACTUAL_ROUTE_COLOR,
weight: 3,
opacity: 0.65,
},
});
route_points.addTo(map)
}
route_points.addTo(map);
}
/**
/**
*
*/
const liveFlight = () => {
const uri = opts.pirep_uri;
const live_route = $.ajax({
url: uri,
dataType: 'json',
error: console.log
});
const liveFlight = () => {
request({ url: opts.pirep_uri }).then((response) => {
const routeJson = response.data.data;
layerLiveFlight = leaflet.geoJSON(routeJson, {
pointToLayer(feature, latlon) {
return leaflet.marker(latlon, {
icon: aircraftIcon,
rotationAngle: feature.properties.heading,
});
},
});
$.when(live_route).done((routeJson) => {
layerLiveFlight = leaflet.geoJSON(routeJson, {
pointToLayer: function (feature, latlon) {
return leaflet.marker(latlon, {
icon: aircraftIcon,
rotationAngle: feature.properties.heading
})
}
});
layerLiveFlight.addTo(map);
});
};
layerLiveFlight.addTo(map)
});
};
setInterval(liveFlight, 10000);
setInterval(liveFlight, opts.refresh_interval * 1000);
};

29
resources/js/request.js Normal file
View File

@@ -0,0 +1,29 @@
import config from './config';
const axios = require('axios');
/**
* Run an API request, with some common options
*
* @param {Object|String} _opts Axios request options, or pass a URL
* @param {String} _opts.url
*/
export default async (_opts) => {
if (typeof _opts === 'string' || _opts instanceof String) {
// eslint-disable-next-line no-param-reassign
_opts = {
url: _opts,
};
}
const opts = Object.assign({}, {
baseURL: config.base_url,
headers: {
'X-API-KEY': config.api_key,
'X-CSRF-TOKEN': config.csrf_token,
},
}, _opts);
return axios.request(opts);
};

87
resources/js/storage.js
View File

@@ -1,77 +1,76 @@
'use strict';
/**
* Simple browser storage interface
*/
export default class Storage {
constructor(name, default_value) {
this.name = name;
constructor(name, default_value) {
this.name = name;
// Read the object from storage; if it doesn't exist, set
// it to the default value
const st = window.localStorage.getItem(this.name);
if (!st) {
console.log('Nothing found in storage, starting from default');
this.data = default_value;
} else {
console.log('Found in storage: ', st);
this.data = JSON.parse(st);
}
// Read the object from storage; if it doesn't exist, set
// it to the default value
const st = window.localStorage.getItem(this.name);
if (!st) {
console.log('Nothing found in storage, starting from default');
this.data = default_value;
} else {
console.log('Found in storage: ', st);
this.data = JSON.parse(st);
}
}
/**
/**
* Save to local storage
*/
save() {
window.localStorage.setItem(this.name, JSON.stringify(this.data));
}
save() {
window.localStorage.setItem(this.name, JSON.stringify(this.data));
}
/**
/**
* Return a list from a given key
*
* @param {String} key
*
* @returns {Array|*}
*/
getList(key) {
if (!(key in this.data)) {
return [];
}
return this.data[key];
getList(key) {
if (!(key in this.data)) {
return [];
}
/**
return this.data[key];
}
/**
* Add `value` to a given `key`
*
* @param {string} key
* @param {*} value
*/
addToList(key, value) {
if (!(key in this.data)) {
this.data[key] = [];
}
const index = this.data[key].indexOf(value);
if (index === -1) {
this.data[key].push(value);
}
addToList(key, value) {
if (!(key in this.data)) {
this.data[key] = [];
}
/**
const index = this.data[key].indexOf(value);
if (index === -1) {
this.data[key].push(value);
}
}
/**
* Remove `value` from the given `key`
*
* @param {String} key
* @param {*} value
*/
removeFromList(key, value) {
if (!(key in this.data)) {
return;
}
const index = this.data[key].indexOf(value);
if (index !== -1) {
this.data[key].splice(index, 1);
}
removeFromList(key, value) {
if (!(key in this.data)) {
return;
}
const index = this.data[key].indexOf(value);
if (index !== -1) {
this.data[key].splice(index, 1);
}
}
}