Convert zwave-values to ts & add translation strings (#3367)

* Convert zwave-values to ts & add translation strings

* lint

* Change some common translation strings to live under "common" instead of "values"

* Cleanup & address review comments

src/data/zwave.ts

@@ -4,6 +4,13 @@ export interface ZWaveNetworkStatus {
   state: number;
 }
 
+export interface ZWaveValue {
+  index: number;
+  instance: number;
+  label: string;
+  poll_intensity: number;
+}
+
 export const ZWAVE_NETWORK_STATE_STOPPED = 0;
 export const ZWAVE_NETWORK_STATE_FAILED = 1;
 export const ZWAVE_NETWORK_STATE_STARTED = 5;
@@ -16,3 +23,6 @@ export const fetchNetworkStatus = (
   hass.callWS({
     type: "zwave/network_status",
   });
+
+export const fetchValues = (hass: HomeAssistant, nodeId: number) =>
+  hass.callApi<ZWaveValue[]>("GET", `zwave/values/${nodeId}`);

src/panels/config/zwave/zwave-values.js

@@ -1,121 +0,0 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../components/buttons/ha-call-service-button";
-import "../../../components/ha-card";
-
-class ZwaveValues extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="iron-flex ha-style">
-        .content {
-          margin-top: 24px;
-        }
-
-        ha-card {
-          margin: 0 auto;
-          max-width: 600px;
-        }
-
-        .device-picker {
-          @apply --layout-horizontal;
-          @apply --layout-center-center;
-          padding-left: 24px;
-          padding-right: 24px;
-          padding-bottom: 24px;
-        }
-
-        .help-text {
-          padding-left: 24px;
-          padding-right: 24px;
-        }
-      </style>
-      <div class="content">
-        <ha-card header="Node Values">
-          <div class="device-picker">
-            <paper-dropdown-menu label="Value" dynamic-align="" class="flex">
-              <paper-listbox
-                slot="dropdown-content"
-                selected="{{_selectedValue}}"
-              >
-                <template is="dom-repeat" items="[[values]]" as="item">
-                  <paper-item>[[_computeSelectCaption(item)]]</paper-item>
-                </template>
-              </paper-listbox>
-            </paper-dropdown-menu>
-          </div>
-        </ha-card>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-
-      nodes: Array,
-
-      values: Array,
-
-      selectedNode: {
-        type: Number,
-        observer: "selectedNodeChanged",
-      },
-
-      _selectedValue: {
-        type: Number,
-        value: -1,
-        observer: "_selectedValueChanged",
-      },
-    };
-  }
-
-  ready() {
-    super.ready();
-    this.addEventListener("hass-service-called", (ev) =>
-      this.serviceCalled(ev)
-    );
-  }
-
-  serviceCalled(ev) {
-    if (ev.detail.success) {
-      setTimeout(() => {
-        this._refreshValues(this.selectedNode);
-      }, 5000);
-    }
-  }
-
-  _computeSelectCaption(item) {
-    return `${item.value.label} (Instance: ${item.value.instance}, Index: ${
-      item.value.index
-    })`;
-  }
-
-  async _refreshValues(selectedNode) {
-    const valueData = [];
-    const values = await this.hass.callApi(
-      "GET",
-      `zwave/values/${this.nodes[selectedNode].attributes.node_id}`
-    );
-    Object.keys(values).forEach((key) => {
-      valueData.push({
-        key,
-        value: values[key],
-      });
-    });
-    this.setProperties({ values: valueData });
-    this._selectedValueChanged(this._selectedValue);
-  }
-
-  _selectedValueChanged() {}
-
-  selectedNodeChanged(selectedNode) {
-    if (selectedNode === -1) return;
-    this.setProperties({ _selectedValue: -1 });
-  }
-}
-
-customElements.define("zwave-values", ZwaveValues);

src/panels/config/zwave/zwave-values.ts

@@ -0,0 +1,119 @@
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+
+import { haStyle } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+
+import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-card";
+
+import { ZWaveValue } from "../../../data/zwave";
+
+@customElement("zwave-values")
+export class ZwaveValues extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() private _values: ZWaveValue[] = [];
+  @property() private _selectedValue: number = -1;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <div class="content">
+        <ha-card
+          .header=${this.hass.localize("ui.panel.config.zwave.values.header")}
+        >
+          <div class="device-picker">
+            <paper-dropdown-menu
+              label=${this.hass.localize("ui.panel.config.zwave.common.value")}
+              dynamic-align
+              class="flex"
+            >
+              <paper-listbox
+                slot="dropdown-content"
+                .selected=${this._selectedValue}
+              >
+                ${this._values.map(
+                  (item) => html`
+                    <paper-item
+                      >${item.label}
+                      (${this.hass.localize(
+                        "ui.panel.config.zwave.common.instance"
+                      )}:
+                      ${item.instance},
+                      ${this.hass.localize(
+                        "ui.panel.config.zwave.common.index"
+                      )}:
+                      ${item.index})</paper-item
+                    >
+                  `
+                )}
+              </paper-listbox>
+            </paper-dropdown-menu>
+          </div>
+        </ha-card>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .content {
+          margin-top: 24px;
+        }
+
+        ha-card {
+          margin: 0 auto;
+          max-width: 600px;
+        }
+
+        .device-picker {
+          @apply --layout-horizontal;
+          @apply --layout-center-center;
+          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: 24px;
+          padding-right: 24px;
+          padding-bottom: 24px;
+        }
+
+        .flex {
+          -ms-flex: 1 1 0.000000001px;
+          -webkit-flex: 1;
+          flex: 1;
+          -webkit-flex-basis: 0.000000001px;
+          flex-basis: 0.000000001px;
+        }
+
+        .help-text {
+          padding-left: 24px;
+          padding-right: 24px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "zwave-values": ZwaveValues;
+  }
+}

src/translations/en.json

@@ -915,6 +915,11 @@
         "zwave": {
           "caption": "Z-Wave",
           "description": "Manage your Z-Wave network",
+          "common": {
+            "value": "Value",
+            "instance": "Instance",
+            "index": "Index"
+          },
           "network_management": {
             "header": "Z-Wave Network Management",
             "introduction": "Run commands that affect the Z-Wave network. You won't get feedback on whether most commands succeeded, but you can check the OZW Log to try to find out."
@@ -927,6 +932,9 @@
             "network_started_note_some_queried": "Awake nodes have been queried. Sleeping nodes will be queried when they wake.",
             "network_started_note_all_queried": "All nodes have been queried."
           },
+          "values": {
+            "header": "Node Values"
+          },
           "services": {
             "start_network": "Start Network",
             "stop_network": "Stop Network",