More fixes for maps; user API key set to design

2017-12-19 17:30:30 -06:00
parent f2131093c4
commit ac4958a2be
6 changed files with 139 additions and 99 deletions
--- a/public/assets/admin/js/admin.js
+++ b/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);
    });
--- a/public/assets/system/js/system.js
+++ b/public/assets/system/js/system.js
@@ -1,78 +1,97 @@
-function phpvms_render_airspace_map(opts) {
-    opts = __parse_opts(opts);
-    var map = __draw_base_map(opts);
-    if (opts.set_marker == true) {
-        L.marker(coords).addTo(map);
-    }
-    return map;
-}
+const phpvms= (function() {

-function __parse_opts(opts) {
-    _.defaults(opts, {
-        render_elem: 'map',
-        overlay_elem: '',
-        lat: 0,
-        lon: 0,
-        zoom: 12,
-        layers: [],
-        set_marker: false,
-    });
+    const draw_base_map = (opts) => {

-    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(
-        "http://{s}.tile.maps.openaip.net/geowebcache/service/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", {
            maxZoom: 14,
-            minZoom: 12,
-            layers: 'openaip_approved_airspaces_labels',
-            tileSize: 1024,
+            minZoom: 4,
+            tms: true,
            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(
-        'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=f09a38fa87514de4890fc96e7fe8ecb1', {
-            maxZoom: 14,
-            minZoom: 4,
-            format: 'image/png',
-            transparent: true
+        let map = L.map('map', {
+            layers: [openaip_basemap_phys_osm],
+            zoom: opts.zoom,
+            scrollWheelZoom: false,
        });

-    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", {
-        maxZoom: 14,
-        minZoom: 4,
-        tms: true,
-        detectRetina: false,
-        subdomains: '12',
-        format: 'image/png',
-        transparent: true
-    });
+        const 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>");

-    var openaip_basemap_phys_osm = L.featureGroup([opencyclemap_phys_osm, openaip_cached_basemap]);
+        attrib.addTo(map);

-    var map = L.map('map', {
-        layers: [openaip_basemap_phys_osm],
-        center: coords,
-        zoom: opts.zoom,
-        scrollWheelZoom: false,
-    }).setView(coords, opts.zoom);
+        return map;
+    }

-    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;
+        }
+    }
+})();
--- a/resources/views/admin/app.blade.php
+++ b/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>

--- a/resources/views/layouts/default/app.blade.php
+++ b/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>

--- a/resources/views/layouts/default/pireps/map.blade.php
+++ b/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
--- a/resources/views/layouts/default/pireps/show.blade.php
+++ b/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">
-        <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>
+    @include('layouts.default.pireps.map')
@endsection
+