live map updates

.gitignore

@@ -4,7 +4,7 @@ _ide_helper.php
 node_modules/
 npm-debug.log
 composer.phar
-
+yarn-error.log
 *.bak
 
 # Laravel 4 specific

app/Http/Controllers/Api/PirepController.php

@@ -107,7 +107,7 @@ class PirepController extends Controller
         $active = [];
         $pireps = $this->acarsRepo->getPositions();
         foreach($pireps as $pirep) {
-            if(\count($pirep->position) === 0) {
+            if(!$pirep->position) {
                 continue;
             }
 

app/Models/Airport.php

@@ -11,7 +11,13 @@ use App\Models\Traits\FilesTrait;
  * @property string id
  * @property string iata
  * @property string icao
+ * @property string name
+ * @property string location
+ * @property string country
+ * @property string timezone
  * @property float  ground_handling_cost
+ * @property float  lat
+ * @property float  lon
  * @package App\Models
  */
 class Airport extends Model

app/Models/Pirep.php

@@ -44,6 +44,7 @@ use PhpUnitsOfMeasure\Exception\NonStringUnitName;
  * @property Carbon      updated_at
  * @property bool        state
  * @property Acars       position
+ * @property Acars[]     acars
  * @package App\Models
  */
 class Pirep extends Model

app/Services/GeoService.php

@@ -181,18 +181,29 @@ class GeoService extends Service
      */
     public function getFeatureFromAcars(Pirep $pirep)
     {
+        // Get the two airports
+        $airports = new GeoJson();
+        $airports->addPoint($pirep->dpt_airport->lat, $pirep->dpt_airport->lon, [
+            'name' => $pirep->dpt_airport->name,
+            'icao' => $pirep->dpt_airport->icao,
+            'type' => 'D',
+        ]);
+
+        $airports->addPoint($pirep->arr_airport->lat, $pirep->arr_airport->lon, [
+            'name' => $pirep->arr_airport->name,
+            'icao' => $pirep->arr_airport->icao,
+            'type' => 'A',
+        ]);
+
         $route = new GeoJson();
 
         /**
          * @var $point \App\Models\Acars
          */
-        $counter = 1;
         foreach ($pirep->acars as $point) {
             $route->addPoint($point->lat, $point->lon, [
                 'pirep_id' => $pirep->id,
-                'name'     => '',
                 'alt'      => $point->altitude,
-                'popup'    => 'GS: '.$point->gs.'<br />Alt: '.$point->altitude,
             ]);
         }
 
@@ -201,8 +212,20 @@ class GeoService extends Service
                 'lat' => $pirep->position->lat,
                 'lon' => $pirep->position->lon,
             ],
-            'line'   => $route->getLine(),
+            'line'     => $route->getLine(),
-            'points' => $route->getPoints()
+            'points'   => $route->getPoints(),
+            'airports' => [
+                'a' => [
+                    'icao' => $pirep->arr_airport->icao,
+                    'lat' => $pirep->arr_airport->lat,
+                    'lon' => $pirep->arr_airport->lon,
+                ],
+                'd' => [
+                    'icao' => $pirep->dpt_airport->icao,
+                    'lat' => $pirep->dpt_airport->lat,
+                    'lon' => $pirep->dpt_airport->lon,
+                ],
+            ]
         ];
     }
 
@@ -227,10 +250,8 @@ class GeoService extends Service
 
             $flight->addPoint($point->lat, $point->lon, [
                 'pirep_id' => $pirep->id,
-                'gs'       => $point->gs,
                 'alt'      => $point->altitude,
                 'heading'  => $point->heading ?: 0,
-                //'popup'    => $pirep->ident.'<br />GS: '.$point->gs.'<br />Alt: '.$point->altitude,
             ]);
         }
 

package.json

