Convert zwave-values to ts & add translation strings (home-assistant#…

…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.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",