Show planned lines on map

lib/www/client/source/package-lock.json

@@ -6089,6 +6089,23 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
       "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
     },
+    "leaflet-arrowheads": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/leaflet-arrowheads/-/leaflet-arrowheads-1.2.2.tgz",
+      "integrity": "sha512-EDk/dbrIu+vPS1Y1JC8ShA6aLTkdnZ5O6yVu1548dcG6eyIt96TonklKz4OvQKEMzZrFwXJUmGqm8th+IKTltA==",
+      "requires": {
+        "leaflet": "^1.6.0",
+        "leaflet-geometryutil": "^0.9.3"
+      }
+    },
+    "leaflet-geometryutil": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/leaflet-geometryutil/-/leaflet-geometryutil-0.9.3.tgz",
+      "integrity": "sha512-Wi6YvfNx/Xu9q35AEfXpsUXmIFLen/MO+C2qimxHRnjyeyOxBhdcZa6kSiReaOX0cGK7yQInqrzz0dkIqZ8Dpg==",
+      "requires": {
+        "leaflet": ">=0.7.0"
+      }
+    },
     "leaflet-realtime": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/leaflet-realtime/-/leaflet-realtime-2.2.0.tgz",

lib/www/client/source/package.json

@@ -11,6 +11,7 @@
     "core-js": "^3.6.5",
     "jwt-decode": "^3.0.0",
     "leaflet": "^1.7.1",
+    "leaflet-arrowheads": "^1.2.2",
     "leaflet-realtime": "^2.2.0",
     "leaflet.markercluster": "^1.4.1",
     "typeface-roboto": "0.0.75",

lib/www/client/source/src/views/Map.vue

@@ -27,6 +27,7 @@
 import L from 'leaflet'
 import 'leaflet-realtime'
 import 'leaflet.markercluster'
+import 'leaflet-arrowheads'
 import { mapActions, mapGetters, mapState } from 'vuex';
 import ftstamp from '@/lib/FormatTimestamp'
 import zoomFitIcon from '@/assets/zoom-fit-best.svg'
@@ -63,6 +64,7 @@ const layers = {
   "OpenSeaMap": L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
     attribution: 'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors'
   }),
+
   "Preplots": L.geoJSON(null, {
     pointToLayer (point, latlng) {
       return L.circle(latlng, {
@@ -84,6 +86,43 @@ const layers = {
       layer.bindTooltip(popup, {sticky: true});
     },
   }),
+
+  "Plan": L.geoJSON(null, {
+    arrowheads: {
+      size: "8px",
+      frequency: "200px"
+    },
+    style (feature) {
+      return {
+        color: "magenta",
+        opacity: 0.7
+      }
+    },
+    onEachFeature (feature, layer) {
+      const p = feature.properties;
+      if (feature.geometry) {
+
+        const d = p.duration;
+        const duration = `${d.days? d.days+" days ":""}${String(d.hours||0).padStart(2, "0")}:${String(d.minutes||0).padStart(2, "0")}`;
+
+        const speed = (p.length / (new Date(p.ts1) - new Date(p.ts0))) * 3.6/1.852 * 1000;
+
+        const remarks = p.remarks
+          ? "<hr/>"+p.remarks
+          : "";
+
+        const popup = `Planned sequence <b>${p.sequence}</b><br/>
+            Line <b>${p.line}</b> – ${p.name}<br/>
+            ${p.num_points} points<br/>
+            ${Math.round(p.length)} m ${p.azimuth.toFixed(1)}°<br/>
+            ${duration} @ ${speed.toFixed(1)} kt<br/>
+            <table><tr><td><b>${p.fsp}</b></td><td>@ ${ftstamp(p.ts0)}</td></tr><tr><td><b>${p.lsp}</b></td><td>@ ${ftstamp(p.ts1)}</td></tr></table>${remarks}`;
+        layer.bindPopup(popup);
+        layer.bindTooltip(popup, {sticky: true});
+      }
+    }
+  }),
+
   "Raw lines": L.geoJSON(null, {
     pointToLayer (point, latlng) {
       return L.circle(latlng, {
@@ -123,6 +162,7 @@ const layers = {
 	  }
     }
   }),
+
   "Final lines": L.geoJSON(null, {
     pointToLayer (point, latlng) {
       return L.circle(latlng, {
@@ -276,6 +316,12 @@ export default {
               : `/project/${this.$route.params.project}/gis/preplot/point?${query.toString()}`;
           }
         },
+        {
+          layer: layers.Plan,
+          url: (query = "") => {
+            return `/project/${this.$route.params.project}/plan`;
+          }
+        },
         {
           layer: layers["Raw lines"],
           url: (query = "") => {
@@ -397,10 +443,16 @@ export default {
           
           l.layer.abort = new AbortController();
           const signal = l.layer.abort.signal;
+          const init = {
+            signal,
+            headers: {
+              Accept: "application/geo+json"
+            }
+          };
           
           // Firing all refresh events asynchronously, which is OK provided
           // we don't have hundreds of layers to be refreshed.
-          this.api([url, {signal}])
+          this.api([url, init])
           .then( (layer) => {
             if (!layer) {
               return;