diff --git a/src/data/zwave.ts b/src/data/zwave.ts index f86b11bd2828..8ca10a78ca5d 100644 --- a/src/data/zwave.ts +++ b/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("GET", `zwave/values/${nodeId}`); diff --git a/src/panels/config/zwave/zwave-values.js b/src/panels/config/zwave/zwave-values.js deleted file mode 100644 index f3fcea767dc3..000000000000 --- a/src/panels/config/zwave/zwave-values.js +++ /dev/null @@ -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` - -
- -
- - - - - -
- -
- `; - } - - 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); diff --git a/src/panels/config/zwave/zwave-values.ts b/src/panels/config/zwave/zwave-values.ts new file mode 100644 index 000000000000..2beda32122a4 --- /dev/null +++ b/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` +
+ +
+ + + ${this._values.map( + (item) => html` + ${item.label} + (${this.hass.localize( + "ui.panel.config.zwave.common.instance" + )}: + ${item.instance}, + ${this.hass.localize( + "ui.panel.config.zwave.common.index" + )}: + ${item.index}) + ` + )} + + +
+ +
+ `; + } + + 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; + } +} diff --git a/src/translations/en.json b/src/translations/en.json index 84ed63da12cf..fe27bab9d8b4 100644 --- a/src/translations/en.json +++ b/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",