Vehicle settings: compact rows layout (#33169)
This commit is contained in:
Michael Geers
GitHub
parent
063088c070
commit
cba812d884
3 changed files with 87 additions and 82 deletions
|
|
@ -16,15 +16,15 @@
|
|||
</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" />
|
||||
<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">
|
||||
{{
|
||||
|
|
@ -38,64 +38,70 @@
|
|||
{{ $t("main.vehicleSettings.notConnected") }}
|
||||
</Badge>
|
||||
</div>
|
||||
<SettingsFormRow
|
||||
<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')"
|
||||
:label="$t('main.vehicleSettings.mode')"
|
||||
>
|
||||
<select
|
||||
:id="fieldId(vehicle, 'mode')"
|
||||
class="form-select form-select-sm"
|
||||
:value="vehicle.mode ?? ''"
|
||||
inline
|
||||
:options="modeOptions"
|
||||
:selected="vehicle.mode ?? ''"
|
||||
:ariaLabel="$t('main.vehicleSettings.mode')"
|
||||
@change="changeMode(vehicle, $event)"
|
||||
>
|
||||
<option v-for="opt in modeOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.name }}
|
||||
</option>
|
||||
</select>
|
||||
</SettingsFormRow>
|
||||
<span class="text-decoration-underline text-primary">
|
||||
{{ optionName(modeOptions, vehicle.mode ?? "") }}
|
||||
</span>
|
||||
</CustomSelect>
|
||||
</div>
|
||||
<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
|
||||
<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')"
|
||||
: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"
|
||||
inline
|
||||
:options="socOptions(vehicle, true)"
|
||||
:selected="vehicle.minSoc ?? 0"
|
||||
:ariaLabel="$t('main.vehicleSettings.minSoc')"
|
||||
@change="changeMinSoc(vehicle, $event)"
|
||||
>
|
||||
<option
|
||||
v-for="opt in socOptions(vehicle, true)"
|
||||
:key="opt.value"
|
||||
:value="opt.value"
|
||||
<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)"
|
||||
>
|
||||
{{ opt.name }}
|
||||
</option>
|
||||
</select>
|
||||
</SettingsFormRow>
|
||||
<span class="text-decoration-underline text-primary">
|
||||
{{
|
||||
optionName(socOptions(vehicle), vehicle.limitSoc || 100)
|
||||
}}
|
||||
</span>
|
||||
</CustomSelect>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mb-0 border-top pt-4">
|
||||
<i18n-t keypath="main.vehicleSettings.editHint" tag="span" scope="global">
|
||||
<router-link to="/config#vehicles" @click="closeModal">
|
||||
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1550,14 +1550,12 @@
|
|||
"vehicleSettings": {
|
||||
"connectedTo": "verbunden mit {0}",
|
||||
"description": "Diese Standardwerte werden angewendet, wenn das Fahrzeug an einem Ladepunkt angeschlossen wird.",
|
||||
"editHint": "Fahrzeuge unter {0} hinzufügen oder bearbeiten.",
|
||||
"editHint": "Fahrzeuge können in der {0} bearbeitet werden.",
|
||||
"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.",
|
||||
"mode": "Standardmodus",
|
||||
"notConnected": "nicht verbunden",
|
||||
"title": "Fahrzeugeinstellungen"
|
||||
|
|
|
|||
|
|
@ -1550,14 +1550,12 @@
|
|||
"vehicleSettings": {
|
||||
"connectedTo": "connected to {0}",
|
||||
"description": "These defaults are applied when the vehicle connects to a charging point.",
|
||||
"editHint": "Add or edit vehicles in {0}.",
|
||||
"editHint": "Vehicles can be edited in {0}.",
|
||||
"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.",
|
||||
"mode": "Default mode",
|
||||
"notConnected": "not connected",
|
||||
"title": "Vehicle Settings"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue