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

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