Better check for global access token, if else fallback to static

Feat/trips and areas

resources/js/components/DetailField.vue

@@ -2,7 +2,11 @@
     <div>
         <panel-item :field="field">
             <template slot="value">
-                <component :is="'field-' + field.map.type" :field="field" v-model="field.value"></component>
+                <component
+                    :is="'field-' + field.map.type"
+                    :field="field"
+                    v-model="field.value"
+                ></component>
             </template>
         </panel-item>
     </div>
@@ -10,6 +14,6 @@
 
 <script>
 export default {
-    props: ['resource', 'resourceName', 'resourceId', 'field'],
-}
+    props: ["resource", "resourceName", "resourceId", "field"],
+};
 </script>

resources/js/components/FieldMap.vue

@@ -1,22 +1,20 @@
 <template>
-    <div :style="{'height': field.map.height}">
+    <div :style="{ height: field.map.height }">
         <l-map
-            style="z-index:0"
+            style="z-index: 0"
             :zoom="field.map.zoom"
             :center="center"
             :bounds="bounds"
             @click="onMapClick"
-            >
-            <l-tile-layer
-                :url="url"
-                :attribution="attribution"/>
+        >
+            <l-tile-layer :url="url" :attribution="attribution" />
             <slot></slot>
         </l-map>
     </div>
 </template>
 
 <script>
-import {LMap, LTileLayer} from 'vue2-leaflet'
+import { LMap, LTileLayer } from "vue2-leaflet";
 
 export default {
     props: {
@@ -36,24 +34,25 @@ export default {
 
     data() {
         return {
-            attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
-            url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-        }
+            attribution:
+                '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+            url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+        };
     },
 
     methods: {
         onMapClick(evt) {
-            this.$emit('click', evt);
-        }
+            this.$emit("click", evt);
+        },
     },
 
     components: {
         LMap,
         LTileLayer,
-    }
-}
+    },
+};
 </script>
 
 <style scoped>
-    @import "../../../node_modules/leaflet/dist/leaflet.css"
+@import "../../../node_modules/leaflet/dist/leaflet.css";
 </style>

resources/js/components/FormField.vue

@@ -1,25 +1,31 @@
 <template>
-    <default-field :field="field" :errors="errors">
+    <default-field :field="field" :errors="errors" :full-width-content="true">
         <template slot="field">
-            <component v-if="value" :is="'field-' + field.map.type" :field="field" :edit="true" v-model="value"></component>
+            <component
+                v-if="value"
+                :is="'field-' + field.map.type"
+                :field="field"
+                :edit="true"
+                v-model="value"
+            ></component>
         </template>
     </default-field>
 </template>
 
 <script>
-import { FormField, HandlesValidationErrors } from 'laravel-nova'
+import { FormField, HandlesValidationErrors } from "laravel-nova";
 
 export default {
     mixins: [FormField, HandlesValidationErrors],
 
-    props: ['resourceName', 'resourceId', 'field'],
+    props: ["resourceName", "resourceId", "field"],
 
     methods: {
         /*
          * Set the initial, internal value for the field.
          */
         setInitialValue() {
-            this.value = this.field.value || {}
+            this.value = this.field.value || {};
         },
 
         /**
@@ -33,8 +39,8 @@ export default {
          * Update the field's internal value.
          */
         handleChange(value) {
-            this.value = value
+            this.value = value;
         },
     },
-}
+};
 </script>

resources/js/components/IndexField.vue

@@ -4,6 +4,6 @@
 
 <script>
 export default {
-    props: ['resourceName', 'field'],
-}
+    props: ["resourceName", "field"],
+};
 </script>

resources/js/components/fields/Marker.vue

@@ -1,11 +1,11 @@
 <template>
     <field-map :center="position" :field="field">
-        <l-marker :lat-lng="position" :draggable="edit" @dragend="onDragEnd"/>
+        <l-marker :lat-lng="position" :draggable="edit" @dragend="onDragEnd" />
     </field-map>
 </template>
 
 <script>
