Add ability to set Zwave protection commandclass (#1433)

* Add protection selector

* Review changes

* Naming

* forgot one literal

* Further reveiw changes

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

@@ -24,6 +24,7 @@ import './zwave-node-config.js';
 import './zwave-node-information.js';
 import './zwave-usercodes.js';
 import './zwave-values.js';
+import './zwave-node-protection.js';
 
 import sortByName from '../../../common/entity/states_sort_by_name.js';
 import computeStateName from '../../../common/entity/compute_state_name.js';
@@ -187,21 +188,57 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
 
         <template is="dom-if" if="[[computeIsNodeSelected(selectedNode)]]">
           <!--Node info card-->
-          <zwave-node-information id="zwave-node-information" nodes="[[nodes]]" selected-node="[[selectedNode]]"></zwave-node-information>
+          <zwave-node-information
+            id="zwave-node-information"
+            nodes="[[nodes]]"
+            selected-node="[[selectedNode]]"
+          ></zwave-node-information>
 
           <!--Value card-->
-          <zwave-values hass="[[hass]]" nodes="[[nodes]]" selected-node="[[selectedNode]]" values="[[values]]"></zwave-values>
+          <zwave-values
+            hass="[[hass]]"
+            nodes="[[nodes]]"
+            selected-node="[[selectedNode]]"
+            values="[[values]]"
+          ></zwave-values>
 
           <!--Group card-->
-          <zwave-groups hass="[[hass]]" nodes="[[nodes]]" selected-node="[[selectedNode]]" groups="[[groups]]"></zwave-groups>
+          <zwave-groups
+            hass="[[hass]]"
+            nodes="[[nodes]]"
+            selected-node="[[selectedNode]]"
+            groups="[[groups]]"
+          ></zwave-groups>
 
           <!--Config card-->
-          <zwave-node-config hass="[[hass]]" nodes="[[nodes]]" selected-node="[[selectedNode]]" config="[[config]]"></zwave-node-config>
+          <zwave-node-config
+            hass="[[hass]]"
+            nodes="[[nodes]]"
+            selected-node="[[selectedNode]]"
+            config="[[config]]"
+          ></zwave-node-config>
+
+        </template>
+
+        <!--Protection card-->
+        <template is="dom-if" if="{{_protectionNode}}">
+          <zwave-node-protection
+            hass="[[hass]]"
+            nodes="[[nodes]]"
+            selected-node="[[selectedNode]]"
+            protection="[[_protection]]"
+          ></zwave-node-protection>
         </template> 
 
         <!--User Codes-->
         <template is="dom-if" if="{{hasNodeUserCodes}}">
-          <zwave-usercodes id="zwave-usercodes" hass="[[hass]]" nodes="[[nodes]]" user-codes="[[userCodes]]" selected-node="[[selectedNode]]"></zwave-usercodes>
+          <zwave-usercodes
+            id="zwave-usercodes"
+            hass="[[hass]]"
+            nodes="[[nodes]]"
+            user-codes="[[userCodes]]"
+            selected-node="[[selectedNode]]"
+          ></zwave-usercodes>
       </template>
       </ha-config-section>
 
@@ -294,6 +331,16 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
         type: Number,
         value: 0,
       },
+
+      _protection: {
+        type: Array,
+        value: () => [],
+      },
+
+      _protectionNode: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
@@ -363,6 +410,15 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
       this.hasNodeUserCodes = this.userCodes.length > 0;
       this.notifyPath('hasNodeUserCodes');
     });
