From 13c8f6337ec68a65fd98238b4a4f47723d80eb67 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Thu, 7 Dec 2023 18:07:27 +0100
Subject: [PATCH] Plan: add power to preview (#11038)

---
 assets/js/components/ChargingPlanPreview.vue  | 17 ++++++++++++++++-
 assets/js/components/ChargingPlanSettings.vue | 16 +++++++++++-----
 i18n/de.toml                                  |  1 +
 i18n/en.toml                                  |  1 +
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/assets/js/components/ChargingPlanPreview.vue b/assets/js/components/ChargingPlanPreview.vue
index 0b9c9b433..f8023fd3f 100644
--- a/assets/js/components/ChargingPlanPreview.vue
+++ b/assets/js/components/ChargingPlanPreview.vue
@@ -3,7 +3,12 @@
 		<div class="justify-content-between mb-2 d-flex justify-content-between">
 			<div class="text-start">
 				<div class="label">{{ $t("main.targetChargePlan.chargeDuration") }}</div>
-				<div class="value text-primary">{{ planDuration }}</div>
+				<div class="value text-primary d-sm-flex align-items-baseline">
+					<div>{{ planDuration }}</div>
+					<div v-if="fmtPower" class="extraValue text-nowrap ms-sm-1">
+						{{ fmtPower }}
+					</div>
+				</div>
 			</div>
 			<div v-if="hasTariff" class="text-end">
 				<div class="label">
@@ -45,6 +50,12 @@ export default {
 		planDuration() {
 			return this.fmtDuration(this.duration);
 		},
+		fmtPower() {
+			if (this.duration > 0 && this.power > 0) {
+				return `@ ${this.fmtKw(this.power)}`;
+			}
+			return null;
+		},
 		isCo2() {
 			return this.smartCostType === CO2_TYPE;
 		},
@@ -145,6 +156,10 @@ export default {
 	font-size: 18px;
 	font-weight: bold;
 }
+.extraValue {
+	color: var(--evcc-gray);
+	font-size: 14px;
+}
 .label {
 	color: var(--evcc-gray);
 	text-transform: uppercase;
diff --git a/assets/js/components/ChargingPlanSettings.vue b/assets/js/components/ChargingPlanSettings.vue
index 624223dc1..14911a80f 100644
--- a/assets/js/components/ChargingPlanSettings.vue
+++ b/assets/js/components/ChargingPlanSettings.vue
@@ -28,7 +28,9 @@
 		<div v-if="plans.length > 0">
 			<ChargingPlanWarnings v-bind="chargingPlanWarningsProps" class="mb-4" />
 			<hr />
-			<h5>PREVIEW</h5>
+			<h5>
+				<div class="inner">{{ $t("main.targetCharge.preview") }}</div>
+			</h5>
 			<ChargingPlanPreview
 				v-if="chargingPlanPreviewProps"
 				v-bind="chargingPlanPreviewProps"
@@ -164,13 +166,17 @@ export default {
 <style scoped>
 h5 {
 	position: relative;
-	display: inline-block;
-	background-color: var(--evcc-box);
+	display: flex;
 	top: -25px;
-	left: calc(50% - 50px);
 	padding: 0 0.5rem;
+	justify-content: center;
+}
+h5 .inner {
+	padding: 0 0.5rem;
+	background-color: var(--evcc-box);
 	font-weight: normal;
 	color: var(--evcc-gray);
-	margin-bottom: -4rem;
+	text-transform: uppercase;
+	text-align: center;
 }
 </style>
diff --git a/i18n/de.toml b/i18n/de.toml
index d12c24a57..4b58068cc 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -252,6 +252,7 @@ planDuration = "Ladedauer"
 planPeriodLabel = "Zeitraum"
 planPeriodValue = "{start} bis {end}"
 planUnknown = "noch unbekannt"
+preview = "Vorschau"
 priceLimit = "Preisgrenze von {price}"
 remove = "Entfernen"
 setPlan = "Ladeplan festlegen"
diff --git a/i18n/en.toml b/i18n/en.toml
index 0801e0242..de27c766a 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -253,6 +253,7 @@ planDuration = "Charging time"
 planPeriodLabel = "Period"
 planPeriodValue = "{start} to {end}"
 planUnknown = "not known yet"
+preview = "Preview"
 priceLimit = "price limit of {price}"
 remove = "Remove"
 setPlan = "Set a charging plan"