From 971ff9a580cabcd79de170d456de360ef83ae2a7 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Wed, 16 Oct 2024 14:31:26 +0200
Subject: [PATCH] UI: battery hold and grid charge icons (#16650)

---
 assets/js/components/BatterySettingsModal.vue |  2 +-
 .../Energyflow/BatteryIcon.story.vue          | 17 +++++++++++-----
 .../js/components/Energyflow/BatteryIcon.vue  | 14 ++++++++++++-
 .../js/components/Energyflow/Energyflow.vue   | 20 +++++++++++++++----
 .../components/Energyflow/EnergyflowEntry.vue |  7 +++----
 .../components/Energyflow/Visualization.vue   | 18 ++++++++++++++++-
 6 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/assets/js/components/BatterySettingsModal.vue b/assets/js/components/BatterySettingsModal.vue
index 526d91ca2..ba8c2d53b 100644
--- a/assets/js/components/BatterySettingsModal.vue
+++ b/assets/js/components/BatterySettingsModal.vue
@@ -362,7 +362,7 @@ export default {
 			}
 			return this.battery
 				.filter(({ capacity }) => capacity > 0)
-				.map(({ soc, capacity }) => {
+				.map(({ soc = 0, capacity }) => {
 					const multipleBatteries = this.battery.length > 1;
 					const energy = this.fmtWh(
 						(capacity / 100) * soc * 1e3,
diff --git a/assets/js/components/Energyflow/BatteryIcon.story.vue b/assets/js/components/Energyflow/BatteryIcon.story.vue
index ccd2186a8..3dcc2367c 100644
--- a/assets/js/components/Energyflow/BatteryIcon.story.vue
+++ b/assets/js/components/Energyflow/BatteryIcon.story.vue
@@ -4,10 +4,17 @@ import BatteryIcon from "./BatteryIcon.vue";
 
 <template>
 	<Story :layout="{ type: 'grid', width: 150 }">
-		<Variant title="empty"> <BatteryIcon :soc="10" /> </Variant>
-		<Variant title="quarter"> <BatteryIcon :soc="30" /> </Variant>
-		<Variant title="half"> <BatteryIcon :soc="50" /> </Variant>
-		<Variant title="three quarter"> <BatteryIcon :soc="70" /> </Variant>
-		<Variant title="full"> <BatteryIcon :soc="90" /> </Variant>
+		<Variant title="0%"> <BatteryIcon :soc="0" /> </Variant>
+		<Variant title="10%"> <BatteryIcon :soc="10" /> </Variant>
+		<Variant title="20%"> <BatteryIcon :soc="20" /> </Variant>
+		<Variant title="30%"> <BatteryIcon :soc="30" /> </Variant>
+		<Variant title="40%"> <BatteryIcon :soc="40" /> </Variant>
+		<Variant title="50%"> <BatteryIcon :soc="50" /> </Variant>
+		<Variant title="60%"> <BatteryIcon :soc="60" /> </Variant>
+		<Variant title="70%"> <BatteryIcon :soc="70" /> </Variant>
+		<Variant title="80%"> <BatteryIcon :soc="80" /> </Variant>
+		<Variant title="90%"> <BatteryIcon :soc="90" /> </Variant>
+		<Variant title="hold"> <BatteryIcon hold /> </Variant>
+		<Variant title="grid charge"> <BatteryIcon grid-charge /> </Variant>
 	</Story>
 </template>
diff --git a/assets/js/components/Energyflow/BatteryIcon.vue b/assets/js/components/Energyflow/BatteryIcon.vue
index c216399e8..e8c7650f8 100644
--- a/assets/js/components/Energyflow/BatteryIcon.vue
+++ b/assets/js/components/Energyflow/BatteryIcon.vue
@@ -5,7 +5,17 @@
 			fill="currentColor"
 			d="M35 9.996h-3v-4a2 2 0 00-2-2H18a2 2 0 00-2 2v4h-3a2 2 0 00-2 2v30a2 2 0 002 2h22a2 2 0 002-2v-30a2 2 0 00-2-2zm-15-2h8v2h-8v-2zm13 32H15v-26h18v26z"
 		/>
-		<path fill="currentColor" :d="socRect" />
+		<path
+			v-if="gridCharge"
+			fill="currentColor"
+			d="M21.956,26.739l0,8.261l4.088,0l0,-8.261l3.066,3.033l2.89,-2.859l-8,-7.913l-8,7.913l2.89,2.859l3.066,-3.033Z"
+		/>
+		<path
+			v-else-if="hold"
+			fill="currentColor"
+			d="M21.943,22.053l0,9.943l-3,0l0,-9.943l3,-0Zm7,-0l0,9.943l-3,-0l0,-9.943l3,-0Z"
+		/>
+		<path v-else fill="currentColor" :d="socRect" />
 	</svg>
 </template>
 
@@ -16,6 +26,8 @@ export default {
 	name: "BatteryIcon",
 	props: {
 		soc: { type: Number, default: 0 },
+		hold: { type: Boolean, default: false },
+		gridCharge: { type: Boolean, default: false },
 	},
 	computed: {
 		socRect() {
diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue
index 001e218ac..6fcd1660b 100644
--- a/assets/js/components/Energyflow/Energyflow.vue
+++ b/assets/js/components/Energyflow/Energyflow.vue
@@ -15,6 +15,8 @@
 				:pvExport="pvExport"
 				:batteryCharge="batteryCharge"
 				:batteryDischarge="batteryDischarge"
+				:batteryGridCharge="batteryGridChargeActive"
+				:batteryHold="batteryHold"
 				:pvProduction="pvProduction"
 				:homePower="homePower"
 				:batterySoc="batterySoc"
@@ -90,13 +92,19 @@
 							icon="battery"
 							:power="batteryDischarge"
 							:powerUnit="powerUnit"
-							:soc="batterySoc"
+							:iconProps="{
+								hold: batteryHold,
+								soc: batterySoc,
+								gridCharge: batteryGridChargeActive,
+							}"
 							:details="batterySoc"
 							:detailsFmt="batteryFmt"
 							detailsClickable
 							data-testid="energyflow-entry-batterydischarge"
 							@details-clicked="openBatterySettingsModal"
-						/>
+						>
+							<template v-if="batteryGridChargeActive" #subline> &nbsp; </template>
+						</EnergyflowEntry>
 						<EnergyflowEntry
 							:name="$t('main.energyflow.gridImport')"
 							icon="powersupply"
@@ -137,7 +145,7 @@
 								})
 							"
 							icon="vehicle"
-							:vehicleIcons="vehicleIcons"
+							:iconProps="{ names: vehicleIcons }"
 							:power="loadpointsPower"
 							:powerUnit="powerUnit"
 							:details="
@@ -157,7 +165,11 @@
 							icon="battery"
 							:power="batteryCharge"
 							:powerUnit="powerUnit"
-							:soc="batterySoc"
+							:iconProps="{
+								hold: batteryHold,
+								soc: batterySoc,
+								gridCharge: batteryGridChargeActive,
+							}"
 							:details="batterySoc"
 							:detailsFmt="batteryFmt"
 							detailsClickable
diff --git a/assets/js/components/Energyflow/EnergyflowEntry.vue b/assets/js/components/Energyflow/EnergyflowEntry.vue
index 6a033d43f..5ec1410a1 100644
--- a/assets/js/components/Energyflow/EnergyflowEntry.vue
+++ b/assets/js/components/Energyflow/EnergyflowEntry.vue
@@ -2,8 +2,8 @@
 	<div class="mb-2 entry" :class="{ 'evcc-gray': !active }">
 		<div class="d-flex justify-content-between">
 			<span class="d-flex flex-nowrap">
-				<BatteryIcon v-if="isBattery" :soc="soc" />
-				<VehicleIcon v-else-if="isVehicle" :names="vehicleIcons" />
+				<BatteryIcon v-if="isBattery" v-bind="iconProps" />
+				<VehicleIcon v-else-if="isVehicle" v-bind="iconProps" />
 				<component :is="`shopicon-regular-${icon}`" v-else></component>
 			</span>
 			<div class="d-block text-nowrap flex-grow-1 ms-3 text-truncate">
@@ -49,11 +49,10 @@ export default {
 	props: {
 		name: { type: String },
 		icon: { type: String },
-		vehicleIcons: { type: Array },
+		iconProps: { type: Object, default: () => ({}) },
 		power: { type: Number },
 		powerTooltip: { type: Array },
 		powerUnit: { type: String },
-		soc: { type: Number },
 		details: { type: Number },
 		detailsFmt: { type: Function },
 		detailsTooltip: { type: Array },
diff --git a/assets/js/components/Energyflow/Visualization.vue b/assets/js/components/Energyflow/Visualization.vue
index 26ad54189..715fd2971 100644
--- a/assets/js/components/Energyflow/Visualization.vue
+++ b/assets/js/components/Energyflow/Visualization.vue
@@ -91,7 +91,7 @@
 					<VehicleIcon :names="[lp.icon]" />
 				</LabelBar>
 				<LabelBar v-bind="labelBarProps('bottom', 'batteryCharge')">
-					<BatteryIcon :soc="batterySoc" />
+					<BatteryIcon :soc="batterySoc" :gridCharge="batteryGridCharge" />
 				</LabelBar>
 				<LabelBar v-bind="labelBarProps('bottom', 'gridExport')">
 					<shopicon-regular-powersupply></shopicon-regular-powersupply>
@@ -102,6 +102,7 @@
 			</div>
 			<div class="label-scale-name">Out</div>
 		</div>
+		<BatteryIcon hold class="battery-hold" :class="{ 'battery-hold--active': batteryHold }" />
 	</div>
 </template>
 
@@ -127,6 +128,8 @@ export default {
 		loadpoints: { type: Array, default: () => [] },
 		batteryCharge: { type: Number, default: 0 },
 		batteryDischarge: { type: Number, default: 0 },
+		batteryHold: { type: Boolean, default: false },
+		batteryGridCharge: { type: Boolean, default: false },
 		pvProduction: { type: Number, default: 0 },
 		homePower: { type: Number, default: 0 },
 		batterySoc: { type: Number, default: 0 },
@@ -303,4 +306,17 @@ html.dark .grid-import {
 .visualization--ready :deep(.label-bar-icon) {
 	transition-duration: var(--evcc-transition-very-fast), 500ms;
 }
+.battery-hold {
+	position: absolute;
+	top: 2.5rem;
+	right: -0.25rem;
+	color: var(--evcc-gray);
+	opacity: 0;
+	transition-property: opacity;
+	transition-duration: var(--evcc-transition-medium);
+	transition-timing-function: linear;
+}
+.battery-hold--active {
+	opacity: 1;
+}
 </style>