Config panel for ZHA (#2389)

* zha config panel

* implement issue cluster command

* update layout

* read zigbee attribute service

* set attribute and manufacturer code override

* cleanup

* adjust style and documentation wording

* html cleanup

* ha-call-ws-api-button

* use call-ws-api-button

* fix deprecated syntax - travis error

* emulate new z-wave node info functionality

* start converting to lit

* fix style includes

* fix help toggle

* remove old panel

* cleanup

* cleanup

* convert to lit / ts

* import styles

* types - review comment

src/panels/config/dashboard/ha-config-navigation.js

@@ -50,7 +50,7 @@ class HaConfigNavigation extends LocalizeMixin(NavigateMixin(PolymerElement)) {
 
       pages: {
         type: Array,
-        value: ["core", "customize", "automation", "script", "zwave"],
+        value: ["core", "customize", "automation", "script", "zha", "zwave"],
       },
     };
   }

src/panels/config/ha-panel-config.js

@@ -17,6 +17,7 @@ import(/* webpackChunkName: "panel-config-customize" */ "./customize/ha-config-c
 import(/* webpackChunkName: "panel-config-dashboard" */ "./dashboard/ha-config-dashboard");
 import(/* webpackChunkName: "panel-config-script" */ "./script/ha-config-script");
 import(/* webpackChunkName: "panel-config-users" */ "./users/ha-config-users");
+import(/* webpackChunkName: "panel-config-zha" */ "./zha/ha-config-zha");
 import(/* webpackChunkName: "panel-config-zwave" */ "./zwave/ha-config-zwave");
 
 /*
@@ -106,6 +107,18 @@ class HaPanelConfig extends EventsMixin(NavigateMixin(PolymerElement)) {
         ></ha-config-script>
       </template>
 
+      <template
+        is="dom-if"
+        if="[[_equals(_routeData.page, &quot;zha&quot;)]]"
+        restamp
+      >
+        <ha-config-zha
+          page-name="zha"
+          hass="[[hass]]"
+          is-wide="[[isWide]]"
+        ></ha-config-zha>
+      </template>
+
       <template
         is="dom-if"
         if="[[_equals(_routeData.page, &quot;zwave&quot;)]]"

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

@@ -0,0 +1,80 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { HomeAssistant } from "../../../types";
+
+import "../../../layouts/ha-app-layout";
+import "../../../resources/ha-style";
+
+import "./zha-network";
+
+export class HaConfigZha extends LitElement {
+  public hass?: HomeAssistant;
+  public isWide?: boolean;
+  private _haStyle?: DocumentFragment;
+  private _ironFlex?: DocumentFragment;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      isWide: {},
+    };
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      ${this.renderStyle()}
+      <ha-app-layout has-scrolling-region="">
+        <app-header slot="header" fixed="">
+          <app-toolbar>
+            <paper-icon-button
+              icon="hass:arrow-left"
+              @click="${this._onBackTapped}"
+            ></paper-icon-button>
+          </app-toolbar>
+        </app-header>
+
+        <zha-network
+          id="zha-network"
+          .is-wide="${this.isWide}"
+          .hass="${this.hass}"
+        ></zha-network>
+      </ha-app-layout>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    if (!this._haStyle) {
+      this._haStyle = document.importNode(
+        (document.getElementById("ha-style")!
+          .children[0] as HTMLTemplateElement).content,
+        true
+      );
+    }
+    if (!this._ironFlex) {
+      this._ironFlex = document.importNode(
+        (document.getElementById("iron-flex")!
+          .children[0] as HTMLTemplateElement).content,
+        true
+      );
+    }
+    return html`
+      ${this._ironFlex} ${this._haStyle}
+    `;
+  }
+
+  private _onBackTapped(): void {
+    history.back();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-zha": HaConfigZha;
+  }
+}
+
+customElements.define("ha-config-zha", HaConfigZha);

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

@@ -0,0 +1,129 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-card/paper-card";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-service-description";
+import "../ha-config-section";
+
+import { HomeAssistant } from "../../../types";
+import "../../../resources/ha-style";
+
+export class ZHANetwork extends LitElement {
+  public hass?: HomeAssistant;
+  public isWide?: boolean;
+  public showDescription: boolean;
+  private _haStyle?: DocumentFragment;
+  private _ironFlex?: DocumentFragment;
+
+  constructor() {
+    super();
+    this.showDescription = false;
+  }
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      isWide: {},
+      showDescription: {},
+    };
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      ${this.renderStyle()}
+      <ha-config-section .is-wide="${this.isWide}">
+        <div style="position: relative" slot="header">
+            <span>Zigbee Home Automation network management</span>
+            <paper-icon-button class="toggle-help-icon" @click="${
+              this._onHelpTap
+            }" icon="hass:help-circle"></paper-icon-button>
+        </div>
+        <span slot="introduction">Commands that affect entire network</span>
+
+        <paper-card class="content">
+            <div class="card-actions">
+            <ha-call-service-button .hass="${
+              this.hass
+            }" domain="zha" service="permit">Permit</ha-call-service-button>
+            ${
+              this.showDescription
+                ? html`
+                    <ha-service-description
+                      .hass="${this.hass}"
+                      domain="zha"
+                      service="permit"
+                    />
+                  `
+                : ""
+            }
+        </paper-card>
+      </ha-config-section>
+    `;
+  }
+
+  private _onHelpTap(): void {
+    this.showDescription = !this.showDescription;
+  }
+
+  private renderStyle(): TemplateResult {
+    if (!this._haStyle) {
+      this._haStyle = document.importNode(
+        (document.getElementById("ha-style")!
+          .children[0] as HTMLTemplateElement).content,
+        true
+      );
+    }
+    if (!this._ironFlex) {
+      this._ironFlex = document.importNode(
+        (document.getElementById("iron-flex")!
+          .children[0] as HTMLTemplateElement).content,
+        true
+      );
+    }
+    return html`
+      ${this._ironFlex} ${this._haStyle}
+      <style>
+        .content {
+          margin-top: 24px;
+        }
+
+        paper-card {
+          display: block;
+          margin: 0 auto;
+          max-width: 600px;
+        }
+
+        .card-actions.warning ha-call-service-button {
+          color: var(--google-red-500);
+        }
+
+        .toggle-help-icon {
+          position: absolute;
+          top: -6px;
+          right: 0;
+          color: var(--primary-color);
+        }
+
+        ha-service-description {
+          display: block;
+          color: grey;
+        }
+
+        [hidden] {
+          display: none;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "zha-network": ZHANetwork;
+  }
+}
+
+customElements.define("zha-network", ZHANetwork);

src/translations/en.json

@@ -35,6 +35,7 @@
     "updater": "Updater",
     "vacuum": "Vacuum",
     "weblink": "Weblink",
+    "zha": "ZHA",
     "zwave": "Z-Wave"
   },
   "panel": {
@@ -764,6 +765,10 @@
             "delete_user": "Delete user"
           }
         },
+        "zha": {
+          "caption": "ZHA",
+          "description": "Zigbee Home Automation network management"
+        },
         "zwave": {
           "caption": "Z-Wave",
           "description": "Manage your Z-Wave network"

translations/en.json

@@ -514,6 +514,13 @@
                     "caption": "Script",
                     "description": "Create and edit scripts"
                 },
+                "zha": {
+                    "caption": "ZHA",
+                    "description": "Manage your Zigbee Home Automation network",
+                    "network": {
+                        "introduction": "Zigbee Home Automation network management"
+                  }
+                },
                 "zwave": {
                     "caption": "Z-Wave",
                     "description": "Manage your Z-Wave network"
@@ -974,6 +981,7 @@
         "switch": "Switch",
         "updater": "Updater",
         "weblink": "Weblink",
+        "zha": "ZHA",
         "zwave": "Z-Wave",
         "vacuum": "Vacuum"
     },