From c27125601561b281a2c26cd2e142aae3022745c7 Mon Sep 17 00:00:00 2001
From: "D. Berge" <dberge@aaltronav.eu>
Date: Sun, 9 May 2021 15:29:17 +0200
Subject: [PATCH] Remember map view settings.

Save the layer and overlay selection + map zoom and
position per user per project in the browser's
localStorage.

Closes #96.
---
 lib/www/client/source/src/views/Map.vue | 88 ++++++++++++++++++++++---
 1 file changed, 79 insertions(+), 9 deletions(-)

diff --git a/lib/www/client/source/src/views/Map.vue b/lib/www/client/source/src/views/Map.vue
index e2aff79..d59f296 100644
--- a/lib/www/client/source/src/views/Map.vue
+++ b/lib/www/client/source/src/views/Map.vue
@@ -343,7 +343,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['loading', 'serverEvent', 'lineName', 'serverEvent']),
+    ...mapGetters(['user', 'loading', 'serverEvent', 'lineName', 'serverEvent']),
     ...mapState({projectSchema: state => state.project.projectSchema})
   },
 
@@ -358,6 +358,12 @@ export default {
         }
       }
     },
+    
+    user (newVal, oldVal) {
+      if (newVal && (!oldVal || newVal.name != oldVal.name)) {
+        this.initView();
+      }
+    },
 
     serverEvent (event) {
       if (event.channel == "realtime" && event.payload && event.payload.new) {
@@ -371,7 +377,7 @@ export default {
           rtLayer.update(geojson);
         }
       } else if (event.channel == "event" && event.payload.schema == this.projectSchema) {
-        console.log("EVENT", event);
+        //console.log("EVENT", event);
       }
     }
   },
@@ -510,7 +516,13 @@ export default {
     },
 
     decodeURL () {
-      const parts = document.location.hash.substring(1).split(":").map(p => decodeURIComponent(p));
+      const value = localStorage.getItem(`dougal/prefs/${this.user?.name}/${this.$route.params.project}/${this.$options.name}/view`);
+      
+      if (!value) {
+        return {};
+      }
+      
+      const parts = value.split(":");
       const activeOverlays = parts.length > 1 && parts[1].split(";");
       const activeLayers = parts.length > 2 && parts[2].split(";");
       let position = parts && parts[0].split("/").map(i => Number(i));
@@ -520,6 +532,60 @@ export default {
 
       return {position, activeOverlays, activeLayers};
     },
+    
+    initView () {
+      if (!map) {
+        return;
+      }
+      
+      map.off('overlayadd', this.updateURL);
+      map.off('overlayremove', this.updateURL);
+      map.off('layeradd', this.updateURL);
+      map.off('layerremove', this.updateURL);
+    
+      const init = this.decodeURL();
+      
+      if (init.activeOverlays) {
+        Object.keys(tileMaps).forEach(k => {
+          const l = tileMaps[k];
+          if (init.activeOverlays.includes(k)) {
+            if (!map.hasLayer(l)) {
+              l.addTo(map);
+            }
+          } else {
+            map.removeLayer(l);
+          }
+        });
+      } else {
+        tileMaps["No background"].addTo(map);
+      }
+
+      if (init.activeLayers) {
+        Object.keys(layers).forEach(k => {
+          const l = layers[k];
+          if (init.activeLayers.includes(k)) {
+            if (!map.hasLayer(l)) {
+              l.addTo(map);
+            }
+          } else {
+            map.removeLayer(l);
+          }
+        });
+      } else {
+        layers.OpenSeaMap.addTo(map);
+        layers.Preplots.addTo(map);
+      }
+
+      if (init.position) {
+        map.setView(init.position.slice(1), init.position[0]);
+      }
+      
+      map.on('overlayadd', this.updateURL);
+      map.on('overlayremove', this.updateURL);
+      map.on('layeradd', this.updateURL);
+      map.on('layerremove', this.updateURL);
+
+    },
 
     ...mapActions(["api"])
 
@@ -558,25 +624,25 @@ export default {
     layers["Events (Other)"] = L.realtime(this.getEvents(i => i.properties.type != "qc"), eventsOptions());
 
     layers["Events (Other)"].on('update', function (e) {
-      console.log("Events (Other) update event", e);
+      //console.log("Events (Other) update event", e);
     });
 
     layers["Events (QC)"].on('add', function (e) {
-      console.log("Events (QC) add event", e);
+      //console.log("Events (QC) add event", e);
       e.target._src(data => e.target.update(data), err => console.error)
     });
 
     layers["Events (QC)"].on('remove', function (e) {
-      console.log("Events (QC) remove event", e);
+      //console.log("Events (QC) remove event", e);
     });
 
     layers["Events (Other)"].on('add', function (e) {
-      console.log("Events (Other) add event", e);
+      //console.log("Events (Other) add event", e);
       e.target._src(data => e.target.update(data), err => console.error)
     });
 
     layers["Events (Other)"].on('remove', function (e) {
-      console.log("Events (Other) remove event", e);
+      //console.log("Events (Other) remove event", e);
     });
 
     
@@ -632,7 +698,11 @@ export default {
     if (init.position) {
       this.refreshLayers();
     } else {
-      this.fitProjectBounds();
+      setTimeout(() => {
+        if(!this.decodeURL().position) {
+          this.fitProjectBounds();
+        }
+      }, 1000);
     }
 
 // /usr/share/icons/breeze/actions/16/zoom-fit-best.svg