@@ -10,19 +10,21 @@
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "dependencies": {
+    "@turf/center": "^6.0.1",
     "Leaflet.Geodesic": "git+https://git@github.com/henrythasler/Leaflet.Geodesic.git",
-    "animate.css": "^3.6.1",
+    "animate.css": "~3.6",
     "axios": "^0.17.1",
-    "bootstrap-sass": "^3.3.7",
+    "bootstrap-sass": "~3.3",
-    "bootstrap3": "^3.3.5",
+    "bootstrap3": "~3.3",
-    "cross-env": "^5.1.4",
+    "cross-env": "~5.1",
     "eonasdan-bootstrap-datetimepicker": "^4.17.47",
     "flag-icon-css": "^2.9.0",
-    "icheck": "^1.0.2",
+    "geolib": "^2.0.24",
-    "jquery": "^3.3.1",
+    "icheck": "~1.0",
-    "jquery-pjax": "^2.0.1",
+    "jquery": "~3.3",
-    "laravel-mix": "^2.1",
+    "jquery-pjax": "~2.0",
-    "leaflet": "^1.3.1",
+    "laravel-mix": "~2.1",
+    "leaflet": "~1.3",
     "leaflet-ajax": "2.1.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "lodash": "4.17.4",

public/assets/frontend/css/styles.css

@@ -15,6 +15,12 @@
     background-color: rgba(232, 232, 232, 0.9);
 }
 
