api fixes/updates

2018-05-01 20:58:05 -05:00
parent 50abda71cb
commit b96f1cd7c4
17 changed files with 1282 additions and 1604 deletions
--- a/resources/js/maps/route_map.js
+++ b/resources/js/maps/route_map.js
@@ -1,14 +1,9 @@
-
 const leaflet = require('leaflet');

 import draw_base_map from './base_map'
-import { addWMSLayer } from './helpers';
+import {addWMSLayer} from './helpers';

-import {
-  ACTUAL_ROUTE_COLOR,
-  PLAN_ROUTE_COLOR,
-  CIRCLE_COLOR
-} from './config'
+import {ACTUAL_ROUTE_COLOR, CIRCLE_COLOR, PLAN_ROUTE_COLOR} from './config'

 /**
 * Show some popup text when a feature is clicked on
@@ -16,12 +11,12 @@ import {
 * @param layer
 */
 export const onFeaturePointClick = (feature, layer) => {
-  let popup_html = '';
-  if (feature.properties && feature.properties.popup) {
-    popup_html += feature.properties.popup
-  }
+    let popup_html = '';
+    if (feature.properties && feature.properties.popup) {
+        popup_html += feature.properties.popup
+    }

-  layer.bindPopup(popup_html)
+    layer.bindPopup(popup_html)
 };

 /**
@@ -31,14 +26,14 @@ export const onFeaturePointClick = (feature, layer) => {
 * @returns {*}
 */
 export const pointToLayer = (feature, latlng) => {
-  return leaflet.circleMarker(latlng, {
-    radius: 5,
-    fillColor: CIRCLE_COLOR,
-    color: '#000',
-    weight: 1,
-    opacity: 1,
-    fillOpacity: 0.8
-  })
+    return leaflet.circleMarker(latlng, {
+        radius: 5,
+        fillColor: CIRCLE_COLOR,
+        color: '#000',
+        weight: 1,
+        opacity: 1,
+        fillOpacity: 0.8
+    })
 }

 /**
@@ -48,90 +43,125 @@ export const pointToLayer = (feature, latlng) => {
 */
 export default (opts) => {

-  opts = Object.assign({
-    route_points: null,
-    planned_route_line: null,
-    actual_route_points: null,
-    actual_route_line: null,
-    render_elem: 'map',
-    metar_wms: {
-        url: '',
-        params: {}
-    },
-  }, opts);
+    opts = Object.assign({

-  console.log(opts);
+        route_points: null,
+        planned_route_line: null,
+        actual_route_points: null,
+        actual_route_line: null,
+        render_elem: 'map',
+        live_map: false,
+        aircraft_icon: '/assets/img/acars/aircraft.png',
+        metar_wms: {
+            url: '',
+            params: {}
+        },
+    }, opts);

-  let map = draw_base_map(opts);
-
-  if (opts.metar_wms.url !== '') {
-      addWMSLayer(map, opts.metar_wms);
-  }
-
-  let geodesicLayer = leaflet.geodesic([], {
-    weight: 4,
-    opacity: 0.9,
-    color: PLAN_ROUTE_COLOR,
-    steps: 50,
-    wrap: false,
-  }).addTo(map);
-
-  geodesicLayer.geoJson(opts.planned_route_line);
-
-  try {
-    map.fitBounds(geodesicLayer.getBounds())
-  } catch (e) {
-    console.log(e)
-  }
-
-  // Draw the route points after
-  if (opts.route_points !== null) {
-    let route_points = leaflet.geoJSON(opts.route_points, {
-      onEachFeature: onFeaturePointClick,
-      pointToLayer: pointToLayer,
-      style: {
-        'color': PLAN_ROUTE_COLOR,
-        'weight': 3,
-        'opacity': 0.65,
-      },
+    const aircraftIcon = leaflet.icon({
+        iconUrl: opts.aircraft_icon,
+        iconSize: [42, 42],
+        iconAnchor: [21, 21],
    });

-    route_points.addTo(map);
-  }
+    let map = draw_base_map(opts);
+    let layerLiveFlight;

-  /**
-   * draw the actual route
-   */
+    if (opts.metar_wms.url !== '') {
+        addWMSLayer(map, opts.metar_wms);
+    }

-  if (opts.actual_route_line !== null && opts.actual_route_line.features.length > 0) {
    let geodesicLayer = leaflet.geodesic([], {
-      weight: 3,
-      opacity: 0.9,
-      color: ACTUAL_ROUTE_COLOR,
-      steps: 50,
-      wrap: false,
+        weight: 4,
+        opacity: 0.9,
+        color: PLAN_ROUTE_COLOR,
+        steps: 50,
+        wrap: false,
    }).addTo(map);

-    geodesicLayer.geoJson(opts.actual_route_line);
+    geodesicLayer.geoJson(opts.planned_route_line);

    try {
-      map.fitBounds(geodesicLayer.getBounds())
+        map.fitBounds(geodesicLayer.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, {
-      onEachFeature: onFeaturePointClick,
-      pointToLayer: pointToLayer,
-      style: {
-        'color': ACTUAL_ROUTE_COLOR,
-        'weight': 3,
-        'opacity': 0.65,
-      },
-    });
+    // Draw the route points after
+    if (opts.route_points !== null) {
+        let route_points = leaflet.geoJSON(opts.route_points, {
+            onEachFeature: onFeaturePointClick,
+            pointToLayer: pointToLayer,
+            style: {
+                'color': PLAN_ROUTE_COLOR,
+                'weight': 3,
+                'opacity': 0.65,
+            },
+        });

-    route_points.addTo(map)
-  }
+        route_points.addTo(map);
+    }
+
+    /**
+     * draw the actual route
+     */
+
+    if (opts.actual_route_line !== null && opts.actual_route_line.features.length > 0) {
+        let geodesicLayer = leaflet.geodesic([], {
+            weight: 3,
+            opacity: 0.9,
+            color: ACTUAL_ROUTE_COLOR,
+            steps: 50,
+            wrap: false,
+        }).addTo(map);
+
+        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': 3,
+                'opacity': 0.65,
+            },
+        });
+
+        route_points.addTo(map)
+    }
+
+    /**
+     *
+     */
+    const liveFlight = () => {
+        const uri = opts.pirep_uri;
+        const live_route = $.ajax({
+            url: uri,
+            dataType: 'json',
+            error: console.log
+        });
+
+        $.when(live_route).done((routeJson) => {
+            layerLiveFlight = leaflet.geoJSON(routeJson, {
+                pointToLayer: function (feature, latlon) {
+                    return leaflet.marker(latlon, {
+                        icon: aircraftIcon,
+                        rotationAngle: feature.properties.heading
+                    })
+                }
+            });
+
+            layerLiveFlight.addTo(map)
+        });
+    };
+
+    setInterval(liveFlight, 10000);
 };
