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

Config UI: add name tooltip to devices, show yaml-configured grid (#18693)

Browse source
This commit is contained in:
Michael Geers 2025-02-09 19:46:31 +01:00 • committed by GitHub
parent 01faac1d7e
commit 6e1422c2ec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 59 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

49
assets/js/components/Config/DeviceCard.vue
View file

@ -4,24 +4,23 @@
<div class="icon me-2">
<slot name="icon" />
</div>
<strong class="flex-grow-1 text-nowrap text-truncate">{{ name }}</strong>
<button
v-if="editable"
type="button"
class="btn btn-sm btn-outline-secondary position-relative border-0 p-2"
:title="$t('config.main.edit')"
tabindex="0"
@click="$emit('edit')"
<strong
class="flex-grow-1 text-nowrap text-truncate"
data-bs-toggle="tooltip"
:title="name"
>{{ title }}</strong
>
<shopicon-regular-adjust size="s"></shopicon-regular-adjust>
</button>
<button
v-else
ref="tooltip"
type="button"
class="btn btn-sm btn-outline-secondary position-relative border-0 p-2 opacity-25"
class="btn btn-sm btn-outline-secondary position-relative border-0 p-2"
:class="{ 'opacity-25': !editable }"
data-bs-toggle="tooltip"
:title="$t('config.main.yaml')"
data-bs-html="true"
:title="tooltipTitle"
:aria-label="editable ? $t('config.main.edit') : null"
:disabled="!editable"
@click="edit"
>
<shopicon-regular-adjust size="s"></shopicon-regular-adjust>
</button>
@ -40,6 +39,7 @@ export default {
name: "DeviceCard",
props: {
name: String,
title: String,
editable: Boolean,
error: Boolean,
},
@ -49,8 +49,20 @@ export default {
tooltip: null,
};
},
computed: {
tooltipTitle() {
if (!this.name) {
return "";
}
let title = `${this.$t("config.main.name")}: <span class='font-monospace'>${this.name}</span>`;
if (!this.editable) {
title += `<div class="mt-1">${this.$t("config.main.yaml")}</div>`;
}
return `<div class="text-start">${title}</div>`;
},
},
watch: {
editable() {
tooltipTitle() {
this.initTooltip();
},
},
@ -58,6 +70,12 @@ export default {
this.initTooltip();
},
methods: {
edit() {
if (this.editable) {
this.tooltip?.hide();
this.$emit("edit");
}
},
initTooltip() {
this.$nextTick(() => {
this.tooltip?.dispose();
@ -85,4 +103,7 @@ export default {
margin-left: -1.5rem;
margin-right: -1.5rem;
}
button:disabled {
pointer-events: auto;
}
</style>

35
assets/js/views/Config.vue
View file

@ -40,7 +40,8 @@
<DeviceCard
v-for="loadpoint in loadpoints"
:key="loadpoint.name"
:name="loadpoint.title"
:title="loadpoint.title"
:name="loadpoint.name"
:editable="!!loadpoint.id"
:error="deviceError('loadpoint', loadpoint.name)"
data-testid="loadpoint"
@ -70,7 +71,8 @@
<DeviceCard
v-for="vehicle in vehicles"
:key="vehicle.name"
:name="vehicle.config?.title || vehicle.name"
:title="vehicle.config?.title || vehicle.name"
:name="vehicle.name"
:editable="vehicle.id >= 0"
:error="deviceError('vehicle', vehicle.name)"
data-testid="vehicle"
@ -93,9 +95,10 @@
<h2 class="my-4 mt-5">{{ $t("config.section.grid") }} 🧪</h2>
<ul class="p-0 config-list">
<DeviceCard
v-if="gridMeter?.id"
:name="$t('config.grid.title')"
editable
v-if="gridMeter"
:title="$t('config.grid.title')"
:name="gridMeter.name"
:editable="!!gridMeter.id"
:error="deviceError('meter', gridMeter.name)"
data-testid="grid"
@edit="editMeter(gridMeter.id, 'grid')"
@ -115,7 +118,7 @@
/>
<DeviceCard
v-if="tariffTags"
:name="$t('config.tariffs.title')"
:title="$t('config.tariffs.title')"
editable
:error="fatalClass === 'tariff'"
data-testid="tariffs"
@ -140,7 +143,8 @@
<DeviceCard
v-for="meter in pvMeters"
:key="meter.name"
:name="meter.config?.template || 'Solar system'"
:title="meter.config?.template || 'Solar system'"
:name="meter.name"
:editable="!!meter.id"
:error="deviceError('meter', meter.name)"
data-testid="pv"
@ -156,7 +160,8 @@
<DeviceCard
v-for="meter in batteryMeters"
:key="meter.name"
:name="meter.config?.template || 'Battery storage'"
:title="meter.config?.template || 'Battery storage'"
:name="meter.name"
:editable="!!meter.id"
:error="deviceError('meter', meter.name)"
data-testid="battery"
@ -179,7 +184,7 @@
<ul class="p-0 config-list">
<DeviceCard
:name="$t('config.mqtt.title')"
:title="$t('config.mqtt.title')"
editable
:error="fatalClass === 'mqtt'"
data-testid="mqtt"
@ -191,7 +196,7 @@
</template>
</DeviceCard>
<DeviceCard
:name="$t('config.messaging.title')"
:title="$t('config.messaging.title')"
editable
:error="fatalClass === 'messenger'"
data-testid="messaging"
@ -203,7 +208,7 @@
</template>
</DeviceCard>
<DeviceCard
:name="$t('config.influx.title')"
:title="$t('config.influx.title')"
editable
:error="fatalClass === 'influx'"
data-testid="influx"
@ -215,7 +220,7 @@
</template>
</DeviceCard>
<DeviceCard
:name="`${$t('config.eebus.title')} 🧪`"
:title="`${$t('config.eebus.title')} 🧪`"
editable
:error="fatalClass === 'eebus'"
data-testid="eebus"
@ -228,7 +233,7 @@
</DeviceCard>
<DeviceCard
:name="`${$t('config.circuits.title')} 🧪`"
:title="`${$t('config.circuits.title')} 🧪`"
editable
:error="fatalClass === 'circuit'"
data-testid="circuits"
@ -255,7 +260,7 @@
</template>
</DeviceCard>
<DeviceCard
:name="$t('config.modbusproxy.title')"
:title="$t('config.modbusproxy.title')"
editable
:error="fatalClass === 'modbusproxy'"
data-testid="modbusproxy"
@ -267,7 +272,7 @@
</template>
</DeviceCard>
<DeviceCard
:name="$t('config.hems.title')"
:title="$t('config.hems.title')"
editable
:error="fatalClass === 'hems'"
data-testid="hems"

3
i18n/de.toml
View file

@ -229,10 +229,11 @@ addTariffs = "Tarife hinzufügen"
addVehicle = "Fahrzeug hinzufügen"
configured = "konfiguriert"
edit = "bearbeiten"
name = "Name"
title = "Konfiguration"
unconfigured = "nicht konfiguriert"
vehicles = "Meine Fahrzeuge"
yaml = "Konfiguration in evcc.yaml gefunden. Nicht per UI editierbar"
yaml = "Geräte aus evcc.yaml sind nicht editierbar."
[config.messaging]
description = "Benachrichtigungen über Ladevorgänge und andere Ereignisse erhalten."

3
i18n/en.toml
View file

@ -232,10 +232,11 @@ addTariffs = "Add tariffs"
addVehicle = "Add vehicle"
configured = "configured"
edit = "edit"
name = "Name"
title = "Configuration"
unconfigured = "not configured"
vehicles = "My Vehicles"
yaml = "Configured in evcc.yaml. Not editable in the UI."
yaml = "Device from evcc.yaml are not editable."
[config.messaging]
description = "Receive messages about your charging sessions."