first pass splitting js into commonjs modules

resources/js/admin/app.js

@@ -0,0 +1,11 @@
+/**
+ * Any functionality required for the admin app
+ */
+
+require('./../bootstrap');
+require('eonasdan-bootstrap-datetimepicker');
+
+require('./sidebar');
+
+// Import the mapping function
+window.phpvms.map = require('../maps/index');

resources/js/admin/sidebar.js

@@ -0,0 +1,90 @@
+
+const jquery = require('jquery');
+
+const getStorage = function (key) {
+    const st = window.localStorage.getItem(key);
+
+    console.log('storage: ', key, st);
+    if (_.isNil(st)) {
+        return {
+            "menu": [],
+        };
+    }
+
+    return JSON.parse(st);
+};
+
+const saveStorage = function (key, obj) {
+    console.log('save: ', key, obj);
+    window.localStorage.setItem(key, JSON.stringify(obj));
+};
+
+const addItem = function (obj, item) {
+
+    if (_.isNil(obj)) {
+        obj = [];
+    }
+
+    const index = _.indexOf(obj, item);
+    if (index === -1) {
+        obj.push(item);
+    }
+
+    return obj;
+};
+
+const removeItem = function (obj, item) {
+
+    if (_.isNil(obj)) {
+        obj = [];
+    }
+
+    const index = _.indexOf(obj, item);
+    if (index !== -1) {
+        console.log("removing", item);
+        obj.splice(index, 1);
+    }
+
+    return obj;
+};
+
+jquery(document).ready(function () {
+
+    $(".select2").select2();
+
+    let storage = getStorage("phpvms.admin");
+
+    // see what menu items should be open
+    for (let idx = 0; idx < storage.menu.length; idx++) {
+        const id = storage.menu[idx];
+        const elem = jquery(".collapse#" + id);
+        elem.addClass("in").trigger("show.bs.collapse");
+
+        const caret = jquery("a." + id + " b");
+        caret.addClass("pe-7s-angle-down");
+        caret.removeClass("pe-7s-angle-right");
+    }
+
+    jquery(".collapse").on("hide.bs.collapse", function () {
+        console.log('hiding');
+        const id = jquery(this).attr('id');
+        const elem = jquery("a." + id + " b");
+        elem.removeClass("pe-7s-angle-down");
+        elem.addClass("pe-7s-angle-right");
+
+        removeItem(storage.menu, id);
+        saveStorage("phpvms.admin", storage);
+    });
+
+    jquery(".collapse").on("show.bs.collapse", function () {
+        console.log('showing');
+        const id = jquery(this).attr('id');
+        const caret = jquery("a." + id + " b");
+        caret.addClass("pe-7s-angle-down");
+        caret.removeClass("pe-7s-angle-right");
+
+        addItem(storage.menu, id);
+        saveStorage("phpvms.admin", storage);
+    });
+
+});

resources/js/bootstrap.js

@@ -0,0 +1,27 @@
+/**
+ * Bootstrap any Javascript libraries required
+ */
+
+window._ = require('lodash');
+window.Popper = require('popper.js').default;
+window.$ = window.jquery = require('jquery');
+window.select2 = require('select2');
+window.pjax = require('pjax');
+
+// Container for phpVMS specific functions
+window.phpvms = {
+
+};
+
+/**
+ * Configure Axios
+ */
+window.axios = require('axios');
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+let token = document.head.querySelector('meta[name="csrf-token"]');
+
+if (token) {
+    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');
+}

resources/js/frontend/app.js

@@ -0,0 +1,5 @@
+
+require('./../bootstrap');
+
+// Import the mapping function
+window.phpvms.map = require('../maps/index');

resources/js/maps/airspace_map.js

@@ -0,0 +1,33 @@
+
+const _ = require('lodash');
+const leaflet = require('leaflet');
+
+import draw_base_map from './base_map';
+
+/**
+ * Render a map with the airspace, etc around a given set of coords
+ * e.g, the airport map
+ * @param opts
+ */
+export default (opts) => {
+    opts = _.defaults(opts, {
+        render_elem: 'map',
+        overlay_elem: '',
+        lat: 0,
+        lon: 0,
+        zoom: 12,
+        layers: [],
+        set_marker: false,
+    });
+
+    let map = draw_base_map(opts);
+    const coords = [opts.lat, opts.lon];
+    console.log('Applying coords', coords);
+
+    map.setView(coords, opts.zoom);
+    if (opts.set_marker === true) {
+        leaflet.marker(coords).addTo(map);
+    }
+
+    return map;
+};

