diff --git a/lib/www/client/source/src/views/Map.vue b/lib/www/client/source/src/views/Map.vue index 7f7e4d2..de0f2c5 100644 --- a/lib/www/client/source/src/views/Map.vue +++ b/lib/www/client/source/src/views/Map.vue @@ -39,30 +39,30 @@
- + Last hour - + Last 6 hours - + Last 12 hours - + Last 24 hours - + Last week @@ -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); } } diff --git a/lib/www/client/source/src/views/MapLayersMixin.vue b/lib/www/client/source/src/views/MapLayersMixin.vue index 82ca2d8..e54fe3f 100644 --- a/lib/www/client/source/src/views/MapLayersMixin.vue +++ b/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;