Aaltronav/dougal-software
1
0
Fork 0
mirror of https://gitlab.com/wgp/dougal/software.git synced 2025-12-06 11:37:08 +00:00
Code Issues Packages Projects Releases Activity

Flatten vesselTrackConfig for better reactivity

Browse Source
This commit is contained in:
D. Berge
2025-08-11 02:03:33 +02:00
parent 83ecaad4fa
commit b2fa0c3d40
2 changed files with 81 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
lib/www/client/source/src/views/Map.vue
View File

@@ -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,12 +663,11 @@ export default {
},
vesselPosition: null,
vesselTrackConfig: {
lastRefresh: 0,
refreshInterval: 12, // seconds
intervalID: null,
period: "hour",
periodSettings: {
vesselTrackLastRefresh: 0,
vesselTrackRefreshInterval: 12, // seconds
vesselTrackIntervalID: null,
vesselTrackPeriod: "hour",
vesselTrackPeriodSettings: {
hour: {
title: "1 hour",
offset: 3600 * 1000,
@@ -724,7 +723,6 @@ export default {
refreshInterval: 1800,
},
},
},
heatmapValue: "total_error",
isFullscreen: false,
crosshairsPositions: [],
@@ -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()
}
vesselTrackPeriod () {
this.updateVesselIntervalTimer();
}
if (cur.lastRefresh != prev.lastRefresh) {
console.log("refresh changed");
this.render();
}
},
deep: true
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);
}
}

4
lib/www/client/source/src/views/MapLayersMixin.vue
View File

@@ -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;