FGFS-4.1/phpvms
4
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

18
.editorconfig Normal file
View File

@@ -0,0 +1,18 @@
#
root = true
[*.js]
indent_style = space
indent_size = 2
[*.php]
indent_style = space
indent_size = 4
[Makefile]
indent_style = tab
# Matches the exact files either package.json or .travis.yml
[{package.json, .travis.yml}]
indent_style = space
indent_size = 2

5
.eslintrc
View File

@@ -2,13 +2,16 @@
"extends": "airbnb",
"env": {
"es6": true,
"mocha": true
"browser": true
},
"parserOptions": {
"ecmaVersion": 8
},
"rules": {
"camelcase": 0,
"no-console": 0,
"func-names": 0,
"prefer-object-spread": 0,
"no-param-reassign": [
2,
{

5
.travis/deploy_script.sh
View File

@@ -14,7 +14,7 @@ if [ "$TRAVIS" = "true" ]; then
exit 0;
fi;
BASE_VERSION=`php artisan phpvms:version --base-only`
BASE_VERSION=$(php artisan phpvms:version --base-only)
PKG_NAME=${BASE_VERSION}-${TRAVIS_BRANCH}
fi
@@ -23,7 +23,7 @@ if [ "$TRAVIS" = "true" ]; then
echo "Writing $TAR_NAME"
php artisan phpvms:version --write > VERSION
VERSION=`cat VERSION`
VERSION=$(cat VERSION)
echo "Version: $VERSION"
echo "Cleaning files"
@@ -59,6 +59,7 @@ if [ "$TRAVIS" = "true" ]; then
tests
_ide_helper.php
.dpl
.editorconfig
.eslintignore
.eslintrc
.php_cs

1
app/Http/Controllers/Admin/PirepController.php
View File

@@ -181,6 +181,7 @@ class PirepController extends Controller
Log::info('aircraft', $aircraft->toArray());
return view('admin.pireps.fares', [
'pirep' => null,
'aircraft' => $aircraft,
'read_only' => false,
]);

10
app/Http/Controllers/Api/AcarsController.php
View File

@@ -73,8 +73,8 @@ class AcarsController extends Controller
$pireps = $this->acarsRepo->getPositions(setting('acars.live_time'));
$positions = $this->geoSvc->getFeatureForLiveFlights($pireps);
return response(json_encode($positions), 200, [
'Content-type' => 'application/json',
return response()->json([
'data' => $positions,
]);
}
@@ -84,15 +84,15 @@ class AcarsController extends Controller
* @param $pirep_id
* @param Request $request
*
* @return \Illuminate\Contracts\Routing\ResponseFactory
* @return \Illuminate\Http\JsonResponse
*/
public function acars_geojson($pirep_id, Request $request)
{
$pirep = Pirep::find($pirep_id);
$geodata = $this->geoSvc->getFeatureFromAcars($pirep);
return response(\json_encode($geodata), 200, [
'Content-Type' => 'application/json',
return response()->json([
'data' => $geodata,
]);
}

1
app/Http/Controllers/Api/PirepController.php
View File

@@ -505,6 +505,7 @@ class PirepController extends Controller
public function route_get($id, Request $request)
{
$pirep = Pirep::find($id);
return AcarsRouteResource::collection(Acars::where([
'pirep_id' => $id,
'type' => AcarsType::ROUTE,

3
app/Http/Resources/PirepFieldCollection.php
View File

@@ -4,9 +4,6 @@ namespace App\Http\Resources;
use Illuminate\Http\Resources\Json\ResourceCollection;
/**
* Class PirepFieldCollection
*/
class PirepFieldCollection extends ResourceCollection
{
public function toArray($request)

6
package.json
View File

@@ -47,6 +47,12 @@
},
"devDependencies": {
"copy-webpack-plugin": "^4.6.0",
"eslint": "^6.2.2",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.3",
"tailwindcss": "^0.5.3",
"webpack-bundle-analyzer": "^3.3",
"webpack-dev-server": "^3.1.11"

71
public/assets/admin/js/app.js
View File

File diff suppressed because one or more lines are too long

69
public/assets/frontend/js/app.js
View File

File diff suppressed because one or more lines are too long

43
public/assets/installer/js/app.js
View File

File diff suppressed because one or more lines are too long

6
public/mix-manifest.json
View File

@@ -1,9 +1,9 @@
{
"/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=4ef5a26ff476bb0a9fcf",
"/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=96bf382a8107b3fa5495",
"/assets/frontend/css/now-ui-kit.css": "/assets/frontend/css/now-ui-kit.css?id=c4987da93365a82d32b6",
"/assets/admin/css/vendor.min.css": "/assets/admin/css/vendor.min.css?id=da87041e81048759bd41",
"/assets/admin/js/app.js": "/assets/admin/js/app.js?id=918b9ff17affe36bab4c",
"/assets/installer/js/app.js": "/assets/installer/js/app.js?id=964075bbd7379552bc05",
"/assets/admin/js/app.js": "/assets/admin/js/app.js?id=09af8d2b342688a72153",
"/assets/installer/js/app.js": "/assets/installer/js/app.js?id=db625369782c7597e139",
"/assets/fonts/glyphicons-halflings-regular.woff2": "/assets/fonts/glyphicons-halflings-regular.woff2?id=349344e92fb16221dd56",
"/assets/admin/fonts/glyphicons-halflings-regular.woff2": "/assets/admin/fonts/glyphicons-halflings-regular.woff2?id=349344e92fb16221dd56",
"/assets/admin/img/clear.png": "/assets/admin/img/clear.png?id=63b3af84650a0145d61a",

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

1
resources/views/admin/aircraft/script.blade.php
View File

@@ -1,7 +1,6 @@
@section('scripts')
<script>
function setEditable() {
const token = $('meta[name="csrf-token"]').attr('content');
const api_key = $('meta[name="api-key"]').attr('content');

1
resources/views/admin/airports/script.blade.php
View File

@@ -54,7 +54,6 @@ function setEditable() {
}
$(document).ready(function() {
const api_key = $('meta[name="api-key"]').attr('content');
const csrf_token = $('meta[name="csrf-token"]').attr('content');

1
resources/views/admin/awards/scripts.blade.php
View File

@@ -13,7 +13,6 @@ const changeParamDescription = (award_class) => {
};
$(document).ready(() => {
const select_id = "select#award_class_select";
console.log('award descriptions', award_descriptions);
$(select_id).change((e) => {

80
resources/views/admin/flights/scripts.blade.php
View File

@@ -30,8 +30,7 @@ const setEditable = () =>
});
};
const setFieldsEditable = () =>
{
const setFieldsEditable = () => {
const api_key = $('meta[name="api-key"]').attr('content');
const csrf_token = $('meta[name="csrf-token"]').attr('content');
@@ -59,11 +58,10 @@ const setFieldsEditable = () =>
};
$(document).ready(function () {
$("select#days_of_week").select2();
$("select#days_of_week").select2();
setEditable();
setFieldsEditable();
setEditable();
setFieldsEditable();
const start_date_picker = new Pikaday({
field: document.getElementById('start_date'),
@@ -75,47 +73,49 @@ $(document).ready(function () {
minDate: new Date(),
});
$(document).on('submit', 'form.pjax_flight_fields', function (event) {
event.preventDefault();
$.pjax.submit(event, '#flight_fields_wrapper', {push: false});
});
$(document).on('submit', 'form.pjax_flight_fields', function (event) {
event.preventDefault();
$.pjax.submit(event, '#flight_fields_wrapper', {push: false});
});
$(document).on('submit', 'form.pjax_subfleet_form', function (event) {
event.preventDefault();
$.pjax.submit(event, '#subfleet_flight_wrapper', {push: false});
});
$(document).on('submit', 'form.pjax_subfleet_form', function (event) {
event.preventDefault();
$.pjax.submit(event, '#subfleet_flight_wrapper', {push: false});
});
$(document).on('submit', 'form.pjax_fares_form', function (event) {
event.preventDefault();
$.pjax.submit(event, '#flight_fares_wrapper', {push: false});
});
$(document).on('submit', 'form.pjax_fares_form', function (event) {
event.preventDefault();
$.pjax.submit(event, '#flight_fares_wrapper', {push: false});
});
$(document).on('pjax:complete', function () {
initPlugins();
setEditable();
setFieldsEditable();
});
$(document).on('pjax:complete', function () {
initPlugins();
setEditable();
setFieldsEditable();
});
$('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();
if (fromIcao === '' || toIcao === '') {
return;
}
$('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();
console.log('fromIcao="' + fromIcao + '", toIcao="' + toIcao + '"');
console.log(`Calculating from ${fromIcao} to ${toIcao}`);
let response;
if (fromIcao === '' || toIcao === '') {
return;
}
try {
response = await phpvms.calculate_distance(fromIcao, toIcao);
} catch (e) {
console.log('Error calculating distance:', e);
return;
}
console.log(`Calculating from ${fromIcao} to ${toIcao}`);
let response;
$("#distance").val(response.data.distance.nmi);
});
try {
response = await phpvms.calculate_distance(fromIcao, toIcao);
} catch (e) {
console.log('Error calculating distance:', e);
return;
}
$("#distance").val(response.data.distance.nmi);
});
});
</script>
@endsection

4
resources/views/admin/pireps/fares.blade.php
View File

@@ -11,7 +11,7 @@
<td>{{ $fare->name }} ({{ $fare->code }})</td>
<td>
<div class="form-group">
@if($pirep->read_only)
@if(isset($pirep) && $pirep->read_only)
<p>{{ $pirep->{'fare_'.$fare->id} }}</p>
{{ Form::hidden('fare_'.$fare->id) }}
@else
@@ -19,7 +19,7 @@
'class' => 'form-control',
'min' => 0,
'step' => '0.01',
'readonly' => $pirep->read_only]) }}
]) }}
@endif
</div>
</td>

66
resources/views/admin/pireps/scripts.blade.php
View File

@@ -1,53 +1,29 @@
@section('scripts')
<script>
const changeStatus = (values, fn) => {
const api_key = $('meta[name="api-key"]').attr('content');
const token = $('meta[name="csrf-token"]').attr('content');
const changeStatus = async (values, fn) => {
console.log('Changing PIREP ' + values.pirep_id + ' to state ' + values.new_status);
$.ajax({
const opts = {
method: 'POST',
url: '{{url('/admin/pireps')}}/' + values.pirep_id + '/status',
data: values,
type: 'POST',
headers: {
'x-api-key': api_key,
'X-CSRF-TOKEN': token,
},
success: function (data) {
fn(data);
}
});
};
const response = await phpvms.request(opts);
fn(response.data);
};
$(document).ready(() => {
const api_key = $('meta[name="api-key"]').attr('content');
const token = $('meta[name="csrf-token"]').attr('content');
const select_id = "select#aircraft_select";
const destContainer = $('#fares_container');
$(select_id).change((e) => {
$(select_id).change(async (e) => {
const aircraft_id = $(select_id + " option:selected").val();
console.log('aircraft select change: ', aircraft_id);
$.ajax({
url: "{{ url('/admin/pireps/fares') }}?aircraft_id=" + aircraft_id,
type: 'GET',
headers: {
'x-api-key': api_key,
'X-CSRF-TOKEN': token,
},
success: (data) => {
console.log('returned new fares', data);
destContainer.html(data);
},
error: () => {
destContainer.html('');
}
});
const response = await phpvms.request("{{ url('/admin/pireps/fares') }}?aircraft_id=" + aircraft_id);
console.log('returned new fares', response.data);
destContainer.html(response.data);
});
$(document).on('submit', 'form.pjax_form', (event) => {
@@ -62,23 +38,19 @@ $(document).ready(() => {
/**
* Recalculate finances button is clicked
*/
$('button#recalculate-finances').on('click', (event) => {
$('button#recalculate-finances').on('click', async (event) => {
event.preventDefault();
console.log('Sending recalculate finances request');
const pirep_id = $(event.currentTarget).attr('data-pirep-id');
$.ajax({
const opts = {
method: 'POST',
url: '{{url('/api/pireps')}}/' + pirep_id + '/finances/recalculate',
type: 'POST',
headers: {
'x-api-key': api_key,
'X-CSRF-TOKEN': token,
},
success: (data) => {
console.log(data);
location.reload();
}
});
};
const response = await phpvms.request(opts);
console.log(response.data);
location.reload();
});
$(document).on('submit', 'form.pirep_submit_status', (event) => {

8
resources/views/layouts/default/pireps/scripts.blade.php
View File

@@ -3,14 +3,12 @@
const select_id = "select#aircraft_select";
const destContainer = $('#fares_container');
$(select_id).change((e) => {
$(select_id).change(e => {
const aircraft_id = $(select_id + ' option:selected').val();
const url = '{{ url('/pireps/fares') }}?aircraft_id=' + aircraft_id;
const url = '/pireps/fares?aircraft_id=' + aircraft_id;
console.log('aircraft select change: ', aircraft_id);
axios.get(url).then(response => {
console.log('returned new fares', response);
phpvms.request(url).then(response => {
destContainer.html(response.data);
});
});

4
resources/views/layouts/default/widgets/live_map.blade.php
View File

@@ -29,6 +29,7 @@
A couple of places (like the distance) use both to output the correct bindings.
--}}
<div id="map-info-box" class="map-info-box"
rv-show="pirep"
style="width: {{ $config['width'] }};">
<div style="float: left; width: 50%;">
<h3 style="margin: 0" id="map_flight_id">
@@ -112,9 +113,6 @@ and being mindful of the rivets bindings
phpvms.map.render_live_map({
center: ['{{ $center[0] }}', '{{ $center[1] }}'],
zoom: '{{ $zoom }}',
update_uri: '{!! url('/api/acars') !!}',
pirep_uri: '{!! url('/api/pireps/{id}') !!}',
pirep_link_uri: '{!! url('/pireps/{id}') !!}',
aircraft_icon: '{!! public_asset('/assets/img/acars/aircraft.png') !!}',
units: '{{ setting('units.distance') }}',
});

2
webpack.mix.js
View File

@@ -2,6 +2,8 @@
const mix = require('laravel-mix');
mix.disableNotifications();
/**
* COPY ASSETS
* Copy required assets

675
yarn.lock
View File

File diff suppressed because it is too large Load Diff