+.map-info-label {
+    display:block;
+    padding: 5px;
+    background-color: rgba(232, 232, 232, 0.9);
+}
+
 .dashboard-box {
     background: #067ec1;
     color: #FFF;

public/mix-manifest.json

@@ -1,18 +1,18 @@
 {
-    "/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=a9c6b70866d562211ec7",
+    "/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=03915ea0eedba5cf1b1e",
     "/assets/frontend/css/now-ui-kit.css": "/assets/frontend/css/now-ui-kit.css?id=b0a0f05b94a4486db4f2",
     "/assets/admin/css/vendor.min.css": "/assets/admin/css/vendor.min.css?id=cc80aec3cf1646f83d8d",
-    "/assets/admin/js/app.js": "/assets/admin/js/app.js?id=daa4de1b316b95d218ba",
+    "/assets/admin/js/app.js": "/assets/admin/js/app.js?id=56dfb08df451052afdd3",
     "/assets/installer/js/app.js": "/assets/installer/js/app.js?id=3a51850509367b06cd1f",
-    "/assets/fonts/glyphicons-halflings-regular.woff2": "/assets/fonts/glyphicons-halflings-regular.woff2?id=b5b5055c6d812c0f9f0d",
+    "/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=b5b5055c6d812c0f9f0d",
+    "/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=0e92f4c3efc6988a3c96",
+    "/assets/admin/img/clear.png": "/assets/admin/img/clear.png?id=63b3af84650a0145d61a",
-    "/assets/admin/img/loading.gif": "/assets/admin/img/loading.gif?id=90a4b76b4f11558691f6",
+    "/assets/admin/img/loading.gif": "/assets/admin/img/loading.gif?id=1e2db432947c2dca1b9f",
     "/assets/global/js/jquery.js": "/assets/global/js/jquery.js?id=6a07da9fae934baf3f74",
     "/assets/admin/css/vendor.css": "/assets/admin/css/vendor.css?id=99aedbd62dfa118e7b73",
     "/assets/admin/js/vendor.js": "/assets/admin/js/vendor.js?id=5130233c88c71fc60135",
-    "/assets/admin/css/blue.png": "/assets/admin/css/blue.png?id=753a3c0dec86d3a38d9c",
+    "/assets/admin/css/blue.png": "/assets/admin/css/blue.png?id=39437a6200d8066a49d4",
-    "/assets/admin/css/blue@2x.png": "/assets/admin/css/blue@2x.png?id=97da23d47b838cbd4bef",
+    "/assets/admin/css/blue@2x.png": "/assets/admin/css/blue@2x.png?id=127d7cfbb176dc559854",
     "/assets/global/js/vendor.js": "/assets/global/js/vendor.js?id=6436d215691e8f38eb12",
     "/assets/global/css/vendor.css": "/assets/global/css/vendor.css?id=115d5c4f2370ae94a962",
     "/assets/installer/css/vendor.css": "/assets/installer/css/vendor.css?id=cd76d2d9611b9a13d644",

resources/js/maps/base_map.js

@@ -64,7 +64,7 @@ export default (opts) => {
     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)
+    attrib.addTo(map);
 
     return map
 };

resources/js/maps/live_map.js

@@ -1,8 +1,11 @@
+//
+
+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'
+import { ACTUAL_ROUTE_COLOR } from './config'
 
 /**
  * Render the live map
@@ -28,14 +31,44 @@ export default (opts) => {
         iconAnchor: [21, 21],
     });
 
+    /**
+     * Hold the markers
+     * @type {{}}
+     */
+    let markers_list = {};
+
     let pannedToCenter = false;
+
     let layerFlights = null;
     let layerSelFlight = null;
     let layerSelFlightFeature = null;
     let layerSelFlightLayer = null;
+    let layerSelArr = null;
+    let layerSelDep = null;
 
-    const r_map_view = rivets.bind($('#map-info-box'), {pirep: {}});
+    /**
-    const r_table_view = rivets.bind($('#live_flights'), {pireps: []});
+     * 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;
+            }
+
+            const marker = markers_list[model.pirep.id];
+            onFlightClick(marker[0], marker[1]);
+        },
+    };
+
+    const r_map_view = rivets.bind($('#map-info-box'), {pirep: {}, controller: mapController});
+    const r_table_view = rivets.bind($('#live_flights'), {pireps: [], controller: mapController});
 
     /**
      * When a flight is clicked on, show the path, etc for that flight
@@ -60,9 +93,11 @@ export default (opts) => {
         });
 
         // Load up the PIREP info
-        $.when(flight_route).done((routeJson) => {
+        $.when(flight_route).done((rte) => {
             if (layerSelFlight !== null) {
                 map.removeLayer(layerSelFlight);
+                //map.removeLayer(layerSelArr);
+                //map.removeLayer(layerSelDep);
             }
 
             layerSelFlight = leaflet.geodesic([], {
@@ -72,13 +107,27 @@ export default (opts) => {
                 wrap: false,
             }).addTo(map);
 
-            layerSelFlight.geoJson(routeJson.line);
+            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) {
-                map.panTo({lat: routeJson.position.lat, lng: routeJson.position.lon});
+                // 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;
             }
         });
@@ -132,6 +181,9 @@ export default (opts) => {
                         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, {

resources/views/layouts/default/app.blade.php

@@ -48,7 +48,7 @@
     </div>
 </nav>
 <!-- End Navbar -->
-<div class="clearfix" style="height: 25px;"></div>
+<div id="top_anchor" class="clearfix" style="height: 25px;"></div>
 <div class="wrapper">
     <div class="clear"></div>
     <div class="container-fluid" style="width: 85%!important;">

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

@@ -90,7 +90,7 @@ and being mindful of the rivets bindings
             </thead>
             <tbody>
                 <tr rv-each-pirep="pireps">
-                    <td>{ pirep.airline.code }{ pirep.ident}</td>
+                    <td><a href="#top_anchor" rv-on-click="controller.focusMarker">{ pirep.airline.icao }{ pirep.ident}</a> </td>
                     {{-- Show the full airport name on hover --}}
                     <td><span rv-title="pirep.dpt_airport.name">{ pirep.dpt_airport.icao }</span></td>
                     <td><span rv-title="pirep.arr_airport.name">{ pirep.arr_airport.icao }</span></td>

yarn.lock

@@ -2,6 +2,30 @@
 # yarn lockfile v1
 
 
+"@turf/bbox@6.x":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@turf/bbox/-/bbox-6.0.1.tgz#b966075771475940ee1c16be2a12cf389e6e923a"
+  dependencies:
+    "@turf/helpers" "6.x"
+    "@turf/meta" "6.x"
+
+"@turf/center@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@turf/center/-/center-6.0.1.tgz#40a17d0a170df5bba09ad93e133b904d8eb14601"
+  dependencies:
+    "@turf/bbox" "6.x"
+    "@turf/helpers" "6.x"
+
+"@turf/helpers@6.x":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-6.1.3.tgz#0001a5c4a3bff25b4bbbc64f8713a383c9ab9e94"
+
+"@turf/meta@6.x":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@turf/meta/-/meta-6.0.1.tgz#cf6f3f2263a3d24fc8d6a7e90f0420bbc44c090d"
+  dependencies:
+    "@turf/helpers" "6.x"
+
 "Leaflet.Geodesic@git+https://git@github.com/henrythasler/Leaflet.Geodesic.git":
   version "1.1.0"
   resolved "git+https://git@github.com/henrythasler/Leaflet.Geodesic.git#7d710dd13020efb7c9901f5b3448a4541f507c56"
@@ -92,7 +116,7 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
-animate.css@^3.6.1:
+animate.css@~3.6:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-3.6.1.tgz#4ea8a48556378bc8d7535224296c4c0dac9229de"
 
@@ -998,11 +1022,11 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
-bootstrap-sass@^3.3.7:
+bootstrap-sass@~3.3:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498"
 
-bootstrap3@^3.3.5:
+bootstrap3@~3.3:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/bootstrap3/-/bootstrap3-3.3.5.tgz#496a4ef6c087214fa96838196d60de645e82591a"
 
@@ -1682,7 +1706,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-cross-env@^5.1.4:
+cross-env@~5.1:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.1.4.tgz#f61c14291f7cc653bb86457002ea80a04699d022"
   dependencies:
@@ -3046,6 +3070,10 @@ generate-object-property@^1.1.0:
   dependencies:
     is-property "^1.0.0"
 
+geolib@^2.0.24:
+  version "2.0.24"
+  resolved "https://registry.yarnpkg.com/geolib/-/geolib-2.0.24.tgz#eb3d7fbc65f5ea3354a5af6054563ebe9f33e5f4"
+
 get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -3586,7 +3614,7 @@ https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
-icheck@^1.0.2:
+icheck@~1.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/icheck/-/icheck-1.0.2.tgz#06d08da3d47ae448c153b2639b86e9ad7fdf7128"
 
@@ -4119,11 +4147,11 @@ jquery-mousewheel@~3.1.13:
   version "3.1.13"
   resolved "https://registry.yarnpkg.com/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz#06f0335f16e353a695e7206bf50503cb523a6ee5"
 
-jquery-pjax@^2.0.1:
+jquery-pjax@~2.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/jquery-pjax/-/jquery-pjax-2.0.1.tgz#6b3a1ba16e644e624bdcfe72eb6b3d96a846f5f2"
 
-"jquery@^1.8.3 || ^2.0 || ^3.0", jquery@^3.3.1:
+"jquery@^1.8.3 || ^2.0 || ^3.0", jquery@~3.3:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
 
@@ -4251,7 +4279,7 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
 
-laravel-mix@^2.1:
+laravel-mix@~2.1:
   version "2.1.11"
   resolved "https://registry.yarnpkg.com/laravel-mix/-/laravel-mix-2.1.11.tgz#3741bde214586f8c171641990c9a487eece5367d"
   dependencies:
@@ -4322,7 +4350,7 @@ leaflet-rotatedmarker@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/leaflet-rotatedmarker/-/leaflet-rotatedmarker-0.2.0.tgz#4467f49f98d1bfd56959bd9c6705203dd2601277"
 
-leaflet@^1.3.1:
+leaflet@~1.3:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.3.1.tgz#86f336d2fb0e2d0ff446677049a5dc34cf0ea60e"