UI: replace "none" with 100% for vehicle default charging limit (#32739)

assets/js/components/Vehicles/SettingsModal.vue

@@ -57,11 +57,12 @@
 					<SettingsFormRow
 						:id="fieldId(vehicle, 'limitSoc')"
 						:label="$t('main.vehicleSettings.limitSoc')"
+						:description="$t('main.vehicleSettings.limitSocDescription')"
 					>
 						<select
 							:id="fieldId(vehicle, 'limitSoc')"
 							class="form-select form-select-sm"
-							:value="vehicle.limitSoc ?? 0"
+							:value="vehicle.limitSoc || 100"
 							@change="changeLimitSoc(vehicle, $event)"
 						>
 							<option
@@ -85,7 +86,7 @@
 							@change="changeMinSoc(vehicle, $event)"
 						>
 							<option
-								v-for="opt in socOptions(vehicle)"
+								v-for="opt in socOptions(vehicle, true)"
 								:key="opt.value"
 								:value="opt.value"
 							>
@@ -171,19 +172,21 @@ export default defineComponent({
 			}
 			return vehicleHasSoc(vehicle) || vehicleNotReachable(vehicle);
 		},
-		socOptions(vehicle: Vehicle): SelectOption<number>[] {
-			// 0 = none, then 5-100 in steps of 5
+		socOptions(vehicle: Vehicle, withNone = false): SelectOption<number>[] {
+			// 5-100 in steps of 5, optionally preceded by 0 = none
 			const rangePerSoc = this.connectedLoadpoint(vehicle)?.rangePerSoc;
-			return Array.from(Array(21).keys()).map((i) => {
-				const soc = i * 5;
-				return {
-					value: soc,
-					name:
-						soc === 0
-							? this.$t("general.none")
-							: this.fmtSocOption(soc, rangePerSoc, distanceUnit()),
-				};
-			});
+			return Array.from(Array(21).keys())
+				.filter((i) => withNone || i > 0)
+				.map((i) => {
+					const soc = i * 5;
+					return {
+						value: soc,
+						name:
+							soc === 0
+								? this.$t("general.none")
+								: this.fmtSocOption(soc, rangePerSoc, distanceUnit()),
+					};
+				});
 		},
 		selectValue(event: Event): string {
 			return (event.target as HTMLSelectElement).value;

i18n/de.json

@@ -1536,6 +1536,7 @@
       "keepAsIs": "Beibehalten",
       "learnMore": "Mehr erfahren.",
       "limitSoc": "Standardlimit",
+      "limitSocDescription": "Wird beim Anschließen des Fahrzeugs angewendet.",
       "menu": "Fahrzeuge",
       "minSoc": "Minimale Ladung",
       "minSocDescription": "Wird im PV-Modus schnell bis zu diesem Wert geladen.",

i18n/en.json

@@ -1536,6 +1536,7 @@
       "keepAsIs": "Keep as is",
       "learnMore": "Learn more.",
       "limitSoc": "Default limit",
+      "limitSocDescription": "Applied when the vehicle is connected.",
       "menu": "Vehicles",
       "minSoc": "Minimum charge",
       "minSocDescription": "Fast charge to this level in solar mode.",

tests/vehicle-settings.spec.ts

@@ -145,9 +145,12 @@ test.describe("limitSoc", async () => {
     await page.goto("/");
 
     const modal = await openVehicleSettings(page);
-    await vehicleRow(modal, "blauer e-Golf")
-      .getByRole("combobox", { name: "Default limit" })
-      .selectOption("80");
+    const limitSoc = vehicleRow(modal, "blauer e-Golf").getByRole("combobox", {
+      name: "Default limit",
+    });
+    await expect(limitSoc).toHaveValue("100");
+    await expect(limitSoc.getByRole("option", { name: "none" })).toHaveCount(0);
+    await limitSoc.selectOption("80");
     await closeModal(page);
     await expect(page.getByTestId("limit-soc-value")).toContainText("80%");
     await page.waitForLoadState("networkidle");