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

…8693)
evcc-io · Feb 9, 2025 · 6e1422c · 6e1422c
1 parent 01faac1
commit 6e1422c
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 31 deletions.
diff --git a/assets/js/components/Config/DeviceCard.vue b/assets/js/components/Config/DeviceCard.vue
@@ -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,15 +49,33 @@ 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();
 		},
 	},
 	mounted() {
 		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>
diff --git a/assets/js/views/Config.vue b/assets/js/views/Config.vue
@@ -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"

diff --git a/i18n/de.toml b/i18n/de.toml
@@ -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."

diff --git a/i18n/en.toml b/i18n/en.toml
@@ -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."