Status UI: update tooltips with durations (evcc-io#16664)

StefanSchoof · Oct 16, 2024 · 730ad8f · 730ad8f
1 parent c89bfcc
commit 730ad8f
Showing 1 changed file with 41 additions and 4 deletions.
diff --git a/assets/js/components/VehicleStatus.vue b/assets/js/components/VehicleStatus.vue
@@ -253,6 +253,10 @@ export default {
 			awaitingAuthorizationTooltip: null,
 			disconnectRequiredTooltip: null,
 			batteryBoostTooltip: null,
+			interval: null,
+			planProjectedEndDuration: null,
+			smartCostNextStartDuration: null,
+			planProjectedStartDuration: null,
 		};
 	},
 	mounted() {
@@ -267,8 +271,14 @@ export default {
 		this.updateVehicleLimitTooltip();
 		this.updateAwaitingAuthorizationTooltip();
 		this.updateDisconnectRequiredTooltip();
+		this.updateDurations();
+
+		this.interval = setInterval(this.updateDurations, 1000 * 60);
 		this.updateBatteryBoostTooltip();
 	},
+	beforeUnmount() {
+		clearInterval(this.interval);
+	},
 	watch: {
 		planActiveTooltipContent() {
 			this.$nextTick(this.updatePlanActiveTooltip);
@@ -306,6 +316,15 @@ export default {
 		batteryBoostTooltipContent() {
 			this.$nextTick(this.updateBatteryBoostTooltip);
 		},
+		planProjectedStart() {
+			this.updateDurations();
+		},
+		planProjectedEnd() {
+			this.updateDurations();
+		},
+		smartCostNextStart() {
+			this.updateDurations();
+		},
 	},
 	computed: {
 		phaseTimerActive() {
@@ -428,8 +447,9 @@ export default {
 			if (!this.planStartVisible) {
 				return "";
 			}
-			const duration = this.fmtDurationToTime(new Date(this.planProjectedStart));
-			return this.$t("main.vehicleStatus.targetChargePlanned", { duration });
+			return this.$t("main.vehicleStatus.targetChargePlanned", {
+				duration: this.planProjectedStartDuration,
+			});
 		},
 		planActiveVisible() {
 			return this.planProjectedEnd && this.planActive && !this.chargingPlanDisabled;
@@ -447,7 +467,7 @@ export default {
 				});
 			}
 			return this.$t("main.vehicleStatus.targetChargeActive", {
-				duration: this.fmtDurationToTime(new Date(this.planProjectedEnd)),
+				duration: this.planProjectedEndDuration,
 			});
 		},
 		smartCostVisible() {
@@ -463,7 +483,7 @@ export default {
 			}
 			if (this.smartCostNextStart) {
 				return this.$t(`${prefix}EnergyNextStart`, {
-					duration: this.fmtDurationToTime(new Date(this.smartCostNextStart)),
+					duration: this.smartCostNextStartDuration,
 				});
 			}
 			return this.$t(`${prefix}EnergySet`);
@@ -541,6 +561,23 @@ export default {
 		},
 	},
 	methods: {
+		updateDurations() {
+			if (this.planProjectedStart) {
+				this.planProjectedStartDuration = this.fmtDurationToTime(
+					new Date(this.planProjectedStart)
+				);
+			}
+			if (this.planProjectedEnd) {
+				this.planProjectedEndDuration = this.fmtDurationToTime(
+					new Date(this.planProjectedEnd)
+				);
+			}
+			if (this.smartCostNextStart) {
+				this.smartCostNextStartDuration = this.fmtDurationToTime(
+					new Date(this.smartCostNextStart)
+				);
+			}
+		},
 		openLoadpointSettings() {
 			this.$emit("open-loadpoint-settings");
 		},