-import {LMarker} from 'vue2-leaflet'
+import { LMarker } from "vue2-leaflet";
 
 export default {
     props: {
@@ -20,13 +20,16 @@ export default {
         edit: {
             type: Boolean,
             default: false,
-        }
+        },
     },
 
     computed: {
         position() {
-            return L.latLng(this.value.lat || this.field.map.center.latitude, this.value.lng || this.field.map.center.longitude);
-        }
+            return L.latLng(
+                this.value.lat || this.field.map.center.latitude,
+                this.value.lng || this.field.map.center.longitude
+            );
+        },
     },
 
     mounted() {
@@ -37,36 +40,46 @@ export default {
         onDragEnd(evt) {
             let latLng = evt.target.getLatLng();
 
-            this.$emit('input', {
+            this.$emit("input", {
                 lat: latLng.lat,
                 lng: latLng.lng,
             });
         },
 
         registerWatchers() {
-            this.getGlobalFieldComponents().forEach(component => {
-                if ([this.field.latitudeField, this.field.longitudeField].includes(component.field.attribute)) {
-                    component.$watch('value', (value) => {
-                        this.value[component.field.attribute] = value;
-                    }, {immediate: true})
+            this.getGlobalFieldComponents().forEach((component) => {
+                if (
+                    [
+                        this.field.latitudeField,
+                        this.field.longitudeField,
+                    ].includes(component.field.attribute)
+                ) {
+                    component.$watch(
+                        "value",
+                        (value) => {
+                            this.value[component.field.attribute] = value;
+                        },
+                        { immediate: true }
+                    );
                 }
             });
-
         },
 
         getGlobalFieldComponents(components = null) {
-            if (! components) {
+            if (!components) {
                 components = this.$root.$children;
             }
 
             let returnArray = [];
 
-            components.forEach(component => {
+            components.forEach((component) => {
                 if (component.field) {
                     return returnArray.push(component);
                 }
 
-                returnArray = returnArray.concat(this.getGlobalFieldComponents(component.$children));
+                returnArray = returnArray.concat(
+                    this.getGlobalFieldComponents(component.$children)
+                );
             });
 
             return returnArray;
@@ -75,6 +88,6 @@ export default {
 
     components: {
         LMarker,
-    }
-}
+    },
+};
 </script>

resources/js/components/fields/NavigationRoute.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <field-polyline
+      :edit="edit"
+      :field="field"
+      :value="localValue"
+      @input="triggerChange"
+    />
+
+    <p v-if="edit"><b>Velg rutetype:</b></p>
+    <div v-if="edit" class="flex block my-2">
+      <div v-for="option in routeTypes" class="ml-2">
+        <input
+	  type="radio"
+	  :id="option.value"
+	  :checked="option.value === selectedRouteType"
+	  :value="option.value"
+	  @change="updateRouteType">
+        <label :for="option.value">{{ option.name }}</label>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Object,
+      default: null,
+    },
+    field: {
+      type: Object,
+      required: true,
+    },
+    edit: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      localValue: {},
+      routeTypes: [{
+        value: 'driving',
+        name: 'Bil'
+      },
+      {
+        value: 'walking',
+        name: 'Gange'
+      }],
+      selectedRouteType: null
+    };
+  },
+
+  created() {
+    this.selectedRouteType = this.routeTypes[0].value;
+
+    if (this.value !== null) {
+      this.localValue = this.value;
+    }
+  },
+
+  methods: {
+    queryNavigation(markers) {
+      const cords = markers
+        .map((marker) => `${marker.lng},${marker.lat}`)
+        .join(";");
+
+      const API_URL = 'https://api.mapbox.com/directions/v5'
+      let ACCESS_TOKEN = 'pk.eyJ1Ijoia2V2aW5taWRib2UiLCJhIjoiY2pydWhlamQyMHJ2NTRhdGN1em5ndXVyMyJ9.Ejdo_3iuuGOD662Bh6es4w';
+
+      if (window.fjordmap && window.fjordmap.mapbox_access_token) {
+        ACCESS_TOKEN = window.fjordmap.mapbox_access_token;
+      }
+      const URL = `${API_URL}/mapbox/${this.selectedRouteType}/${cords}?geometries=geojson&access_token=${ACCESS_TOKEN}`;
+      return fetch(URL)
+        .then((resp) => resp.json())
+        .then((response) => response.routes[0].geometry.coordinates)
+        .then(this.mapNavigationRoute);
+    },
+
+    mapNavigationRoute(coords) {
+      return coords.map(([lng, lat]) => {
+        return { lat, lng };
+      });
+    },
+
+    updateRouteType(event) {
+      this.selectedRouteType = event.target.value;
+      this.triggerChange(this.localValue);
+    },
+
+    async triggerChange(markers) {
+      if (markers.length === 0) {
+        return;
+      }
+
+      this.localValue = markers;
+
+      console.log("forwarding markers:", markers);
+      const navigationRouteCoords = await this.queryNavigation(markers);
+      console.log("got navigationRouteCoords:", navigationRouteCoords);
+
+      this.$emit("input", navigationRouteCoords);
+    },
+  },
+};
+</script>

resources/js/components/fields/Polygon.vue

@@ -0,0 +1,150 @@
+<template>
+    <div @keydown.backspace="removeLastMarker">
+        <field-map
+            :bounds="bounds"
+            :center="center"
+            :field="field"
+            @click="createMarker"
+        >
+            <l-marker
+                v-for="(marker, index) in markers"
+                :lat-lng="marker"
+                :draggable="edit"
+                @dragstart="saveDraggingMarker"
+                @dragend="updateMarkerPosition"
+            >
+                <l-icon
+                    :icon-size="[24, 24]"
+                    :icon-anchor="[12, 12]"
+                    :icon-url="
+                        index === markers.length - 1
+                            ? '/images/highlighted-point_marker.svg'
+                            : '/images/point_marker.svg'
+                    "
+                />
+            </l-marker>
+            <l-polygon :lat-lngs="value" :visible="true" />
+        </field-map>
+
+        <l-control position="bottomleft" v-if="edit" class="block my-2">
+            <button
+                @click="removeLastMarker"
+                class="btn btn-default btn-primary"
+            >
+                Slett forrige
+            </button>
+            <button
+                @click="removeAllMarkers"
+                class="btn btn-default btn-primary"
+            >
+                Slett alle
+            </button>
+        </l-control>
+    </div>
+</template>
+
+<script>
+import { LMarker, LIcon, LPolygon, LControl } from "vue2-leaflet";
+
+export default {
+    props: {
+        value: {
+            type: Object,
+            default: null,
+        },
+        field: {
+            type: Object,
+            required: true,
+        },
+        edit: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    data() {
+        return {
+            startBounds: undefined,
+            markerBeingDragged: undefined,
+            lastMarkerAddedTime: 0,
+        };
+    },
+
+    computed: {
+        markers() {
+            if (!this.value[0]) {
+                return [];
+            }
+
+            return this.value;
+        },
+
+        center() {
+            if (!this.markers.length) {
+                return {
+                    lat: this.field.map.center.latitude,
+                    lng: this.field.map.center.longitude,
+                };
+            }
+
+            return this.bounds.getCenter();
+        },
+
+        bounds() {
+            if (this.startBounds !== undefined) {
+                return this.startBounds;
+            }
+
+            if (!this.markers.length) {
+                return null;
+            }
+
+            return (this.startBounds = new L.LatLngBounds(this.markers));
+        },
+    },
+
+    methods: {
+        triggerChange(evt) {
+            this.$emit("input", this.markers);
+        },
+        saveDraggingMarker(evt) {
+            this.markerBeingDragged = evt.target._latlng;
+        },
+        removeLastMarker(event) {
+            this.markers.splice(-1, 1);
+            this.triggerChange();
+            event.preventDefault();
+        },
+        removeAllMarkers(event) {
+            this.value = [];
+            this.triggerChange();
+            event.preventDefault();
+        },
+        createMarker(evt) {
+            if (new Date().getTime() - this.lastMarkerAddedTime < 20) {
+                // Don't want to double register clicks from dragend, if within 20 ms return
+                return;
+            }
+            this.markers.push(evt.latlng);
+            this.triggerChange();
+        },
+        updateMarkerPosition(evt) {
+            const newMarker = evt.target._latlng;
+            const { lat, lng } = this.markerBeingDragged;
+
+            const markerIndex = this.value.findIndex(
+                (marker) => marker.lat === lat && marker.lng === lng
+            );
+            this.value.splice(markerIndex, 1, newMarker);
+            this.lastMarkerAddedTime = new Date().getTime();
+        },
+    },
+
+    components: {
+        LMarker,
+        LIcon,
+        LPolygon,
+	LControl,
+    },
+};
+</script>

resources/js/components/fields/Polyline.vue

@@ -1,14 +1,40 @@
 <template>
     <div @keydown.backspace="removeLastMarker">
-        <field-map :bounds="bounds" :center="center" :field="field" @click="createMarker">
-            <l-marker v-for="marker in markers" :lat-lng="marker" :draggable="edit" @dragend="triggerChange" />
-            <l-polyline :lat-lngs="value" :visible="true" />
+        <field-map
+            :bounds="bounds"
+            :center="center"
+            :field="field"
+            @click="createMarker"
+        >
+            <l-marker
+                v-for="(marker, index) in markers"
+                :lat-lng="marker"
+                :draggable="edit"
+                @dragstart="saveDraggingMarker"
+                @dragend="updateMarkerPosition"
+            />
+            <l-polyline :lat-lngs="value" :visible="true" :fill="false" />
         </field-map>
+
+        <l-control position="bottomleft" v-if="edit" class="block my-2">
+            <button
+                @click="removeLastMarker"
+                class="btn btn-default btn-primary"
+            >
+                Slett forrige
+            </button>
+            <button
+                @click="removeAllMarkers"
+                class="btn btn-default btn-primary"
+            >
+                Slett alle
+            </button>
+        </l-control>
     </div>
 </template>
 
 <script>
-import {LMarker, LPolyline} from 'vue2-leaflet'
+import { LMarker, LIcon, LPolyline } from "vue2-leaflet";
 
 export default {
     props: {
@@ -23,13 +49,15 @@ export default {
         edit: {
             type: Boolean,
             default: false,
-        }
+        },
     },
 
     data() {
         return {
             startBounds: undefined,
-        }
+            markerBeingDragged: undefined,
+            lastMarkerAddedTime: 0,
+        };
     },
 
     computed: {
@@ -61,27 +89,51 @@ export default {
                 return null;
             }
 
-            return this.startBounds = new L.LatLngBounds(this.markers);
+            return (this.startBounds = new L.LatLngBounds(this.markers));
         },
     },
 
     methods: {
-        triggerChange() {
-            this.$emit('input', this.markers);
+        triggerChange(evt) {
+            this.$emit("input", this.markers);
         },
-        removeLastMarker() {
-            this.markers.splice(-1,1);
+        saveDraggingMarker(evt) {
+            this.markerBeingDragged = evt.target._latlng;
+        },
+        removeLastMarker(event) {
+            this.markers.splice(-1, 1);
             this.triggerChange();
+            event.preventDefault();
+        },
+        removeAllMarkers(event) {
+            this.value = [];
+            this.triggerChange();
+            event.preventDefault();
         },
         createMarker(evt) {
+            if (new Date().getTime() - this.lastMarkerAddedTime < 20) {
+                // Don't want to double register clicks from dragend, if within 20 ms return
+                return;
+            }
             this.markers.push(evt.latlng);
             this.triggerChange();
-        }
+        },
+        updateMarkerPosition(evt) {
+            const newMarker = evt.target._latlng;
+            const { lat, lng } = this.markerBeingDragged;
+
+            const markerIndex = this.value.findIndex(
+                (marker) => marker.lat === lat && marker.lng === lng
+            );
+            this.value.splice(markerIndex, 1, newMarker);
+            this.lastMarkerAddedTime = new Date().getTime();
+        },
     },
 
     components: {
         LMarker,
+        LIcon,
         LPolyline,
-    }
-}
+    },
+};
 </script>

resources/js/field.js

@@ -1,12 +1,21 @@
 Nova.booting((Vue, router) => {
-    Vue.component('index-nova-map-fields', require('./components/IndexField'));
-    Vue.component('detail-nova-map-fields', require('./components/DetailField'));
-    Vue.component('form-nova-map-fields', require('./components/FormField'));
+    Vue.component("index-nova-map-fields", require("./components/IndexField"));
+    Vue.component(
+        "detail-nova-map-fields",
+        require("./components/DetailField")
+    );
+    Vue.component("form-nova-map-fields", require("./components/FormField"));
 
-    Vue.component('field-map', require('./components/FieldMap'));
-    Vue.component('field-marker', require('./components/fields/Marker'));
-    Vue.component('field-polyline', require('./components/fields/Polyline'));
+    Vue.component("field-map", require("./components/FieldMap"));
+    Vue.component("field-marker", require("./components/fields/Marker"));
+    Vue.component("field-polyline", require("./components/fields/Polyline"));
+    Vue.component("field-polygon", require("./components/fields/Polygon"));
+    Vue.component(
+        "field-navigation-route",
+        require("./components/fields/NavigationRoute")
+    );
 
     // Config leaflet images to load images from CDN
-    L.Icon.Default.imagePath = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/';
-})
+    L.Icon.Default.imagePath =
+        "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/";
+});

src/MapField.php

@@ -31,7 +31,7 @@ abstract class MapField extends Field
      */
     public function __construct($name, $attribute = null, $resolveCallback = null)
     {
-        $this->setHeight('250px');
+        $this->setHeight('400px');
         $this->setCenter(0, 0);
         $this->setZoom(13);
 

src/NavigationRoute.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace Lassehaslev\NovaMapFields;
+
+class NavigationRoute extends MapField
+{
+    /**
+     * Create a new field.
+     * And set default properties.
+     *
+     * @param string      $name
+     * @param string|null $attribute
+     * @param mixed|null  $resolveCallback
+     */
+    public function __construct($name, $attribute = null, $resolveCallback = null)
+    {
+        $this->help('Click on the map to create a new point. Drag a marker to change the point. When the map is selected, you can press [backspace] to remove markers.');
+
+        parent::__construct($name, $attribute = null, $resolveCallback);
+    }
+
+    /**
+     * Resolve the attribute before sending to frontend.
+     *
+     * @param mixed      $resource
+     * @param mixed|null $attribute
+     *
+     * @return array
+     */
+    public function resolveAttribute($resource, $attribute = null)
+    {
+        $value = $resource->{$attribute};
+
+        if (is_array($value)) {
+            return $value;
+        }
+
+        return json_decode($value);
+    }
+}

src/Polygon.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace Lassehaslev\NovaMapFields;
+
+class Polygon extends MapField
+{
+    /**
+     * Create a new field.
+     * And set default properties.
+     *
+     * @param string      $name
+     * @param string|null $attribute
+     * @param mixed|null  $resolveCallback
+     */
+    public function __construct($name, $attribute = null, $resolveCallback = null)
+    {
+        $this->help('Click on the map to create a new point. Drag a marker to change the point. When the map is selected, you can press [backspace] to remove markers.');
+
+        parent::__construct($name, $attribute = null, $resolveCallback);
+    }
+
+    /**
+     * Resolve the attribute before sending to frontend.
+     *
+     * @param mixed      $resource
+     * @param mixed|null $attribute
+     *
+     * @return array
+     */
+    public function resolveAttribute($resource, $attribute = null)
+    {
+        $value = $resource->{$attribute};
+
+        if (is_array($value)) {
+            return $value;
+        }
+
+        return json_decode($value);
+    }
+}

src/Polyline.php

@@ -29,11 +29,12 @@ class Polyline extends MapField
      */
     public function resolveAttribute($resource, $attribute = null)
     {
-        return json_decode($resource->{$attribute});
+        $value = $resource->{$attribute};
 
-        return [
-            'lat' => $resource->{$this->meta['latitudeField']},
-            'lng' => $resource->{$this->meta['longitudeField']},
-        ];
+        if (is_array($value)) {
+            return $value;
+        }
+
+        return json_decode($value);
     }
 }