Add group management to the ZHA config panel

src/data/zha.ts

@@ -24,6 +24,12 @@ export interface ZHADevice {
   area_id?: string;
 }
 
+export interface ZHAGroup {
+  name: string;
+  group_id: number;
+  members: ZHADevice[];
+}
+
 export interface Attribute {
   name: string;
   id: number;
@@ -80,6 +86,69 @@ export const fetchDevices = (hass: HomeAssistant): Promise<ZHADevice[]> =>
     type: "zha/devices",
   });
 
+export const fetchGroupableDevices = (
+  hass: HomeAssistant
+): Promise<ZHADevice[]> =>
+  hass.callWS({
+    type: "zha/devices/groupable",
+  });
+
+export const fetchGroups = (hass: HomeAssistant): Promise<ZHAGroup[]> =>
+  hass.callWS({
+    type: "zha/groups",
+  });
+
+export const removeGroups = (
+  hass: HomeAssistant,
+  groupIdsToRemove: number[]
+): Promise<ZHAGroup[]> =>
+  hass.callWS({
+    type: "zha/group/remove",
+    group_ids: groupIdsToRemove,
+  });
+
+export const fetchGroup = (
+  hass: HomeAssistant,
+  groupId: number
+): Promise<ZHAGroup> =>
+  hass.callWS({
+    type: "zha/group",
+    group_id: groupId,
+  });
+
+export const addGroup = (
+  hass: HomeAssistant,
+  groupName: string,
+  membersToAdd?: string[]
+): Promise<ZHAGroup> =>
+  hass.callWS({
+    type: "zha/group/add",
+    group_name: groupName,
+    members: membersToAdd,
+  });
+
+export const addMembersToGroup = (
+  hass: HomeAssistant,
+  groupId: number,
+  membersToAdd: string[]
+): Promise<ZHAGroup> =>
+  hass.callWS({
+    type: "zha/group/members/add",
+    group_id: groupId,
+    members: membersToAdd,
+  });
+
+export const removeMembersFromGroup = (
+  hass: HomeAssistant,
+  groupId: number,
+  membersToRemove: string[]
+): Promise<ZHAGroup> =>
+  hass.callWS({
+    type: "zha/group/members/remove",
+    group_id: groupId,
+    members: membersToRemove,
+  });
+
 export const fetchZHADevice = (
   hass: HomeAssistant,
   ieeeAddress: string

src/panels/config/zha/functions.ts

@@ -1,4 +1,4 @@
-import { ZHADevice } from "../../../data/zha";
+import { ZHADevice, ZHAGroup } from "../../../data/zha";
 
 export const formatAsPaddedHex = (value: string | number): string => {
   let hex = value;
@@ -13,3 +13,9 @@ export const sortZHADevices = (a: ZHADevice, b: ZHADevice): number => {
   const nameb = b.user_given_name ? b.user_given_name : b.name;
   return nameA.localeCompare(nameb);
 };
+
+export const sortZHAGroups = (a: ZHAGroup, b: ZHAGroup): number => {
+  const nameA = a.name;
+  const nameb = b.name;
+  return nameA.localeCompare(nameb);
+};

src/panels/config/zha/ha-config-zha.ts

@@ -5,6 +5,7 @@ import "./zha-cluster-attributes";
 import "./zha-cluster-commands";
 import "./zha-network";
 import "./zha-node";
+import "./zha-groups-tile";
 import "@polymer/paper-icon-button/paper-icon-button";
 
 import {
@@ -45,12 +46,18 @@ export class HaConfigZha extends LitElement {
           .hass="${this.hass}"
         ></zha-network>
 
+        <zha-groups-tile
+          .isWide="${this.isWide}"
+          .hass="${this.hass}"
+        ></zha-groups-tile>
+
         <zha-node
           .isWide="${this.isWide}"
           .hass="${this.hass}"
           @zha-cluster-selected="${this._onClusterSelected}"
           @zha-node-selected="${this._onDeviceSelected}"
         ></zha-node>
+
         ${this._selectedCluster
           ? html`
               <zha-cluster-attributes

src/panels/config/zha/zha-add-group-page.ts

@@ -0,0 +1,180 @@
+import {
+  property,
+  LitElement,
+  html,
+  customElement,
+  css,
+  CSSResult,
+} from "lit-element";
+
+import "../../../layouts/hass-subpage";
+import "../../../layouts/hass-error-screen";
+import "../ha-config-section";
+import { HomeAssistant } from "../../../types";
+import { haStyleDialog } from "../../../resources/styles";
+import {
+  ZHADevice,
+  fetchGroupableDevices,
+  addGroup,
+  ZHAGroup,
+} from "../../../data/zha";
+import "./zha-devices-data-table";
+import { SelectionChangedEvent } from "../../../components/data-table/ha-data-table";
+import { navigate } from "../../../common/navigate";
+import { PolymerChangedEvent } from "../../../polymer-types";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+
+@customElement("zha-add-group-page")
+export class ZHAAddGroupPage extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public narrow!: boolean;
+  @property() public devices: ZHADevice[] = [];
+  @property() private _canAdd: boolean = false;
+  @property() private _processingAdd: boolean = false;
+  @property() private _groupName: string = "";
+
+  private _selectedDevicesToAdd: string[] = [];
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._fetchData();
+  }
+
+  protected render() {
+    return html`
+      <hass-subpage
+        .header=${this.hass.localize("ui.panel.config.zha.common.create_group")}
+      >
+        <ha-config-section .isWide=${!this.narrow}>
+          <span slot="introduction">
+            ${this.hass.localize(
+              "ui.panel.config.zha.common.create_group_details"
+            )}
+          </span>
+          <paper-input
+            type="string"
+            .value="${this._groupName}"
+            @value-changed=${this._handleNameChange}
+            placeholder="${this.hass!.localize(
+              "ui.panel.config.zha.common.group_name_placeholder"
+            )}"
+          ></paper-input>
+
+          <div class="header">
+            ${this.hass.localize("ui.panel.config.zha.common.add_members")}
+          </div>
+
+          <zha-devices-data-table
+            .hass=${this.hass}
+            .devices=${this.devices}
+            .narrow=${this.narrow}
+            .selectable=${true}
+            @selection-changed=${this._handleAddSelectionChanged}
+            class="table"
+          >
+          </zha-devices-data-table>
+
+          <div class="paper-dialog-buttons">
+            <mwc-button
+              ?disabled="${!this._canAdd}"
+              @click="${this._createGroup}"
+              class="button"
+            >
+              <paper-spinner
+                ?active="${this._processingAdd}"
+                alt="Creating Group"
+              ></paper-spinner>
+              ${this.hass!.localize(
+                "ui.panel.config.zha.common.create"
+              )}</mwc-button
+            >
+          </div>
+        </ha-config-section>
+      </hass-subpage>
+    `;
+  }
+
+  private async _fetchData() {
+    this.devices = await fetchGroupableDevices(this.hass!);
+  }
+
+  private _handleAddSelectionChanged(ev: CustomEvent): void {
+    const changedSelection = ev.detail as SelectionChangedEvent;
+    const entity = changedSelection.id;
+    if (changedSelection.selected) {
+      this._selectedDevicesToAdd.push(entity);
+    } else {
+      const index = this._selectedDevicesToAdd.indexOf(entity);
+      if (index !== -1) {
+        this._selectedDevicesToAdd.splice(index, 1);
+      }
+    }
+  }
+
+  private async _createGroup(): Promise<void> {
+    this._processingAdd = true;
+    const group: ZHAGroup = await addGroup(
+      this.hass,
+      this._groupName,
+      this._selectedDevicesToAdd
+    );
+    this._selectedDevicesToAdd = [];
+    this._canAdd = false;
+    this._processingAdd = false;
+    this._groupName = "";
+    navigate(this, `/config/zha/group/${group.group_id}`, true);
+  }
+
+  private _handleNameChange(ev: PolymerChangedEvent<string>) {
+    const target = ev.currentTarget as PaperInputElement;
+    if (target.value) {
+      this._groupName = target.value;
+      if (target.value.length > 0) {
+        this._canAdd = true;
+      }
+    }
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyleDialog,
+      css`
+        .header {
+          font-family: var(--paper-font-display1_-_font-family);
+          -webkit-font-smoothing: var(
+            --paper-font-display1_-_-webkit-font-smoothing
+          );
+          font-size: var(--paper-font-display1_-_font-size);
+          font-weight: var(--paper-font-display1_-_font-weight);
+          letter-spacing: var(--paper-font-display1_-_letter-spacing);
+          line-height: var(--paper-font-display1_-_line-height);
+          opacity: var(--dark-primary-opacity);
+        }
+
+        .button {
+          float: right;
+        }
+
+        .table {
+          height: 400px;
+          overflow: auto;
+        }
+
+        ha-config-section *:last-child {
+          padding-bottom: 24px;
+        }
+        mwc-button paper-spinner {
+          width: 14px;
+          height: 14px;
+          margin-right: 20px;
+        }
+        paper-spinner {
+          display: none;
+        }
+        paper-spinner[active] {
+          display: block;
+        }
+      `,
+    ];
+  }
+}

src/panels/config/zha/zha-config-panel.ts

@@ -12,6 +12,7 @@ import { HomeAssistant } from "../../../types";
 class ZHAConfigPanel extends HassRouterPage {
   @property() public hass!: HomeAssistant;
   @property() public isWide!: boolean;
+  @property() public narrow!: boolean;
 
   protected routerOptions: RouterOptions = {
     defaultPage: "configuration",
@@ -32,13 +33,36 @@ class ZHAConfigPanel extends HassRouterPage {
             /* webpackChunkName: "zha-add-devices-page" */ "./zha-add-devices-page"
           ),
       },
+      groups: {
+        tag: "zha-groups-dashboard",
+        load: () =>
+          import(
+            /* webpackChunkName: "zha-groups-dashboard" */ "./zha-groups-dashboard"
+          ),
+      },
+      group: {
+        tag: "zha-group-page",
+        load: () =>
+          import(/* webpackChunkName: "zha-group-page" */ "./zha-group-page"),
+      },
+      "group-add": {
+        tag: "zha-add-group-page",
+        load: () =>
+          import(
+            /* webpackChunkName: "zha-add-group-page" */ "./zha-add-group-page"
+          ),
+      },
     },
   };
 
   protected updatePageEl(el): void {
     el.route = this.routeTail;
     el.hass = this.hass;
     el.isWide = this.isWide;
+    el.narrow = this.narrow;
+    if (this._currentPage === "group") {
+      el.groupId = this.routeTail.path.substr(1);
+    }
   }
 }