From 23b1f11c348e1319b4eab9049619e2faf78eafa4 Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Sun, 29 Dec 2019 07:20:14 -0500 Subject: [PATCH 01/19] clean up zha device card and usage --- .../dialog-zha-device-info.ts | 3 +- src/panels/config/zha/zha-add-devices-page.ts | 2 +- .../{zha-binding.ts => zha-device-binding.ts} | 6 +- src/panels/config/zha/zha-device-card.ts | 87 +++++++++++-------- src/panels/config/zha/zha-group-page.ts | 2 + src/panels/config/zha/zha-node.ts | 5 +- 6 files changed, 59 insertions(+), 46 deletions(-) rename src/panels/config/zha/{zha-binding.ts => zha-device-binding.ts} (97%) diff --git a/src/dialogs/zha-device-info-dialog/dialog-zha-device-info.ts b/src/dialogs/zha-device-info-dialog/dialog-zha-device-info.ts index 6d4abc4e6669..436386e52e58 100644 --- a/src/dialogs/zha-device-info-dialog/dialog-zha-device-info.ts +++ b/src/dialogs/zha-device-info-dialog/dialog-zha-device-info.ts @@ -54,9 +54,8 @@ class DialogZHADeviceInfo extends LitElement { class="card" .hass=${this.hass} .device=${this._device} - showActions - isJoinPage @zha-device-removed=${this._onDeviceRemoved} + .showEntityDetail=${false} > `} diff --git a/src/panels/config/zha/zha-add-devices-page.ts b/src/panels/config/zha/zha-add-devices-page.ts index 04e75325189d..d08484bbc4c5 100644 --- a/src/panels/config/zha/zha-add-devices-page.ts +++ b/src/panels/config/zha/zha-add-devices-page.ts @@ -120,7 +120,7 @@ class ZHAAddDevicesPage extends LitElement { .narrow=${!this.isWide} .showHelp=${this._showHelp} .showActions=${!this._active} - isJoinPage + .showEntityDetail=${false} > ` )} diff --git a/src/panels/config/zha/zha-binding.ts b/src/panels/config/zha/zha-device-binding.ts similarity index 97% rename from src/panels/config/zha/zha-binding.ts rename to src/panels/config/zha/zha-device-binding.ts index 06a3d1b2dc45..b767bad898c1 100644 --- a/src/panels/config/zha/zha-binding.ts +++ b/src/panels/config/zha/zha-device-binding.ts @@ -24,8 +24,8 @@ import { HomeAssistant } from "../../../types"; import { ItemSelectedEvent } from "./types"; import "@polymer/paper-item/paper-item"; -@customElement("zha-binding-control") -export class ZHABindingControl extends LitElement { +@customElement("zha-device-binding-control") +export class ZHADeviceBindingControl extends LitElement { @property() public hass?: HomeAssistant; @property() public isWide?: boolean; @property() public selectedDevice?: ZHADevice; @@ -204,6 +204,6 @@ export class ZHABindingControl extends LitElement { declare global { interface HTMLElementTagNameMap { - "zha-binding-control": ZHABindingControl; + "zha-device-binding-control": ZHADeviceBindingControl; } } diff --git a/src/panels/config/zha/zha-device-card.ts b/src/panels/config/zha/zha-device-card.ts index ef96c070dc87..93383b5c8fed 100644 --- a/src/panels/config/zha/zha-device-card.ts +++ b/src/panels/config/zha/zha-device-card.ts @@ -58,8 +58,11 @@ class ZHADeviceCard extends LitElement { @property() public device?: ZHADevice; @property({ type: Boolean }) public narrow?: boolean; @property({ type: Boolean }) public showHelp?: boolean = false; - @property({ type: Boolean }) public showActions?: boolean; - @property({ type: Boolean }) public isJoinPage?: boolean; + @property({ type: Boolean }) public showActions?: boolean = true; + @property({ type: Boolean }) public showName?: boolean = true; + @property({ type: Boolean }) public showEntityDetail?: boolean = true; + @property({ type: Boolean }) public showModelInfo?: boolean = true; + @property({ type: Boolean }) public showEditableInfo?: boolean = true; @property() private _serviceData?: NodeServiceData; @property() private _areas: AreaRegistryEntry[] = []; @property() private _selectedAreaIndex: number = -1; @@ -137,9 +140,9 @@ class ZHADeviceCard extends LitElement { protected render(): TemplateResult | void { return html` - + ${ - this.isJoinPage + this.showModelInfo ? html`
${this.device!.model}
@@ -202,7 +205,7 @@ class ZHADeviceCard extends LitElement { .stateObj="${this.hass!.states[entity.entity_id]}" slot="item-icon" > - ${!this.isJoinPage + ${this.showEntityDetail ? html`
@@ -218,40 +221,48 @@ class ZHADeviceCard extends LitElement { ` )}
-
- -
-
- - - - ${this.hass!.localize("ui.dialogs.zha_device_info.no_area")} - + ${ + this.showEditableInfo + ? html` +
+ +
+
+ + + + ${this.hass!.localize( + "ui.dialogs.zha_device_info.no_area" + )} + - ${this._areas.map( - (entry) => html` - ${entry.name} - ` - )} - - -
+ ${this._areas.map( + (entry) => html` + ${entry.name} + ` + )} + + +
+ ` + : "" + } ${ this.showActions ? html` diff --git a/src/panels/config/zha/zha-group-page.ts b/src/panels/config/zha/zha-group-page.ts index 8aec748c877f..2ca6275b6ac5 100644 --- a/src/panels/config/zha/zha-group-page.ts +++ b/src/panels/config/zha/zha-group-page.ts @@ -121,6 +121,8 @@ export class ZHAGroupPage extends LitElement { .hass=${this.hass} .device=${member} .narrow=${this.narrow} + .showActions=${false} + .showEditableInfo=${false} > ` ) diff --git a/src/panels/config/zha/zha-node.ts b/src/panels/config/zha/zha-node.ts index 8281823bd391..f0a7dfc40722 100644 --- a/src/panels/config/zha/zha-node.ts +++ b/src/panels/config/zha/zha-node.ts @@ -61,8 +61,9 @@ export class ZHANode extends LitElement { .device=${this.device} .narrow=${!this.isWide} .showHelp=${this._showHelp} - isJoinPage - showActions + .showHelp=${this._showHelp} + .showName=${false} + .showModelInfo=${false} @zha-device-removed=${this._onDeviceRemoved} > From 05516298a12ef83b9f3993ae807f8d3a78102d0a Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Sun, 29 Dec 2019 10:58:58 -0500 Subject: [PATCH 02/19] group binding tile --- src/data/zha.ts | 22 ++ src/panels/config/zha/zha-device-page.ts | 39 +++- src/panels/config/zha/zha-group-binding.ts | 224 +++++++++++++++++++++ 3 files changed, 282 insertions(+), 3 deletions(-) create mode 100644 src/panels/config/zha/zha-group-binding.ts diff --git a/src/data/zha.ts b/src/data/zha.ts index d0d57d38d89f..a24f24a3e324 100644 --- a/src/data/zha.ts +++ b/src/data/zha.ts @@ -126,6 +126,28 @@ export const unbindDevices = ( target_ieee: targetIEEE, }); +export const bindDeviceToGroup = ( + hass: HomeAssistant, + deviceIEEE: string, + groupId: number +): Promise => + hass.callWS({ + type: "zha/groups/bind", + source_ieee: deviceIEEE, + group_id: groupId, + }); + +export const unbindDeviceFromGroup = ( + hass: HomeAssistant, + deviceIEEE: string, + groupId: number +): Promise => + hass.callWS({ + type: "zha/groups/unbind", + source_ieee: deviceIEEE, + group_id: groupId, + }); + export const readAttributeValue = ( hass: HomeAssistant, data: ReadAttributeServiceData diff --git a/src/panels/config/zha/zha-device-page.ts b/src/panels/config/zha/zha-device-page.ts index 8813f6526bae..4a2861c1313f 100755 --- a/src/panels/config/zha/zha-device-page.ts +++ b/src/panels/config/zha/zha-device-page.ts @@ -1,6 +1,7 @@ import "../../../layouts/hass-subpage"; import "../../../components/ha-paper-icon-button-arrow-prev"; -import "./zha-binding"; +import "./zha-device-binding"; +import "./zha-group-binding"; import "./zha-cluster-attributes"; import "./zha-cluster-commands"; import "./zha-clusters"; @@ -38,6 +39,24 @@ export class ZHADevicePage extends LitElement { @property() public device?: ZHADevice; @property() private _selectedCluster?: Cluster; @property() private _bindableDevices: ZHADevice[] = []; + @property() private _groups: ZHAGroup[] = []; + + private _firstUpdatedCalled: boolean = false; + + public connectedCallback(): void { + super.connectedCallback(); + if (this.hass && this._firstUpdatedCalled) { + this._fetchGroups(); + } + } + + protected firstUpdated(changedProperties: PropertyValues): void { + super.firstUpdated(changedProperties); + if (this.hass) { + this._fetchGroups(); + } + this._firstUpdatedCalled = true; + } protected updated(changedProperties: PropertyValues): void { if (changedProperties.has("ieee")) { @@ -82,12 +101,22 @@ export class ZHADevicePage extends LitElement { : ""} ${this._bindableDevices.length > 0 ? html` - + > + ` + : ""} + ${this._selectedDevice && this._groups.length > 0 + ? html` + ` : ""}
@@ -110,6 +139,10 @@ export class ZHADevicePage extends LitElement { } } + private async _fetchGroups() { + this._groups = (await fetchGroups(this.hass!)).sort(sortZHAGroups); + } + static get styles(): CSSResult[] { return [ haStyle, diff --git a/src/panels/config/zha/zha-group-binding.ts b/src/panels/config/zha/zha-group-binding.ts new file mode 100644 index 000000000000..d59d956ce04f --- /dev/null +++ b/src/panels/config/zha/zha-group-binding.ts @@ -0,0 +1,224 @@ +import "../../../components/buttons/ha-call-service-button"; +import "../../../components/ha-service-description"; +import "../../../components/ha-card"; +import "../ha-config-section"; +import "@material/mwc-button/mwc-button"; +import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; +import "@polymer/paper-icon-button/paper-icon-button"; +import "@polymer/paper-listbox/paper-listbox"; + +import { + css, + CSSResult, + customElement, + html, + LitElement, + property, + PropertyValues, + TemplateResult, +} from "lit-element"; + +import { + bindDeviceToGroup, + unbindDeviceFromGroup, + ZHADevice, + ZHAGroup, +} from "../../../data/zha"; +import { haStyle } from "../../../resources/styles"; +import { HomeAssistant } from "../../../types"; +import { ItemSelectedEvent } from "./types"; +import "@polymer/paper-item/paper-item"; + +@customElement("zha-group-binding-control") +export class ZHAGroupBindingControl extends LitElement { + @property() public hass?: HomeAssistant; + @property() public isWide?: boolean; + @property() public selectedDevice?: ZHADevice; + @property() private _showHelp: boolean = false; + @property() private _bindTargetIndex: number = -1; + @property() private groups: ZHAGroup[] = []; + private _groupToBind?: ZHAGroup; + + protected updated(changedProperties: PropertyValues): void { + if (changedProperties.has("selectedDevice")) { + this._bindTargetIndex = -1; + } + super.update(changedProperties); + } + + protected render(): TemplateResult | void { + return html` + +
+ Group Binding + + +
+ Bind and unbind groups. + + +
+ + + ${this.groups.map( + (group) => html` + ${group.name} + ` + )} + + +
+ ${this._showHelp + ? html` +
+ Select a group to issue a bind command. +
+ ` + : ""} +
+ Bind Group + ${this._showHelp + ? html` +
+ Bind group to the selected device. +
+ ` + : ""} + Unbind Group + ${this._showHelp + ? html` +
+ Unbind group to the selected device. +
+ ` + : ""} +
+ + + `; + } + + private _bindTargetIndexChanged(event: ItemSelectedEvent): void { + this._bindTargetIndex = event.target!.selected; + this._groupToBind = + this._bindTargetIndex === -1 + ? undefined + : this.groups[this._bindTargetIndex]; + } + + private _onHelpTap(): void { + this._showHelp = !this._showHelp; + } + + private async _onBindGroupClick(): Promise { + if (this.hass && this._groupToBind && this.selectedDevice) { + await bindDeviceToGroup( + this.hass, + this.selectedDevice.ieee, + this._groupToBind.group_id + ); + } + } + + private async _onUnbindGroupClick(): Promise { + if (this.hass && this._groupToBind && this.selectedDevice) { + await unbindDeviceFromGroup( + this.hass, + this.selectedDevice.ieee, + this._groupToBind.group_id + ); + } + } + + static get styles(): CSSResult[] { + return [ + haStyle, + css` + .flex { + -ms-flex: 1 1 0.000000001px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 0.000000001px; + flex-basis: 0.000000001px; + } + + .content { + margin-top: 24px; + } + + ha-card { + margin: 0 auto; + max-width: 600px; + } + + .card-actions.warning ha-call-service-button { + color: var(--google-red-500); + } + + .command-picker { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + padding-left: 28px; + padding-right: 28px; + padding-bottom: 10px; + } + + .input-text { + padding-left: 28px; + padding-right: 28px; + padding-bottom: 10px; + } + + .sectionHeader { + position: relative; + } + + .helpText { + color: grey; + padding: 16px; + } + + .toggle-help-icon { + position: absolute; + top: -6px; + right: 0; + color: var(--primary-color); + } + + ha-service-description { + display: block; + color: grey; + } + + [hidden] { + display: none; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "zha-group-binding-control": ZHAGroupBindingControl; + } +} From 1ced19a824a2d4bc1304a87ef862ce010f452c5a Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Sun, 29 Dec 2019 16:34:35 -0500 Subject: [PATCH 03/19] add cluster selection to group binding tile --- src/data/zha.ts | 8 +- src/panels/config/zha/functions.ts | 8 +- src/panels/config/zha/zha-clusters.ts | 8 +- src/panels/config/zha/zha-group-binding.ts | 97 ++++++++++++++++++++-- 4 files changed, 105 insertions(+), 16 deletions(-) diff --git a/src/data/zha.ts b/src/data/zha.ts index a24f24a3e324..1ef0f54ff694 100644 --- a/src/data/zha.ts +++ b/src/data/zha.ts @@ -129,23 +129,27 @@ export const unbindDevices = ( export const bindDeviceToGroup = ( hass: HomeAssistant, deviceIEEE: string, - groupId: number + groupId: number, + clusters: Cluster[] ): Promise => hass.callWS({ type: "zha/groups/bind", source_ieee: deviceIEEE, group_id: groupId, + bindings: clusters, }); export const unbindDeviceFromGroup = ( hass: HomeAssistant, deviceIEEE: string, - groupId: number + groupId: number, + clusters: Cluster[] ): Promise => hass.callWS({ type: "zha/groups/unbind", source_ieee: deviceIEEE, group_id: groupId, + bindings: clusters, }); export const readAttributeValue = ( diff --git a/src/panels/config/zha/functions.ts b/src/panels/config/zha/functions.ts index 1e7a2858de34..065eb9867eeb 100644 --- a/src/panels/config/zha/functions.ts +++ b/src/panels/config/zha/functions.ts @@ -1,4 +1,4 @@ -import { ZHADevice, ZHAGroup } from "../../../data/zha"; +import { ZHADevice, ZHAGroup, Cluster } from "../../../data/zha"; export const formatAsPaddedHex = (value: string | number): string => { let hex = value; @@ -19,3 +19,9 @@ export const sortZHAGroups = (a: ZHAGroup, b: ZHAGroup): number => { const nameb = b.name; return nameA.localeCompare(nameb); }; + +export const computeClusterKey = (cluster: Cluster): string => { + return `${cluster.name} (Endpoint id: ${ + cluster.endpoint_id + }, Id: ${formatAsPaddedHex(cluster.id)}, Type: ${cluster.type})`; +}; diff --git a/src/panels/config/zha/zha-clusters.ts b/src/panels/config/zha/zha-clusters.ts index 5b3f6d56f7a9..999816e772fb 100644 --- a/src/panels/config/zha/zha-clusters.ts +++ b/src/panels/config/zha/zha-clusters.ts @@ -21,7 +21,7 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { Cluster, fetchClustersForZhaNode, ZHADevice } from "../../../data/zha"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; -import { formatAsPaddedHex } from "./functions"; +import { computeClusterKey } from "./functions"; import { ItemSelectedEvent } from "./types"; declare global { @@ -33,12 +33,6 @@ declare global { } } -const computeClusterKey = (cluster: Cluster): string => { - return `${cluster.name} (Endpoint id: ${ - cluster.endpoint_id - }, Id: ${formatAsPaddedHex(cluster.id)}, Type: ${cluster.type})`; -}; - export class ZHAClusters extends LitElement { @property() public hass?: HomeAssistant; @property() public isWide?: boolean; diff --git a/src/panels/config/zha/zha-group-binding.ts b/src/panels/config/zha/zha-group-binding.ts index d59d956ce04f..3954a9a60fef 100644 --- a/src/panels/config/zha/zha-group-binding.ts +++ b/src/panels/config/zha/zha-group-binding.ts @@ -23,11 +23,14 @@ import { unbindDeviceFromGroup, ZHADevice, ZHAGroup, + Cluster, + fetchClustersForZhaNode, } from "../../../data/zha"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; import { ItemSelectedEvent } from "./types"; import "@polymer/paper-item/paper-item"; +import { computeClusterKey } from "./functions"; @customElement("zha-group-binding-control") export class ZHAGroupBindingControl extends LitElement { @@ -37,11 +40,16 @@ export class ZHAGroupBindingControl extends LitElement { @property() private _showHelp: boolean = false; @property() private _bindTargetIndex: number = -1; @property() private groups: ZHAGroup[] = []; + @property() private _selectedClusterIndex = -1; + @property() private _clusters: Cluster[] = []; private _groupToBind?: ZHAGroup; + private _clusterToBind?: Cluster; protected updated(changedProperties: PropertyValues): void { if (changedProperties.has("selectedDevice")) { this._bindTargetIndex = -1; + this._selectedClusterIndex = -1; + this._fetchClustersForZhaNode(); } super.update(changedProperties); } @@ -83,8 +91,43 @@ export class ZHAGroupBindingControl extends LitElement {
` : ""} +
+ + + ${this._clusters.map( + (entry) => html` + ${computeClusterKey(entry)} + ` + )} + + +
+ ${this._showHelp + ? html` +
+ ${this.hass!.localize( + "ui.panel.config.zha.clusters.help_cluster_dropdown" + )} +
+ ` + : ""}
- Bind Group ${this._showHelp @@ -94,7 +137,13 @@ export class ZHAGroupBindingControl extends LitElement {
` : ""} - Unbind Group ${this._showHelp @@ -123,22 +172,58 @@ export class ZHAGroupBindingControl extends LitElement { } private async _onBindGroupClick(): Promise { - if (this.hass && this._groupToBind && this.selectedDevice) { + if ( + this.hass && + this._groupToBind && + this._clusterToBind && + this.selectedDevice + ) { await bindDeviceToGroup( this.hass, this.selectedDevice.ieee, - this._groupToBind.group_id + this._groupToBind.group_id, + [this._clusterToBind] ); } } private async _onUnbindGroupClick(): Promise { - if (this.hass && this._groupToBind && this.selectedDevice) { + if ( + this.hass && + this._groupToBind && + this._clusterToBind && + this.selectedDevice + ) { await unbindDeviceFromGroup( this.hass, this.selectedDevice.ieee, - this._groupToBind.group_id + this._groupToBind.group_id, + [this._clusterToBind] + ); + } + } + + private _selectedClusterChanged(event: ItemSelectedEvent): void { + this._selectedClusterIndex = event.target!.selected; + this._clusterToBind = + this._selectedClusterIndex === -1 + ? undefined + : this._clusters[this._selectedClusterIndex]; + } + + private async _fetchClustersForZhaNode(): Promise { + if (this.hass) { + this._clusters = await fetchClustersForZhaNode( + this.hass, + this.selectedDevice!.ieee ); + this._clusters + .filter((cluster) => { + return cluster.type.toLowerCase() === "out"; + }) + .sort((a, b) => { + return a.name.localeCompare(b.name); + }); } } From f9346261ef6d5f97b8f714a0728607e65b7accf2 Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Sun, 29 Dec 2019 16:48:51 -0500 Subject: [PATCH 04/19] fix css class name --- src/panels/config/zha/zha-group-binding.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/config/zha/zha-group-binding.ts b/src/panels/config/zha/zha-group-binding.ts index 3954a9a60fef..38ca396a06a9 100644 --- a/src/panels/config/zha/zha-group-binding.ts +++ b/src/panels/config/zha/zha-group-binding.ts @@ -86,7 +86,7 @@ export class ZHAGroupBindingControl extends LitElement {
${this._showHelp ? html` -
+
Select a group to issue a bind command.
` From 01d230282fee80fbb34d9c680fceadb5c6b52aff Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Mon, 30 Dec 2019 08:20:51 -0500 Subject: [PATCH 05/19] fix filtering --- src/panels/config/zha/zha-group-binding.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/config/zha/zha-group-binding.ts b/src/panels/config/zha/zha-group-binding.ts index 38ca396a06a9..e0b4cd080040 100644 --- a/src/panels/config/zha/zha-group-binding.ts +++ b/src/panels/config/zha/zha-group-binding.ts @@ -217,7 +217,7 @@ export class ZHAGroupBindingControl extends LitElement { this.hass, this.selectedDevice!.ieee ); - this._clusters + this._clusters = this._clusters .filter((cluster) => { return cluster.type.toLowerCase() === "out"; }) From 1472f4b0f8dd0417060947205b452172e3b4dddc Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Mon, 30 Dec 2019 09:39:37 -0500 Subject: [PATCH 06/19] multiselect for clusters in group binding --- .../config/zha/zha-clusters-data-table.ts | 91 +++++++++++++++++++ src/panels/config/zha/zha-group-binding.ts | 75 ++++++++------- 2 files changed, 133 insertions(+), 33 deletions(-) create mode 100644 src/panels/config/zha/zha-clusters-data-table.ts diff --git a/src/panels/config/zha/zha-clusters-data-table.ts b/src/panels/config/zha/zha-clusters-data-table.ts new file mode 100644 index 000000000000..00fcb14ce6fb --- /dev/null +++ b/src/panels/config/zha/zha-clusters-data-table.ts @@ -0,0 +1,91 @@ +import "../../../components/data-table/ha-data-table"; +import "../../../components/entity/ha-state-icon"; + +import memoizeOne from "memoize-one"; + +import { + LitElement, + html, + TemplateResult, + property, + customElement, +} from "lit-element"; +import { HomeAssistant } from "../../../types"; +// tslint:disable-next-line +import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table"; +// tslint:disable-next-line +import { Cluster } from "../../../data/zha"; +import { formatAsPaddedHex } from "./functions"; + +export interface ClusterRowData extends Cluster { + cluster?: ClusterRowData; +} + +@customElement("zha-clusters-data-table") +export class ZHAClustersDataTable extends LitElement { + @property() public hass!: HomeAssistant; + @property() public narrow = false; + @property() public clusters: Cluster[] = []; + + private _clusters = memoizeOne((clusters: Cluster[]) => { + let outputClusters: ClusterRowData[] = clusters; + + outputClusters = outputClusters.map((cluster) => { + return { + ...cluster, + cluster_id: cluster.endpoint_id + "-" + cluster.id, + }; + }); + + return outputClusters; + }); + + private _columns = memoizeOne( + (narrow: boolean): DataTableColumnContainer => + narrow + ? { + name: { + title: "Name", + sortable: true, + direction: "asc", + }, + } + : { + name: { + title: "Name", + sortable: true, + direction: "asc", + }, + id: { + title: "ID", + template: (id: number) => { + return html` + ${formatAsPaddedHex(id)} + `; + }, + sortable: true, + }, + endpoint_id: { + title: "Endpoint ID", + sortable: true, + }, + } + ); + + protected render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "zha-clusters-data-table": ZHAClustersDataTable; + } +} diff --git a/src/panels/config/zha/zha-group-binding.ts b/src/panels/config/zha/zha-group-binding.ts index e0b4cd080040..e1058b265f1e 100644 --- a/src/panels/config/zha/zha-group-binding.ts +++ b/src/panels/config/zha/zha-group-binding.ts @@ -26,29 +26,32 @@ import { Cluster, fetchClustersForZhaNode, } from "../../../data/zha"; +import "./zha-clusters-data-table"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; import { ItemSelectedEvent } from "./types"; import "@polymer/paper-item/paper-item"; -import { computeClusterKey } from "./functions"; +import { SelectionChangedEvent } from "../../../components/data-table/ha-data-table"; @customElement("zha-group-binding-control") export class ZHAGroupBindingControl extends LitElement { @property() public hass?: HomeAssistant; @property() public isWide?: boolean; + @property() public narrow?: boolean; @property() public selectedDevice?: ZHADevice; @property() private _showHelp: boolean = false; @property() private _bindTargetIndex: number = -1; @property() private groups: ZHAGroup[] = []; - @property() private _selectedClusterIndex = -1; + @property() private _selectedClusters: string[] = []; @property() private _clusters: Cluster[] = []; private _groupToBind?: ZHAGroup; - private _clusterToBind?: Cluster; + private _clustersToBind?: Cluster[]; protected updated(changedProperties: PropertyValues): void { if (changedProperties.has("selectedDevice")) { this._bindTargetIndex = -1; - this._selectedClusterIndex = -1; + this._selectedClusters = []; + this._clustersToBind = []; this._fetchClustersForZhaNode(); } super.update(changedProperties); @@ -92,24 +95,13 @@ export class ZHAGroupBindingControl extends LitElement { ` : ""}
- - - ${this._clusters.map( - (entry) => html` - ${computeClusterKey(entry)} - ` - )} - - + >
${this._showHelp ? html` @@ -125,7 +117,8 @@ export class ZHAGroupBindingControl extends LitElement { @click="${this._onBindGroupClick}" ?disabled="${!( this._groupToBind && - this._clusterToBind && + this._clustersToBind && + this._clustersToBind?.length > 0 && this.selectedDevice )}" >Bind GroupUnbind Group 0 && this.selectedDevice ) { await bindDeviceToGroup( this.hass, this.selectedDevice.ieee, this._groupToBind.group_id, - [this._clusterToBind] + this._clustersToBind ); } } @@ -191,24 +186,38 @@ export class ZHAGroupBindingControl extends LitElement { if ( this.hass && this._groupToBind && - this._clusterToBind && + this._clustersToBind && + this._clustersToBind?.length > 0 && this.selectedDevice ) { await unbindDeviceFromGroup( this.hass, this.selectedDevice.ieee, this._groupToBind.group_id, - [this._clusterToBind] + this._clustersToBind ); } } - private _selectedClusterChanged(event: ItemSelectedEvent): void { - this._selectedClusterIndex = event.target!.selected; - this._clusterToBind = - this._selectedClusterIndex === -1 - ? undefined - : this._clusters[this._selectedClusterIndex]; + private _handleClusterSelectionChanged(event: CustomEvent): void { + const changedSelection = event.detail as SelectionChangedEvent; + const clusterId = changedSelection.id; + if (changedSelection.selected) { + this._selectedClusters.push(clusterId); + } else { + const index = this._selectedClusters.indexOf(clusterId); + if (index !== -1) { + this._selectedClusters.splice(index, 1); + } + } + this._selectedClusters = [...this._selectedClusters]; + this._clustersToBind = []; + for (const clusterIndex of this._selectedClusters) { + const selectedCluster = this._clusters.find((cluster) => { + return clusterIndex === cluster.endpoint_id + "-" + cluster.id; + }); + this._clustersToBind.push(selectedCluster!); + } } private async _fetchClustersForZhaNode(): Promise { From b81f3585ea3409d39d38cb7b279d496b4ea7d03f Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Mon, 30 Dec 2019 09:42:03 -0500 Subject: [PATCH 07/19] pass narrow to cluster table --- src/panels/config/zha/zha-device-page.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/panels/config/zha/zha-device-page.ts b/src/panels/config/zha/zha-device-page.ts index 4a2861c1313f..cacf4e0d99f8 100755 --- a/src/panels/config/zha/zha-device-page.ts +++ b/src/panels/config/zha/zha-device-page.ts @@ -37,6 +37,7 @@ export class ZHADevicePage extends LitElement { @property() public isWide?: boolean; @property() public ieee?: string; @property() public device?: ZHADevice; + @property() public narrow?: boolean; @property() private _selectedCluster?: Cluster; @property() private _bindableDevices: ZHADevice[] = []; @property() private _groups: ZHAGroup[] = []; @@ -113,6 +114,7 @@ export class ZHADevicePage extends LitElement { ? html` Date: Mon, 30 Dec 2019 10:02:21 -0500 Subject: [PATCH 08/19] fix tables --- src/panels/config/zha/zha-add-group-page.ts | 5 ++++- src/panels/config/zha/zha-group-binding.ts | 5 ++++- src/panels/config/zha/zha-group-page.ts | 10 ++++++++-- src/panels/config/zha/zha-groups-dashboard.ts | 5 ++++- src/panels/config/zha/zha-groups-data-table.ts | 18 +++++++++++++++--- 5 files changed, 35 insertions(+), 8 deletions(-) diff --git a/src/panels/config/zha/zha-add-group-page.ts b/src/panels/config/zha/zha-add-group-page.ts index 076cddce505b..6ce4e71f3e26 100644 --- a/src/panels/config/zha/zha-add-group-page.ts +++ b/src/panels/config/zha/zha-add-group-page.ts @@ -117,7 +117,10 @@ export class ZHAAddGroupPage extends LitElement { private _handleAddSelectionChanged(ev: CustomEvent): void { const changedSelection = ev.detail as SelectionChangedEvent; const entity = changedSelection.id; - if (changedSelection.selected) { + if ( + changedSelection.selected && + !this._selectedDevicesToAdd.includes(entity) + ) { this._selectedDevicesToAdd.push(entity); } else { const index = this._selectedDevicesToAdd.indexOf(entity); diff --git a/src/panels/config/zha/zha-group-binding.ts b/src/panels/config/zha/zha-group-binding.ts index e1058b265f1e..c7fbd59096c0 100644 --- a/src/panels/config/zha/zha-group-binding.ts +++ b/src/panels/config/zha/zha-group-binding.ts @@ -202,7 +202,10 @@ export class ZHAGroupBindingControl extends LitElement { private _handleClusterSelectionChanged(event: CustomEvent): void { const changedSelection = event.detail as SelectionChangedEvent; const clusterId = changedSelection.id; - if (changedSelection.selected) { + if ( + changedSelection.selected && + !this._selectedClusters.includes(clusterId) + ) { this._selectedClusters.push(clusterId); } else { const index = this._selectedClusters.indexOf(clusterId); diff --git a/src/panels/config/zha/zha-group-page.ts b/src/panels/config/zha/zha-group-page.ts index 2ca6275b6ac5..afd265c2a4da 100644 --- a/src/panels/config/zha/zha-group-page.ts +++ b/src/panels/config/zha/zha-group-page.ts @@ -226,7 +226,10 @@ export class ZHAGroupPage extends LitElement { private _handleAddSelectionChanged(ev: CustomEvent): void { const changedSelection = ev.detail as SelectionChangedEvent; const entity = changedSelection.id; - if (changedSelection.selected) { + if ( + changedSelection.selected && + !this._selectedDevicesToAdd.includes(entity) + ) { this._selectedDevicesToAdd.push(entity); } else { const index = this._selectedDevicesToAdd.indexOf(entity); @@ -240,7 +243,10 @@ export class ZHAGroupPage extends LitElement { private _handleRemoveSelectionChanged(ev: CustomEvent): void { const changedSelection = ev.detail as SelectionChangedEvent; const entity = changedSelection.id; - if (changedSelection.selected) { + if ( + changedSelection.selected && + !this._selectedDevicesToRemove.includes(entity) + ) { this._selectedDevicesToRemove.push(entity); } else { const index = this._selectedDevicesToRemove.indexOf(entity); diff --git a/src/panels/config/zha/zha-groups-dashboard.ts b/src/panels/config/zha/zha-groups-dashboard.ts index 874918fd845e..3103ef74df47 100644 --- a/src/panels/config/zha/zha-groups-dashboard.ts +++ b/src/panels/config/zha/zha-groups-dashboard.ts @@ -105,7 +105,10 @@ export class ZHAGroupsDashboard extends LitElement { private _handleRemoveSelectionChanged(ev: CustomEvent): void { const changedSelection = ev.detail as SelectionChangedEvent; const groupId = Number(changedSelection.id); - if (changedSelection.selected) { + if ( + changedSelection.selected && + !this._selectedGroupsToRemove.includes(groupId) + ) { this._selectedGroupsToRemove.push(groupId); } else { const index = this._selectedGroupsToRemove.indexOf(groupId); diff --git a/src/panels/config/zha/zha-groups-data-table.ts b/src/panels/config/zha/zha-groups-data-table.ts index 4465a6cea5e8..e89bc65dadb2 100644 --- a/src/panels/config/zha/zha-groups-data-table.ts +++ b/src/panels/config/zha/zha-groups-data-table.ts @@ -20,7 +20,7 @@ import { navigate } from "../../../common/navigate"; export interface GroupRowData extends ZHAGroup { group?: GroupRowData; - id?: number; + id?: string; } @customElement("zha-groups-data-table") @@ -30,6 +30,19 @@ export class ZHAGroupsDataTable extends LitElement { @property() public groups: ZHAGroup[] = []; @property() public selectable = false; + private _groups = memoizeOne((groups: ZHAGroup[]) => { + let outputGroups: GroupRowData[] = groups; + + outputGroups = outputGroups.map((group) => { + return { + ...group, + id: "" + group.group_id, + }; + }); + + return outputGroups; + }); + private _columns = memoizeOne( (narrow: boolean): DataTableColumnContainer => narrow @@ -83,8 +96,7 @@ export class ZHAGroupsDataTable extends LitElement { return html` `; From aabe7c4f972a6dbe3f0d3cb3cdc8344b09ff434e Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Wed, 8 Jan 2020 13:58:40 -0500 Subject: [PATCH 09/19] fix device page --- src/panels/config/zha/zha-device-page.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/panels/config/zha/zha-device-page.ts b/src/panels/config/zha/zha-device-page.ts index cacf4e0d99f8..9aa07a82b2f3 100755 --- a/src/panels/config/zha/zha-device-page.ts +++ b/src/panels/config/zha/zha-device-page.ts @@ -25,10 +25,12 @@ import { fetchBindableDevices, ZHADevice, fetchZHADevice, + ZHAGroup, + fetchGroups, } from "../../../data/zha"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; -import { sortZHADevices } from "./functions"; +import { sortZHADevices, sortZHAGroups } from "./functions"; import { ZHAClusterSelectedParams } from "./types"; @customElement("zha-device-page") @@ -110,13 +112,13 @@ export class ZHADevicePage extends LitElement { > ` : ""} - ${this._selectedDevice && this._groups.length > 0 + ${this.device && this._groups.length > 0 ? html` ` From fc10de3f14aabfa38b339353dc5ff545bbcb5885 Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Wed, 8 Jan 2020 14:06:47 -0500 Subject: [PATCH 10/19] address remaing comments from previous PR --- src/panels/config/zha/zha-config-dashboard.ts | 2 +- src/panels/config/zha/zha-groups-dashboard.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/panels/config/zha/zha-config-dashboard.ts b/src/panels/config/zha/zha-config-dashboard.ts index dcf8ff987004..4c86d128e82a 100644 --- a/src/panels/config/zha/zha-config-dashboard.ts +++ b/src/panels/config/zha/zha-config-dashboard.ts @@ -48,7 +48,6 @@ class ZHAConfigDashboard extends LitElement { ...device, name: device.user_given_name ? device.user_given_name : device.name, nwk: formatAsPaddedHex(device.nwk), - id: device.ieee, }; }); @@ -142,6 +141,7 @@ class ZHAConfigDashboard extends LitElement { .columns=${this._columns(this.narrow)} .data=${this._memoizeDevices(this._devices)} @row-click=${this._handleDeviceClicked} + .id=${"ieee"} > diff --git a/src/panels/config/zha/zha-groups-dashboard.ts b/src/panels/config/zha/zha-groups-dashboard.ts index 3103ef74df47..4e21dfa5a9de 100644 --- a/src/panels/config/zha/zha-groups-dashboard.ts +++ b/src/panels/config/zha/zha-groups-dashboard.ts @@ -47,9 +47,9 @@ export class ZHAGroupsDashboard extends LitElement { protected render(): TemplateResult { return html` Date: Wed, 8 Jan 2020 14:27:59 -0500 Subject: [PATCH 11/19] fix bad cherry-pick --- src/panels/config/zha/zha-node.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/panels/config/zha/zha-node.ts b/src/panels/config/zha/zha-node.ts index f0a7dfc40722..95071ef3ff99 100644 --- a/src/panels/config/zha/zha-node.ts +++ b/src/panels/config/zha/zha-node.ts @@ -61,9 +61,9 @@ export class ZHANode extends LitElement { .device=${this.device} .narrow=${!this.isWide} .showHelp=${this._showHelp} - .showHelp=${this._showHelp} - .showName=${false} - .showModelInfo=${false} + showName + showModelInfo + .showEntityDetail=${false} @zha-device-removed=${this._onDeviceRemoved} > From 6ab21e001ceb2a13369759714e3d2d8eb4c6df4b Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Mon, 13 Jan 2020 07:44:54 -0500 Subject: [PATCH 12/19] css cleanup --- src/panels/config/zha/zha-device-binding.ts | 4 ++- src/panels/config/zha/zha-group-binding.ts | 32 +++++++-------------- 2 files changed, 14 insertions(+), 22 deletions(-) diff --git a/src/panels/config/zha/zha-device-binding.ts b/src/panels/config/zha/zha-device-binding.ts index b767bad898c1..fa4fe4d8a951 100644 --- a/src/panels/config/zha/zha-device-binding.ts +++ b/src/panels/config/zha/zha-device-binding.ts @@ -175,7 +175,9 @@ export class ZHADeviceBindingControl extends LitElement { .helpText { color: grey; - padding: 16px; + padding-left: 28px; + padding-right: 28px; + padding-bottom: 10px; } .header { diff --git a/src/panels/config/zha/zha-group-binding.ts b/src/panels/config/zha/zha-group-binding.ts index c7fbd59096c0..0dda51960f08 100644 --- a/src/panels/config/zha/zha-group-binding.ts +++ b/src/panels/config/zha/zha-group-binding.ts @@ -73,7 +73,7 @@ export class ZHAGroupBindingControl extends LitElement {
- + ${this._showHelp ? html` -
+
Select a group to issue a bind command.
` @@ -100,12 +100,12 @@ export class ZHAGroupBindingControl extends LitElement { .narrow=${this.narrow} .clusters=${this._clusters} @selection-changed=${this._handleClusterSelectionChanged} - class="flex" + class="menu" >
${this._showHelp ? html` -
+
${this.hass!.localize( "ui.panel.config.zha.clusters.help_cluster_dropdown" )} @@ -243,12 +243,8 @@ export class ZHAGroupBindingControl extends LitElement { return [ haStyle, css` - .flex { - -ms-flex: 1 1 0.000000001px; - -webkit-flex: 1; - flex: 1; - -webkit-flex-basis: 0.000000001px; - flex-basis: 0.000000001px; + .menu { + width: 100%; } .content { @@ -265,14 +261,6 @@ export class ZHAGroupBindingControl extends LitElement { } .command-picker { - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - -webkit-align-items: center; align-items: center; padding-left: 28px; padding-right: 28px; @@ -286,16 +274,18 @@ export class ZHAGroupBindingControl extends LitElement { } .sectionHeader { - position: relative; + flex-grow: 1; } .helpText { color: grey; - padding: 16px; + padding-left: 28px; + padding-right: 28px; + padding-bottom: 10px; } .toggle-help-icon { - position: absolute; + float: right; top: -6px; right: 0; color: var(--primary-color); From 3e315b05bdad3011da762482a3425b5827773845 Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Mon, 13 Jan 2020 08:05:06 -0500 Subject: [PATCH 13/19] consistency --- src/panels/config/zha/zha-node.ts | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/panels/config/zha/zha-node.ts b/src/panels/config/zha/zha-node.ts index 95071ef3ff99..c6f7d759d535 100644 --- a/src/panels/config/zha/zha-node.ts +++ b/src/panels/config/zha/zha-node.ts @@ -55,17 +55,19 @@ export class ZHANode extends LitElement { "ui.panel.config.zha.node_management.hint_wakeup" )} - +
+ +
`; } @@ -94,6 +96,12 @@ export class ZHANode extends LitElement { padding-bottom: 16px; } + .content { + padding: 28px 20px 0; + max-width: 640px; + margin: 0 auto; + } + ha-card { margin: 0 auto; max-width: 600px; From 1794fd498af97d1e0416a1b1febf425177e5b4a8 Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Mon, 13 Jan 2020 08:05:16 -0500 Subject: [PATCH 14/19] use properties --- src/panels/config/zha/zha-group-binding.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/panels/config/zha/zha-group-binding.ts b/src/panels/config/zha/zha-group-binding.ts index 0dda51960f08..c079f5ef8c01 100644 --- a/src/panels/config/zha/zha-group-binding.ts +++ b/src/panels/config/zha/zha-group-binding.ts @@ -115,7 +115,7 @@ export class ZHAGroupBindingControl extends LitElement {
0 && @@ -132,7 +132,7 @@ export class ZHAGroupBindingControl extends LitElement { : ""} 0 && From e9ab10d615f513e981afd2b1872b5401d98522a9 Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Mon, 13 Jan 2020 08:18:11 -0500 Subject: [PATCH 15/19] translations --- src/panels/config/zha/zha-group-binding.ts | 41 +++++++++++++++++----- src/translations/en.json | 11 ++++++ 2 files changed, 43 insertions(+), 9 deletions(-) diff --git a/src/panels/config/zha/zha-group-binding.ts b/src/panels/config/zha/zha-group-binding.ts index c079f5ef8c01..d62460f4fc07 100644 --- a/src/panels/config/zha/zha-group-binding.ts +++ b/src/panels/config/zha/zha-group-binding.ts @@ -61,7 +61,11 @@ export class ZHAGroupBindingControl extends LitElement { return html`
- Group Binding + ${this.hass!.localize( + "ui.panel.config.zha.group_binding.header" + )}
- Bind and unbind groups. + ${this.hass!.localize( + "ui.panel.config.zha.group_binding.introduction" + )}
- + - Select a group to issue a bind command. + ${this.hass!.localize( + "ui.panel.config.zha.group_binding.group_picker_help" + )}
` : ""} @@ -107,7 +122,7 @@ export class ZHAGroupBindingControl extends LitElement { ? html`
${this.hass!.localize( - "ui.panel.config.zha.clusters.help_cluster_dropdown" + "ui.panel.config.zha.group_binding.cluster_selection_help" )}
` @@ -121,12 +136,16 @@ export class ZHAGroupBindingControl extends LitElement { this._clustersToBind?.length > 0 && this.selectedDevice )}" - >Bind Group${this.hass!.localize( + "ui.panel.config.zha.group_binding.bind_button_label" + )} ${this._showHelp ? html`
- Bind group to the selected device. + ${this.hass!.localize( + "ui.panel.config.zha.group_binding.bind_button_help" + )}
` : ""} @@ -138,12 +157,16 @@ export class ZHAGroupBindingControl extends LitElement { this._clustersToBind?.length > 0 && this.selectedDevice )}" - >Unbind Group${this.hass!.localize( + "ui.panel.config.zha.group_binding.unbind_button_label" + )} ${this._showHelp ? html`
- Unbind group to the selected device. + ${this.hass!.localize( + "ui.panel.config.zha.group_binding.unbind_button_help" + )}
` : ""} diff --git a/src/translations/en.json b/src/translations/en.json index c55df7c9d6cb..fd318810fb1b 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1510,6 +1510,17 @@ "create_group": "Zigbee Home Automation - Create Group", "create": "Create Group", "creating_group": "Creating Group" + }, + "group_binding": { + "header": "Group Binding", + "introduction": "Bind and unbind groups.", + "group_picker_label": "Bindable Groups", + "group_picker_help": "Select a group to issue a bind command.", + "cluster_selection_help": "Select clusters to bind to the selected group.", + "bind_button_label": "Bind Group", + "unbind_button_label": "Unbind Group", + "bind_button_help": "Bind the selected group to the selected device clusters.", + "unbind_button_help": "Unbind the selected group from the selected device clusters." } }, "zwave": { From 68df117e4fa54a20b56d00d546c618b348d05bdd Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Tue, 14 Jan 2020 07:13:59 -0500 Subject: [PATCH 16/19] add confirmation dialog to remove button --- src/panels/config/zha/zha-device-card.ts | 3 +++ src/translations/en.json | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/panels/config/zha/zha-device-card.ts b/src/panels/config/zha/zha-device-card.ts index 93383b5c8fed..2cb9758d91a8 100644 --- a/src/panels/config/zha/zha-device-card.ts +++ b/src/panels/config/zha/zha-device-card.ts @@ -286,6 +286,9 @@ class ZHADeviceCard extends LitElement { .hass="${this.hass}" domain="zha" service="remove" + confirmation=${this.hass!.localize( + "ui.dialogs.zha_device_info.confirmations.remove" + )} .serviceData="${this._serviceData}" > ${this.hass!.localize( diff --git a/src/translations/en.json b/src/translations/en.json index fd318810fb1b..13bdd4f9f00b 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -624,6 +624,9 @@ "updateDeviceName": "Set a custom name for this device in the device registry.", "remove": "Remove a device from the Zigbee network." }, + "confirmations": { + "remove": "Are you sure that you want to remove the device?" + }, "quirk": "Quirk", "last_seen": "Last Seen", "power_source": "Power Source", From 1c0e273dee572ac70b7a0f887020a3611ad2b862 Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Thu, 16 Jan 2020 08:15:54 -0500 Subject: [PATCH 17/19] fix css --- src/panels/config/zha/zha-node.ts | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/panels/config/zha/zha-node.ts b/src/panels/config/zha/zha-node.ts index c6f7d759d535..0ce0d0bd2502 100644 --- a/src/panels/config/zha/zha-node.ts +++ b/src/panels/config/zha/zha-node.ts @@ -97,22 +97,13 @@ export class ZHANode extends LitElement { } .content { - padding: 28px 20px 0; - max-width: 640px; - margin: 0 auto; - } - - ha-card { - margin: 0 auto; max-width: 600px; + margin: 0 auto; } .card { + padding: 28px 20px 0; margin-top: 24px; - box-sizing: border-box; - display: flex; - flex: 1; - word-wrap: break-word; } ha-service-description { From 714fc666a6366510aa98f0a7ec413be61ca38d51 Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Thu, 16 Jan 2020 08:16:10 -0500 Subject: [PATCH 18/19] review comments --- .../config/zha/zha-clusters-data-table.ts | 3 +- src/panels/config/zha/zha-device-card.ts | 8 +-- src/panels/config/zha/zha-group-binding.ts | 56 ++++++++----------- .../config/zha/zha-groups-data-table.ts | 2 +- 4 files changed, 30 insertions(+), 39 deletions(-) diff --git a/src/panels/config/zha/zha-clusters-data-table.ts b/src/panels/config/zha/zha-clusters-data-table.ts index 00fcb14ce6fb..db28edad38e9 100644 --- a/src/panels/config/zha/zha-clusters-data-table.ts +++ b/src/panels/config/zha/zha-clusters-data-table.ts @@ -18,7 +18,8 @@ import { Cluster } from "../../../data/zha"; import { formatAsPaddedHex } from "./functions"; export interface ClusterRowData extends Cluster { - cluster?: ClusterRowData; + cluster?: Cluster; + cluster_id?: string; } @customElement("zha-clusters-data-table") diff --git a/src/panels/config/zha/zha-device-card.ts b/src/panels/config/zha/zha-device-card.ts index 2cb9758d91a8..1e42de95e253 100644 --- a/src/panels/config/zha/zha-device-card.ts +++ b/src/panels/config/zha/zha-device-card.ts @@ -229,14 +229,14 @@ class ZHADeviceCard extends LitElement { type="string" @change="${this._saveCustomName}" .value="${this._userGivenName}" - placeholder="${this.hass!.localize( + .placeholder="${this.hass!.localize( "ui.dialogs.zha_device_info.zha_device_card.device_name_placeholder" )}" >
html` - ${entry.name} + ${entry.name} ` )} @@ -286,7 +286,7 @@ class ZHADeviceCard extends LitElement { .hass="${this.hass}" domain="zha" service="remove" - confirmation=${this.hass!.localize( + .confirmation=${this.hass!.localize( "ui.dialogs.zha_device_info.confirmations.remove" )} .serviceData="${this._serviceData}" diff --git a/src/panels/config/zha/zha-group-binding.ts b/src/panels/config/zha/zha-group-binding.ts index d62460f4fc07..278b543f1d5c 100644 --- a/src/panels/config/zha/zha-group-binding.ts +++ b/src/panels/config/zha/zha-group-binding.ts @@ -82,7 +82,7 @@ export class ZHAGroupBindingControl extends LitElement {
${this.hass!.localize( "ui.panel.config.zha.group_binding.bind_button_label" )}${this.hass!.localize( "ui.panel.config.zha.group_binding.unbind_button_label" )} { - if ( - this.hass && - this._groupToBind && - this._clustersToBind && - this._clustersToBind?.length > 0 && - this.selectedDevice - ) { + if (this.hass && this._canBind) { await bindDeviceToGroup( this.hass, - this.selectedDevice.ieee, - this._groupToBind.group_id, - this._clustersToBind + this.selectedDevice!.ieee, + this._groupToBind!.group_id, + this._clustersToBind! ); } } private async _onUnbindGroupClick(): Promise { - if ( - this.hass && - this._groupToBind && - this._clustersToBind && - this._clustersToBind?.length > 0 && - this.selectedDevice - ) { + if (this.hass && this._canBind) { await unbindDeviceFromGroup( this.hass, - this.selectedDevice.ieee, - this._groupToBind.group_id, - this._clustersToBind + this.selectedDevice!.ieee, + this._groupToBind!.group_id, + this._clustersToBind! ); } } @@ -262,6 +240,18 @@ export class ZHAGroupBindingControl extends LitElement { } } + private get _canBind(): boolean { + return ( + this._groupToBind !== null && + this._groupToBind !== undefined && + this._clustersToBind !== null && + this._clustersToBind !== undefined && + this._clustersToBind?.length > 0 && + this.selectedDevice !== null && + this.selectedDevice !== undefined + ); + } + static get styles(): CSSResult[] { return [ haStyle, diff --git a/src/panels/config/zha/zha-groups-data-table.ts b/src/panels/config/zha/zha-groups-data-table.ts index e89bc65dadb2..6a543cbab4db 100644 --- a/src/panels/config/zha/zha-groups-data-table.ts +++ b/src/panels/config/zha/zha-groups-data-table.ts @@ -36,7 +36,7 @@ export class ZHAGroupsDataTable extends LitElement { outputGroups = outputGroups.map((group) => { return { ...group, - id: "" + group.group_id, + id: String(group.group_id), }; }); From 424dd71bfbcc0a61026a730c7149fea504f59353 Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Thu, 16 Jan 2020 08:24:39 -0500 Subject: [PATCH 19/19] remove noise --- src/panels/config/zha/zha-group-binding.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/panels/config/zha/zha-group-binding.ts b/src/panels/config/zha/zha-group-binding.ts index 278b543f1d5c..769f72e00505 100644 --- a/src/panels/config/zha/zha-group-binding.ts +++ b/src/panels/config/zha/zha-group-binding.ts @@ -241,14 +241,11 @@ export class ZHAGroupBindingControl extends LitElement { } private get _canBind(): boolean { - return ( - this._groupToBind !== null && - this._groupToBind !== undefined && - this._clustersToBind !== null && - this._clustersToBind !== undefined && - this._clustersToBind?.length > 0 && - this.selectedDevice !== null && - this.selectedDevice !== undefined + return Boolean( + this._groupToBind && + this._clustersToBind && + this._clustersToBind?.length > 0 && + this.selectedDevice ); }