From 3d7d58f955be300b5a685ef62e148de84d1cc185 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Sat, 27 Jul 2024 12:39:43 +0200
Subject: [PATCH] Fix updating formatted plan time across days (#15045)

---
 assets/js/components/ChargingPlan.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/assets/js/components/ChargingPlan.vue b/assets/js/components/ChargingPlan.vue
index 2f25ea8eb..cf7400836 100644
--- a/assets/js/components/ChargingPlan.vue
+++ b/assets/js/components/ChargingPlan.vue
@@ -9,7 +9,7 @@
 			<div class="value m-0 d-block align-items-baseline justify-content-center">
 				<button class="value-button p-0" :class="buttonColor" @click="openModal">
 					<strong v-if="enabled">
-						<span class="targetTimeLabel"> {{ targetTimeLabel() }}</span>
+						<span class="targetTimeLabel"> {{ targetTimeLabel }}</span>
 						<div
 							class="extraValue text-nowrap"
 							:class="{ 'text-warning': planTimeUnreachable }"
@@ -106,6 +106,8 @@ import collector from "../mixins/collector";
 import api from "../api";
 import { optionStep, fmtEnergy } from "../utils/energyOptions";
 
+const ONE_MINUTE = 60 * 1000;
+
 export default {
 	name: "ChargingPlan",
 	components: { LabelAndValue, ChargingPlanSettings, ChargingPlanArrival },
@@ -140,6 +142,8 @@ export default {
 			modal: null,
 			isModalVisible: false,
 			activeTab: "departure",
+			targetTimeLabel: "",
+			interval: null,
 		};
 	},
 	computed: {
@@ -203,16 +207,24 @@ export default {
 			return `loadpoints/${this.id}/`;
 		},
 	},
+	watch: {
+		effectivePlanTime() {
+			this.updateTargetTimeLabel();
+		},
+	},
 	mounted() {
 		this.modal = Modal.getOrCreateInstance(this.$refs.modal);
 		this.$refs.modal.addEventListener("show.bs.modal", this.modalVisible);
 		this.$refs.modal.addEventListener("hidden.bs.modal", this.modalInvisible);
 		this.$refs.modal.addEventListener("hide.bs.modal", this.checkUnsavedOnClose);
+		this.interval = setInterval(this.updateTargetTimeLabel, ONE_MINUTE);
+		this.updateTargetTimeLabel();
 	},
 	unmounted() {
 		this.$refs.modal?.removeEventListener("show.bs.modal", this.modalVisible);
 		this.$refs.modal?.removeEventListener("hidden.bs.modal", this.modalInvisible);
 		this.$refs.modal?.removeEventListener("hide.bs.modal", this.checkUnsavedOnClose);
+		clearInterval(this.interval);
 	},
 	methods: {
 		checkUnsavedOnClose: function () {
@@ -241,10 +253,9 @@ export default {
 			}
 			this.modal.show();
 		},
-		// not computed because it needs to update over time
-		targetTimeLabel: function () {
+		updateTargetTimeLabel: function () {
 			const targetDate = new Date(this.effectivePlanTime);
-			return this.fmtAbsoluteDate(targetDate);
+			this.targetTimeLabel = this.fmtAbsoluteDate(targetDate);
 		},
 		showDeatureTab: function () {
 			this.activeTab = "departure";