UI: add finish time (#20706)

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);
 		},

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",

i18n/de.toml

@@ -614,6 +614,7 @@ charged = "Geladen"
 co2 = "⌀ CO₂"
 duration = "Ladedauer"
 fallbackName = "Ladepunkt"
+finished = "Ladeende"
 power = "Leistung"
 price = "Kosten"
 remaining = "Restzeit"

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"