From 0118a5bf4c7447ca9eb75474051f3ce815b91e83 Mon Sep 17 00:00:00 2001 From: karwosts <32912880+karwosts@users.noreply.github.com> Date: Fri, 12 Apr 2024 11:31:59 -0700 Subject: [PATCH] Allow customizing display name for energy device (#20033) * Allow customizing display name for energy device * use display name in device settings list --- src/data/energy.ts | 1 + .../components/ha-energy-device-settings.ts | 30 ++++++++++++++-- .../dialogs/dialog-energy-device-settings.ts | 34 +++++++++++++++++-- .../energy/dialogs/show-dialogs-energy.ts | 1 + .../hui-energy-devices-detail-graph-card.ts | 12 ++++--- .../energy/hui-energy-devices-graph-card.ts | 25 ++++++++------ src/translations/en.json | 1 + 7 files changed, 83 insertions(+), 21 deletions(-) diff --git a/src/data/energy.ts b/src/data/energy.ts index 48e28fa6c4..61d23aca0e 100644 --- a/src/data/energy.ts +++ b/src/data/energy.ts @@ -95,6 +95,7 @@ export type EnergySolarForecasts = { export interface DeviceConsumptionEnergyPreference { // This is an ever increasing value stat_consumption: string; + name?: string; } export interface FlowFromGridSourceEnergyPreference { diff --git a/src/panels/config/energy/components/ha-energy-device-settings.ts b/src/panels/config/energy/components/ha-energy-device-settings.ts index a9e3e41a77..8c6d3506e7 100644 --- a/src/panels/config/energy/components/ha-energy-device-settings.ts +++ b/src/panels/config/energy/components/ha-energy-device-settings.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import { mdiDelete, mdiDevices } from "@mdi/js"; +import { mdiDelete, mdiDevices, mdiPencil } from "@mdi/js"; import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -83,18 +83,24 @@ export class EnergyDeviceSettings extends LitElement { ${this.preferences.device_consumption.map((device) => { const entityState = this.hass.states[device.stat_consumption]; return html` -
+
${getStatisticLabel( + >${device.name || + getStatisticLabel( this.hass, device.stat_consumption, this.statsMetadata?.[device.stat_consumption] )} + { + await this._savePreferences({ + ...this.preferences, + device_consumption: this.preferences.device_consumption.map((d) => + d === origDevice ? newDevice : d + ), + }); + }, + }); + } + private _addDevice() { showEnergySettingsDeviceDialog(this, { device_consumptions: this.preferences diff --git a/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts index fba35d8334..1362dfbdb3 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts @@ -44,9 +44,10 @@ export class DialogEnergyDeviceSettings this._energy_units = ( await getSensorDeviceClassConvertibleUnits(this.hass, "energy") ).units; - this._excludeList = this._params.device_consumptions.map( - (entry) => entry.stat_consumption - ); + this._device = this._params.device; + this._excludeList = this._params.device_consumptions + .map((entry) => entry.stat_consumption) + .filter((id) => id !== this._device?.stat_consumption); } public closeDialog(): void { @@ -88,6 +89,7 @@ export class DialogEnergyDeviceSettings .hass=${this.hass} .helpMissingEntityUrl=${energyStatisticHelpUrl} .includeUnitClass=${energyUnitClasses} + .value=${this._device?.stat_consumption} .label=${this.hass.localize( "ui.panel.config.energy.device_consumption.dialog.device_consumption_energy" )} @@ -96,6 +98,17 @@ export class DialogEnergyDeviceSettings dialogInitialFocus > + + + ${this.hass.localize("ui.common.cancel")} @@ -118,6 +131,17 @@ export class DialogEnergyDeviceSettings this._device = { stat_consumption: ev.detail.value }; } + private _nameChanged(ev) { + const newDevice = { + ...this._device!, + name: ev.target!.value, + } as DeviceConsumptionEnergyPreference; + if (!newDevice.name) { + delete newDevice.name; + } + this._device = newDevice; + } + private async _save() { try { await this._params!.saveCallback(this._device!); @@ -134,6 +158,10 @@ export class DialogEnergyDeviceSettings ha-statistic-picker { width: 100%; } + ha-textfield { + margin-top: 16px; + width: 100%; + } `, ]; } diff --git a/src/panels/config/energy/dialogs/show-dialogs-energy.ts b/src/panels/config/energy/dialogs/show-dialogs-energy.ts index 997999a69c..246ac05c23 100644 --- a/src/panels/config/energy/dialogs/show-dialogs-energy.ts +++ b/src/panels/config/energy/dialogs/show-dialogs-energy.ts @@ -70,6 +70,7 @@ export interface EnergySettingsWaterDialogParams { } export interface EnergySettingsDeviceDialogParams { + device?: DeviceConsumptionEnergyPreference; device_consumptions: DeviceConsumptionEnergyPreference[]; saveCallback: (device: DeviceConsumptionEnergyPreference) => Promise; } diff --git a/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts index 7c227455ad..95944eff0a 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts @@ -333,11 +333,13 @@ export class HuiEnergyDevicesDetailGraphCard ); data.push({ - label: getStatisticLabel( - this.hass, - source.stat_consumption, - statisticsMetaData[source.stat_consumption] - ), + label: + source.name || + getStatisticLabel( + this.hass, + source.stat_consumption, + statisticsMetaData[source.stat_consumption] + ), hidden: this._hiddenStats.has(source.stat_consumption) || itemExceedsMax, borderColor: compare ? color + "7F" : color, diff --git a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts index 95604e45bb..83d287b8ea 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts @@ -127,11 +127,7 @@ export class HuiEnergyDevicesGraphCard const statisticId = ( this._chartData.datasets[0].data[index] as ScatterDataPoint ).y; - return getStatisticLabel( - this.hass, - statisticId as any, - this._data?.statsMetadata[statisticId] - ); + return this.getDeviceName(statisticId as any as string); }, }, }, @@ -149,11 +145,7 @@ export class HuiEnergyDevicesGraphCard callbacks: { title: (item) => { const statisticId = item[0].label; - return getStatisticLabel( - this.hass, - statisticId, - this._data?.statsMetadata[statisticId] - ); + return this.getDeviceName(statisticId); }, label: (context) => `${context.dataset.label}: ${formatNumber( @@ -181,6 +173,19 @@ export class HuiEnergyDevicesGraphCard }) ); + private getDeviceName(statisticId: string): string { + return ( + this._data?.prefs.device_consumption.find( + (d) => d.stat_consumption === statisticId + )?.name || + getStatisticLabel( + this.hass, + statisticId, + this._data?.statsMetadata[statisticId] + ) + ); + } + private async _getStatistics(energyData: EnergyData): Promise { const data = energyData.stats; const compareData = energyData.statsCompare; diff --git a/src/translations/en.json b/src/translations/en.json index 21e30b9e0b..6733090994 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2243,6 +2243,7 @@ "add_device": "Add device", "dialog": { "header": "Add a device", + "display_name": "Display name", "device_consumption_energy": "Device consumption energy", "selected_stat_intro": "Select the energy sensor that measures the device's energy usage in either of {unit}." }