+    this.hass.callApi('GET', `zwave/protection/${this.nodes[selectedNode].attributes.node_id}`).then((protections) => {
+      this._protection = this._objToArray(protections);
+      if (this._protection) {
+        if (this._protection.length === 0) {
+          return;
+        }
+        this._protectionNode = true;
+      }
+    });
   }
 
   selectedEntityChanged(selectedEntity) {

src/panels/config/zwave/zwave-node-protection.js

@@ -0,0 +1,157 @@
+import '@polymer/paper-card/paper-card.js';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-input/paper-input.js';
+import '@polymer/paper-item/paper-item.js';
+import '@polymer/paper-listbox/paper-listbox.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../../../components/buttons/ha-call-api-button.js';
+
+class ZwaveNodeProtection extends PolymerElement {
+  static get template() {
+    return html`
+    <style include="iron-flex ha-style">
+      .card-actions.warning ha-call-api-button {
+        color: var(--google-red-500);
+      }
+      .content {
+        margin-top: 24px;
+      }
+
+      paper-card {
+        display: block;
+        margin: 0 auto;
+        max-width: 600px;
+      }
+
+      .device-picker {
+        @apply --layout-horizontal;
+        @apply --layout-center-center;
+        padding: 0 24px 24px 24px;
+        }
+
+    </style>
+      <div class="content">
+        <paper-card heading="Node protection">
+          <div class="device-picker">
+          <paper-dropdown-menu label="Protection" dynamic-align class="flex" placeholder="{{_loadedProtectionValue}}">
+            <paper-listbox slot="dropdown-content" selected="{{_selectedProtectionParameter}}">
+              <template is="dom-repeat" items="[[_protectionOptions]]" as="state">
+                <paper-item>[[state]]</paper-item>
+              </template>
+            </paper-listbox>
+          </paper-dropdown-menu>
+          </div>
+          <div class="card-actions">
+            <ha-call-api-button hass="[[hass]]" path="[[_nodePath]]" data="[[_protectionData]]">Set Protection</ha-call-service-button>
+          </div>
+        </div>
+`;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+
+      nodes: Array,
+
+      selectedNode: {
+        type: Number,
+        value: -1,
+      },
+
+      protectionNode: {
+        type: Boolean,
+        value: false,
+      },
+
+      _protectionValueID: {
+        type: Number,
+        value: -1,
+      },
+
+      _selectedProtectionParameter: {
+        type: Number,
+        value: -1,
+        observer: '_computeProtectionData',
+      },
+
+      _protectionOptions: Array,
+
+      _protection: {
+        type: Array,
+        value: () => []
+      },
+
+      _loadedProtectionValue: {
+        type: String,
+        value: ''
+      },
+
+      _protectionData: {
+        type: Object,
+        value: { },
+      },
+
+      _nodePath: String,
+    };
+  }
+
+  static get observers() {
+    return ['_nodesChanged(nodes, selectedNode)'
+    ];
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
+  }
+
+  apiCalled(ev) {
+    if (ev.detail.success) {
+      setTimeout(() => {
+        this._refreshProtection(this.selectedNode);
+      }, 5000);
+    }
+  }
+
+
+  _nodesChanged() {
+    if (!this.nodes) return;
+    if (this.protection) {
+      if (this.protection.length === 0) { return; }
+      this.setProperties({
+        protectionNode: true,
+        _protectionOptions: this.protection[0].value,
+        _loadedProtectionValue: this.protection[1].value,
+        _protectionValueID: this.protection[2].value });
+    }
+  }
+
+  async _refreshProtection(selectedNode) {
+    const protectionValues = [];
+    const protections = await this.hass.callApi('GET', `zwave/protection/${this.nodes[selectedNode].attributes.node_id}`);
+    Object.keys(protections).forEach((key) => {
+      protectionValues.push({
+        key,
+        value: protections[key],
+      });
+    });
+    this.setProperties({
+      _protection: protectionValues,
+      _selectedProtectionParameter: -1,
+      _loadedProtectionValue: this.protection[1].value });
+  }
+
+  _computeProtectionData(selectedProtectionParameter) {
+    if (this.selectedNode === -1 || selectedProtectionParameter === -1) return;
+    this._protectionData = {
+      selection: this._protectionOptions[selectedProtectionParameter],
+      value_id: this._protectionValueID
+    };
+    this._nodePath = `zwave/protection/${this.nodes[this.selectedNode].attributes.node_id}`;
+  }
+}
+
+customElements.define('zwave-node-protection', ZwaveNodeProtection);