More fixes for maps; user API key set to design

public/assets/admin/js/admin.js

@@ -5,7 +5,10 @@
 function phpvms_vacentral_airport_lookup(icao, callback) {
     $.ajax({
         url: '/api/airports/' + icao + '/lookup',
-        method: 'GET'
+        method: 'GET',
+        headers: {
+            'Authorization': PHPVMS_USER_API_KEY
+        }
     }).done(function (data, status) {
         callback(data.data);
     });

public/assets/system/js/system.js

@@ -1,78 +1,97 @@
-function phpvms_render_airspace_map(opts) {
+const phpvms= (function() {
-    opts = __parse_opts(opts);
-    var map = __draw_base_map(opts);
-    if (opts.set_marker == true) {
-        L.marker(coords).addTo(map);
-    }
-    return map;
-}
 
-function __parse_opts(opts) {
+    const draw_base_map = (opts) => {
-    _.defaults(opts, {
-        render_elem: 'map',
-        overlay_elem: '',
-        lat: 0,
-        lon: 0,
-        zoom: 12,
-        layers: [],
-        set_marker: false,
-    });
 
-    return opts;
+        /*var openaip_airspace_labels = new L.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
+            });
 
-function __draw_base_map(opts) {
+        openaip_airspace_labels.addTo(map);*/
 
-    var coords = [opts.lat, opts.lon];
+        const opencyclemap_phys_osm = new L.TileLayer(
+            'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=f09a38fa87514de4890fc96e7fe8ecb1', {
+                maxZoom: 14,
+                minZoom: 4,
+                format: 'image/png',
+                transparent: true
+            });
 
-    /*var openaip_airspace_labels = new L.TileLayer.WMS(
+        const openaip_cached_basemap = new L.TileLayer("http://{s}.tile.maps.openaip.net/geowebcache/service/tms/1.0.0/openaip_basemap@EPSG%3A900913@png/{z}/{x}/{y}.png", {
-        "http://{s}.tile.maps.openaip.net/geowebcache/service/wms", {
             maxZoom: 14,
-            minZoom: 12,
+            minZoom: 4,
-            layers: 'openaip_approved_airspaces_labels',
+            tms: true,
-            tileSize: 1024,
             detectRetina: true,
             subdomains: '12',
             format: 'image/png',
             transparent: true
         });
 
-    openaip_airspace_labels.addTo(map);*/
+        const openaip_basemap_phys_osm = L.featureGroup([opencyclemap_phys_osm, openaip_cached_basemap]);
 
-    var opencyclemap_phys_osm = new L.TileLayer(
+        let map = L.map('map', {
-        'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=f09a38fa87514de4890fc96e7fe8ecb1', {
+            layers: [openaip_basemap_phys_osm],
-            maxZoom: 14,
+            zoom: opts.zoom,
-            minZoom: 4,
+            scrollWheelZoom: false,
-            format: 'image/png',
-            transparent: true
         });
 
-    var openaip_cached_basemap = new L.TileLayer("http://{s}.tile.maps.openaip.net/geowebcache/service/tms/1.0.0/openaip_basemap@EPSG%3A900913@png/{z}/{x}/{y}.png", {
+        const attrib = L.control.attribution({position: 'bottomleft'});
-        maxZoom: 14,
+        attrib.addAttribution("<a href=\"https://www.thunderforest.com\" target=\"_blank\" style=\"\">Thunderforest</a>");
-        minZoom: 4,
+        attrib.addAttribution("<a href=\"https://www.openaip.net\" target=\"_blank\" style=\"\">openAIP</a>");
-        tms: true,
+        attrib.addAttribution("<a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\" style=\"\">OpenStreetMap</a> contributors");
-        detectRetina: false,
+        attrib.addAttribution("<a href=\"https://www.openweathermap.org\" target=\"_blank\" style=\"\">OpenWeatherMap</a>");
-        subdomains: '12',
-        format: 'image/png',
-        transparent: true
-    });
 
-    var openaip_basemap_phys_osm = L.featureGroup([opencyclemap_phys_osm, openaip_cached_basemap]);
+        attrib.addTo(map);
 
-    var map = L.map('map', {
+        return map;
-        layers: [openaip_basemap_phys_osm],
+    }
-        center: coords,
-        zoom: opts.zoom,
-        scrollWheelZoom: false,
-    }).setView(coords, opts.zoom);
 
-    var attrib = L.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 {
 
-    return map;
+        /**
-}
+         *
+         * @param opts
+         */
+        render_route_map: (opts) => {
+            opts = _.defaults(opts, {
+                coords: [],   // [ {name, lat, lon}, {name, lat, lon} ];
+            });
+        },
+
+        /**
+         * Render a map with the airspace, etc around a given set of coords
+         * e.g, the airport map
+         * @param opts
+         */
+        render_airspace_map: (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) {
+                L.marker(coords).addTo(map);
+            }
+
+            return map;
+        }
+    }
+})();

resources/views/admin/app.blade.php

@@ -17,19 +17,17 @@
     <link rel="stylesheet" href="{{ public_asset('/assets/admin/css/admin.css') }}">
 
     <style type="text/css">
-        /*.card {
-            display: inline-block;
-            position: relative;
-            overflow: hidden;
-            width: 100%;
-            margin-bottom: 20px;
-            !*box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);*!
-        }*/
-
-
     @yield('css')
     </style>
 
+    <script>
+    @if (Auth::user())
+        const PHPVMS_USER_API_KEY = "{!! Auth::user()->api_key !!}";
+    @else
+        const PHPVMS_USER_API_KEY = false;
+    @endif
+    </script>
+
 </head>
 <body>
 

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

@@ -18,9 +18,12 @@
     <link href="{!! public_asset('/assets/frontend/css/bootstrap.min.css') !!}" rel="stylesheet"/>
     <link href="{!! public_asset('/assets/vendor/select2/dist/css/select2.min.css') !!}" rel="stylesheet"/>
     <link href="{!! public_asset('/assets/frontend/css/now-ui-kit.css') !!}" rel="stylesheet"/>
-    <link href="{!! public_asset('/assets/admin/vendor/leaflet.css') !!}" rel="stylesheet"/>
     <link href="{!! public_asset('/assets/frontend/css/styles.css') !!}" rel="stylesheet"/>
 
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
+          integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
+          crossorigin=""/>
+
     <style>
         .font-large {
             font-size: 20px;
@@ -33,6 +36,14 @@
 
     @yield('css')
 
+    <script>
+    @if (Auth::user())
+        const PHPVMS_USER_API_KEY = "{!! Auth::user()->api_key !!}";
+    @else
+        const PHPVMS_USER_API_KEY = false;
+    @endif
+    </script>
+
 </head>
 
 <body>
@@ -157,7 +168,10 @@
 <script src="{!! public_asset('/assets/frontend/js/plugins/bootstrap-datepicker.js') !!}" type="text/javascript"></script>
 <script src="{!! public_asset('/assets/frontend/js/now-ui-kit.js') !!}" type="text/javascript"></script>
 <script src="{!! public_asset('/assets/vendor/select2/dist/js/select2.js') !!}"></script>
-<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
+
+<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
+        integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
+        crossorigin=""></script>
 
 <script src="{!! public_asset('/assets/system/js/system.js') !!}"></script>
 

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

@@ -0,0 +1,19 @@
+<div class="row">
+    <div class="col-md-12">
+        <h3 class="description">map</h3>
+    </div>
+    <div class="col-12">
+        <div class="box-body">
+            <div id="map" style="width: 100%; height: 800px"></div>
+        </div>
+    </div>
+</div>
+
+@section('scripts')
+<script type="text/javascript">
+    phpvms.render_airspace_map({
+        lat: {!! $pirep->arr_airport->lat !!},
+        lon: {!! $pirep->arr_airport->lon !!},
+    });
+</script>
+@endsection

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

@@ -3,23 +3,26 @@
 @section('title', 'PIREP '.$pirep->getFlightId())
 @section('content')
     <div class="row">
-        <div class="col-md-8">
+        <div class="col-md-12">
             <h2 class="description">{!! $pirep->getFlightId() !!}</h2>
         </div>
-        <div class="col-md-4 align-right">
-            @if($pirep->status == config('enums.pirep_status.PENDING'))
-                <div class="badge badge-warning "><span class="font-large">Pending</span></div>
-            @elseif($pirep->status === config('enums.pirep_status.ACCEPTED'))
-                <div class="badge badge-success">Accepted</div>
-            @else
-                <div class="badge badge-danger">Rejected</div>
-            @endif
-        </div>
     </div>
 
     <div class="row">
         <div class="col-md-12">
             <table class="table">
+                <tr>
+                    <td>Status</td>
+                    <td>
+                        @if($pirep->status == config('enums.pirep_status.PENDING'))
+                            <div class="badge badge-warning ">Pending</div>
+                        @elseif($pirep->status === config('enums.pirep_status.ACCEPTED'))
+                            <div class="badge badge-success">Accepted</div>
+                        @else
+                            <div class="badge badge-danger">Rejected</div>
+                        @endif
+                    </td>
+                </tr>
                 <tr>
                     <td>Departure/Arrival</td>
                     <td>
@@ -76,22 +79,6 @@
         </div>
     </div>
 
-    <div class="row">
+    @include('layouts.default.pireps.map')
-        <div class="col-md-12">
-            <h3 class="description">map</h3>
-        </div>
-        <div class="col-xs-12">
-            <div class="box-body">
-                <div id="map" style="width: 100%; height: 800px"></div>
-            </div>
-        </div>
-    </div>
-@endsection
-@section('scripts')
-<script type="text/javascript">
-    phpvms_render_airspace_map({
-        lat: {!! $pirep->arr_airport->lat !!},
-        lon: {!! $pirep->dpt_airport->lon !!},
-    });
-</script>
 @endsection
+