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

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

@@ -39,30 +39,30 @@
<div> <div>
<v-menu bottom offset-y class="pb-1"> <v-menu bottom offset-y class="pb-1">
<template v-slot:activator="{ on, attrs }"> <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> </template>
<v-list nav dense> <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-content>
<v-list-item-title>Last hour</v-list-item-title> <v-list-item-title>Last hour</v-list-item-title>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
<v-list-item @click="$set(vesselTrackConfig, 'period', 'hour6')"> <v-list-item @click="vesselTrackPeriod = 'hour6'">
<v-list-item-content> <v-list-item-content>
<v-list-item-title>Last 6 hours</v-list-item-title> <v-list-item-title>Last 6 hours</v-list-item-title>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
<v-list-item @click="$set(vesselTrackConfig, 'period', 'hour12')"> <v-list-item @click="vesselTrackPeriod = 'hour12'">
<v-list-item-content> <v-list-item-content>
<v-list-item-title>Last 12 hours</v-list-item-title> <v-list-item-title>Last 12 hours</v-list-item-title>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
<v-list-item @click="$set(vesselTrackConfig, 'period', 'day')"> <v-list-item @click="vesselTrackPeriod = 'day'">
<v-list-item-content> <v-list-item-content>
<v-list-item-title>Last 24 hours</v-list-item-title> <v-list-item-title>Last 24 hours</v-list-item-title>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
<v-list-item @click="$set(vesselTrackConfig, 'period', 'week')"> <v-list-item @click="vesselTrackPeriod = 'week'">
<v-list-item-content> <v-list-item-content>
<v-list-item-title>Last week</v-list-item-title> <v-list-item-title>Last week</v-list-item-title>
</v-list-item-content> </v-list-item-content>
@@ -663,66 +663,64 @@ export default {
}, },
vesselPosition: null, vesselPosition: null,
vesselTrackConfig: { vesselTrackLastRefresh: 0,
lastRefresh: 0, vesselTrackRefreshInterval: 12, // seconds
refreshInterval: 12, // seconds vesselTrackIntervalID: null,
intervalID: null, vesselTrackPeriod: "hour",
period: "hour", vesselTrackPeriodSettings: {
periodSettings: { hour: {
hour: { title: "1 hour",
title: "1 hour", offset: 3600 * 1000,
offset: 3600 * 1000, decimation: 1,
decimation: 1, refreshInterval: 18,
refreshInterval: 18, },
}, hour6: {
hour6: { title: "6 hours",
title: "6 hours", offset: 6 * 3600 * 1000,
offset: 6 * 3600 * 1000, decimation: 1,
decimation: 1, refreshInterval: 18,
refreshInterval: 18, },
}, hour12: {
hour12: { title: "12 hours",
title: "12 hours", offset: 12 * 3600 * 1000,
offset: 12 * 3600 * 1000, decimation: 1,
decimation: 1, refreshInterval: 18,
refreshInterval: 18, },
}, day: {
day: { title: "24 hours",
title: "24 hours", offset: 24 * 3600 * 1000,
offset: 24 * 3600 * 1000, decimation: 12,
decimation: 12, refreshInterval: 18,
refreshInterval: 18, },
}, week: {
week: { title: "7 days",
title: "7 days", offset: 7 * 24 * 3600 * 1000,
offset: 7 * 24 * 3600 * 1000, decimation: 60,
decimation: 60, refreshInterval: 60,
refreshInterval: 60, },
}, week2: {
week2: { title: "14 days",
title: "14 days", offset: 14 * 24 * 3600 * 1000,
offset: 14 * 24 * 3600 * 1000, decimation: 60,
decimation: 60, refreshInterval: 90,
refreshInterval: 90, },
}, month: {
month: { title: "30 days",
title: "30 days", offset: 30 * 24 * 3600 * 1000,
offset: 30 * 24 * 3600 * 1000, decimation: 90,
decimation: 90, refreshInterval: 120,
refreshInterval: 120, },
}, quarter: {
quarter: { title: "90 days",
title: "90 days", offset: 90 * 24 * 3600 * 1000,
offset: 90 * 24 * 3600 * 1000, decimation: 180,
decimation: 180, refreshInterval: 300,
refreshInterval: 300, },
}, year: {
year: { title: "1 year",
title: "1 year", offset: 365 * 24 * 3600 * 1000,
offset: 365 * 24 * 3600 * 1000, decimation: 1200,
decimation: 1200, refreshInterval: 1800,
refreshInterval: 1800,
},
}, },
}, },
heatmapValue: "total_error", heatmapValue: "total_error",
@@ -866,22 +864,12 @@ export default {
deep: true deep: true
}, },
vesselTrackConfig: { vesselTrackPeriod () {
handler (cur, prev) { this.updateVesselIntervalTimer();
if (cur.period != prev.period) { },
console.log("period changed");
this.vesselTrackConfig = { vesselTrackLastRefresh () {
...this.vesselTrackConfig, this.render();
lastRefresh: this.currentSecond()
}
this.updateVesselIntervalTimer();
}
if (cur.lastRefresh != prev.lastRefresh) {
console.log("refresh changed");
this.render();
}
},
deep: true
}, },
lines () { lines () {
@@ -1537,18 +1525,15 @@ export default {
}, },
updateVesselIntervalTimer (refreshInterval) { updateVesselIntervalTimer (refreshInterval) {
this.vesselTrackConfig.refreshInterval = refreshInterval ?? this.vesselTrackRefreshInterval = refreshInterval ??
this.vesselTrackConfig.periodSettings[this.vesselTrackConfig.period]?.refreshInterval ?? 0; this.vesselTrackPeriodSettings[this.vesselTrackPeriod]?.refreshInterval ?? 0;
this.vesselTrackConfig.intervalID = clearInterval(this.vesselTrackConfig.intervalID); this.vesselTrackIntervalID = clearInterval(this.vesselTrackIntervalID);
if (this.vesselTrackConfig.refreshInterval) { if (this.vesselTrackRefreshInterval) {
this.vesselTrackConfig.lastRefresh = this.currentSecond(); this.vesselTrackLastRefresh = this.currentSecond();
this.vesselTrackConfig.intervalID = setInterval( () => { this.vesselTrackIntervalID = setInterval( () => {
this.vesselTrackConfig = { this.vesselTrackLastRefresh = this.currentSecond();
...this.vesselTrackConfig, }, this.vesselTrackRefreshInterval * 1000);
lastRefresh: this.currentSecond()
}
}, this.vesselTrackConfig.refreshInterval * 1000);
} }
}, },
@@ -1747,7 +1732,7 @@ export default {
beforeDestroy () { beforeDestroy () {
this.unregisterNotificationHandlers(); 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 = {}) { 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 ts0 = new Date(ts1.valueOf() - cfg.offset);
let di = cfg.decimation; let di = cfg.decimation;
let l = 10000; let l = 10000;