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

UI: use native select for vehicle change (#14254)

Browse source
This commit is contained in:
Michael Geers 2024-06-09 11:22:38 +02:00 • committed by GitHub
parent 0c318f9716
commit a554b8afdd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 99 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

19
assets/js/components/ChargingSessionModal.vue
View file

@ -37,8 +37,9 @@
<VehicleOptions
:id="session.vehicle"
class="options"
:vehicles="vehicles"
:vehicles="vehicleOptions"
connected
:selected="session.vehicle"
@change-vehicle="changeVehicle"
@remove-vehicle="removeVehicle"
>
@ -202,6 +203,12 @@ export default {
solarEnergy: function () {
return this.chargedEnergy * (this.session.solarPercentage / 100);
},
vehicleOptions: function () {
return this.vehicles.map((v) => ({
name: v.title,
title: v.title,
}));
},
},
methods: {
openSessionDetailsModal() {
@ -217,15 +224,11 @@ export default {
formatKm: function (value) {
return `${this.fmtNumber(distanceValue(value), 0)} ${distanceUnit()}`;
},
async changeVehicle(name) {
await this.updateSession({
vehicle: this.vehicles.find((v) => v.name === name)?.title,
});
async changeVehicle(title) {
await this.updateSession({ vehicle: title });
},
async removeVehicle() {
await this.updateSession({
vehicle: null,
});
await this.updateSession({ vehicle: null });
},
async updateSession(data) {
try {

86
assets/js/components/VehicleOptions.vue
View file

@ -1,44 +1,36 @@
<template>
<div>
<div
:id="dropdownId"
role="button"
tabindex="0"
data-bs-toggle="dropdown"
aria-expanded="false"
data-testid="change-vehicle"
>
<slot />
</div>
<ul class="dropdown-menu dropdown-menu-start" :aria-labelledby="dropdownId">
<li>
<h6 class="dropdown-header">{{ $t("main.vehicle.changeVehicle") }}</h6>
</li>
<li v-for="vehicle in vehicles" :key="vehicle.name">
<button type="button" class="dropdown-item" @click="changeVehicle(vehicle.name)">
{{ vehicle.title }}
</button>
</li>
<li>
<button type="button" class="dropdown-item" @click="removeVehicle()">
<span v-if="connected">{{ $t("main.vehicle.unknown") }}</span>
<span v-else>{{ $t("main.vehicle.none") }}</span>
</button>
</li>
</ul>
</div>
<label
class="position-relative d-block"
:for="dropdownId"
role="button"
data-testid="change-vehicle"
>
<select :id="dropdownId" :value="selected" class="custom-select" @change="change">
<option
v-for="{ name, title } in vehicles"
:key="name"
:value="name"
:selected="name === selected"
>
{{ title }}
</option>
<hr />
<option value="" :selected="!selected">
{{ $t(`main.vehicle.${connected ? "unknown" : "none"}`) }}
</option>
</select>
<slot></slot>
</label>
</template>
<script>
import "@h2d2/shopicons/es/filled/options";
import Dropdown from "bootstrap/js/dist/dropdown";
export default {
name: "VehicleOptions",
props: {
connected: Boolean,
id: [String, Number],
vehicles: Array,
selected: String,
},
emits: ["change-vehicle", "remove-vehicle"],
computed: {
@ -46,21 +38,27 @@ export default {
return `vehicleOptionsDropdown${this.id}`;
},
},
mounted() {
this.dropdown = new Dropdown(document.getElementById(this.dropdownId));
},
unmounted() {
this.dropdown?.dispose();
},
methods: {
changeVehicle(name) {
this.$emit("change-vehicle", name);
},
removeVehicle() {
this.$emit("remove-vehicle");
change(event) {
const name = event.target.value;
if (name) {
this.$emit("change-vehicle", name);
} else {
this.$emit("remove-vehicle");
}
},
},
};
</script>
<style></style>
<style scoped>
.custom-select {
left: 0;
top: 0;
bottom: 0;
width: 100%;
cursor: pointer;
position: absolute;
opacity: 0;
-webkit-appearance: menulist-button;
}
</style>

5
assets/js/components/VehicleTitle.vue
View file

@ -24,7 +24,7 @@
v-bind="vehicleOptionsProps"
:id="id"
class="options"
:vehicles="otherVehicles"
:selected="vehicleName"
@change-vehicle="changeVehicle"
@remove-vehicle="removeVehicle"
>
@ -104,9 +104,6 @@ export default {
vehicleKnown() {
return !!this.vehicleName;
},
otherVehicles() {
return this.vehicles.filter((v) => v.name !== this.vehicleName);
},
showOptions() {
return this.vehicleKnown || this.vehicles.length;
},

11
tests/limits.spec.js
View file

@ -88,8 +88,9 @@ test.describe("limitEnergy", async () => {
test("survives a reload", async ({ page }) => {
await page.goto("/");
await page.getByRole("button", { name: "blauer e-Golf" }).click();
await page.getByRole("button", { name: "grüner Honda e" }).click();
await expect(page.getByTestId("vehicle-status")).toHaveText("Connected.");
await page.getByTestId("change-vehicle").locator("select").selectOption("grüner Honda e");
await expect(page.getByTestId("limit-energy-value")).toHaveText("none");
await page.getByTestId("limit-energy").getByRole("combobox").selectOption("10 kWh (+35%)");
@ -101,12 +102,10 @@ test.describe("limitEnergy", async () => {
test("should not be reset on vehicle change", async ({ page }) => {
await page.goto("/");
await page.getByRole("button", { name: "blauer e-Golf" }).click();
await page.getByRole("button", { name: "grüner Honda e" }).click();
await page.getByTestId("change-vehicle").locator("select").selectOption("grüner Honda e");
await page.getByTestId("limit-energy").getByRole("combobox").selectOption("10 kWh (+35%)");
await page.getByRole("button", { name: "grüner Honda e" }).click();
await page.getByRole("button", { name: "Guest vehicle" }).click();
await page.getByTestId("change-vehicle").locator("select").selectOption("Guest vehicle");
await expect(page.getByTestId("limit-energy-value")).toHaveText("10 kWh");
});
});

58
tests/plan.spec.js
View file

@ -39,8 +39,10 @@ test.describe("basic functionality", async () => {
const lp1 = await page.getByTestId("loadpoint").first();
// change vehicle
await lp1.getByRole("button", { name: "Guest vehicle" }).click();
await lp1.getByRole("button", { name: "Vehicle with SoC with Capacity" }).click();
await lp1
.getByTestId("change-vehicle")
.locator("select")
.selectOption("Vehicle with SoC with Capacity");
await expect(lp1.getByTestId("plan-marker")).not.toBeVisible();
await expect(lp1.getByText("Loadpoint", { exact: true })).toBeVisible();
@ -77,8 +79,7 @@ test.describe("vehicle variations", async () => {
const lp1 = await page.getByTestId("loadpoint").first();
// change vehicle
await expect(lp1.getByRole("button", { name: "Guest vehicle" })).toBeVisible();
await expect(lp1.getByTestId("vehicle-name")).toHaveText("Guest vehicle");
// kWh based limit
await lp1.getByTestId("limit-energy").getByRole("combobox").selectOption("50 kWh");
@ -95,8 +96,10 @@ test.describe("vehicle variations", async () => {
const lp1 = await page.getByTestId("loadpoint").first();
// change vehicle
await lp1.getByRole("button", { name: "Guest vehicle" }).click();
await lp1.getByRole("button", { name: "Vehicle no SoC no Capacity" }).click();
await lp1
.getByTestId("change-vehicle")
.locator("select")
.selectOption("Vehicle no SoC no Capacity");
// kWh based limit
await lp1.getByTestId("limit-energy").getByRole("combobox").selectOption("50 kWh");
@ -113,8 +116,10 @@ test.describe("vehicle variations", async () => {
const lp1 = await page.getByTestId("loadpoint").first();
// change vehicle
await lp1.getByRole("button", { name: "Guest vehicle" }).click();
await lp1.getByRole("button", { name: "Vehicle no SoC with Capacity" }).click();
await lp1
.getByTestId("change-vehicle")
.locator("select")
.selectOption("Vehicle no SoC with Capacity");
// kWh based limit
await lp1.getByTestId("limit-energy").getByRole("combobox").selectOption("50 kWh (+50%)");
@ -131,8 +136,10 @@ test.describe("vehicle variations", async () => {
const lp1 = await page.getByTestId("loadpoint").first();
// change vehicle
await lp1.getByRole("button", { name: "Guest vehicle" }).click();
await lp1.getByRole("button", { name: "Vehicle with SoC no Capacity" }).click();
await lp1
.getByTestId("change-vehicle")
.locator("select")
.selectOption("Vehicle with SoC no Capacity");
// soc based limit
await lp1.getByTestId("limit-soc").getByRole("combobox").selectOption("80%");
@ -149,8 +156,10 @@ test.describe("vehicle variations", async () => {
const lp1 = await page.getByTestId("loadpoint").first();
// change vehicle
await lp1.getByRole("button", { name: "Guest vehicle" }).click();
await lp1.getByRole("button", { name: "Vehicle with SoC with Capacity" }).click();
await lp1
.getByTestId("change-vehicle")
.locator("select")
.selectOption("Vehicle with SoC with Capacity");
// soc based limit
await lp1.getByTestId("limit-soc").getByRole("combobox").selectOption("80%");
@ -167,7 +176,7 @@ test.describe("vehicle variations", async () => {
const lp2 = await page.getByTestId("loadpoint").last();
// change vehicle
await expect(lp2.getByRole("button", { name: "Guest vehicle" })).toBeVisible();
await expect(lp2.getByTestId("vehicle-name")).toHaveText("Guest vehicle");
// soc based limit
await lp2.getByTestId("limit-soc").getByRole("combobox").selectOption("80%");
@ -184,8 +193,10 @@ test.describe("vehicle variations", async () => {
const lp2 = await page.getByTestId("loadpoint").last();
// change vehicle
await lp2.getByRole("button", { name: "Guest vehicle" }).click();
await lp2.getByRole("button", { name: "Vehicle no SoC with Capacity" }).click();
await lp2
.getByTestId("change-vehicle")
.locator("select")
.selectOption("Vehicle no SoC with Capacity");
// soc based limit
await lp2.getByTestId("limit-soc").getByRole("combobox").selectOption("80%");
@ -217,8 +228,7 @@ test.describe("preview", async () => {
const lp1 = await page.getByTestId("loadpoint").first();
// change vehicle
await lp1.getByRole("button", { name: "Guest vehicle" }).click();
await lp1.getByRole("button", { name: c.vehicle }).click();
await lp1.getByTestId("change-vehicle").locator("select").selectOption(c.vehicle);
await lp1.getByTestId("charging-plan").getByRole("button", { name: "none" }).click();
@ -258,8 +268,11 @@ test.describe("warnings", async () => {
const lp1 = await page.getByTestId("loadpoint").first();
// change vehicle
await lp1.getByRole("button", { name: "Guest vehicle" }).click();
await lp1.getByRole("button", { name: "Vehicle with SoC with massive Capacity" }).click();
await lp1
.getByTestId("change-vehicle")
.locator("select")
.selectOption("Vehicle with SoC with Massive Capacity");
await lp1.getByTestId("charging-plan").getByRole("button", { name: "none" }).click();
await page.getByTestId("plan-active").click();
@ -274,8 +287,11 @@ test.describe("warnings", async () => {
const lp1 = await page.getByTestId("loadpoint").first();
// change vehicle
await lp1.getByRole("button", { name: "Guest vehicle" }).click();
await lp1.getByRole("button", { name: "Vehicle with SoC with Capacity" }).click();
await lp1
.getByTestId("change-vehicle")
.locator("select")
.selectOption("Vehicle with SoC with Capacity");
await lp1.getByTestId("charging-plan").getByRole("button", { name: "none" }).click();
await expect(page.getByTestId("plan-entry-warnings")).not.toBeVisible();

3
tests/vehicle-error.spec.js
View file

@ -22,8 +22,7 @@ test.describe("vehicle startup error", async () => {
test("guest vehicle: normal title and no icon", async ({ page }) => {
// switch to offline vehicle
await page.getByRole("button", { name: "Broken Tesla" }).click();
await page.getByRole("button", { name: "Guest vehicle" }).click();
await page.getByTestId("change-vehicle").locator("select").selectOption("Guest vehicle");
await expect(page.getByTestId("vehicle-name")).toHaveText("Guest vehicle");
await expect(page.getByTestId("vehicle-not-reachable-icon")).not.toBeVisible();

6
tests/vehicle-settings.spec.js
View file

@ -91,8 +91,7 @@ test.describe("minSoc and limitSoc", async () => {
await page.goto("/");
// switch to offline vehicle
await page.getByRole("button", { name: "blauer e-Golf" }).click();
await page.getByRole("button", { name: "grüner Honda e" }).click();
await page.getByTestId("change-vehicle").locator("select").selectOption("grüner Honda e");
await page.getByTestId("charging-plan").getByRole("button", { name: "none" }).click();
await page.getByRole("link", { name: "Arrival" }).click();
@ -104,8 +103,7 @@ test.describe("minSoc and limitSoc", async () => {
await page.goto("/");
// switch to offline vehicle
await page.getByRole("button", { name: "blauer e-Golf" }).click();
await page.getByRole("button", { name: "Guest vehicle" }).click();
await page.getByTestId("change-vehicle").locator("select").selectOption("Guest vehicle");
await page.getByTestId("charging-plan").getByRole("button", { name: "none" }).click();
await page.getByRole("link", { name: "Arrival" }).click();