From 2319e0d7ae0ea3f12f76f4f7e03c92dfdc464c7e Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Sat, 19 Apr 2025 08:36:25 +0200
Subject: [PATCH] UI: add finish time (#20706)

---
 assets/js/components/Loadpoints/SessionInfo.vue | 13 +++++++++++++
 assets/js/mixins/formatter.ts                   |  6 ++++++
 i18n/de.toml                                    |  1 +
 i18n/en.toml                                    |  1 +
 4 files changed, 21 insertions(+)

diff --git a/assets/js/components/Loadpoints/SessionInfo.vue b/assets/js/components/Loadpoints/SessionInfo.vue
index 526be4716..22ecb62d9 100644
--- a/assets/js/components/Loadpoints/SessionInfo.vue
+++ b/assets/js/components/Loadpoints/SessionInfo.vue
@@ -64,6 +64,11 @@ export default {
 					value: this.fmtDuration(this.chargeRemainingDurationInterpolated),
 					available: this.chargeRemainingDurationInterpolated > 0,
 				},
+				{
+					key: "finished",
+					value: this.fmtHourMinute(this.finishTime),
+					available: this.chargeRemainingDurationInterpolated > 0,
+				},
 				{
 					key: "duration",
 					value: this.fmtDuration(this.chargeDurationInterpolated),
@@ -119,6 +124,14 @@ export default {
 		showSm() {
 			return this.valueSm !== undefined;
 		},
+		finishTime() {
+			const remainingSeconds = this.chargeRemainingDurationInterpolated;
+			if (remainingSeconds > 0) {
+				const now = new Date();
+				return new Date(now.getTime() + remainingSeconds * 1000);
+			}
+			return undefined;
+		},
 		solarFormatted() {
 			return this.fmtPercentage(this.sessionSolarPercentage, 1);
 		},
diff --git a/assets/js/mixins/formatter.ts b/assets/js/mixins/formatter.ts
index 3a5cd98ea..8b39150fc 100644
--- a/assets/js/mixins/formatter.ts
+++ b/assets/js/mixins/formatter.ts
@@ -201,6 +201,12 @@ export default defineComponent({
 
 			return `${weekday} ${hour}`.trim();
 		},
+		fmtHourMinute(date: Date) {
+			return new Intl.DateTimeFormat(this.$i18n?.locale, {
+				hour: "numeric",
+				minute: "numeric",
+			}).format(date);
+		},
 		fmtFullDateTime(date: Date, short: boolean) {
 			return new Intl.DateTimeFormat(this.$i18n?.locale, {
 				weekday: short ? undefined : "short",
diff --git a/i18n/de.toml b/i18n/de.toml
index b4764812b..b267619e5 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -614,6 +614,7 @@ charged = "Geladen"
 co2 = "⌀ CO₂"
 duration = "Ladedauer"
 fallbackName = "Ladepunkt"
+finished = "Ladeende"
 power = "Leistung"
 price = "Kosten"
 remaining = "Restzeit"
diff --git a/i18n/en.toml b/i18n/en.toml
index 363f0c6d3..036574e4c 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -613,6 +613,7 @@ charged = "Charged"
 co2 = "⌀ CO₂"
 duration = "Duration"
 fallbackName = "Charging point"
+finished = "Finish time"
 power = "Power"
 price = "Cost"
 remaining = "Remaining"