Add airport overview page and links to it #225

resources/js/maps/airspace_map.js

@@ -2,6 +2,7 @@
 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
@@ -17,16 +18,27 @@ export default (opts) => {
     zoom: 12,
     layers: [],
     set_marker: true,
+    marker_popup: '',
+
+    // Passed from the config/maps.php file
+    metar_wms: {
+        url: '',
+        params: {}
+    },
   }, opts);
 
-  let map = draw_base_map(opts)
-  const coords = [opts.lat, opts.lon]
-  console.log('Applying coords', coords)
+  let map = draw_base_map(opts);
+  const coords = [opts.lat, opts.lon];
+  console.log('Applying coords', coords);
 
-  map.setView(coords, opts.zoom)
+  map.setView(coords, opts.zoom);
   if (opts.set_marker === true) {
-    leaflet.marker(coords).addTo(map)
+    leaflet.marker(coords).addTo(map).bindPopup(opts.marker_popup);
   }
 
-  return map
+  if(opts.metar_wms.url !== '') {
+      addWMSLayer(map, opts.metar_wms);
+  }
+
+  return map;
 };

resources/js/maps/base_map.js

@@ -50,14 +50,14 @@ export default (opts) => {
   feature_groups.push(openaip_cached_basemap);
   */
 
-  const openaip_basemap_phys_osm = leaflet.featureGroup(feature_groups)
+  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>')

resources/js/maps/helpers.js

@@ -0,0 +1,47 @@
+
+const leaflet = require('leaflet');
+
+/**
+ * Add a WMS layer to a map. opts must be:
+ * {
+ *  url: '',
+ *  params: {}
+ *  }
+ * @param map
+ * @param opts
+ */
+export function addWMSLayer(map, opts) {
+
+    if(opts.url === '') {
+        return;
+    }
+
+    opts.params = Object.assign({
+        format: 'image/png',
+        transparent: true,
+        maxZoom: 14,
+        minZoom: 4,
+    }, opts.params);
+
+    const mlayer = leaflet.tileLayer.wms(
+        opts.url, opts.params
+    );
+
+    mlayer.addTo(map);
+
+    return mlayer;
+}
+
+/**
+ * Show a popup
+ * @param feature
+ * @param layer
+ */
+export function showFeaturePopup(feature, layer) {
+    let popup_html = '';
+    if (feature.properties && feature.properties.popup) {
+        popup_html += feature.properties.popup
+    }
+
+    layer.bindPopup(popup_html)
+}

resources/js/maps/route_map.js

@@ -3,6 +3,7 @@ const leaflet = require('leaflet');
 
 import draw_base_map from './base_map'
 import { ACTUAL_ROUTE_COLOR, PLAN_ROUTE_COLOR } from './config'
+import {addWMSLayer} from './helpers';
 
 /**
  * Show some popup text when a feature is clicked on
@@ -48,11 +49,19 @@ export default (opts) => {
     actual_route_points: null,
     actual_route_line: null,
     render_elem: 'map',
+    metar_wms: {
+        url: '',
+        params: {}
+    },
   }, opts);
 
-  console.log(opts)
+  console.log(opts);
 
-  let map = draw_base_map(opts)
+  let map = draw_base_map(opts);
+
+  if (opts.metar_wms.url !== '') {
+      addWMSLayer(map, opts.metar_wms);
+  }
 
   let geodesicLayer = leaflet.geodesic([], {
     weight: 7,

resources/stubs/installer/config.stub

@@ -37,6 +37,13 @@ return [
         'api_key' => '',
     ],
 
+    // For METAR features, register for an API key at
+    // https://www.checkwx.com
+    'checkwx' => [
+        'url'     => 'https://api.checkwx.com',
+        'api_key' => false,
+    ],
+
     #
     # Other settings and configuration you might not need to modify
     #

resources/views/layouts/default/airports/show.blade.php

@@ -3,19 +3,28 @@
 
 @section('content')
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-12">
         <h2 class="description">{{ $airport->full_name }}</h2>
     </div>
-    <div class="col-md-6">
+    <div class="col-5">
+
+        {{ Widget::checkWx([
+            'icao' => $airport->icao,
+          ]) }}
+
+    </div>
+    <div class="col-7">
         {{ Widget::airspaceMap([
             'width' => '100%',
-            'height' => '250px',
+            'height' => '400px',
             'lat' => $airport->lat,
             'lon' => $airport->lon,
           ]) }}
     </div>
 </div>
+<div class="row" style="height: 30px;">
 
+</div>
 <div class="row">
     <div class="col-md-12">
         <h3 class="description">Inbound Flights</h3>
@@ -26,7 +35,6 @@
         @else
             @each('airports.table', $inbound_flights, 'flight')
         @endif
-
         <h3 class="description">Outbound Flights</h3>
         @each('airports.table', $outbound_flights, 'flight')
     </div>

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

@@ -14,6 +14,7 @@
 phpvms.map.render_route_map({
     route_points: {!! json_encode($map_features['route_points']) !!},
     planned_route_line: {!! json_encode($map_features['planned_route_line']) !!},
+    metar_wms: {!! json_encode(config('map.metar_wms')) !!},
 });
 </script>
 @endsection

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

@@ -4,7 +4,7 @@
 @section('content')
 <div class="row">
     <div class="col-md-12">
-        <h2 class="description">{{ $flight->ident }} - {{ $flight->dpt_airport->full_name }} to {{ $flight->arr_airport->full_name }}</h2>
+        <h2 class="description">{{ $flight->ident }}</h2>
     </div>
 </div>
 
@@ -13,29 +13,26 @@
         <table class="table">
             <tr>
                 <td>Departure</td>
-                <td>{{ $flight->dpt_airport->icao }} @ {{ $flight->dpt_time }}</td>
+                <td>
+                    <a href="{{route('frontend.airports.show', ['id'=>$flight->dpt_airport_id])}}">
+                        {{ $flight->dpt_airport->full_name }}</a>
+                    @ {{ $flight->dpt_time }}</td>
             </tr>
 
             <tr>
                 <td>Arrival</td>
-                <td>{{ $flight->arr_airport->icao }} @ {{ $flight->arr_time }}</td>
+                <td>
+                    <a href="{{route('frontend.airports.show', ['id'=>$flight->arr_airport_id])}}">
+                        {{ $flight->arr_airport->full_name }}</a> @ {{ $flight->arr_time }}</td>
             </tr>
-
-            <tr>
-                <td>Route Code/Leg:</td>
-                <td>{{ $flight->route_code ?: '-' }}/{{ $flight->route_leg ?: '-' }}</td>
-            </tr>
-
+            @if($flight->alt_airport_id)
             <tr>
                 <td>Alternate Airport</td>
                 <td>
-                    @if($flight->alt_airport_id)
-                        {{ $flight->alt_airport->full_name }}
-                    @else
-                        -
-                    @endif
+                    {{ $flight->alt_airport->full_name }}
                 </td>
             </tr>
+            @endif
 
             <tr>
                 <td>Route</td>
@@ -49,5 +46,20 @@
         </table>
     </div>
 </div>
-@include("flights.map")
+<div style="padding: 10px;"></div>
+<div class="row">
+    <div class="col-6">
+        <h5>{{$flight->dpt_airport_id}} METAR</h5>
+        {{ Widget::checkWx([
+            'icao' => $flight->dpt_airport_id,
+          ]) }}
+    </div>
+    <div class="col-6">
+        <h5>{{$flight->arr_airport_id}} METAR</h5>
+        {{ Widget::checkWx([
+            'icao' => $flight->arr_airport_id,
+          ]) }}
+    </div>
+</div>
+@include('flights.map')
 @endsection

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

@@ -32,10 +32,12 @@
         <div class="row">
             <div class="col-sm-5">
                 <span class="title">DEP&nbsp;</span>
-                {{ $flight->dpt_airport->icao }}@if($flight->dpt_time), {{ $flight->dpt_time }}@endif
+                <a href="{{route('frontend.airports.show', ['id'=>$flight->dpt_airport_id])}}">
+                    {{ $flight->dpt_airport->icao }}</a>@if($flight->dpt_time), {{ $flight->dpt_time }}@endif
                 <br />
                 <span class="title">ARR&nbsp;</span>
-                {{ $flight->arr_airport->icao }}@if($flight->arr_time), {{ $flight->arr_time }}@endif
+                <a href="{{route('frontend.airports.show', ['id'=>$flight->arr_airport_id])}}">
+                    {{ $flight->arr_airport->icao }}</a>@if($flight->arr_time), {{ $flight->arr_time }}@endif
                 <br />
                 @if($flight->distance)
                     <span class="title">DISTANCE&nbsp;</span>

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

@@ -1,12 +1,22 @@
 <div class="card border-blue-bottom">
     <div class="card-block" style="min-height: 0px">
         <div class="row">
-            <div class="col-sm-2 text-center">
+            <div class="col-12">
                 <h5>
                     <a class="text-c" href="{{ route('frontend.pireps.show', [$pirep->id]) }}">
                         {{ $pirep->ident }}
                     </a>
+                    -
+                    <a href="{{route('frontend.airports.show', ['id' => $pirep->dpt_airport_id])}}">
+                        {{ $pirep->dpt_airport_id }}</a>
+
+                    <span class="description"> to </span>
+
+                    <a href="{{route('frontend.airports.show', ['id' => $pirep->arr_airport_id])}}">
+                        {{ $pirep->arr_airport_id }}</a>
                 </h5>
+            </div>
+            <div class="col-sm-2 text-center">
                 <div>
                     @if($pirep->state === PirepState::PENDING)
                         <div class="badge badge-warning">
@@ -24,14 +34,6 @@
                 <div class="row">
                     <div class="col-sm-6">
                         <table width="100%">
-                            <tr>
-                                <td width="20%" nowrap><span class="title">DEP&nbsp;</span></td>
-                                <td>{{ $pirep->dpt_airport_id }}</td>
-                            </tr>
-                            <tr>
-                                <td nowrap><span class="title">ARR&nbsp;</span></td>
-                                <td>{{ $pirep->arr_airport_id }}&nbsp;</td>
-                            </tr>
                             <tr>
                                 <td nowrap><span class="title">Flight Time&nbsp;</span></td>
                                 <td>{{ Utils::minutesToTimeString($pirep->flight_time) }}</td>

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

@@ -35,9 +35,11 @@
                 <tr>
                     <td>Departure/Arrival</td>
                     <td>
-                        {{ $pirep->dpt_airport->icao }} - {{ $pirep->dpt_airport->name }}
+                        <a href="{{route('frontend.airports.show', ['id' => $pirep->dpt_airport_id])}}">
+                            {{ $pirep->dpt_airport->full_name }}</a>
                         <span class="description">to</span>
-                        {{ $pirep->arr_airport->icao }} - {{ $pirep->arr_airport->name }}
+                        <a href="{{route('frontend.airports.show', ['id' => $pirep->arr_airport_id])}}">
+                            {{ $pirep->arr_airport->full_name }}</a>
                     </td>
                 </tr>
 

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

@@ -5,6 +5,7 @@
 phpvms.map.render_airspace_map({
     lat: "{{$config['lat']}}",
     lon: "{{$config['lon']}}",
+    metar_wms: {!! json_encode(config('map.metar_wms')) !!},
 });
 </script>
 @endsection

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

@@ -0,0 +1,64 @@
+@if(!$data)
+    <p>METAR/TAF data could not be retrieved</p>
+@else
+    <table class="table">
+        <tr>
+            <td colspan="2">
+                <div style="line-height:1.5em;min-height: 3em;">
+                    {{$data->raw_text}}
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td colspan="2">Updated: {{$data->observed}}</td>
+        </tr>
+        <tr>
+            <td>Conditions</td>
+            <td>
+                {{$data->flight_category}},
+                @if($unit_temp === 'f')
+                    {{$data->temperature->fahrenheit}}°F
+                @else
+                    {{$data->temperature->celsius}}°C
+                @endif
+                , visibility
+                @if($unit_dist === 'km')
+                    {{intval(str_replace(',', '', $data->visibility->meters)) / 1000}}
+                @else
+                    {{$data->visibility->miles}}
+                @endif
+                &nbsp;
+                {{$data->humidity_percent}}% humidity
+            </td>
+        </tr>
+        <tr>
+            <td>Barometer</td>
+            <td>{{ $data->barometer->hg }}hg/{{ $data->barometer->mb }}mb</td>
+        </tr>
+        <tr>
+            <td>Clouds</td>
+            <td>
+                @foreach($data->clouds as $cloud)
+                    <p>
+                        {{$cloud->text}} @
+                        @if($unit_alt === 'ft')
+                            {{$cloud->base_feet_agl}}
+                        @else
+                            {{$cloud->base_meters_agl}}
+                        @endif
+                        {{$unit_alt}}
+                    </p>
+                @endforeach
+            </td>
+        </tr>
+        <tr>
+            <td>Wind</td>
+            <td>
+                {{$data->wind->speed_kts}}kts @ {{$data->wind->degrees}},
+                @if(property_exists($data->wind, 'gusts_kts'))
+                    gusts to {{$data->wind->gusts_kts}}
+                @endif
+            </td>
+        </tr>
+    </table>
+@endif