From b9d6973a79fe4c5ef7814ef113e1e60c42be2e95 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Sat, 20 Jun 2020 15:38:27 +0200 Subject: [PATCH] ZHA: Bring back clusters UI (#6191) --- .../zha/ha-device-actions-zha.ts | 12 +- .../zha/dialog-zha-cluster.ts | 143 ++++++++++++++++++ .../zha}/dialog-zha-device-zigbee-info.ts | 8 +- .../zha/show-dialog-zha-cluster.ts | 22 +++ .../show-dialog-zha-device-zigbee-info.ts | 4 +- .../integration-panels/zha/zha-clusters.ts | 3 - src/translations/en.json | 1 + 7 files changed, 183 insertions(+), 10 deletions(-) create mode 100644 src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts rename src/{dialogs/zha-device-zigbee-signature-dialog => panels/config/integrations/integration-panels/zha}/dialog-zha-device-zigbee-info.ts (85%) create mode 100644 src/panels/config/integrations/integration-panels/zha/show-dialog-zha-cluster.ts rename src/{dialogs/zha-device-zigbee-signature-dialog => panels/config/integrations/integration-panels/zha}/show-dialog-zha-device-zigbee-info.ts (82%) diff --git a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts index 89321d5201..16d47f8b05 100644 --- a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts +++ b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts @@ -17,8 +17,9 @@ import { reconfigureNode, } from "../../../../../../data/zha"; import { navigate } from "../../../../../../common/navigate"; -import { showZHADeviceZigbeeInfoDialog } from "../../../../../../dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info"; +import { showZHADeviceZigbeeInfoDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info"; import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box"; +import { showZHAClusterDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-cluster"; @customElement("ha-device-actions-zha") export class HaDeviceActionsZha extends LitElement { @@ -72,6 +73,11 @@ export class HaDeviceActionsZha extends LitElement { "ui.dialogs.zha_device_info.buttons.zigbee_information" )} + + ${this.hass!.localize( + "ui.dialogs.zha_device_info.buttons.clusters" + )} + ${this.hass!.localize( "ui.dialogs.zha_device_info.buttons.remove" @@ -82,6 +88,10 @@ export class HaDeviceActionsZha extends LitElement { `; } + private async _showClustersDialog(): Promise { + await showZHAClusterDialog(this, { device: this._zhaDevice! }); + } + private async _onReconfigureNodeClick(): Promise { if (!this.hass) { return; diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts new file mode 100644 index 0000000000..52898f33f7 --- /dev/null +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts @@ -0,0 +1,143 @@ +import { + CSSResult, + customElement, + html, + LitElement, + property, + TemplateResult, + PropertyValues, +} from "lit-element"; +import "../../../../../components/ha-code-editor"; +import { createCloseHeading } from "../../../../../components/ha-dialog"; +import { haStyleDialog } from "../../../../../resources/styles"; +import { HomeAssistant } from "../../../../../types"; +import { ZHADeviceZigbeeInfoDialogParams } from "./show-dialog-zha-device-zigbee-info"; +import { + ZHADevice, + Cluster, + ZHAGroup, + fetchBindableDevices, + fetchGroups, +} from "../../../../../data/zha"; +import { ZHAClusterSelectedParams } from "./types"; +import "./zha-cluster-attributes"; +import "./zha-cluster-commands"; +import "./zha-clusters"; +import "./zha-device-binding"; +import "./zha-group-binding"; +import { HASSDomEvent } from "../../../../../common/dom/fire_event"; +import { sortZHADevices, sortZHAGroups } from "./functions"; + +@customElement("dialog-zha-cluster") +class DialogZHACluster extends LitElement { + @property() public hass!: HomeAssistant; + + @property() private _device?: ZHADevice; + + @property() private _selectedCluster?: Cluster; + + @property() private _bindableDevices: ZHADevice[] = []; + + @property() private _groups: ZHAGroup[] = []; + + public async showDialog( + params: ZHADeviceZigbeeInfoDialogParams + ): Promise { + this._device = params.device; + } + + protected updated(changedProperties: PropertyValues): void { + super.update(changedProperties); + if (changedProperties.has("_device")) { + this._fetchData(); + } + } + + protected render(): TemplateResult { + if (!this._device) { + return html``; + } + + return html` + + + ${this._selectedCluster + ? html` + + + ` + : ""} + ${this._bindableDevices.length > 0 + ? html` + + ` + : ""} + ${this._device && this._groups.length > 0 + ? html` + + ` + : ""} + + `; + } + + private _onClusterSelected( + selectedClusterEvent: HASSDomEvent + ): void { + this._selectedCluster = selectedClusterEvent.detail.cluster; + } + + private _close(): void { + this._device = undefined; + } + + private async _fetchData(): Promise { + if (this._device && this.hass) { + this._bindableDevices = + this._device && this._device.device_type !== "Coordinator" + ? (await fetchBindableDevices(this.hass, this._device.ieee)).sort( + sortZHADevices + ) + : []; + this._groups = (await fetchGroups(this.hass!)).sort(sortZHAGroups); + } + } + + static get styles(): CSSResult { + return haStyleDialog; + } +} + +declare global { + interface HTMLElementTagNameMap { + "dialog-zha-cluster": DialogZHACluster; + } +} diff --git a/src/dialogs/zha-device-zigbee-signature-dialog/dialog-zha-device-zigbee-info.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts similarity index 85% rename from src/dialogs/zha-device-zigbee-signature-dialog/dialog-zha-device-zigbee-info.ts rename to src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts index 0ba57e4c40..f1a921ddd5 100644 --- a/src/dialogs/zha-device-zigbee-signature-dialog/dialog-zha-device-zigbee-info.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts @@ -6,10 +6,10 @@ import { property, TemplateResult, } from "lit-element"; -import "../../components/ha-code-editor"; -import { createCloseHeading } from "../../components/ha-dialog"; -import { haStyleDialog } from "../../resources/styles"; -import { HomeAssistant } from "../../types"; +import "../../../../../components/ha-code-editor"; +import { createCloseHeading } from "../../../../../components/ha-dialog"; +import { haStyleDialog } from "../../../../../resources/styles"; +import { HomeAssistant } from "../../../../../types"; import { ZHADeviceZigbeeInfoDialogParams } from "./show-dialog-zha-device-zigbee-info"; @customElement("dialog-zha-device-zigbee-info") diff --git a/src/panels/config/integrations/integration-panels/zha/show-dialog-zha-cluster.ts b/src/panels/config/integrations/integration-panels/zha/show-dialog-zha-cluster.ts new file mode 100644 index 0000000000..ae3549dc01 --- /dev/null +++ b/src/panels/config/integrations/integration-panels/zha/show-dialog-zha-cluster.ts @@ -0,0 +1,22 @@ +import { fireEvent } from "../../../../../common/dom/fire_event"; +import { ZHADevice } from "../../../../../data/zha"; + +export interface ZHAClusterDialogParams { + device: ZHADevice; +} + +export const loadZHAClusterDialog = () => + import( + /* webpackChunkName: "dialog-zha-device-zigbee-info" */ "./dialog-zha-cluster" + ); + +export const showZHAClusterDialog = ( + element: HTMLElement, + params: ZHAClusterDialogParams +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "dialog-zha-cluster", + dialogImport: loadZHAClusterDialog, + dialogParams: params, + }); +}; diff --git a/src/dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info.ts b/src/panels/config/integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info.ts similarity index 82% rename from src/dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info.ts rename to src/panels/config/integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info.ts index 26df394b7a..ff96e2ea70 100644 --- a/src/dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info.ts +++ b/src/panels/config/integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info.ts @@ -1,5 +1,5 @@ -import { fireEvent } from "../../common/dom/fire_event"; -import { ZHADevice } from "../../data/zha"; +import { fireEvent } from "../../../../../common/dom/fire_event"; +import { ZHADevice } from "../../../../../data/zha"; export interface ZHADeviceZigbeeInfoDialogParams { device: ZHADevice; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts index c47232bf71..80789264ea 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts @@ -64,9 +64,6 @@ export class ZHAClusters extends LitElement { return html`
- - ${this.hass!.localize("ui.panel.config.zha.clusters.header")} -