Flatten vesselTrackConfig for better reactivity

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

@@ -39,30 +39,30 @@
           <div>
             <v-menu bottom offset-y class="pb-1">
               <template v-slot:activator="{ on, attrs }">
-                <v-icon style="margin-right: 3px;" small v-bind="attrs" v-on="on" :title="`Show lines.\nCurrently selected period: ${vesselTrackConfig.periodSettings[vesselTrackConfig.period].title}. Click to change`">mdi-vector-line</v-icon>
+                <v-icon style="margin-right: 3px;" small v-bind="attrs" v-on="on" :title="`Show lines.\nCurrently selected period: ${vesselTrackPeriodSettings[vesselTrackPeriod].title}. Click to change`">mdi-vector-line</v-icon>
               </template>
               <v-list nav dense>
-                <v-list-item @click="$set(vesselTrackConfig, 'period', 'hour')">
+                <v-list-item @click="vesselTrackPeriod = 'hour'">
                   <v-list-item-content>
                     <v-list-item-title>Last hour</v-list-item-title>
                   </v-list-item-content>
                 </v-list-item>
-                <v-list-item @click="$set(vesselTrackConfig, 'period', 'hour6')">
+                <v-list-item @click="vesselTrackPeriod = 'hour6'">
                   <v-list-item-content>
                     <v-list-item-title>Last 6 hours</v-list-item-title>
                   </v-list-item-content>
                 </v-list-item>
-                <v-list-item @click="$set(vesselTrackConfig, 'period', 'hour12')">
+                <v-list-item @click="vesselTrackPeriod = 'hour12'">
                   <v-list-item-content>
                     <v-list-item-title>Last 12 hours</v-list-item-title>
                   </v-list-item-content>
                 </v-list-item>
-                <v-list-item @click="$set(vesselTrackConfig, 'period', 'day')">
+                <v-list-item @click="vesselTrackPeriod = 'day'">
                   <v-list-item-content>
                     <v-list-item-title>Last 24 hours</v-list-item-title>
                   </v-list-item-content>
                 </v-list-item>
-                <v-list-item @click="$set(vesselTrackConfig, 'period', 'week')">
+                <v-list-item @click="vesselTrackPeriod = 'week'">
                   <v-list-item-content>
                     <v-list-item-title>Last week</v-list-item-title>
                   </v-list-item-content>
@@ -663,66 +663,64 @@ export default {
       },
 
       vesselPosition: null,
