Add basic nodes list & node metadata to OZW config panel

src/data/ozw.ts

@@ -14,6 +14,8 @@ export interface OZWDevice {
   is_zwave_plus: boolean;
   ozw_instance: number;
   event: string;
+  node_manufacturer_name: string;
+  node_product_name: string;
 }
 
 export interface OZWDeviceMetaDataResponse {
@@ -147,6 +149,15 @@ export const fetchOZWNetworkStatistics = (
     ozw_instance: ozw_instance,
   });
 
+export const fetchOZWNodes = (
+  hass: HomeAssistant,
+  ozw_instance: number
+): Promise<OZWDevice[]> =>
+  hass.callWS({
+    type: "ozw/get_nodes",
+    ozw_instance: ozw_instance,
+  });
+
 export const fetchOZWNodeStatus = (
   hass: HomeAssistant,
   ozw_instance: number,

src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts

@@ -1,6 +1,8 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-fab";
+import { mdiCheckCircle, mdiCircle, mdiCloseCircle, mdiZWave } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@material/mwc-fab";
 import {
   css,
   CSSResultArray,
@@ -14,20 +16,18 @@ import {
 import { navigate } from "../../../../../common/navigate";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-next";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant, Route } from "../../../../../types";
-import "../../../ha-config-section";
-import { mdiCircle, mdiCheckCircle, mdiCloseCircle, mdiZWave } from "@mdi/js";
-import "../../../../../layouts/hass-tabs-subpage";
-import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
-import "@material/mwc-button/mwc-button";
 import {
-  OZWInstance,
   fetchOZWInstances,
-  networkOnlineStatuses,
   networkOfflineStatuses,
+  networkOnlineStatuses,
   networkStartingStatuses,
+  OZWInstance,
 } from "../../../../../data/ozw";
+import "../../../../../layouts/hass-tabs-subpage";
+import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
+import { haStyle } from "../../../../../resources/styles";
+import type { HomeAssistant, Route } from "../../../../../types";
+import "../../../ha-config-section";
 
 export const ozwTabs: PageNavigation[] = [];
 
@@ -45,22 +45,8 @@ class OZWConfigDashboard extends LitElement {
 
   @internalProperty() private _instances: OZWInstance[] = [];
 
-  public connectedCallback(): void {
-    super.connectedCallback();
-    if (this.hass) {
-      this._fetchData();
-    }
-  }
-
-  private async _fetchData() {
-    this._instances = await fetchOZWInstances(this.hass!);
-    if (this._instances.length === 1) {
-      navigate(
-        this,
-        `/config/ozw/network/${this._instances[0].ozw_instance}`,
-        true
-      );
-    }
+  protected firstUpdated() {
+    this._fetchData();
   }
 
   protected render(): TemplateResult {
@@ -142,12 +128,23 @@ class OZWConfigDashboard extends LitElement {
                   `;
                 })}
               `
-            : ``}
+            : ""}
         </ha-config-section>
       </hass-tabs-subpage>
     `;
   }
 
+  private async _fetchData() {
+    this._instances = await fetchOZWInstances(this.hass!);
+    if (this._instances.length === 1) {
+      navigate(
+        this,
+        `/config/ozw/network/${this._instances[0].ozw_instance}`,
+        true
+      );
+    }
+  }
+
   static get styles(): CSSResultArray {
     return [
       haStyle,

src/panels/config/integrations/integration-panels/ozw/ozw-config-router.ts

@@ -1,10 +1,23 @@
 import { customElement, property } from "lit-element";
+import memoizeOne from "memoize-one";
 import {
   HassRouterPage,
   RouterOptions,
 } from "../../../../../layouts/hass-router-page";
-import { HomeAssistant } from "../../../../../types";
-import { navigate } from "../../../../../common/navigate";
+import { HomeAssistant, Route } from "../../../../../types";
+
+export const computeTail = memoizeOne((route: Route) => {
+  const dividerPos = route.path.indexOf("/", 1);
+  return dividerPos === -1
+    ? {
+        prefix: route.prefix + route.path,
+        path: "",
+      }
+    : {
+        prefix: route.prefix + route.path.substr(0, dividerPos),
+        path: route.path.substr(dividerPos),
+      };
+});
 
 @customElement("ozw-config-router")
 class OZWConfigRouter extends HassRouterPage {
@@ -30,10 +43,10 @@ class OZWConfigRouter extends HassRouterPage {
           ),
       },
       network: {
-        tag: "ozw-config-network",
+        tag: "ozw-network-router",
         load: () =>
           import(
-            /* webpackChunkName: "ozw-config-network" */ "./ozw-config-network"
+            /* webpackChunkName: "ozw-network-router" */ "./ozw-network-router"
           ),
       },
     },
@@ -46,19 +59,9 @@ class OZWConfigRouter extends HassRouterPage {
     el.narrow = this.narrow;
     el.configEntryId = this._configEntry;
     if (this._currentPage === "network") {
-      el.ozw_instance = this.routeTail.path.substr(1);
-    }
-
-    const searchParams = new URLSearchParams(window.location.search);
-    if (this._configEntry && !searchParams.has("config_entry")) {
-      searchParams.append("config_entry", this._configEntry);
-      navigate(
-        this,
-        `${this.routeTail.prefix}${
-          this.routeTail.path
-        }?${searchParams.toString()}`,
-        true
-      );
+      const path = this.routeTail.path.split("/");
+      el.ozwInstance = path[1];
+      el.route = computeTail(this.routeTail);
     }
   }
 }

src/panels/config/integrations/integration-panels/ozw/ozw-config-network.ts → src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts

@@ -1,4 +1,6 @@
+import "@material/mwc-button/mwc-button";
 import "@material/mwc-fab";
+import { mdiCheckCircle, mdiCircle, mdiCloseCircle } from "@mdi/js";
 import {
   css,
   CSSResultArray,
@@ -9,31 +11,28 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
 import { navigate } from "../../../../../common/navigate";
+import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-next";
-import "../../../../../components/buttons/ha-call-service-button";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant, Route } from "../../../../../types";
-import "../../../ha-config-section";
-import { mdiCircle, mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
-import "../../../../../layouts/hass-tabs-subpage";
-import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
-import "@material/mwc-button/mwc-button";
 import {
-  OZWInstance,
-  fetchOZWNetworkStatus,
   fetchOZWNetworkStatistics,
-  networkOnlineStatuses,
+  fetchOZWNetworkStatus,
   networkOfflineStatuses,
+  networkOnlineStatuses,
   networkStartingStatuses,
+  OZWInstance,
   OZWNetworkStatistics,
 } from "../../../../../data/ozw";
+import "../../../../../layouts/hass-tabs-subpage";
+import { haStyle } from "../../../../../resources/styles";
+import type { HomeAssistant, Route } from "../../../../../types";
+import "../../../ha-config-section";
+import { ozwNetworkTabs } from "./ozw-network-router";
 
-export const ozwTabs: PageNavigation[] = [];
-
-@customElement("ozw-config-network")
-class OZWConfigNetwork extends LitElement {
+@customElement("ozw-network-dashboard")
+class OZWNetworkDashboard extends LitElement {
   @property({ type: Object }) public hass!: HomeAssistant;
 
   @property({ type: Object }) public route!: Route;
@@ -44,7 +43,7 @@ class OZWConfigNetwork extends LitElement {
 
   @property() public configEntryId?: string;
 
-  @property() public ozw_instance = 0;
+  @property() public ozwInstance?: number;
 
   @internalProperty() private _network?: OZWInstance;
 
@@ -54,54 +53,21 @@ class OZWConfigNetwork extends LitElement {
 
   @internalProperty() private _icon = mdiCircle;
 
-  public connectedCallback(): void {
-    super.connectedCallback();
-    if (this.ozw_instance <= 0) {
+  protected firstUpdated() {
+    if (!this.ozwInstance) {
       navigate(this, "/config/ozw/dashboard", true);
-    }
-    if (this.hass) {
+    } else if (this.hass) {
       this._fetchData();
     }
   }
 
-  private async _fetchData() {
-    this._network = await fetchOZWNetworkStatus(this.hass!, this.ozw_instance);
-    this._statistics = await fetchOZWNetworkStatistics(
-      this.hass!,
-      this.ozw_instance
-    );
-    if (networkOnlineStatuses.includes(this._network.Status)) {
-      this._status = "online";
-      this._icon = mdiCheckCircle;
-    }
-    if (networkStartingStatuses.includes(this._network.Status)) {
-      this._status = "starting";
-    }
-    if (networkOfflineStatuses.includes(this._network.Status)) {
-      this._status = "offline";
-      this._icon = mdiCloseCircle;
-    }
-  }
-
-  private _generateServiceButton(service: string) {
-    return html`
-      <ha-call-service-button
-        .hass=${this.hass}
-        domain="ozw"
-        service="${service}"
-      >
-        ${this.hass!.localize("ui.panel.config.ozw.services." + service)}
-      </ha-call-service-button>
-    `;
-  }
-
   protected render(): TemplateResult {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
-        .tabs=${ozwTabs}
+        .tabs=${ozwNetworkTabs(this.ozwInstance!)}
       >
         <ha-config-section .narrow=${this.narrow} .isWide=${this.isWide}>
           <div slot="header">
@@ -118,20 +84,21 @@ class OZWConfigNetwork extends LitElement {
                     <div class="details">
                       <ha-svg-icon
                         .path=${this._icon}
-                        class="network-status-icon ${this._status}"
+                        class="network-status-icon ${classMap({
+                          [this._status]: true,
+                        })}"
                         slot="item-icon"
                       ></ha-svg-icon>
                       ${this.hass.localize(
                         "ui.panel.config.ozw.common.network"
                       )}
                       ${this.hass.localize(
-                        "ui.panel.config.ozw.network_status." + this._status
+                        `ui.panel.config.ozw.network_status.${this._status}`
                       )}
                       <br />
                       <small>
                         ${this.hass.localize(
-                          "ui.panel.config.ozw.network_status.details." +
-                            this._network.Status.toLowerCase()
+                          `ui.panel.config.ozw.network_status.details.${this._network.Status.toLowerCase()}`
                         )}
                       </small>
                     </div>
@@ -171,6 +138,38 @@ class OZWConfigNetwork extends LitElement {
     `;
   }
 
+  private async _fetchData() {
+    if (!this.ozwInstance) return;
+    this._network = await fetchOZWNetworkStatus(this.hass!, this.ozwInstance);
+    this._statistics = await fetchOZWNetworkStatistics(
+      this.hass!,
+      this.ozwInstance
+    );
+    if (networkOnlineStatuses.includes(this._network!.Status)) {
+      this._status = "online";
+      this._icon = mdiCheckCircle;
+    }
+    if (networkStartingStatuses.includes(this._network!.Status)) {
+      this._status = "starting";
+    }
+    if (networkOfflineStatuses.includes(this._network!.Status)) {
+      this._status = "offline";
+      this._icon = mdiCloseCircle;
+    }
+  }
+
+  private _generateServiceButton(service: string) {
+    return html`
+      <ha-call-service-button
+        .hass=${this.hass}
+        domain="ozw"
+        .service=${service}
+      >
+        ${this.hass!.localize(`ui.panel.config.ozw.services.${service}`)}
+      </ha-call-service-button>
+    `;
+  }
+
   static get styles(): CSSResultArray {
     return [
       haStyle,
@@ -248,6 +247,6 @@ class OZWConfigNetwork extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ozw-config-network": OZWConfigNetwork;
+    "ozw-network-dashboard": OZWNetworkDashboard;
   }
 }