jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-14 04:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Sortable energy individual devices (#23330)

Browse Source 
* Sortable energy individual devices

* change key fn
This commit is contained in:
karwosts 2024-12-19 05:51:56 -08:00 committed by GitHub
parent e0494ccb57
commit 973fd51639
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 67 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/panels/config/energy/components/ha-energy-device-settings.ts
View File

@ -1,12 +1,15 @@
import "@material/mwc-button/mwc-button";
import { mdiDelete, mdiDevices, mdiPencil } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { css, html, LitElement } from "lit";
import { repeat } from "lit/directives/repeat";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-card";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-state-icon";
import "../../../../components/ha-sortable";
import "../../../../components/ha-svg-icon";
import type {
DeviceConsumptionEnergyPreference,
EnergyPreferences,
@ -79,36 +82,44 @@ export class EnergyDeviceSettings extends LitElement {
"ui.panel.config.energy.device_consumption.devices"
)}
</h3>
${this.preferences.device_consumption.map((device) => {
const entityState = this.hass.states[device.stat_consumption];
return html`
<div class="row" .device=${device}>
<ha-state-icon
.hass=${this.hass}
.stateObj=${entityState}
></ha-state-icon>
<span class="content"
>${device.name ||
getStatisticLabel(
this.hass,
device.stat_consumption,
this.statsMetadata?.[device.stat_consumption]
)}</span
>
<ha-icon-button
.label=${this.hass.localize("ui.common.edit")}
@click=${this._editDevice}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize("ui.common.delete")}
@click=${this._deleteDevice}
.device=${device}
.path=${mdiDelete}
></ha-icon-button>
</div>
`;
})}
<ha-sortable handle-selector=".row" @item-moved=${this._itemMoved}>
<div class="devices">
${repeat(
this.preferences.device_consumption,
(device) => device.stat_consumption,
(device) => {
const entityState = this.hass.states[device.stat_consumption];
return html`
<div class="row" .device=${device}>
<ha-state-icon
.hass=${this.hass}
.stateObj=${entityState}
></ha-state-icon>
<span class="content"
>${device.name ||
getStatisticLabel(
this.hass,
device.stat_consumption,
this.statsMetadata?.[device.stat_consumption]
)}</span
>
<ha-icon-button
.label=${this.hass.localize("ui.common.edit")}
@click=${this._editDevice}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize("ui.common.delete")}
@click=${this._deleteDevice}
.device=${device}
.path=${mdiDelete}
></ha-icon-button>
</div>
`;
}
)}
</div>
</ha-sortable>
<div class="row">
<ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
<mwc-button @click=${this._addDevice}
@ -122,6 +133,21 @@ export class EnergyDeviceSettings extends LitElement {
`;
}
private _itemMoved(ev: CustomEvent): void {
ev.stopPropagation();
const { oldIndex, newIndex } = ev.detail;
const devices = this.preferences.device_consumption.concat();
const device = devices.splice(oldIndex, 1)[0];
devices.splice(newIndex, 0, device);
const newPrefs = {
...this.preferences,
device_consumption: devices,
};
fireEvent(this, "value-changed", { value: newPrefs });
this._savePreferences(newPrefs);
}
private _editDevice(ev) {
const origDevice: DeviceConsumptionEnergyPreference =
ev.currentTarget.closest(".row").device;
@ -184,7 +210,16 @@ export class EnergyDeviceSettings extends LitElement {
}
static get styles(): CSSResultGroup {
return [haStyle, energyCardStyles];
return [
haStyle,
energyCardStyles,
css`
.row {
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
}
`,
];
}
}