Refactor all JS API calls #360 (#375)

* 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

.editorconfig

@@ -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

.eslintrc

@@ -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,
       {

.travis/deploy_script.sh

@@ -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

app/Http/Controllers/Admin/PirepController.php

@@ -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,
         ]);

app/Http/Controllers/Api/AcarsController.php

@@ -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, [
+        return response()->json([
-            'Content-type' => 'application/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, [
+        return response()->json([
-            'Content-Type' => 'application/json',
+            'data' => $geodata,
         ]);
     }
 

app/Http/Controllers/Api/PirepController.php

@@ -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,

app/Http/Resources/PirepFieldCollection.php

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

package.json

@@ -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"

public/mix-manifest.json

@@ -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/admin/js/app.js": "/assets/admin/js/app.js?id=09af8d2b342688a72153",
-    "/assets/installer/js/app.js": "/assets/installer/js/app.js?id=964075bbd7379552bc05",
+    "/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",

resources/js/admin/airport_lookup.js

@@ -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 = {
+  const params = {
     method: 'GET',
-        url: '/api/airports/' + icao + '/lookup',
+    url: `/api/airports/${icao}/lookup`,
   };
 
-    const response = await axios(params);
+  const response = await request(params);
   console.log('lookup raw response: ', response);
   return response.data;
 };

resources/js/admin/app.js

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

resources/js/admin/calculate_distance.js

@@ -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 = {
+  const params = {
     method: 'GET',
-        url: '/api/airports/' + fromICAO + '/distance/' + toICAO,
+    url: `/api/airports/${fromICAO}/distance/${toICAO}`,
   };
 
-    const response = await axios(params);
+  const response = await request(params);
   console.log('distance raw response: ', response);
   return response.data;
 };

resources/js/bootstrap.js

@@ -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');

resources/js/common.js

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

resources/js/config.js

@@ -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 || '',
+};

resources/js/frontend/app.js

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

resources/js/frontend/bids.js

@@ -1,4 +1,5 @@
-'use strict';
+
+import request from '../request';
 
 /**
  * Add a bid to a flight
@@ -12,12 +13,12 @@ export async function addBid(flight_id) {
     method: 'POST',
     url: '/api/user/bids',
     data: {
-            '_method': 'POST',
+      _method: 'POST',
-            'flight_id': flight_id
+      flight_id,
-        }
+    },
   };
 
-    return axios(params);
+  return request(params);
 }
 
 /**
@@ -32,10 +33,10 @@ export async function removeBid(flight_id) {
     method: 'POST',
     url: '/api/user/bids',
     data: {
-            '_method': 'DELETE',
+      _method: 'DELETE',
-            'flight_id': flight_id
+      flight_id,
-        }
+    },
   };
 
-    return axios(params);
+  return request(params);
 }

resources/js/maps/airspace_map.js

@@ -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) => {
+export default (_opts) => {
-  opts = Object.assign({
+  const opts = Object.assign({
     render_elem: 'map',
     overlay_elem: '',
     lat: 0,
@@ -23,11 +23,11 @@ export default (opts) => {
     // Passed from the config/maps.php file
     metar_wms: {
       url: '',
-        params: {}
+      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);
 

resources/js/maps/base_map.js

@@ -1,11 +1,9 @@
-//
 
 const leaflet = require('leaflet');
 require('leaflet-providers');
 
-export default (opts) => {
+export default (_opts) => {
-
+  const opts = Object.assign({
-    opts = Object.assign({
     render_elem: 'map',
     center: [29.98139, -95.33374],
     zoom: 5,
@@ -16,7 +14,7 @@ export default (opts) => {
       'Esri.WorldStreetMap',
     ],
     tile_layers: [],
-    }, opts);
+  }, _opts);
 
   /*
   let feature_groups = [];
@@ -34,7 +32,8 @@ export default (opts) => {
 
   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", {
+  /*
+  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,
@@ -47,16 +46,17 @@ export default (opts) => {
   feature_groups.push(openaip_cached_basemap);
   */
 
-    let map = leaflet.map('map', {
+  const map = leaflet.map('map', {
     // layers: [openaip_basemap_phys_osm],
     center: opts.center,
     zoom: opts.zoom,
     scrollWheelZoom: false,
   });
 
-    for(const i in opts.providers) {
+  // eslint-disable-next-line no-unused-vars
-        leaflet.tileLayer.provider(opts.providers[i]).addTo(map);
+  opts.providers.forEach((p, idx) => {
-    }
+    leaflet.tileLayer.provider(p).addTo(map);
+  });
 
   return map;
 };

resources/js/maps/config.js

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

resources/js/maps/helpers.js

@@ -11,9 +11,8 @@ const leaflet = require('leaflet');
  * @param opts
  */
 export function addWMSLayer(map, opts) {
-
   if (opts.url === '') {
-        return;
+    return null;
   }
 
   opts.params = Object.assign({
@@ -24,7 +23,7 @@ export function addWMSLayer(map, opts) {
   }, opts.params);
 
   const mlayer = leaflet.tileLayer.wms(
-        opts.url, opts.params
+    opts.url, opts.params,
   );
 
   mlayer.addTo(map);
@@ -40,8 +39,8 @@ export function addWMSLayer(map, opts) {
 export function showFeaturePopup(feature, layer) {
   let popup_html = '';
   if (feature.properties && feature.properties.popup) {
-        popup_html += feature.properties.popup
+    popup_html += feature.properties.popup;
   }
 
-    layer.bindPopup(popup_html)
+  layer.bindPopup(popup_html);
 }

resources/js/maps/index.js

@@ -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'
+window.L = require('leaflet');
-import render_live_map from './live_map'
-import render_route_map from './route_map'
 
 export {
   render_airspace_map,
   render_live_map,
   render_route_map,
-}
+};

resources/js/maps/live_map.js

@@ -1,21 +1,23 @@
-//
 
-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({
-    opts = Object.assign({
     center: [29.98139, -95.33374],
+    refresh_interval: 10, // seconds
     zoom: 5,
     update_uri: '/api/acars',
     pirep_uri: '/api/pireps/{id}',
@@ -24,7 +26,7 @@ export default (opts) => {
     render_elem: 'map',
     aircraft_icon: '/assets/img/acars/aircraft.png',
     units: 'nmi',
-    }, opts);
+  }, _opts);
 
   const map = draw_base_map(opts);
   const aircraftIcon = leaflet.icon({
@@ -37,22 +39,18 @@ export default (opts) => {
    * Hold the markers
    * @type {{}}
    */
-    let markers_list = {};
+  const markers_list = {};
-
   let pannedToCenter = false;
-
   let layerFlights = null;
   let layerSelFlight = null;
   let layerSelFlightFeature = null;
   let layerSelFlightLayer = null;
-    let layerSelArr = null;
-    let layerSelDep = null;
 
-    /**
+  const liveMapController = {
-     * Controller for two-way bindings
+    pirep: {},
-     * @type {{focusMarker: focusMarker}}
+    pireps: [],
-     */
+    has_data: false,
-    const mapController = {
+    controller: {
       /**
        * Focus on a specific marker
        * @param e
@@ -67,39 +65,16 @@ export default (opts) => {
         const marker = markers_list[model.pirep.id];
         onFlightClick(marker[0], marker[1]);
       },
+    },
   };
 
-    const r_map_view = rivets.bind($('#map-info-box'), {pirep: {}, controller: mapController});
+  rivets.bind($('#map-info-box'), liveMapController);
-    const r_table_view = rivets.bind($('#live_flights'), {pireps: [], controller: mapController});
+  rivets.bind($('#live_flights'), liveMapController);
 
-    /**
+  const drawRoute = (feature, layer, route) => {
-     * When a flight is clicked on, show the path, etc for that flight
+    console.log('drawRoute');
-     * @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";
-
-        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([], {
@@ -109,73 +84,74 @@ export default (opts) => {
       wrap: false,
     }).addTo(map);
 
-            layerSelFlight.geoJson(rte.line);
+    layerSelFlight.geoJson(route.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
+      map.panTo({
-                const c = geolib.getCenter([
+        lat: route.position.lat,
-                    {latitude: rte.airports.a.lat, longitude: rte.airports.a.lon},
+        lng: route.position.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;
-            }
       });
 
-        //
+      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();
+   * 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;
+    });
+
+    request(geojson_uri).then((response) => {
+      const route = response.data.data;
+      console.log(route);
+
+      drawRoute(feature, layer, route);
     });
   };
 
   const updateMap = () => {
-
-        console.log('reloading flights from acars...');
-
-        /**
-         * AJAX UPDATE
-         */
     const pirep_uri = opts.pirep_uri.replace('{id}', '');
-        let pireps = $.ajax({
+
-            url: pirep_uri,
+    request(pirep_uri).then((response) => {
-            dataType: 'json',
+      const pireps = response.data.data;
-            error: console.log
+      liveMapController.pireps = pireps;
+      liveMapController.has_data = pireps.length > 0;
     });
 
-        let flights = $.ajax({
+    request({ url: opts.update_uri }).then((response) => {
-            url: opts.update_uri,
+      const flightGeoJson = response.data.data;
-            dataType: 'json',
-            error: console.log
-        });
-
-        $.when(flights).done(flightGeoJson => {
 
       if (layerFlights !== null) {
-                layerFlights.clearLayers()
+        layerFlights.clearLayers();
       }
 
       layerFlights = leaflet.geoJSON(flightGeoJson, {
         onEachFeature: (feature, layer) => {
           layer.on({
+            // eslint-disable-next-line no-unused-vars
             click: (e) => {
               pannedToCenter = false;
-                            onFlightClick(feature, layer)
+              liveMapController.controller.onFlightClick(feature, layer);
-                        }
+            },
           });
 
           let popup_html = '';
@@ -187,30 +163,23 @@ export default (opts) => {
           // add to the list
           markers_list[feature.properties.pirep_id] = [feature, layer];
         },
-                pointToLayer: function (feature, latlon) {
+        pointToLayer(feature, latlon) {
           return leaflet.marker(latlon, {
             icon: aircraftIcon,
-                        rotationAngle: feature.properties.heading
+            rotationAngle: feature.properties.heading,
-                    })
+          });
-                }
+        },
       });
 
       layerFlights.addTo(map);
 
       // Reload the clicked-flight information
       if (layerSelFlight !== null) {
-                onFlightClick(layerSelFlightFeature, layerSelFlightLayer)
+        liveMapController.controller.onFlightClick(layerSelFlightFeature, layerSelFlightLayer);
       }
     });
-
-        $.when(pireps).done(pireps => {
-            r_table_view.update({
-                pireps: pireps.data,
-                has_data: (pireps.data.length > 0),
-            });
-        });
   };
 
   updateMap();
-    setInterval(updateMap, 10000)
+  setInterval(updateMap, opts.refresh_interval * 1000);
 };

resources/js/maps/route_map.js

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

resources/js/request.js

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

resources/js/storage.js

@@ -1,4 +1,3 @@
-'use strict';
 
 /**
  * Simple browser storage interface

resources/views/admin/aircraft/script.blade.php

@@ -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');
 

resources/views/admin/airports/script.blade.php

@@ -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');
 

resources/views/admin/awards/scripts.blade.php

@@ -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) => {

resources/views/admin/flights/scripts.blade.php

@@ -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,7 +58,6 @@ const setFieldsEditable = () =>
 };
 
 $(document).ready(function () {
-
   $("select#days_of_week").select2();
 
   setEditable();
@@ -100,6 +98,8 @@ $(document).ready(function () {
      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 + '"');
+
      if (fromIcao === '' || toIcao === '') {
        return;
      }

resources/views/admin/pireps/fares.blade.php

@@ -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>

resources/views/admin/pireps/scripts.blade.php

@@ -1,53 +1,29 @@
 @section('scripts')
 <script>
-const changeStatus = (values, fn) => {
+const changeStatus = async (values, fn) => {
-
-    const api_key = $('meta[name="api-key"]').attr('content');
-    const token = $('meta[name="csrf-token"]').attr('content');
-
     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,
+    const response = await phpvms.request(opts);
-            'X-CSRF-TOKEN': token,
+    fn(response.data);
-        },
-        success: function (data) {
-            fn(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({
+        const response = await phpvms.request("{{ url('/admin/pireps/fares') }}?aircraft_id=" + aircraft_id);
-            url: "{{ url('/admin/pireps/fares') }}?aircraft_id=" + aircraft_id,
+        console.log('returned new fares', response.data);
-            type: 'GET',
+        destContainer.html(response.data);
-            headers: {
-                'x-api-key': api_key,
-                'X-CSRF-TOKEN': token,
-            },
-            success: (data) => {
-                console.log('returned new fares', data);
-                destContainer.html(data);
-            },
-            error: () => {
-                destContainer.html('');
-            }
-        });
     });
 
     $(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,
+        const response = await phpvms.request(opts);
-                'X-CSRF-TOKEN': token,
+        console.log(response.data);
-            },
-            success: (data) => {
-                console.log(data);
         location.reload();
-            }
-        });
     });
 
     $(document).on('submit', 'form.pirep_submit_status', (event) => {

resources/views/layouts/default/pireps/scripts.blade.php

@@ -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 => {
+    phpvms.request(url).then(response => {
-        console.log('returned new fares', response);
         destContainer.html(response.data);
     });
 });

resources/views/layouts/default/widgets/live_map.blade.php

@@ -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') }}',
 });

webpack.mix.js

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