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

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);
};