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

Vehicle settings: compact rows layout (#33169)

Browse source
This commit is contained in:
Michael Geers 2026-08-26 10:22:58 +02:00 • committed by GitHub
parent 063088c070
commit cba812d884
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 87 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

161
assets/js/components/Vehicles/SettingsModal.vue
View file

@ -16,85 +16,91 @@
</a>
</p>
<div
v-for="(vehicle, index) in vehicles"
v-for="vehicle in vehicles"
:key="vehicle.name"
role="group"
:aria-label="vehicle.title"
:class="{ 'border-top pt-4': index > 0 }"
class="mb-4"
class="d-flex gap-2 mb-3"
>
<div class="d-flex flex-wrap align-items-center column-gap-2 row-gap-1 mb-3">
<VehicleIcon :name="vehicle.icon" class="flex-shrink-0" />
<strong class="text-truncate">{{ vehicle.title }}</strong>
<Badge v-if="connectedLoadpoint(vehicle)" class="flex-shrink-0">
{{
$t("main.vehicleSettings.connectedTo", [
connectedLoadpoint(vehicle)?.title ||
$t("main.loadpoint.fallbackName"),
])
}}
</Badge>
<Badge v-else variant="muted" class="flex-shrink-0">
{{ $t("main.vehicleSettings.notConnected") }}
</Badge>
<VehicleIcon :name="vehicle.icon" class="flex-shrink-0" />
<div class="flex-grow-1 overflow-hidden ring-space">
<div class="d-flex flex-wrap align-items-center column-gap-2 row-gap-1 mb-3">
<strong class="text-truncate">{{ vehicle.title }}</strong>
<Badge v-if="connectedLoadpoint(vehicle)" class="flex-shrink-0">
{{
$t("main.vehicleSettings.connectedTo", [
connectedLoadpoint(vehicle)?.title ||
$t("main.loadpoint.fallbackName"),
])
}}
</Badge>
<Badge v-else variant="muted" class="flex-shrink-0">
{{ $t("main.vehicleSettings.notConnected") }}
</Badge>
</div>
<div class="row">
<div class="col-6 col-lg-3 mb-3">
<div class="small text-uppercase evcc-gray text-truncate">
{{ $t("main.vehicleSettings.mode") }}
</div>
<CustomSelect
:id="fieldId(vehicle, 'mode')"
inline
:options="modeOptions"
:selected="vehicle.mode ?? ''"
:ariaLabel="$t('main.vehicleSettings.mode')"
@change="changeMode(vehicle, $event)"
>
<span class="text-decoration-underline text-primary">
{{ optionName(modeOptions, vehicle.mode ?? "") }}
</span>
</CustomSelect>
</div>
<template v-if="socSupported(vehicle)">
<div class="col-6 col-lg-3 mb-3">
<div class="small text-uppercase evcc-gray text-truncate">
{{ $t("main.vehicleSettings.minSoc") }}
</div>
<CustomSelect
:id="fieldId(vehicle, 'minSoc')"
inline
:options="socOptions(vehicle, true)"
:selected="vehicle.minSoc ?? 0"
:ariaLabel="$t('main.vehicleSettings.minSoc')"
@change="changeMinSoc(vehicle, $event)"
>
<span class="text-decoration-underline text-primary">
{{
optionName(
socOptions(vehicle, true),
vehicle.minSoc ?? 0
)
}}
</span>
</CustomSelect>
</div>
<div class="col-6 col-lg-3 mb-3">
<div class="small text-uppercase evcc-gray text-truncate">
{{ $t("main.vehicleSettings.limitSoc") }}
</div>
<CustomSelect
:id="fieldId(vehicle, 'limitSoc')"
inline
:options="socOptions(vehicle)"
:selected="vehicle.limitSoc || 100"
:ariaLabel="$t('main.vehicleSettings.limitSoc')"
@change="changeLimitSoc(vehicle, $event)"
>
<span class="text-decoration-underline text-primary">
{{
optionName(socOptions(vehicle), vehicle.limitSoc || 100)
}}
</span>
</CustomSelect>
</div>
</template>
</div>
</div>
<SettingsFormRow
:id="fieldId(vehicle, 'mode')"
:label="$t('main.vehicleSettings.mode')"
>
<select
:id="fieldId(vehicle, 'mode')"
class="form-select form-select-sm"
:value="vehicle.mode ?? ''"
@change="changeMode(vehicle, $event)"
>
<option v-for="opt in modeOptions" :key="opt.value" :value="opt.value">
{{ opt.name }}
</option>
</select>
</SettingsFormRow>
<template v-if="socSupported(vehicle)">
<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 || 100"
@change="changeLimitSoc(vehicle, $event)"
>
<option
v-for="opt in socOptions(vehicle)"
:key="opt.value"
:value="opt.value"
>
{{ opt.name }}
</option>
</select>
</SettingsFormRow>
<SettingsFormRow
:id="fieldId(vehicle, 'minSoc')"
:label="$t('main.vehicleSettings.minSoc')"
:description="$t('main.vehicleSettings.minSocDescription')"
>
<select
:id="fieldId(vehicle, 'minSoc')"
class="form-select form-select-sm"
:value="vehicle.minSoc ?? 0"
@change="changeMinSoc(vehicle, $event)"
>
<option
v-for="opt in socOptions(vehicle, true)"
:key="opt.value"
:value="opt.value"
>
{{ opt.name }}
</option>
</select>
</SettingsFormRow>
</template>
</div>
<p class="mb-0 border-top pt-4">
<i18n-t keypath="main.vehicleSettings.editHint" tag="span" scope="global">
@ -110,7 +116,7 @@
<script lang="ts">
import Badge from "../Helper/Badge.vue";
import GenericModal from "../Helper/GenericModal.vue";
import SettingsFormRow from "../Helper/SettingsFormRow.vue";
import CustomSelect from "../Helper/CustomSelect.vue";
import VehicleIcon from "../VehicleIcon";
import api from "@/api";
import formatter from "@/mixins/formatter";
@ -124,7 +130,7 @@ const { OFF, PV, MINPV, NOW } = CHARGE_MODE;
export default defineComponent({
name: "VehicleSettingsModal",
components: { Badge, GenericModal, SettingsFormRow, VehicleIcon },
components: { Badge, CustomSelect, GenericModal, VehicleIcon },
mixins: [formatter],
props: {
vehicles: { type: Array as PropType<Vehicle[]>, default: () => [] },
@ -188,6 +194,9 @@ export default defineComponent({
};
});
},
optionName(options: SelectOption<string | number>[], value: string | number): string {
return options.find((o) => o.value === value)?.name ?? String(value);
},
selectValue(event: Event): string {
return (event.target as HTMLSelectElement).value;
},