-      vesselTrackConfig: {
-        lastRefresh: 0,
-        refreshInterval: 12, // seconds
-        intervalID: null,
-        period: "hour",
-        periodSettings: {
-          hour: {
-            title: "1 hour",
-            offset: 3600 * 1000,
-            decimation: 1,
-            refreshInterval: 18,
-          },
-          hour6: {
-            title: "6 hours",
-            offset: 6 * 3600 * 1000,
-            decimation: 1,
-            refreshInterval: 18,
-          },
-          hour12: {
-            title: "12 hours",
-            offset: 12 * 3600 * 1000,
-            decimation: 1,
-            refreshInterval: 18,
-          },
-          day: {
-            title: "24 hours",
-            offset: 24 * 3600 * 1000,
-            decimation: 12,
-            refreshInterval: 18,
-          },
-          week: {
-            title: "7 days",
-            offset: 7 * 24 * 3600 * 1000,
-            decimation: 60,
-            refreshInterval: 60,
-          },
-          week2: {
-            title: "14 days",
-            offset: 14 * 24 * 3600 * 1000,
-            decimation: 60,
-            refreshInterval: 90,
-          },
-          month: {
-            title: "30 days",
-            offset: 30 * 24 * 3600 * 1000,
-            decimation: 90,
-            refreshInterval: 120,
-          },
-          quarter: {
-            title: "90 days",
-            offset: 90 * 24 * 3600 * 1000,
-            decimation: 180,
-            refreshInterval: 300,
-          },
-          year: {
-            title: "1 year",
-            offset: 365 * 24 * 3600 * 1000,
-            decimation: 1200,
-            refreshInterval: 1800,
-          },
+      vesselTrackLastRefresh: 0,
+      vesselTrackRefreshInterval: 12, // seconds
+      vesselTrackIntervalID: null,
+      vesselTrackPeriod: "hour",
+      vesselTrackPeriodSettings: {
+        hour: {
+          title: "1 hour",
+          offset: 3600 * 1000,
+          decimation: 1,
+          refreshInterval: 18,
+        },
+        hour6: {
+          title: "6 hours",
+          offset: 6 * 3600 * 1000,
+          decimation: 1,
+          refreshInterval: 18,
+        },
+        hour12: {
+          title: "12 hours",
+          offset: 12 * 3600 * 1000,
+          decimation: 1,
+          refreshInterval: 18,
+        },
+        day: {
+          title: "24 hours",
+          offset: 24 * 3600 * 1000,
+          decimation: 12,
+          refreshInterval: 18,
+        },
+        week: {
+          title: "7 days",
+          offset: 7 * 24 * 3600 * 1000,
+          decimation: 60,
+          refreshInterval: 60,
+        },
+        week2: {
+          title: "14 days",
+          offset: 14 * 24 * 3600 * 1000,
+          decimation: 60,
+          refreshInterval: 90,
+        },
+        month: {
+          title: "30 days",
+          offset: 30 * 24 * 3600 * 1000,
+          decimation: 90,
+          refreshInterval: 120,
+        },
+        quarter: {
+          title: "90 days",
+          offset: 90 * 24 * 3600 * 1000,
+          decimation: 180,
+          refreshInterval: 300,
+        },
+        year: {
+          title: "1 year",
+          offset: 365 * 24 * 3600 * 1000,
+          decimation: 1200,
+          refreshInterval: 1800,
         },
       },
       heatmapValue: "total_error",
@@ -866,22 +864,12 @@ export default {
       deep: true
     },
 
-    vesselTrackConfig: {
-      handler (cur, prev) {
-        if (cur.period != prev.period) {
-          console.log("period changed");
-          this.vesselTrackConfig = {
-            ...this.vesselTrackConfig,
-            lastRefresh: this.currentSecond()
-          }
-          this.updateVesselIntervalTimer();
-        }
-        if (cur.lastRefresh != prev.lastRefresh) {
-          console.log("refresh changed");
-          this.render();
-        }
-      },
-      deep: true
+    vesselTrackPeriod () {
+      this.updateVesselIntervalTimer();
+    },
+
+    vesselTrackLastRefresh () {
+      this.render();
     },
 
     lines () {
@@ -1537,18 +1525,15 @@ export default {
     },
 
     updateVesselIntervalTimer (refreshInterval) {
-      this.vesselTrackConfig.refreshInterval = refreshInterval ??
-        this.vesselTrackConfig.periodSettings[this.vesselTrackConfig.period]?.refreshInterval ?? 0;
+      this.vesselTrackRefreshInterval = refreshInterval ??
+        this.vesselTrackPeriodSettings[this.vesselTrackPeriod]?.refreshInterval ?? 0;
 
-      this.vesselTrackConfig.intervalID = clearInterval(this.vesselTrackConfig.intervalID);
-      if (this.vesselTrackConfig.refreshInterval) {
-        this.vesselTrackConfig.lastRefresh = this.currentSecond();
-        this.vesselTrackConfig.intervalID = setInterval( () => {
-          this.vesselTrackConfig = {
-            ...this.vesselTrackConfig,
-            lastRefresh: this.currentSecond()
-          }
-        }, this.vesselTrackConfig.refreshInterval * 1000);
+      this.vesselTrackIntervalID = clearInterval(this.vesselTrackIntervalID);
+      if (this.vesselTrackRefreshInterval) {
+        this.vesselTrackLastRefresh = this.currentSecond();
+        this.vesselTrackIntervalID = setInterval( () => {
+          this.vesselTrackLastRefresh = this.currentSecond();
+        }, this.vesselTrackRefreshInterval * 1000);
       }
     },
 
@@ -1747,7 +1732,7 @@ export default {
 
   beforeDestroy () {
     this.unregisterNotificationHandlers();
-    this.vesselTrackConfig.intervalID = this.clearInterval(this.vesselTrackConfig.intervalID);
+    this.vesselTrackIntervalID = this.clearInterval(this.vesselTrackIntervalID);
   }
 
 }

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

@@ -276,9 +276,9 @@ export default {
 
     vesselTrackLinesLayer (options = {}) {
 
-      const cfg = this.vesselTrackConfig.periodSettings[this.vesselTrackConfig.period];
+      const cfg = this.vesselTrackPeriodSettings[this.vesselTrackPeriod];
 
-      let ts1 = new Date(this.vesselTrackConfig.lastRefresh*1000);
+      let ts1 = new Date(this.vesselTrackLastRefresh*1000);
       let ts0 = new Date(ts1.valueOf() - cfg.offset);
       let di = cfg.decimation;
       let l = 10000;