resources/js/maps/base_map.js

@@ -0,0 +1,71 @@
+const _ = require('lodash');
+const leaflet = require('leaflet');
+
+export default (opts) => {
+
+    opts = _.defaults(opts, {
+        render_elem: 'map',
+        center: [29.98139, -95.33374],
+        zoom: 5,
+        maxZoom: 10,
+        layers: [],
+        set_marker: false,
+    });
+
+    let feature_groups = [];
+    /*var 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);*/
+
+    const opencyclemap_phys_osm = new leaflet.TileLayer(
+        'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=f09a38fa87514de4890fc96e7fe8ecb1', {
+            maxZoom: 14,
+            minZoom: 4,
+            format: 'image/png',
+            transparent: true
+        });
+
+    feature_groups.push(opencyclemap_phys_osm);
+
+    /*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);
+    */
+
+    const openaip_basemap_phys_osm = leaflet.featureGroup(feature_groups);
+
+    let map = leaflet.map('map', {
+        layers: [openaip_basemap_phys_osm],
+        center: opts.center,
+        zoom: opts.zoom,
+        scrollWheelZoom: false,
+    });
+
+    const attrib = leaflet.control.attribution({position: 'bottomleft'});
+    attrib.addAttribution("<a href=\"https://www.thunderforest.com\" target=\"_blank\" style=\"\">Thunderforest</a>");
+    attrib.addAttribution("<a href=\"https://www.openaip.net\" target=\"_blank\" style=\"\">openAIP</a>");
+    attrib.addAttribution("<a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\" style=\"\">OpenStreetMap</a> contributors");
+    attrib.addAttribution("<a href=\"https://www.openweathermap.org\" target=\"_blank\" style=\"\">OpenWeatherMap</a>");
+
+    attrib.addTo(map);
+
+    return map;
+};

resources/js/maps/config.js

@@ -0,0 +1,4 @@
+
+export let
+    PLAN_ROUTE_COLOR = '#36b123',
+    ACTUAL_ROUTE_COLOR = '#172aea';

resources/js/maps/index.js

@@ -0,0 +1,17 @@
+/**
+ * All of the functionality required for maps
+ */
+
+window.L = require('leaflet');
+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';
+
+export {
+    render_airspace_map,
+    render_live_map,
+    render_route_map,
+};

resources/js/maps/live_map.js

