update livemap to use rivets.js bindings for data updates

app/Http/Controllers/Api/PirepController.php

@@ -97,6 +97,26 @@ class PirepController extends Controller
         }
     }
 
+    /**
+     * Get all the active PIREPs
+     * @param $id
+     * @return PirepResource
+     */
+    public function index()
+    {
+        $active = [];
+        $pireps = $this->acarsRepo->getPositions();
+        foreach($pireps as $pirep) {
+            if(\count($pirep->position) === 0) {
+                continue;
+            }
+
+            $active[] = $pirep;
+        }
+
+        return PirepResource::collection(collect($active));
+    }
+
     /**
      * @param $id
      * @return PirepResource

app/Http/Requests/Acars/PositionRequest.php

@@ -25,6 +25,7 @@ class PositionRequest extends FormRequest
             'positions'               => 'required|array',
             'positions.*.lat'         => 'required|numeric',
             'positions.*.lon'         => 'required|numeric',
+            'positions.*.status'      => 'nullable',
             'positions.*.altitude'    => 'nullable|numeric',
             'positions.*.heading'     => 'nullable|numeric|between:0,360',
             'positions.*.vs'          => 'nullable',

app/Http/Requests/Acars/PrefileRequest.php

@@ -25,6 +25,7 @@ class PrefileRequest extends FormRequest
             'arr_airport_id' => 'required',
             'source_name'    => 'required',
 
+            'status'              => 'nullable',
             'level'               => 'nullable|numeric',
             'flight_type'         => 'nullable',
             'route_code'          => 'nullable',

app/Http/Resources/Acars.php

@@ -2,6 +2,8 @@
 
 namespace App\Http\Resources;
 
+use App\Support\Units\Distance;
+use App\Support\Units\Fuel;
 use Illuminate\Http\Resources\Json\Resource;
 
 class Acars extends Resource
@@ -14,6 +16,16 @@ class Acars extends Resource
      */
     public function toArray($request)
     {
-        return parent::toArray($request);
+        $obj = parent::toArray($request);
+
+        if ($this->distance instanceof Distance) {
+            $obj['distance'] = $this->distance->units;
+        }
+
+        if ($this->fuel instanceof Fuel) {
+            $obj['fuel'] = $this->fuel->units;
+        }
+
+        return $obj;
     }
 }

app/Http/Resources/Pirep.php

