Battery UI: clarify 100% buffersoc (#29658)

assets/js/components/Battery/BatteryUsageSettings.vue

@@ -98,28 +98,23 @@
 				></shopicon-regular-lightning>
 				<span class="d-block">
 					{{ $t("batterySettings.legendTopName") }}
-					<i18n-t
-						keypath="batterySettings.legendTopSubline"
-						tag="small"
-						class="d-block"
-						scope="global"
-					>
+					<i18n-t :keypath="topSublineKeypath" tag="small" class="d-block" scope="global">
 						<template #soc>
 							<CustomSelect
 								id="batterySettingsBufferTop"
 								class="custom-select-inline"
-								:options="bufferOptions"
+								:options="legendBufferOptions"
 								:selected="selectedBufferSoc"
 								@change="changeBufferSoc"
 							>
 								<span class="text-decoration-underline">
-									{{ fmtSoc(selectedBufferSoc) }}
+									{{ topSublineValue }}
 								</span>
 							</CustomSelect>
 						</template>
 					</i18n-t>
 
-					<small class="d-block">
+					<small v-if="selectedBufferSoc < 100" class="d-block">
 						{{ $t("batterySettings.legendTopAutostart") }}
 						<CustomSelect
 							id="batterySettingsBufferStart"
@@ -265,6 +260,17 @@ export default defineComponent({
 			}
 			return options;
 		},
+		legendBufferOptions() {
+			return this.bufferOptions.map((option) => ({
+				...option,
+				name:
+					option.value === 100
+						? this.$t("batterySettings.legendTopSublineDisabledState")
+						: this.$t("batterySettings.legendTopSublineAbove", {
+								soc: this.fmtSoc(option.value),
+							}),
+			}));
+		},
 		bufferStartTop() {
 			if (!this.selectedBufferStartSoc) return 0;
 			return 100 - this.selectedBufferStartSoc;
@@ -286,6 +292,16 @@ export default defineComponent({
 		selectedBufferStartName() {
 			return this.getBufferStartName(this.selectedBufferStartSoc);
 		},
+		topSublineKeypath() {
+			return this.selectedBufferSoc < 100
+				? "batterySettings.legendTopSubline"
+				: "batterySettings.legendTopSublineDisabled";
+		},
+		topSublineValue() {
+			return this.selectedBufferSoc < 100
+				? this.fmtSoc(this.selectedBufferSoc)
+				: this.$t("batterySettings.legendTopSublineDisabledState");
+		},
 		topHeight() {
 			return 100 - (this.bufferSoc || 100);
 		},

i18n/de.json

@@ -39,6 +39,9 @@
     "legendTopAutostart": "Starte automatisch",
     "legendTopName": "Batterieunterstütztes Fahrzeugladen",
     "legendTopSubline": "wenn Hausbatterie über {soc} ist.",
+    "legendTopSublineAbove": "wenn über {soc}",
+    "legendTopSublineDisabled": "ist {soc}.",
+    "legendTopSublineDisabledState": "deaktiviert",
     "modalTitle": "Hausbatterie",
     "noBattery": "Keine Batterien konfiguriert.",
     "usageTab": "Batterienutzung"

i18n/en.json

@@ -39,6 +39,9 @@
     "legendTopAutostart": "Start automatically",
     "legendTopName": "Battery-supported vehicle charging",
     "legendTopSubline": "when home battery is above {soc}.",
+    "legendTopSublineAbove": "when above {soc}",
+    "legendTopSublineDisabled": "is {soc}.",
+    "legendTopSublineDisabledState": "disabled",
     "modalTitle": "Home Battery",
     "noBattery": "No batteries configured.",
     "usageTab": "Battery usage"

tests/battery-settings.spec.ts

@@ -28,11 +28,28 @@ test.describe("battery settings", async () => {
     await page.locator("#batterySettingsPriority").selectOption({ label: "50%" });
     await expect(page.locator("label[for=batterySettingsPriorityMiddle] span")).toHaveText("50%");
     await expect(page.locator("label[for=batterySettingsPriorityBottom] span")).toHaveText("50%");
-    await page.locator("#batterySettingsBufferTop").selectOption({ label: "80%" });
+    await page.locator("#batterySettingsBufferTop").selectOption({ label: "when above 80%" });
     await page.locator("#batterySettingsBufferStart").selectOption({ label: "when above 90%." });
     await expect(page.locator("label[for=batterySettingsBuffer] span")).toHaveText("80%");
   });
 
+  test("buffer 100% disables battery-supported charging", async ({ page }) => {
+    await page.goto("/#/battery");
+
+    const topRow = page.getByText("Battery-supported vehicle charging");
+    const bufferSoc = topRow.getByRole("combobox").filter({ hasText: "disabled" });
+
+    await expect(bufferSoc).toHaveValue("100");
+    await expect(page.getByText("Start automatically")).toBeHidden();
+
+    await bufferSoc.selectOption({ label: "when above 80%" });
+    await expect(bufferSoc).toHaveValue("80");
+    await expect(page.getByText("Start automatically")).toBeVisible();
+
+    await bufferSoc.selectOption({ label: "disabled" });
+    await expect(page.getByText("Start automatically")).toBeHidden();
+  });
+
   test("grid charging", async ({ page }) => {
     await page.goto("/#/battery");