jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-14 21:06: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 "@material/mwc-button/mwc-button";
import { mdiDelete, mdiDevices, mdiPencil } from "@mdi/js"; import { mdiDelete, mdiDevices, mdiPencil } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit"; 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 { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-state-icon"; import "../../../../components/ha-state-icon";
import "../../../../components/ha-sortable";
import "../../../../components/ha-svg-icon";
import type { import type {
DeviceConsumptionEnergyPreference, DeviceConsumptionEnergyPreference,
EnergyPreferences, EnergyPreferences,
@ -79,36 +82,44 @@ export class EnergyDeviceSettings extends LitElement {
"ui.panel.config.energy.device_consumption.devices" "ui.panel.config.energy.device_consumption.devices"
)} )}
</h3> </h3>
${this.preferences.device_consumption.map((device) => { <ha-sortable handle-selector=".row" @item-moved=${this._itemMoved}>
const entityState = this.hass.states[device.stat_consumption]; <div class="devices">
return html` ${repeat(
<div class="row" .device=${device}> this.preferences.device_consumption,
<ha-state-icon (device) => device.stat_consumption,
.hass=${this.hass} (device) => {
.stateObj=${entityState} const entityState = this.hass.states[device.stat_consumption];
></ha-state-icon> return html`
<span class="content" <div class="row" .device=${device}>
>${device.name || <ha-state-icon
getStatisticLabel( .hass=${this.hass}
this.hass, .stateObj=${entityState}
device.stat_consumption, ></ha-state-icon>
this.statsMetadata?.[device.stat_consumption] <span class="content"
)}</span >${device.name ||
> getStatisticLabel(
<ha-icon-button this.hass,
.label=${this.hass.localize("ui.common.edit")} device.stat_consumption,
@click=${this._editDevice} this.statsMetadata?.[device.stat_consumption]
.path=${mdiPencil} )}</span
></ha-icon-button> >
<ha-icon-button <ha-icon-button
.label=${this.hass.localize("ui.common.delete")} .label=${this.hass.localize("ui.common.edit")}
@click=${this._deleteDevice} @click=${this._editDevice}
.device=${device} .path=${mdiPencil}
.path=${mdiDelete} ></ha-icon-button>
></ha-icon-button> <ha-icon-button
</div> .label=${this.hass.localize("ui.common.delete")}
`; @click=${this._deleteDevice}
})} .device=${device}
.path=${mdiDelete}
></ha-icon-button>
</div>
`;
}
)}
</div>
</ha-sortable>
<div class="row"> <div class="row">
<ha-svg-icon .path=${mdiDevices}></ha-svg-icon> <ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
<mwc-button @click=${this._addDevice} <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) { private _editDevice(ev) {
const origDevice: DeviceConsumptionEnergyPreference = const origDevice: DeviceConsumptionEnergyPreference =
ev.currentTarget.closest(".row").device; ev.currentTarget.closest(".row").device;
@ -184,7 +210,16 @@ export class EnergyDeviceSettings extends LitElement {
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [haStyle, energyCardStyles]; return [
haStyle,
energyCardStyles,
css`
.row {
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
}
`,
];
} }
} }