@@ -19,6 +19,8 @@ class Pirep extends Resource
     {
         $pirep = parent::toArray($request);
 
+        $pirep['ident'] = $this->ident;
+
         if ($this->distance instanceof Distance) {
             $pirep['distance'] = $this->distance->units;
         }

app/Repositories/AcarsRepository.php

@@ -55,7 +55,7 @@ class AcarsRepository extends Repository
      */
     public function getPositions()
     {
-        return Pirep::with(['airline', 'position'])
+        return Pirep::with(['airline', 'position', 'aircraft'])
             ->where(['state' => PirepState::IN_PROGRESS])
             ->get();
     }

app/Routes/api.php

@@ -5,6 +5,7 @@
  */
 Route::group([], function () {
     Route::get('acars', 'AcarsController@index');
+    Route::get('pireps', 'PirepController@index');
     Route::get('pireps/{pirep_id}', 'PirepController@get');
     Route::get('pireps/{pirep_id}/acars/geojson', 'PirepController@acars_geojson');
 

app/Services/DatabaseService.php

@@ -31,7 +31,7 @@ class DatabaseService extends Service
      */
     protected function time(): string
     {
-        return Carbon::now('UTC')->format('Y-m-d H:i:s');
+        return Carbon::now('UTC'); //->format('Y-m-d H:i:s');
     }
 
     /**
@@ -43,7 +43,6 @@ class DatabaseService extends Service
     public function seed_from_yaml_file($yaml_file, $ignore_errors = false): array
     {
         $yml = file_get_contents($yaml_file);
-
         return $this->seed_from_yaml($yml, $ignore_errors);
     }
 
@@ -61,39 +60,56 @@ class DatabaseService extends Service
             $imported[$table] = 0;
 
             foreach ($rows as $row) {
-                # see if this table uses a UUID as the PK
-                # if no ID is specified
-                if (in_array($table, $this->uuid_tables)) {
-                    if (!array_key_exists('id', $row)) {
-                        $row['id'] = Uuid::generate()->string;
-                    }
-                }
-
-                # encrypt any password fields
-                if (array_key_exists('password', $row)) {
-                    $row['password'] = bcrypt($row['password']);
-                }
-
-                # if any time fields are == to "now", then insert the right time
-                foreach ($this->time_fields as $tf) {
-                    if (array_key_exists($tf, $row) && strtolower($row[$tf]) === 'now') {
-                        $row[$tf] = $this->time();
-                    }
-                }
-
                 try {
-                    DB::table($table)->insert($row);
+                    $row = $this->insert_row($table, $row);
-                    ++$imported[$table];
+                } catch(QueryException $e) {
-                } catch (QueryException $e) {
                     if ($ignore_errors) {
                         continue;
                     }
 
                     throw $e;
                 }
+
+                ++$imported[$table];
             }
         }
 
         return $imported;
     }
+
+    /**
+     * @param      $table
+     * @param      $row
+     * @return mixed
+     * @throws \Exception
+     */
+    public function insert_row($table, $row) {
+        # see if this table uses a UUID as the PK
+        # if no ID is specified
+        if (\in_array($table, $this->uuid_tables, true)) {
+            if (!array_key_exists('id', $row)) {
+                $row['id'] = Uuid::generate()->string;
+            }
+        }
+
+        # encrypt any password fields
+        if (array_key_exists('password', $row)) {
+            $row['password'] = bcrypt($row['password']);
+        }
+
+        # if any time fields are == to "now", then insert the right time
+        foreach($row as $column => $value) {
+            if(strtolower($value) === 'now') {
+                $row[$column] = $this->time();
+            }
+        }
+
+        try {
+            DB::table($table)->insert($row);
+        } catch (QueryException $e) {
+            throw $e;
+        }
+
+        return $row;
+    }
 }

public/assets/frontend/css/now-ui-kit.css

@@ -419,8 +419,8 @@
   border-radius: 3px;
   background: #FFF;
   cursor: default;
-  -webkit-box-shadow: inset 0 0 1px #FFF,
+  -webkit-box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
- inset 0 1px 7px #EBEBEB,
+          box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
   -webkit-transition: 300ms ease 0s;
   -moz-transition: 300ms ease 0s;
   -ms-transition: 300ms ease 0s;

public/assets/frontend/css/styles.css

@@ -5,6 +5,16 @@
     margin-top: 2px;
 }
 
+.map-info-box {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    padding: 20px;
+    height: 100px;
+    z-index: 9999;
+    background-color: rgba(232, 232, 232, 0.9);
+}
+
 .dashboard-box {
     background: #067ec1;
     color: #FFF;

public/assets/installer/css/vendor.css

@@ -7220,8 +7220,8 @@ button.close {
   border-radius: 3px;
   background: #FFF;
   cursor: default;
-  -webkit-box-shadow: inset 0 0 1px #FFF,
+  -webkit-box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
- inset 0 1px 7px #EBEBEB,
+          box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
   -webkit-transition: 300ms ease 0s;
   -moz-transition: 300ms ease 0s;
   -ms-transition: 300ms ease 0s;

public/mix-manifest.json

@@ -1,20 +1,20 @@
 {
-    "/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=8f1a1bff7c8d0e2888db",
+    "/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=a9c6b70866d562211ec7",
-    "/assets/frontend/css/now-ui-kit.css": "/assets/frontend/css/now-ui-kit.css?id=70c0f73b28bc686d7791",
+    "/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=42f138d32d03b309dec7",
+    "/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=e4a5d8869d23f708dd10",
+    "/assets/admin/js/app.js": "/assets/admin/js/app.js?id=daa4de1b316b95d218ba",
-    "/assets/installer/js/app.js": "/assets/installer/js/app.js?id=27b9f2ce0b268e658f01",
+    "/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/admin/fonts/glyphicons-halflings-regular.woff2": "/assets/admin/fonts/glyphicons-halflings-regular.woff2?id=b5b5055c6d812c0f9f0d",
     "/assets/admin/img/clear.png": "/assets/admin/img/clear.png?id=0e92f4c3efc6988a3c96",
     "/assets/admin/img/loading.gif": "/assets/admin/img/loading.gif?id=90a4b76b4f11558691f6",
     "/assets/global/js/jquery.js": "/assets/global/js/jquery.js?id=6a07da9fae934baf3f74",
-    "/assets/admin/css/vendor.css": "/assets/admin/css/vendor.css?id=f139af0f666d5cefde4d",
+    "/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@2x.png": "/assets/admin/css/blue@2x.png?id=97da23d47b838cbd4bef",
     "/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=344796a10af1741dc754",
+    "/assets/installer/css/vendor.css": "/assets/installer/css/vendor.css?id=cd76d2d9611b9a13d644",
     "/assets/installer/js/vendor.js": "/assets/installer/js/vendor.js?id=01249af00bd2c1267e15"
 }

resources/js/bootstrap.js

@@ -38,3 +38,5 @@ if (api_key) {
   window.PHPVMS_USER_API_KEY = false;
   console.error('API Key not found!')
 }
+
+require('./common');

resources/js/common.js

@@ -1,2 +1,56 @@
+/**
+ *
+ */
 
+const rivets = require('rivets');
 
+/**
+ * Generic formatter to prepend
+ * @param value
+ * @param prepend
+ * @returns {*}
+ */
+rivets.formatters.prepend = function (value, prepend) {
+    return prepend + value
+};
+
+/**
+ * Format minutes into HHh MMm
+ * @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';
+};
+
+/**
+ *
+ * @param value
+ * @param len
+ * @returns {boolean}
+ */
+rivets.formatters.gt = (value, len) => {
+    return value.length > len;
+};
+
+/**
+ *
+ * @param value
+ * @param len
+ * @returns {boolean}
+ */
+rivets.formatters.lt = (value, len) => {
+    return value.length < len;
+};
+
+/**
+ *
+ * @param value
+ * @param len
+ * @returns {boolean}
+ */
+rivets.formatters.eq = (value, len) => {
+    return value.length > len;
+};

resources/js/maps/live_map.js

@@ -1,4 +1,5 @@
 const leaflet = require('leaflet');
+const rivets = require('rivets');
 
 import draw_base_map from './base_map'
 import {ACTUAL_ROUTE_COLOR} from './config'
@@ -33,6 +34,9 @@ export default (opts) => {
     let layerSelFlightFeature = null;
     let layerSelFlightLayer = null;
 
+    const r_map_view = rivets.bind($('#map-info-box'), {pirep: {}});
+    const r_table_view = rivets.bind($('#live_flights'), {pireps: []});
+
     /**
      * When a flight is clicked on, show the path, etc for that flight
      * @param feature
@@ -41,7 +45,6 @@ export default (opts) => {
     const onFlightClick = (feature, layer) => {
 
         const pirep_uri = opts.pirep_uri.replace('{id}', feature.properties.pirep_id);
-        const link_uri = opts.pirep_link_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({
@@ -83,49 +86,9 @@ export default (opts) => {
         //
         // When the PIREP info is done loading, show the bottom bar
         //
-        $.when(pirep_info).done(pirep => { pirep = pirep.data;
+        $.when(pirep_info).done(pirep => {
-
+            r_map_view.update({pirep:pirep.data});
-            let dist, planned_dist;
+            $('#map-info-box').show();
-            if(opts.units === 'nmi') {
-                dist = pirep.distance.nmi;
-                planned_dist = pirep.planned_distance.nmi;
-            } else if(opts.units === 'mi') {
-                dist = pirep.distance.mi;
-                planned_dist = pirep.planned_distance.mi;
-            } else if(opts.units === 'km') {
-                dist = pirep.distance.km;
-                planned_dist = pirep.planned_distance.km;
-            }
-
-            // Parse flight time
-            const hours = Math.floor(pirep.flight_time / 60);
-            const mins = pirep.flight_time % 60;
-
-            $('#map_flight_id').html(
-                '<a href="' + link_uri  + '" target="_blank">' +
-                pirep.airline.icao + pirep.flight_number +
-                '</a>'
-            );
-
-            $('#map_flight_info').text(
-                pirep.dpt_airport.name + ' (' + pirep.dpt_airport.icao + ') to ' +
-                pirep.arr_airport.name + ' (' + pirep.arr_airport.icao + ')'
-            );
-
-            $('#map_flight_stats_middle').html(
-                'Status: <strong>' + pirep.status_text + '</strong><br />' +
-                'Flight Time: <strong>' + hours + 'h ' + mins + 'm</strong><br />' +
-                'Distance: <strong>' + dist + '</strong> / ' + planned_dist + opts.units + '<br />'
-            );
-
-            // Show flight stat info
-            $('#map_flight_stats_right').html(
-                'Ground Speed: <strong>' + pirep.position.gs + '</strong><br />' +
-                'Altitude: <strong>' + pirep.position.altitude + '</strong><br />'  +
-                'Heading: <strong>' + pirep.position.heading + '</strong>'
-            );
-
-            $('#map-info-bar').show();
         });
     };
 
@@ -136,6 +99,12 @@ export default (opts) => {
         /**
          * 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,
@@ -143,7 +112,7 @@ export default (opts) => {
             error: console.log
         });
 
-        $.when(flights).done(function (flightGeoJson) {
+        $.when(flights).done(flightGeoJson => {
 
             if (layerFlights !== null) {
                 layerFlights.clearLayers()
@@ -178,7 +147,14 @@ export default (opts) => {
             if (layerSelFlight !== null) {
                 onFlightClick(layerSelFlightFeature, layerSelFlightLayer)
             }
-        })
+        });
+
+        $.when(pireps).done(pireps => {
+            r_table_view.update({
+                pireps: pireps.data,
+                has_data: (pireps.data.length > 0),
+            });
+        });
     };
 
     updateMap();

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

@@ -79,6 +79,8 @@
 {{-- Start of the required tags block. Don't remove these or things will break!! --}}
 <script src="{{ public_asset('/assets/global/js/vendor.js') }}"></script>
 <script src="{{ public_asset('/assets/frontend/js/app.js') }}"></script>
+{{--<script src="bower_components/sightglass/index.js"></script>
+<script src="bower_components/rivets/dist/rivets.min.js"></script>--}}
 @yield('scripts')
 {{-- End the required tags block --}}
 

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

@@ -18,8 +18,8 @@
                      If you change it, remember to change it in the in-array line as well
                 --}}
                 <button class="btn btn-round btn-icon btn-icon-mini
-                               {{ in_array($flight->id, $saved, true) ? 'btn-info':'' }}
+                           {{ in_array($flight->id, $saved, true) ? 'btn-info':'' }}
-                               save_flight"
+                           save_flight"
                         x-id="{{ $flight->id }}"
                         x-saved-class="btn-info"
                         type="button"

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

@@ -2,28 +2,62 @@
     <div class="col-md-12">
         <div class="box-body">
 
+            {{--
+            This map uses rivets.js to fill in the updates from the livemap
+            So the single brackets are used by rivets to fill in the values
+            And then the rv-* attributes are data-binds that will automatically
+            update whenever the base model behind it updates:
+
+                http://rivetsjs.com/docs/guide
+
+            Look in resources/js/maps/live_map.js to see where the actual binding
+            and update() call is made
+            --}}
             <div id="map" style="width: {{ $config['width'] }}; height: {{ $config['height'] }}">
-                <div id="map-info-bar"
+
-                     style="display: none;
+                {{--
-                            position: absolute;
+                This is the bottom bar that appears when you click on a flight in the map.
-                            bottom: 0;
+                You can show any data you want - use a JS debugger to see the value of "pirep",
-                            padding: 20px;
+                or look up the API documentation for the /api/pirep/{id}/acars call
-                            height: 100px;
+
-                            z-index: 9999;
+                It's basically any of the fields from the database and pirep.position.X is any
-                            background-color:rgba(232, 232, 232, 0.9);
+                column from the ACARS table - holds the latest position.
-                            width: {{ $config['width'] }};">
+
-                    <div style="float: left; margin-right: 30px; width: 50%;">
+                Again, this is updated automatically via the rivets.js bindings, so be mindful
-                        <h3 style="margin: 0" id="map_flight_id"></h3>
+                when you're editing the { } - single brackets == rivets, double brackets == laravel
-                        <p id="map_flight_info"></p>
+
+                A couple of places (like the distance) use both to output the correct bindings.
+                --}}
+                <div id="map-info-box" class="map-info-box"
+                     style="width: {{ $config['width'] }};">
+                    <div style="float: left; width: 50%;">
+                        <h3 style="margin: 0" id="map_flight_id">
+                            <a rv-href="pirep.id | prepend '{{url('/pireps/')}}/'" target="_blank">
+                                { pirep.airline.icao }{ pirep.flight_number }
+                            </a>
+                        </h3>
+                        <p id="map_flight_info">
+                            { pirep.dpt_airport.name } ({ pirep.dpt_airport.icao }) to
+                            { pirep.arr_airport.name } ({ pirep.arr_airport.icao })
+                        </p>
                     </div>
-                    <div style="float: left; margin-right: 30px;">
+                    <div style="float: right; margin-left: 30px; margin-right: 30px;">
-                        <p id="map_flight_stats_middle"></p>
+                        <p id="map_flight_stats_right">
+                            Ground Speed: <span style="font-weight: bold">{ pirep.position.gs }</span><br/>
+                            Altitude: <span style="font-weight: bold">{ pirep.position.altitude }</span><br/>
+                            Heading: <span style="font-weight: bold">{ pirep.position.heading }</span><br/>
+                        </p>
                     </div>
-                    <div style="float: left;">
+                    <div style="float: right; margin-left: 30px;">
-                        <p id="map_flight_stats_right"></p>
+                        <p id="map_flight_stats_middle">
+                            Status: <span style="font-weight: bold">{ pirep.status_text }</span><br />
+                            Flight Time: <span style="font-weight: bold">{ pirep.flight_time | time_hm }</span><br />
+                            Distance: <span style="font-weight: bold">{ pirep.position.distance.{{setting('units.distance')}} }</span>
+                                / <span style="font-weight: bold">
+                                        { pirep.planned_distance.{{setting('units.distance')}} }</span>
+                        </p>
                     </div>
                 </div>
-
             </div>
         </div>
     </div>
@@ -31,26 +65,47 @@
 
 <div class="clearfix" style="padding-top: 25px"></div>
 
-{{--<div id="flights_table" class="row">
+{{--
+This table is also handled/rendered by rivets from the livemap
+Handles the updates by automatically updating the data in the row.
+
+Same note applies from above about the data from the PIREP API being available
+and being mindful of the rivets bindings
+--}}
+<div id="live_flights" class="row">
     <div class="col-md-12">
-        @if(!filled($pireps))
+        <div rv-hide="has_data" class="jumbotron text-center">There are no flights</div>
-            <div class="jumbotron text-center">There are no flights</div>
+        <table rv-show="has_data" id="live_flights_table" class="table table-striped">
-        @endif
+            <thead>
-        <table class="table">
+                <tr class="text-small header">
-            @foreach($pireps as $pirep)
+                    <td class="text-small">Flight</td>
-                <tr>
+                    <td class="text-small">Departure</td>
-                    <td>{{ $pirep->airline->code }}{{ $pirep->ident }}</td>
+                    <td class="text-small">Arrival</td>
-                    <td>{{ $pirep->dpt_airport_id }}</td>
+                    <td class="text-small">Aircraft</td>
-                    <td>{{ $pirep->arr_airport_id }}</td>
+                    <td class="text-small">Altitude</td>
-                    <td>{{ $pirep->aircraft->name }}</td>
+                    <td class="text-small">GS</td>
-                    <td>
+                    <td class="text-small">Distance</td>
-                        {{ PirepStatus::label($pirep->status) }}
+                    <td class="text-small">Status</td>
-                    </td>
                 </tr>
-            @endforeach
+            </thead>
+            <tbody>
+                <tr rv-each-pirep="pireps">
+                    <td>{ pirep.airline.code }{ pirep.ident}</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>
+                    <td>{ pirep.aircraft.name }</td>
+                    <td>{ pirep.position.altitude }</td>
+                    <td>{ pirep.position.gs }</td>
+                    <td>{ pirep.position.distance.{{setting('units.distance')}} } /
+                        { pirep.planned_distance.{{setting('units.distance')}} }
+                    </td>
+                    <td>{ pirep.status_text }</td>
+                </tr>
+            </tbody>
         </table>
     </div>
-</div>--}}
+</div>
 
 @section('scripts')
 <script>