Comments

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-network.ts

@@ -1,3 +1,4 @@
+import { mdiNetwork, mdiServerNetwork } from "@mdi/js";
 import {
   CSSResultArray,
   customElement,
@@ -6,14 +7,26 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { mdiNetwork, mdiServerNetwork } from "@mdi/js";
 import { navigate } from "../../../../../common/navigate";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant, Route } from "../../../../../types";
 import "../../../../../layouts/hass-tabs-subpage";
 import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
-import "./ozw-network-router";
+import { haStyle } from "../../../../../resources/styles";
+import type { HomeAssistant, Route } from "../../../../../types";
 import { computeTail } from "./ozw-config-router";
+import "./ozw-network-router";
+
+export const ozwNetworkTabs: PageNavigation[] = [
+  {
+    translationKey: "ui.panel.config.ozw.navigation.network",
+    path: `/config/ozw/network/${this.ozwInstance}/dashboard`,
+    iconPath: mdiServerNetwork,
+  },
+  {
+    translationKey: "ui.panel.config.ozw.navigation.nodes",
+    path: `/config/ozw/network/${this.ozwInstance}/nodes`,
+    iconPath: mdiNetwork,
+  },
+];
 
 @customElement("ozw-config-network")
 class OZWConfigNetwork extends LitElement {
@@ -27,41 +40,27 @@ class OZWConfigNetwork extends LitElement {
 
   @property() public configEntryId?: string;
 
-  @property() public ozw_instance = 0;
+  @property({ type: Number }) public ozwInstance?;
 
-  public connectedCallback(): void {
-    super.connectedCallback();
-    if (this.ozw_instance <= 0) {
+  protected firstUpdated() {
+    if (!this.ozwInstance) {
       navigate(this, "/config/ozw/dashboard", true);
     }
   }
 
   protected render(): TemplateResult {
     const route = computeTail(this.route);
 
-    const ozwTabs: PageNavigation[] = [
-      {
-        translationKey: "ui.panel.config.ozw.navigation.network",
-        path: `/config/ozw/network/${this.ozw_instance}/dashboard`,
-        iconPath: mdiServerNetwork,
-      },
-      {
-        translationKey: "ui.panel.config.ozw.navigation.nodes",
-        path: `/config/ozw/network/${this.ozw_instance}/nodes`,
-        iconPath: mdiNetwork,
-      },
-    ];
-
     if (route.path !== "/nodes") {
       return html`
         <hass-tabs-subpage
           .hass=${this.hass}
           .narrow=${this.narrow}
           .route=${route}
-          .tabs=${ozwTabs}
+          .tabs=${ozwNetworkTabs}
         >
           <ozw-network-router
-            .ozw_instance=${this.ozw_instance}
+            .ozwInstance=${this.ozwInstance}
             .route=${route}
             .hass=${this.hass}
             .narrow=${this.narrow}
@@ -73,7 +72,7 @@ class OZWConfigNetwork extends LitElement {
 
     return html`
       <ozw-network-router
-        .ozw_instance=${this.ozw_instance}
+        .ozwInstance=${this.ozwInstance}
         .route=${route}
         .hass=${this.hass}
         .narrow=${this.narrow}

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

@@ -6,13 +6,11 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import memoizeOne from "memoize-one";
-import { navigate } from "../../../../../common/navigate";
+import "../../../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../../../types";
-import "../../../../../layouts/hass-tabs-subpage";
-import "./ozw-node-router";
 import { computeTail } from "./ozw-config-router";
+import "./ozw-node-router";
 
 @customElement("ozw-config-node")
 class OZWConfigNode extends LitElement {
@@ -26,23 +24,16 @@ class OZWConfigNode extends LitElement {
 
   @property() public configEntryId?: string;
 
-  @property() public ozw_instance = 0;
-
-  @property() public node_id = 0;
+  @property() public ozwInstance?: number;
 
-  public connectedCallback(): void {
-    super.connectedCallback();
-    if (this.ozw_instance <= 0) {
-      navigate(this, "/config/ozw/dashboard", true);
-    }
-  }
+  @property() public nodeId?: number;
 
   protected render(): TemplateResult {
     const route = computeTail(this.route);
     return html`
       <ozw-node-router
-        .ozw_instance=${this.ozw_instance}
-        .node_id=${this.node_id}
+        .ozwInstance=${this.ozwInstance}
+        .nodeId=${this.nodeId}
         .route=${route}
         .hass=${this.hass}
         .narrow=${this.narrow}

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

@@ -60,7 +60,7 @@ class OZWConfigRouter extends HassRouterPage {
     el.configEntryId = this._configEntry;
     if (this._currentPage === "network") {
       const path = this.routeTail.path.split("/");
-      el.ozw_instance = path[1];
+      el.ozwInstance = path[1];
     }
   }
 }

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,28 +11,24 @@ 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";
-
-export const ozwTabs: PageNavigation[] = [];
+import "../../../../../layouts/hass-tabs-subpage";
+import { haStyle } from "../../../../../resources/styles";
+import type { HomeAssistant, Route } from "../../../../../types";
+import "../../../ha-config-section";
 
 @customElement("ozw-network-dashboard")
 class OZWNetworkDashboard extends LitElement {
@@ -54,46 +52,14 @@ class OZWNetworkDashboard extends LitElement {
 
   @internalProperty() private _icon = mdiCircle;
 
-  public connectedCallback(): void {
-    super.connectedCallback();
+  protected firstUpdated() {
     if (this.ozw_instance <= 0) {
       navigate(this, "/config/ozw/dashboard", true);
     } 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`
       <ha-config-section .narrow=${this.narrow} .isWide=${this.isWide}>
@@ -111,18 +77,19 @@ class OZWNetworkDashboard 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>
@@ -161,6 +128,37 @@ class OZWNetworkDashboard extends LitElement {
     `;
   }
 
+  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>
+    `;
+  }
+
   static get styles(): CSSResultArray {
     return [
       haStyle,