--- a/resources/views/layouts/default/pireps/map.blade.php
+++ b/resources/views/layouts/default/pireps/map.blade.php
@@ -9,10 +9,12 @@
@section('scripts')
 <script type="text/javascript">
 phpvms.map.render_route_map({
+    pirep_uri: '{!! url('/api/pireps/'.$pirep->id.'/acars/geojson') !!}',
    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']) !!},
    actual_route_points: {!! json_encode($map_features['actual_route_points']) !!},
+    aircraft_icon: '{!! public_asset('/assets/img/acars/aircraft.png') !!}',
 });
 </script>
@endsection
--- a/resources/views/layouts/default/pireps/show.blade.php
+++ b/resources/views/layouts/default/pireps/show.blade.php
@@ -9,7 +9,13 @@
                <div class="col-12">
                    <p>
                    <h2 style="margin-bottom: 5px;">{{$pirep->airline->code}}{{ $pirep->ident }}</h2>
-                    <p>Arrived {{$pirep->created_at->diffForHumans()}}</p>
+                        <p>
+                            @if($pirep->state === PirepState::IN_PROGRESS)
+
+                            @else
+                                Arrived {{$pirep->created_at->diffForHumans()}}
+                            @endif
+                        </p>
                    </p>

                </div>
@@ -55,8 +61,10 @@
                    <div class="progress" style="margin: 20px 0;">
                        <div class="progress-bar progress-bar-success" role="progressbar"
                             aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
-                             style="width: {{$pirep->progress_percent}}%">
-                            {{ Utils::minutesToTimeString($pirep->flight_time) }}
+                             style="width: {{$pirep->progress_percent}}%;">
+                            {{--<p style="padding: 10px">
+                                {{ Utils::minutesToTimeString($pirep->flight_time) }}
+                            </p>--}}
                        </div>
                    </div>
                </div>
@@ -78,8 +86,8 @@
        <div class="col-4">

            <h2>&nbsp;</h2>
-            <table class="table table-hover table-condensed">
-                <tr>
+            <table class="table table-striped">
+                {{--<tr>
                    <td width="30%">Status</td>
                    <td>
                        @php
@@ -96,6 +104,15 @@
                            {{ PirepState::label($pirep->state) }}
                        </div>
                    </td>
+                </tr>--}}
+
+                <tr>
+                    <td width="30%">State</td>
+                    <td>
+                        <div class="badge badge-info">
+                            {{ PirepStatus::label($pirep->status) }}
+                        </div>
+                    </td>
                </tr>

                <tr>
--- a/resources/views/layouts/default/widgets/live_map.blade.php
+++ b/resources/views/layouts/default/widgets/live_map.blade.php
@@ -16,9 +16,10 @@
        <table class="table">
            @foreach($pireps as $pirep)
                <tr>
-                    <td>{{ $pirep->ident }}</td>
+                    <td>{{ $pirep->airline->code }}{{ $pirep->ident }}</td>
                    <td>{{ $pirep->dpt_airport_id }}</td>
                    <td>{{ $pirep->arr_airport_id }}</td>
+                    <td>{{ $pirep->aircraft->name }}</td>
                    <td>
                        {{ PirepStatus::label($pirep->status) }}
                    </td>