Stefan/evcc-io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: Loadpoint settings: display kW next to min/max current (#22843)

Browse source 
Co-authored-by: Michael Geers <michael@geers.tv>
This commit is contained in:
Maschga 2025-08-08 15:17:53 +02:00 • committed by GitHub
parent 87b5f33830
commit c4407c290d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 38 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

60
assets/js/components/Loadpoints/SettingsModal.vue
View file

@ -67,8 +67,8 @@
$t(
`main.loadpointSettings.phasesConfigured.phases_${phases}_hint`,
{
min: minPowerPhases(phases),
max: maxPowerPhases(phases),
min: fmtPhasePower(minCurrent, phases),
max: fmtPhasePower(maxCurrent, phases),
}
)
}}
@ -82,11 +82,11 @@
<label :for="formId('maxcurrent')" class="col-sm-4 col-form-label pt-0 pt-sm-2">
{{ $t("main.loadpointSettings.maxCurrent.label") }}
</label>
<div class="col-sm-8 pe-0 d-flex align-items-center">
<div class="col-sm-8 col-lg-4 pe-0 d-flex align-items-center">
<select
:id="formId('maxcurrent')"
v-model.number="selectedMaxCurrent"
class="form-select form-select-sm w-50"
class="form-select form-select-sm"
@change="changeMaxCurrent"
>
<option
@ -97,7 +97,6 @@
{{ name }}
</option>
</select>
<small class="ms-3" data-testid="max-power">~ {{ maxPower }}</small>
</div>
</div>
@ -105,11 +104,11 @@
<label :for="formId('mincurrent')" class="col-sm-4 col-form-label pt-0 pt-sm-2">
{{ $t("main.loadpointSettings.minCurrent.label") }}
</label>
<div class="col-sm-8 pe-0 d-flex align-items-center">
<div class="col-sm-8 col-lg-4 pe-0 d-flex align-items-center">
<select
:id="formId('mincurrent')"
v-model.number="selectedMinCurrent"
class="form-select form-select-sm w-50"
class="form-select form-select-sm"
@change="changeMinCurrent"
>
<option
@ -120,7 +119,6 @@
{{ name }}
</option>
</select>
<small class="ms-3" data-testid="min-power">~ {{ minPower }}</small>
</div>
</div>
</div>
@ -213,39 +211,29 @@ export default defineComponent({
batteryBoostProps() {
return this.collectProps(SettingsBatteryBoost);
},
maxPower() {
if (this.chargerPhases1p3p) {
if (this.phasesConfigured === AUTO) {
return this.maxPowerPhases(THREE_PHASES);
}
if ([THREE_PHASES, ONE_PHASE].includes(this.phasesConfigured)) {
return this.maxPowerPhases(this.phasesConfigured);
}
maxPhases(): number {
if (this.chargerPhases1p3p && this.phasesConfigured === AUTO) {
return THREE_PHASES;
}
return this.fmtW(this.maxCurrent * V * this.phasesConfigured);
return this.phasesConfigured;
},
minPower() {
if (this.chargerPhases1p3p) {
if (this.phasesConfigured === AUTO) {
return this.minPowerPhases(ONE_PHASE);
}
if ([THREE_PHASES, ONE_PHASE].includes(this.phasesConfigured)) {
return this.minPowerPhases(this.phasesConfigured);
}
minPhases(): number {
if (this.chargerPhases1p3p && this.phasesConfigured === AUTO) {
return ONE_PHASE;
}
return this.fmtW(this.minCurrent * V * this.phasesConfigured);
return this.phasesConfigured;
},
minCurrentOptions() {
const opt1 = [...range(Math.floor(this.maxCurrent), 1), 0.5, 0.25, 0.125];
// ensure that current value is always included
const opt2 = insertSorted(opt1, this.minCurrent);
return opt2.map((value) => this.currentOption(value, value === 6));
return opt2.map((value) => this.currentOption(value, value === 6, this.minPhases));
},
maxCurrentOptions() {
const opt1 = range(MAX_CURRENT, Math.ceil(this.minCurrent));
// ensure that current value is always included
const opt2 = insertSorted(opt1, this.maxCurrent);
return opt2.map((value) => this.currentOption(value, value === 16));
return opt2.map((value) => this.currentOption(value, value === 16, this.maxPhases));
},
loadpointId() {
@ -264,11 +252,8 @@ export default defineComponent({
},
},
methods: {
maxPowerPhases(phases: PHASES) {
return this.fmtW(this.maxCurrent * V * phases);
},
minPowerPhases(phases: PHASES) {
return this.fmtW(this.minCurrent * V * phases);
fmtPhasePower(current: number, phases: PHASES) {
return this.fmtW(V * current * phases);
},
formId(name: string) {
return `loadpoint_${this.id}_${name}`;
@ -282,12 +267,13 @@ export default defineComponent({
changePhasesConfigured() {
this.$emit("phasesconfigured-updated", this.selectedPhases);
},
currentOption(value: number, isDefault: boolean) {
let name = `${this.fmtNumber(value, value <= 1 ? undefined : 0)} A`;
currentOption(current: number, isDefault: boolean, phases: number) {
const kw = this.fmtPhasePower(current, phases);
let name = `${this.fmtNumber(current, current <= 1 ? undefined : 0)} A (${kw})`;
if (isDefault) {
name += ` (${this.$t("main.loadpointSettings.default")})`;
name += ` [${this.$t("main.loadpointSettings.default")}]`;
}
return { value, name };
return { value: current, name };
},
modalVisible() {
this.isModalVisible = true;

11
tests/basics.spec.ts
View file

@ -69,16 +69,19 @@ test.describe("session info", async () => {
test.describe("loadpoint settings", async () => {
test("phase selection", async ({ page }) => {
const minCurrentSelected = page.getByLabel("Min. current").locator("option:checked");
const maxCurrentSelected = page.getByLabel("Max. current").locator("option:checked");
await page.getByTestId("loadpoint-settings-button").nth(1).click();
await expect(page.getByLabel("auto-switching")).not.toBeVisible();
await expect(page.getByLabel("3 phase")).toBeChecked();
await expect(page.getByLabel("1 phase")).not.toBeChecked();
await expect(page.getByText("~ 11.0 kW")).toBeVisible();
await expect(page.getByText("~ 4.1 kW")).toBeVisible();
await expect(maxCurrentSelected).toHaveText("16 A (11.0 kW) [default]");
await expect(minCurrentSelected).toHaveText("6 A (4.1 kW) [default]");
await page.getByLabel("1 phase").click();
await expect(page.getByText("~ 3.7 kW")).toBeVisible();
await expect(page.getByText("~ 1.4 kW")).toBeVisible();
await expect(maxCurrentSelected).toHaveText("16 A (3.7 kW) [default]");
await expect(minCurrentSelected).toHaveText("6 A (1.4 kW) [default]");
});
});

16
tests/currents.spec.ts
View file

@ -22,22 +22,22 @@ test.describe("currents", async () => {
await expectModalVisible(modal);
const minCurrent = modal.getByLabel("Min. current");
const minCurrentSelected = minCurrent.locator("option:checked");
const maxCurrent = modal.getByLabel("Max. current");
const minPower = modal.getByTestId("min-power");
const maxPower = modal.getByTestId("max-power");
const maxCurrentSelected = maxCurrent.locator("option:checked");
// initial values
await expect(maxCurrent).toHaveValue("16");
await expect(maxPower).toContainText("~ 11.0 kW");
await expect(maxCurrentSelected).toHaveText("16 A (11.0 kW) [default]");
await expect(minCurrent).toHaveValue("6");
await expect(minPower).toContainText("~ 4.1 kW");
await expect(minCurrentSelected).toHaveText("6 A (4.1 kW) [default]");
// change min current
await minCurrent.selectOption("0.125 A");
await expect(minPower).toContainText("~ 0.1 kW");
await minCurrent.selectOption("0.125 A (0.1 kW)");
await expect(minCurrentSelected).toHaveText("0.125 A (0.1 kW)");
// change max current
await maxCurrent.selectOption("32 A");
await expect(maxPower).toContainText("~ 22.1 kW");
await maxCurrent.selectOption("32 A (22.1 kW)");
await expect(maxCurrentSelected).toHaveText("32 A (22.1 kW)");
});
});