@@ -0,0 +1,124 @@
+
+const _ = require('lodash');
+const leaflet = require('leaflet');
+
+import draw_base_map from './base_map';
+import {ACTUAL_ROUTE_COLOR} from './config';
+
+/**
+ * Render the live map
+ * @param opts
+ * @private
+ */
+export default (opts) => {
+
+    opts = _.defaults(opts, {
+        update_uri: '/api/acars',
+        pirep_uri: '/api/pireps/{id}/acars',
+        positions: null,
+        render_elem: 'map',
+        aircraft_icon: '/assets/img/acars/aircraft.png',
+    });
+
+    const map = draw_base_map(opts);
+    const aircraftIcon = leaflet.icon({
+        iconUrl: opts.aircraft_icon,
+        iconSize: [42, 42],
+        iconAnchor: [21, 21],
+    });
+
+    let layerFlights = null;
+    let layerSelFlight = null;
+    let layerSelFlightFeature = null;
+    let layerSelFlightLayer = null;
+
+    /**
+     * When a flight is clicked on, show the path, etc for that flight
+     * @param feature
+     * @param layer
+     */
+    const onFlightClick = (feature, layer) => {
+
+        const uri = opts.pirep_uri.replace('{id}', feature.properties.pirep_id);
+
+        const flight_route = $.ajax({
+            url: uri,
+            dataType: "json",
+            error: console.log
+        });
+
+        $.when(flight_route).done((routeJson) => {
+            if (layerSelFlight !== null) {
+                map.removeLayer(layerSelFlight);
+            }
+
+            layerSelFlight = leaflet.geodesic([], {
+                weight: 7,
+                opacity: 0.9,
+                color: ACTUAL_ROUTE_COLOR,
+                wrap: false,
+            }).addTo(map);
+
+            layerSelFlight.geoJson(routeJson.line);
+
+            layerSelFlightFeature = feature;
+            layerSelFlightLayer = layer;
+            //map.fitBounds(layerSelFlight.getBounds());
+        });
+    };
+
+    const updateMap = () => {
+
+        console.log('reloading flights from acars...');
+
+        /**
+         * AJAX UPDATE
+         */
+
+        let flights = $.ajax({
+            url: opts.update_uri,
+            dataType: "json",
+            error: console.log
+        });
+
+        $.when(flights).done(function (flightGeoJson) {
+
+            if (layerFlights !== null) {
+                layerFlights.clearLayers();
+            }
+
+            layerFlights = leaflet.geoJSON(flightGeoJson, {
+                onEachFeature: (feature, layer) => {
+
+                    layer.on({
+                        click: (e) => {
+                            onFlightClick(feature, layer);
+                        }
+                    });
+
+                    let popup_html = "";
+                    if (feature.properties && feature.properties.popup) {
+                        popup_html += feature.properties.popup;
+                    }
+
+                    layer.bindPopup(popup_html);
+                },
+                pointToLayer: function (feature, latlon) {
+                    return leaflet.marker(latlon, {
+                        icon: aircraftIcon,
+                        rotationAngle: feature.properties.heading
+                    });
+                }
+            });
+
+            layerFlights.addTo(map);
+
+            if (layerSelFlight !== null) {
+                onFlightClick(layerSelFlightFeature, layerSelFlightLayer);
+            }
+        });
+    };
+
+    updateMap();
+    setInterval(updateMap, 10000);
+};

resources/js/maps/route_map.js

@@ -0,0 +1,123 @@
+const _ = require('lodash');
+const leaflet = require('leaflet');
+
+import draw_base_map from './base_map';
+import {ACTUAL_ROUTE_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;
+    }
+
+    layer.bindPopup(popup_html);
+};
+
+/**
+ * Show each point as a marker
+ * @param feature
+ * @param latlng
+ * @returns {*}
+ */
+export const pointToLayer = (feature, latlng) => {
+    return leaflet.circleMarker(latlng, {
+        radius: 12,
+        fillColor: "#ff7800",
+        color: "#000",
+        weight: 1,
+        opacity: 1,
+        fillOpacity: 0.8
+    });
+};
+
+/**
+ *
+ * @param opts
+ * @private
+ */
+export default (opts) => {
+
+    opts = _.defaults(opts, {
+        route_points: null,
+        planned_route_line: null,
+        actual_route_points: null,
+        actual_route_line: null,
+        render_elem: 'map',
+    });
+
+    console.log(opts);
+
+    let map = draw_base_map(opts);
+
+    let geodesicLayer = leaflet.geodesic([], {
+        weight: 7,
+        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": 5,
+                "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: 7,
+            opacity: 0.9,
+            color: ACTUAL_ROUTE_COLOR,
+            steps: 50,
+            wrap: false,
+        }).addTo(map);
+
+        geodesicLayer.geoJson(opts.actual_route_line);
+
+        try {
+            map.fitBounds(geodesicLayer.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": 5,
+                "opacity": 0.65,
+            },
+        });
+
+        route_points.addTo(map);
+    }
+};

resources/views/admin/app.blade.php

@@ -189,5 +189,6 @@ $(document).ready(function () {
 
 });
 </script>
+
 @yield('scripts')
 </html>

resources/views/layouts/default/flights/map.blade.php

@@ -11,7 +11,7 @@
 
 @section('scripts')
 <script type="text/javascript">
-phpvms.render_route_map({
+phpvms.map.render_route_map({
     route_points: {!! json_encode($map_features['route_points']) !!},
     planned_route_line: {!! json_encode($map_features['planned_route_line']); !!},
 });

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

@@ -11,7 +11,7 @@
 
 @section('scripts')
 <script type="text/javascript">
-phpvms.render_route_map({
+phpvms.map.render_route_map({
     route_points: {!! json_encode($map_features['planned_rte_points']) !!},
     planned_route_line: {!! json_encode($map_features['planned_rte_line']); !!},
     actual_route_line: {!! json_encode($map_features['actual_route_line']); !!},