Zwcp small fixes, style, refactor etc. (#1570)

* Fix promise errors

* Style, fixes and refactors

* Missed some files

* Short key

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

@@ -120,23 +120,89 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
 
           <template is="dom-if" if="[[computeIsNodeSelected(selectedNode)]]">
           <div class="card-actions">
-            <ha-call-service-button hass="[[hass]]" domain="zwave" service="refresh_node" service-data="[[computeNodeServiceData(selectedNode)]]">Refresh Node</ha-call-service-button>
+            <ha-call-service-button
-            <ha-service-description hass="[[hass]]" domain="zwave" service="refresh_node" hidden$="[[!showHelp]]"></ha-service-description>
+              hass="[[hass]]"
+              domain="zwave"
+              service="refresh_node"
+              service-data="[[computeNodeServiceData(selectedNode)]]">
+              Refresh Node
+            </ha-call-service-button>
+            <ha-service-description
+              hass="[[hass]]"
+              domain="zwave"
+              service="refresh_node"
+              hidden$="[[!showHelp]]">
+            </ha-service-description>
 
-            <ha-call-service-button hass="[[hass]]" domain="zwave" service="remove_failed_node" service-data="[[computeNodeServiceData(selectedNode)]]">Remove Failed Node</ha-call-service-button>
+            <ha-call-service-button
-            <ha-service-description hass="[[hass]]" domain="zwave" service="remove_failed_node" hidden$="[[!showHelp]]"></ha-service-description>
+              hass="[[hass]]"
+              domain="zwave"
+              service="remove_failed_node"
+              service-data="[[computeNodeServiceData(selectedNode)]]">
+              Remove Failed Node
+            </ha-call-service-button>
+            <ha-service-description
+              hass="[[hass]]"
+              domain="zwave"
+              service="remove_failed_node"
+              hidden$="[[!showHelp]]">
+            </ha-service-description>
 
-            <ha-call-service-button hass="[[hass]]" domain="zwave" service="replace_failed_node" service-data="[[computeNodeServiceData(selectedNode)]]">Replace Failed Node</ha-call-service-button>
+            <ha-call-service-button
-            <ha-service-description hass="[[hass]]" domain="zwave" service="replace_failed_node" hidden$="[[!showHelp]]"></ha-service-description>
+              hass="[[hass]]"
+              domain="zwave"
+              service="replace_failed_node"
+              service-data="[[computeNodeServiceData(selectedNode)]]">
+              Replace Failed Node
+            </ha-call-service-button>
+            <ha-service-description
+              hass="[[hass]]"
+              domain="zwave"
+              service="replace_failed_node"
+              hidden$="[[!showHelp]]">
+            </ha-service-description>
 
-            <ha-call-service-button hass="[[hass]]" domain="zwave" service="print_node" service-data="[[computeNodeServiceData(selectedNode)]]">Print Node</ha-call-service-button>
+            <ha-call-service-button
-            <ha-service-description hass="[[hass]]" domain="zwave" service="print_node" hidden$="[[!showHelp]]"></ha-service-description>
+              hass="[[hass]]"
+              domain="zwave"
+              service="print_node"
+              service-data="[[computeNodeServiceData(selectedNode)]]">
+              Print Node
+            </ha-call-service-button>
+            <ha-service-description
+              hass="[[hass]]"
+              domain="zwave"
+              service="print_node"
+              hidden$="[[!showHelp]]">
+            </ha-service-description>
 
-            <ha-call-service-button hass="[[hass]]" domain="zwave" service="heal_node" service-data="[[computeHealNodeServiceData(selectedNode)]]">Heal Node</ha-call-service-button>
+            <ha-call-service-button
-            <ha-service-description hass="[[hass]]" domain="zwave" service="heal_node" hidden$="[[!showHelp]]"></ha-service-description>
+              hass="[[hass]]"
+              domain="zwave"
+              service="heal_node"
+              service-data="[[computeHealNodeServiceData(selectedNode)]]">
+              Heal Node
+            </ha-call-service-button>
+            <ha-service-description
+              hass="[[hass]]"
+              domain="zwave"
+              service="heal_node"
+              hidden$="[[!showHelp]]">
+            </ha-service-description>
 
-            <ha-call-service-button hass="[[hass]]" domain="zwave" service="test_node" service-data="[[computeNodeServiceData(selectedNode)]]">Test Node</ha-call-service-button>
+            <ha-call-service-button
-            <ha-service-description hass="[[hass]]" domain="zwave" service="test_node" hidden$="[[!showHelp]]"></ha-service-description>
+              hass="[[hass]]"
+              domain="zwave"
+              service="test_node"
+              service-data="[[computeNodeServiceData(selectedNode)]]">
+              Test Node
+            </ha-call-service-button>
+            <ha-service-description
+              hass="[[hass]]"
+              domain="zwave"
+              service="test_node"
+              hidden$="[[!showHelp]]">
+            </ha-service-description>
           </div>
 
            <div class="device-picker">
@@ -150,18 +216,40 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
            </div>
            <template is="dom-if" if="[[!computeIsEntitySelected(selectedEntity)]]">
            <div class="card-actions">
-             <ha-call-service-button hass="[[hass]]" domain="zwave" service="refresh_entity" service-data="[[computeRefreshEntityServiceData(selectedEntity)]]">Refresh Entity</ha-call-service-button>
+             <ha-call-service-button
-             <ha-service-description hass="[[hass]]" domain="zwave" service="refresh_entity" hidden$="[[!showHelp]]"></ha-service-description>
+               hass="[[hass]]"
+               domain="zwave"
+               service="refresh_entity"
+               service-data="[[computeRefreshEntityServiceData(selectedEntity)]]">
+               Refresh Entity
+             </ha-call-service-button>
+             <ha-service-description
+               hass="[[hass]]"
+               domain="zwave"
+               service="refresh_entity"
+               hidden$="[[!showHelp]]">
+             </ha-service-description>
            </div>
            <div class="form-group">
              <paper-checkbox checked="{{entityIgnored}}" class="form-control">
              Exclude this entity from Home Assistant
              </paper-checkbox>
-             <paper-input disabled="{{entityIgnored}}" label="Polling intensity" type="number" min="0" value="{{entityPollingIntensity}}">
+             <paper-input
+               disabled="{{entityIgnored}}"
+               label="Polling intensity"
+               type="number"
+               min="0"
+               value="{{entityPollingIntensity}}">
              </paper-input>
            </div>
            <div class="card-actions">
-             <ha-call-service-button hass="[[hass]]" domain="zwave" service="set_poll_intensity" service-data="[[computePollIntensityServiceData(entityPollingIntensity)]]">Save</ha-call-service-button>
+             <ha-call-service-button
+               hass="[[hass]]"
+               domain="zwave"
+               service="set_poll_intensity"
+               service-data="[[computePollIntensityServiceData(entityPollingIntensity)]]">
+               Save
+             </ha-call-service-button>
            </div>
            <div class="content">
              <div class="card-actions">
@@ -248,6 +336,7 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
   static get properties() {
     return {
       hass: Object,
+
       isWide: Boolean,
 
       nodes: {
@@ -263,9 +352,7 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
 
       config: {
         type: Array,
-        value: function () {
+        value: () => []
-          return [];
-        }
       },
 
       entities: {
@@ -273,9 +360,7 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
         computed: 'computeEntities(selectedNode)',
       },
 
-      entityInfoActive: {
+      entityInfoActive: Boolean,
-        type: Boolean,
-      },
 
       selectedEntity: {
         type: Number,
@@ -298,9 +383,7 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
 
       userCodes: {
         type: Array,
-        value: function () {
+        value: () => []
-          return [];
-        },
       },
 
       hasNodeUserCodes: {
@@ -313,9 +396,7 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
         value: false,
       },
 
-      entityIgnored: {
+      entityIgnored: Boolean,
-        type: Boolean,
-      },
 
       entityPollingIntensity: {
         type: Number,
@@ -324,7 +405,7 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
 
       _protection: {
         type: Array,
-        value: () => [],
+        value: () => []
       },
 
       _protectionNode: {
@@ -340,28 +421,25 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
   }
 
   serviceCalled(ev) {
-    var el = this;
     if ((ev.detail.success) && (ev.detail.service === 'set_poll_intensity')) {
-      el.saveEntity();
+      this._saveEntity();
     }
   }
 
   computeNodes(hass) {
     return Object.keys(hass.states)
-      .map(function (key) { return hass.states[key]; })
+      .map(key => hass.states[key])
-      .filter(function (ent) {
+      .filter(ent => (ent.entity_id).match('zwave[.]'))
-        return ((ent.entity_id).match('zwave[.]'));
-      })
       .sort(sortByName);
   }
 
   computeEntities(selectedNode) {
     if (!this.nodes || selectedNode === -1) return -1;
-    var hass = this.hass;
+    const nodeid = this.nodes[this.selectedNode].attributes.node_id;
-    var nodeid = this.nodes[this.selectedNode].attributes.node_id;
+    const hass = this.hass;
-    return Object.keys(hass.states)
+    return Object.keys(this.hass.states)
-      .map(function (key) { return hass.states[key]; })
+      .map(key => hass.states[key])
-      .filter(function (ent) {
+      .filter((ent) => {
         if (ent.attributes.node_id === undefined) {
           return false;
         }
@@ -375,25 +453,23 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
 
   selectedNodeChanged(selectedNode) {
     if (selectedNode === -1) return;
-    this.selectedConfigParameter = -1;
+    this.selectedEntity = -1;
-    this.selectedConfigParameterValue = -1;
-    this.selectedGroup = -1;
 
-    this.hass.callApi('GET', 'zwave/config/' + this.nodes[selectedNode].attributes.node_id).then((configs) => {
+    this.hass.callApi('GET', `zwave/config/${this.nodes[selectedNode].attributes.node_id}`).then((configs) => {
       this.config = this._objToArray(configs);
     });
 
-    this.hass.callApi('GET', 'zwave/values/' + this.nodes[selectedNode].attributes.node_id).then((values) => {
+    this.hass.callApi('GET', `zwave/values/${this.nodes[selectedNode].attributes.node_id}`).then((values) => {
       this.values = this._objToArray(values);
     });
 
-    this.hass.callApi('GET', 'zwave/groups/' + this.nodes[selectedNode].attributes.node_id).then((groups) => {
+    this.hass.callApi('GET', `zwave/groups/${this.nodes[selectedNode].attributes.node_id}`).then((groups) => {
       this.groups = this._objToArray(groups);
     });
 
     this.hasNodeUserCodes = false;
     this.notifyPath('hasNodeUserCodes');
-    this.hass.callApi('GET', 'zwave/usercodes/' + this.nodes[selectedNode].attributes.node_id).then((usercodes) => {
+    this.hass.callApi('GET', `zwave/usercodes/${this.nodes[selectedNode].attributes.node_id}`).then((usercodes) => {
       this.userCodes = this._objToArray(usercodes);
       this.hasNodeUserCodes = this.userCodes.length > 0;
       this.notifyPath('hasNodeUserCodes');
@@ -411,26 +487,25 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
 
   selectedEntityChanged(selectedEntity) {
     if (selectedEntity === -1) return;
-    var el = this;
+    this.hass.callApi('GET', `zwave/values/${this.nodes[this.selectedNode].attributes.node_id}`).then((values) => {
-    el.hass.callApi('GET', 'zwave/values/' + el.nodes[el.selectedNode].attributes.node_id).then((values) => {
+      this.values = this._objToArray(values);
-      el.values = el._objToArray(values);
     });
 
-    var valueId = el.entities[selectedEntity].attributes.value_id;
+    const valueId = this.entities[selectedEntity].attributes.value_id;
-    var valueData = el.values.find(function (obj) { return obj.key === valueId; });
+    const valueData = this.values.find(obj => obj.key === valueId);
-    var valueIndex = el.values.indexOf(valueData);
+    const valueIndex = this.values.indexOf(valueData);
-    el.hass.callApi('GET', 'config/zwave/device_config/' + valueId)
+    this.hass.callApi('GET', `config/zwave/device_config/${this.entities[selectedEntity].entity_id}`)
-      .then(function (data) {
+      .then((data) => {
-        el.entityIgnored = data.ignored || false;
+        this.entityIgnored = data.ignored || false;
-        el.entityPollingIntensity = el.values[valueIndex].value.poll_intensity;
+        this.entityPollingIntensity = this.values[valueIndex].value.poll_intensity;
       });
   }
 
   computeSelectedEntityAttrs(selectedEntity) {
     if (selectedEntity === -1) return 'No entity selected';
-    var entityAttrs = this.entities[selectedEntity].attributes;
+    const entityAttrs = this.entities[selectedEntity].attributes;
-    var att = [];
+    const att = [];
-    Object.keys(entityAttrs).forEach(function (key) {
+    Object.keys(entityAttrs).forEach((key) => {
       att.push(key + ': ' + entityAttrs[key]);
     });
     return att.sort();
@@ -480,12 +555,12 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
     };
   }
 
-  saveEntity() {
+  _saveEntity() {
-    var data = {
+    const data = {
       ignored: this.entityIgnored,
       polling_intensity: parseInt(this.entityPollingIntensity),
     };
-    return this.hass.callApi('POST', 'config/zwave/device_config/' + this.entities[this.selectedEntity].entity_id, data);
+    return this.hass.callApi('POST', `config/zwave/device_config/${this.entities[this.selectedEntity].entity_id}`, data);
   }
 
   toggleHelp() {
@@ -493,10 +568,10 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
   }
 
   _objToArray(obj) {
-    var array = [];
+    const array = [];
-    Object.keys(obj).forEach(function (key) {
+    Object.keys(obj).forEach((key) => {
       array.push({
-        key: key,
+        key,
         value: obj[key],
       });
     });

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

@@ -74,10 +74,22 @@ class ZwaveGroups extends PolymerElement {
       <template is="dom-if" if="[[_computeIsTargetNodeSelected(_selectedTargetNode)]]">
         <div class="card-actions">
           <template is="dom-if" if="[[!_noAssociationsLeft]]">
-            <ha-call-service-button hass="[[hass]]" domain="zwave" service="change_association" service-data="[[_computeAssocServiceData(_selectedGroup, &quot;add&quot;)]]">Add To Group</ha-call-service-button>
+            <ha-call-service-button
+              hass="[[hass]]"
+              domain="zwave"
+              service="change_association"
+              service-data="[[_addAssocServiceData]]">
+              Add To Group
+            </ha-call-service-button>
           </template>
           <template is="dom-if" if="[[_computeTargetInGroup(_selectedGroup, _selectedTargetNode)]]">
-            <ha-call-service-button hass="[[hass]]" domain="zwave" service="change_association" service-data="[[_computeAssocServiceData(_selectedGroup, &quot;remove&quot;)]]">Remove From Group</ha-call-service-button>
+            <ha-call-service-button
+              hass="[[hass]]"
+              domain="zwave"
+              service="change_association"
+              service-data="[[_removeAssocServiceData]]">
+              Remove From Group
+            </ha-call-service-button>
           </template>
         </div>
       </template>
@@ -93,11 +105,15 @@ class ZwaveGroups extends PolymerElement {
 
       groups: Array,
 
-      selectedNode: Number,
+      selectedNode: {
+        type: Number,
+        observer: '_selectedNodeChanged'
+      },
 
       _selectedTargetNode: {
         type: Number,
-        value: -1
+        value: -1,
+        observer: '_selectedTargetNodeChanged'
       },
 
       _selectedGroup: {
@@ -122,13 +138,22 @@ class ZwaveGroups extends PolymerElement {
         value: true,
         computed: '_computeAssociationsLeft(_selectedGroup)'
       },
+
+      _addAssocServiceData: {
+        type: String,
+        value: ''
+      },
+
+      _removeAssocServiceData: {
+        type: String,
+        value: ''
+      },
     };
   }
 
   static get observers() {
     return [
       '_selectedGroupChanged(groups, _selectedGroup)',
-      '_selectedTargetNodeChanged(nodes, _selectedTargetNode)'
     ];
   }
 
@@ -244,11 +269,21 @@ class ZwaveGroups extends PolymerElement {
 
   _selectedTargetNodeChanged() {
     if (this._selectedGroup === -1) return;
-    this._computeAssocServiceData(this._selectedGroup, 'add');
     if (this._computeTargetInGroup(this._selectedGroup, this._selectedTargetNode)) {
-      this._computeAssocServiceData(this._selectedGroup, 'remove');
+      this.setProperties({
+        _removeAssocServiceData: this._computeAssocServiceData(this._selectedGroup, 'remove')
+      });
+    } else {
+      this.setProperties({
+        _addAssocServiceData: this._computeAssocServiceData(this._selectedGroup, 'add')
+      });
     }
   }
+
+  _selectedNodeChanged() {
+    if (this.selectedNode === -1) return;
+    this.setProperties({ _selectedTargetNode: -1, _selectedGroup: -1 });
+  }
 }
 
 customElements.define('zwave-groups', ZwaveGroups);

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

@@ -47,9 +47,7 @@ class OzwLog extends PolymerElement {
 
   static get properties() {
     return {
-      hass: {
+      hass: Object,
-        type: Object,
-      },
 
       isWide: {
         type: Boolean,

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

@@ -55,36 +55,126 @@ class ZwaveNetwork extends PolymerElement {
 
       <paper-card class="content">
         <div class="card-actions">
-          <ha-call-service-button hass="[[hass]]" domain="zwave" service="add_node_secure">Add Node Secure</ha-call-service-button>
+          <ha-call-service-button
-          <ha-service-description hass="[[hass]]" domain="zwave" service="add_node_secure" hidden$="[[!showDescription]]"></ha-service-description>
+            hass="[[hass]]"
+            domain="zwave"
+            service="add_node_secure">
+            Add Node Secure
+          </ha-call-service-button>
+          <ha-service-description
+            hass="[[hass]]"
+            domain="zwave"
+            service="add_node_secure"
+            hidden$="[[!showDescription]]">
+          </ha-service-description>
 
-          <ha-call-service-button hass="[[hass]]" domain="zwave" service="add_node">Add Node</ha-call-service-button>
+          <ha-call-service-button
-          <ha-service-description hass="[[hass]]" domain="zwave" service="add_node" hidden$="[[!showDescription]]"></ha-service-description>
+            hass="[[hass]]"
+            domain="zwave"
+            service="add_node">
+            Add Node
+          </ha-call-service-button>
+          <ha-service-description
+            hass="[[hass]]"
+            domain="zwave"
+            service="add_node"
+            hidden$="[[!showDescription]]">
+          </ha-service-description>
 
-          <ha-call-service-button hass="[[hass]]" domain="zwave" service="remove_node">Remove Node</ha-call-service-button>
+          <ha-call-service-button
-          <ha-service-description hass="[[hass]]" domain="zwave" service="remove_node" hidden$="[[!showDescription]]"></ha-service-description>
+            hass="[[hass]]"
+            domain="zwave"
+            service="remove_node">
+            Remove Node
+          </ha-call-service-button>
+          <ha-service-description
+            hass="[[hass]]"
+            domain="zwave"
+            service="remove_node"
+            hidden$="[[!showDescription]]">
+          </ha-service-description>
 
         </div>
         <div class="card-actions warning">
-          <ha-call-service-button hass="[[hass]]" domain="zwave" service="cancel_command">Cancel Command</ha-call-service-button>
+          <ha-call-service-button
-          <ha-service-description hass="[[hass]]" domain="zwave" service="cancel_command" hidden$="[[!showDescription]]"></ha-service-description>
+            hass="[[hass]]"
+            domain="zwave"
+            service="cancel_command">
+            Cancel Command
+          </ha-call-service-button>
+          <ha-service-description
+            hass="[[hass]]"
+            domain="zwave"
+            service="cancel_command"
+            hidden$="[[!showDescription]]">
+          </ha-service-description>
 
         </div>
         <div class="card-actions">
-          <ha-call-service-button hass="[[hass]]" domain="zwave" service="heal_network">Heal Network</ha-call-service-button>
+          <ha-call-service-button
+            hass="[[hass]]"
+            domain="zwave"
+            service="heal_network">
+            Heal Network
+          </ha-call-service-button>
 
-          <ha-call-service-button hass="[[hass]]" domain="zwave" service="start_network">Start Network</ha-call-service-button>
+          <ha-call-service-button
-          <ha-service-description hass="[[hass]]" domain="zwave" service="start_network" hidden$="[[!showDescription]]"></ha-service-description>
+            hass="[[hass]]"
+            domain="zwave"
+            service="start_network">
+            Start Network
+          </ha-call-service-button>
+          <ha-service-description
+            hass="[[hass]]"
+            domain="zwave"
+            service="start_network"
+            hidden$="[[!showDescription]]">
+          </ha-service-description>
 
-          <ha-call-service-button hass="[[hass]]" domain="zwave" service="stop_network">Stop Network</ha-call-service-button>
+          <ha-call-service-button
-          <ha-service-description hass="[[hass]]" domain="zwave" service="stop_network" hidden$="[[!showDescription]]"></ha-service-description>
+            hass="[[hass]]"
+            domain="zwave"
+            service="stop_network">
+            Stop Network
+          </ha-call-service-button>
+          <ha-service-description
+            hass="[[hass]]"
+            domain="zwave"
+            service="stop_network"
+            hidden$="[[!showDescription]]">
+          </ha-service-description>
 
-          <ha-call-service-button hass="[[hass]]" domain="zwave" service="soft_reset">Soft Reset</ha-call-service-button>
+          <ha-call-service-button
-          <ha-service-description hass="[[hass]]" domain="zwave" service="soft_reset" hidden$="[[!showDescription]]"></ha-service-description>
+            hass="[[hass]]"
+            domain="zwave"
+            service="soft_reset">
+            Soft Reset
+          </ha-call-service-button>
+          <ha-service-description
+            hass="[[hass]]"
+            domain="zwave"
+            service="soft_reset"
+            hidden$="[[!showDescription]]">
+          </ha-service-description>
 
-          <ha-call-service-button hass="[[hass]]" domain="zwave" service="test_network">Test Network</ha-call-service-button>
+          <ha-call-service-button
-          <ha-service-description hass="[[hass]]" domain="zwave" service="test_network" hidden$="[[!showDescription]]"></ha-service-description>
+            hass="[[hass]]"
-          <ha-call-api-button hass="[[hass]]" path="zwave/saveconfig">Save Config</ha-call-api-button>
+            domain="zwave"
+            service="test_network">
+            Test Network
+          </ha-call-service-button>
+          <ha-service-description
+            hass="[[hass]]"
+            domain="zwave"
+            service="test_network"
+            hidden$="[[!showDescription]]">
+          </ha-service-description>
+
+          <ha-call-api-button
+            hass="[[hass]]"
+            path="zwave/saveconfig">
+            Save Config
+          </ha-call-api-button>
 
         </div>
       </paper-card>
@@ -94,9 +184,7 @@ class ZwaveNetwork extends PolymerElement {
 
   static get properties() {
     return {
-      hass: {
+      hass: Object,
-        type: Object,
-      },
 
       isWide: {
         type: Boolean,

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

@@ -37,28 +37,38 @@ class ZwaveNodeConfig extends PolymerElement {
     </style>
     <div class="content">
       <paper-card heading="Node config options">
-        <template is="dom-if" if="[[wakeupNode]]">
+        <template is="dom-if" if="[[_wakeupNode]]">
           <div class="card-actions">
-            <paper-input float-label="Wakeup Interval" type="number" value="{{wakeupInput}}" placeholder="[[computeGetWakeupValue(selectedNode)]]">
+            <paper-input
+              float-label="Wakeup Interval"
+              type="number"
+              value="{{_wakeupInput}}"
+              placeholder="[[_computeGetWakeupValue(selectedNode)]]">
               <div suffix="">seconds</div>
             </paper-input>
-            <ha-call-service-button hass="[[hass]]" domain="zwave" service="set_wakeup" service-data="[[computeWakeupServiceData(wakeupInput)]]">Set Wakeup</ha-call-service-button>
+            <ha-call-service-button
+              hass="[[hass]]"
+              domain="zwave"
+              service="set_wakeup"
+              service-data="[[_computeWakeupServiceData(_wakeupInput)]]">
+              Set Wakeup
+            </ha-call-service-button>
           </div>
         </template>
         <div class="device-picker">
         <paper-dropdown-menu label="Config parameter" dynamic-align="" class="flex">
-          <paper-listbox slot="dropdown-content" selected="{{selectedConfigParameter}}">
+          <paper-listbox slot="dropdown-content" selected="{{_selectedConfigParameter}}">
             <template is="dom-repeat" items="[[config]]" as="state">
-              <paper-item>[[computeSelectCaptionConfigParameter(state)]]</paper-item>
+              <paper-item>[[_computeSelectCaptionConfigParameter(state)]]</paper-item>
             </template>
           </paper-listbox>
         </paper-dropdown-menu>
         </div>
-        <template is="dom-if" if="[[isConfigParameterSelected(selectedConfigParameter, 'List')]]">
+        <template is="dom-if" if="[[_isConfigParameterSelected(_selectedConfigParameter, 'List')]]">
           <div class="device-picker">
-            <paper-dropdown-menu label="Config value" dynamic-align="" class="flex" placeholder="{{loadedConfigValue}}">
+            <paper-dropdown-menu label="Config value" dynamic-align="" class="flex" placeholder="{{_loadedConfigValue}}">
-              <paper-listbox slot="dropdown-content" selected="{{selectedConfigValue}}">
+              <paper-listbox slot="dropdown-content" selected="{{_selectedConfigValue}}">
-                <template is="dom-repeat" items="[[selectedConfigParameterValues]]" as="state">
+                <template is="dom-repeat" items="[[_selectedConfigParameterValues]]" as="state">
                   <paper-item>[[state]]</paper-item>
                 </template>
               </paper-listbox>
@@ -66,17 +76,22 @@ class ZwaveNodeConfig extends PolymerElement {
           </div>
         </template>
 
-        <template is="dom-if" if="[[isConfigParameterSelected(selectedConfigParameter, 'Byte Short Int')]]">
+        <template is="dom-if" if="[[_isConfigParameterSelected(_selectedConfigParameter, 'Byte Short Int')]]">
           <div class="card-actions">
-            <paper-input label="{{selectedConfigParameterNumValues}}" type="number" value="{{selectedConfigValue}}" max="{{configParameterMax}}" min="{{configParameterMin}}">
+            <paper-input
+              label="{{_selectedConfigParameterNumValues}}"
+              type="number"
+              value="{{_selectedConfigValue}}"
+              max="{{_configParameterMax}}"
+              min="{{_configParameterMin}}">
             </paper-input>
           </div>
         </template>
-        <template is="dom-if" if="[[isConfigParameterSelected(selectedConfigParameter, 'Bool Button')]]">
+        <template is="dom-if" if="[[_isConfigParameterSelected(_selectedConfigParameter, 'Bool Button')]]">
           <div class="device-picker">
-            <paper-dropdown-menu label="Config value" class="flex" dynamic-align="" placeholder="{{loadedConfigValue}}">
+            <paper-dropdown-menu label="Config value" class="flex" dynamic-align="" placeholder="{{_loadedConfigValue}}">
-              <paper-listbox slot="dropdown-content" selected="{{selectedConfigValue}}">
+              <paper-listbox slot="dropdown-content" selected="{{_selectedConfigValue}}">
-                <template is="dom-repeat" items="[[selectedConfigParameterValues]]" as="state">
+                <template is="dom-repeat" items="[[_selectedConfigParameterValues]]" as="state">
                   <paper-item>[[state]]</paper-item>
                 </template>
               </paper-listbox>
@@ -84,11 +99,17 @@ class ZwaveNodeConfig extends PolymerElement {
           </div>
         </template>
         <div class="help-text">
-          <span>[[configValueHelpText]]</span>
+          <span>[[_configValueHelpText]]</span>
         </div>
-        <template is="dom-if" if="[[isConfigParameterSelected(selectedConfigParameter, 'Bool Button Byte Short Int List')]]">
+        <template is="dom-if" if="[[_isConfigParameterSelected(_selectedConfigParameter, 'Bool Button Byte Short Int List')]]">
           <div class="card-actions">
-            <ha-call-service-button hass="[[hass]]" domain="zwave" service="set_config_parameter" service-data="[[computeSetConfigParameterServiceData(selectedConfigValue)]]">Set Config Parameter</ha-call-service-button>
+            <ha-call-service-button
+              hass="[[hass]]"
+              domain="zwave"
+              service="set_config_parameter"
+              service-data="[[_computeSetConfigParameterServiceData(_selectedConfigValue)]]">
+              Set Config Parameter
+            </ha-call-service-button>
           </div>
         </template>
       </paper-card>
@@ -98,83 +119,71 @@ class ZwaveNodeConfig extends PolymerElement {
 
   static get properties() {
     return {
-      hass: {
+      hass: Object,
-        type: Object,
-      },
 
-      nodes: {
+      nodes: Array,
-        type: Array,
-        observer: 'nodesChanged'
-      },
 
       selectedNode: {
         type: Number,
-        value: -1,
+        observer: '_nodesChanged'
-        observer: 'nodesChanged'
       },
 
       config: {
         type: Array,
-        value: function () {
+        value: () => []
-          return [];
-        }
       },
 
-      selectedConfigParameter: {
+      _selectedConfigParameter: {
         type: Number,
         value: -1,
-        observer: 'selectedConfigParameterChanged'
+        observer: '_selectedConfigParameterChanged'
       },
 
-      configParameterMax: {
+      _configParameterMax: {
         type: Number,
         value: -1
       },
 
-      configParameterMin: {
+      _configParameterMin: {
         type: Number,
         value: -1
       },
 
-      configValueHelpText: {
+      _configValueHelpText: {
         type: String,
         value: '',
-        computed: 'computeConfigValueHelp(selectedConfigParameter)'
+        computed: '_computeConfigValueHelp(_selectedConfigParameter)'
       },
 
-      selectedConfigParameterType: {
+      _selectedConfigParameterType: {
         type: String,
         value: ''
       },
 
-      selectedConfigValue: {
+      _selectedConfigValue: {
         type: Number,
         value: -1,
-        observer: 'computeSetConfigParameterServiceData'
+        observer: '_computeSetConfigParameterServiceData'
       },
 
-      selectedConfigParameterValues: {
+      _selectedConfigParameterValues: {
         type: Array,
-        value: function () {
+        value: () => []
-          return [];
-        }
       },
 
-      selectedConfigParameterNumValues: {
+      _selectedConfigParameterNumValues: {
         type: String,
         value: ''
       },
 
-      loadedConfigValue: {
+      _loadedConfigValue: {
         type: Number,
         value: -1
       },
 
-      wakeupInput: {
+      _wakeupInput: Number,
-        type: Number,
-      },
 
-      wakeupNode: {
+      _wakeupNode: {
         type: Boolean,
         value: false,
       },
@@ -188,108 +197,116 @@ class ZwaveNodeConfig extends PolymerElement {
 
   serviceCalled(ev) {
     if (ev.detail.success) {
-      var foo = this;
+      setTimeout(() => {
-      setTimeout(function () {
+        this._refreshConfig(this.selectedNode);
-        foo.refreshConfig(foo.selectedNode);
       }, 5000);
     }
   }
 
-  nodesChanged() {
+  _nodesChanged() {
     if (!this.nodes) return;
-    this.wakeupNode = (this.nodes[this.selectedNode].attributes.wake_up_interval === 0 ||
+    this.setProperties({ _selectedConfigParameter: -1 });
+    this._wakeupNode = (this.nodes[this.selectedNode].attributes.wake_up_interval === 0 ||
       this.nodes[this.selectedNode].attributes.wake_up_interval);
-    if (this.wakeupNode) {
+    if (this._wakeupNode) {
-      if (this.nodes[this.selectedNode].attributes.wake_up_interval === 0) this.wakeupInput = '';
+      if (this.nodes[this.selectedNode].attributes.wake_up_interval === 0) this.setProperties({ _wakeupInput: '' });
-      else this.wakeupInput = this.nodes[this.selectedNode].attributes.wake_up_interval;
+      else {
+        this.setProperties({
+          _wakeupInput: this.nodes[this.selectedNode].attributes.wake_up_interval });
+      }
     }
   }
 
-  computeGetWakeupValue(selectedNode) {
+  _computeGetWakeupValue(selectedNode) {
     if (this.selectedNode === -1 ||
       !this.nodes[selectedNode].attributes.wake_up_interval) return 'unknown';
     return (this.nodes[selectedNode].attributes.wake_up_interval);
   }
 
-  computeWakeupServiceData(wakeupInput) {
+  _computeWakeupServiceData(wakeupInput) {
     return {
       node_id: this.nodes[this.selectedNode].attributes.node_id,
       value: wakeupInput
     };
   }
 
-  computeConfigValueHelp(selectedConfigParameter) {
+  _computeConfigValueHelp(selectedConfigParameter) {
     if (selectedConfigParameter === -1) return '';
-    var helpText = this.config[selectedConfigParameter].value.help;
+    const helpText = this.config[selectedConfigParameter].value.help;
     if (!helpText) return ['No helptext available'];
     return helpText;
   }
 
-  computeSetConfigParameterServiceData(selectedConfigValue) {
+  _computeSetConfigParameterServiceData(selectedConfigValue) {
-    if (this.selectedNode === -1 || this.selectedConfigParameter === -1) return -1;
+    if (this.selectedNode === -1 || this._selectedConfigParameter === -1) return -1;
     var valueData = null;
-    if (('Short Byte Int').includes(this.selectedConfigParameterType)) {
+    if (('Short Byte Int').includes(this._selectedConfigParameterType)) {
       valueData = parseInt(selectedConfigValue, 10);
-    } if (('Bool Button').includes(this.selectedConfigParameterType)) {
+    } if (('Bool Button List').includes(this._selectedConfigParameterType)) {
-      valueData = this.selectedConfigParameterValues[selectedConfigValue];
+      valueData = this._selectedConfigParameterValues[selectedConfigValue];
-    } if (this.selectedConfigParameterType === 'List') {
-      valueData = this.selectedConfigParameterValues[selectedConfigValue];
     }
     return {
       node_id: this.nodes[this.selectedNode].attributes.node_id,
-      parameter: this.config[this.selectedConfigParameter].key,
+      parameter: this.config[this._selectedConfigParameter].key,
       value: valueData
     };
   }
 
-  selectedConfigParameterChanged(selectedConfigParameter) {
+  _selectedConfigParameterChanged(selectedConfigParameter) {
     if (selectedConfigParameter === -1) return;
-    this.selectedConfigValue = -1;
+    this.setProperties({
-    this.loadedConfigValue = -1;
+      _selectedConfigValue: -1,
-    this.selectedConfigParameterValues = [];
+      _loadedConfigValue: -1,
-    this.selectedConfigParameterType = this.config[selectedConfigParameter].value.type;
+      _selectedConfigParameterValues: []
-    this.configParameterMax = this.config[selectedConfigParameter].value.max;
+    });
-    this.configParameterMin = this.config[selectedConfigParameter].value.min;
+    this.setProperties({
-    this.loadedConfigValue = this.config[selectedConfigParameter].value.data;
+      _selectedConfigParameterType: this.config[selectedConfigParameter].value.type,
-    this.configValueHelpText = this.config[selectedConfigParameter].value.help;
+      _configParameterMax: this.config[selectedConfigParameter].value.max,
-    if (('Short Byte Int').includes(this.selectedConfigParameterType)) {
+      _configParameterMin: this.config[selectedConfigParameter].value.min,
-      this.selectedConfigParameterNumValues = this.config[selectedConfigParameter].value.data_items;
+      _loadedConfigValue: this.config[selectedConfigParameter].value.data,
-      this.selectedConfigValue = this.loadedConfigValue;
+      _configValueHelpText: this.config[selectedConfigParameter].value.help
+    });
+    if (('Short Byte Int').includes(this._selectedConfigParameterType)) {
+      this.setProperties({
+        _selectedConfigParameterNumValues: this.config[selectedConfigParameter].value.data_items,
+        _selectedConfigValue: this._loadedConfigValue
+      });
     }
-    if (('Bool Button').includes(this.selectedConfigParameterType)) {
+    if (('Bool Button').includes(this._selectedConfigParameterType)) {
-      this.selectedConfigParameterValues = ['True', 'False'];
+      this.setProperties({ _selectedConfigParameterValues: ['True', 'False'] });
       if (this.config[selectedConfigParameter].value.data) {
-        this.loadedConfigValue = 'True';
+        this.setProperties({ _loadedConfigValue: 'True' });
-      } else this.loadedConfigValue = 'False';
+      } else this.setProperties({ _loadedConfigValue: 'False' });
     }
-    if (('List').includes(this.selectedConfigParameterType)) {
+    if (('List').includes(this._selectedConfigParameterType)) {
-      this.selectedConfigParameterValues = this.config[selectedConfigParameter].value.data_items;
+      this.setProperties({
+        _selectedConfigParameterValues: this.config[selectedConfigParameter].value.data_items
+      });
     }
   }
 
-  isConfigParameterSelected(selectedConfigParameter, type) {
+  _isConfigParameterSelected(selectedConfigParameter, type) {
     if (selectedConfigParameter === -1) return false;
     if (this.config[selectedConfigParameter].value.type === type) return true;
     if (type.includes(this.config[selectedConfigParameter].value.type)) return true;
     return false;
   }
 
-  computeSelectCaptionConfigParameter(stateObj) {
+  _computeSelectCaptionConfigParameter(stateObj) {
-    return (stateObj.key + ': ' + stateObj.value.label);
+    return `${stateObj.key}: ${stateObj.value.label}`;
   }
 
-  refreshConfig(selectedNode) {
+  async _refreshConfig(selectedNode) {
-    var configData = [];
+    const configData = [];
-    this.hass.callApi('GET', 'zwave/config/' + this.nodes[selectedNode].attributes.node_id).then(function (config) {
+    const config = await this.hass.callApi('GET', `zwave/config/${this.nodes[selectedNode].attributes.node_id}`);
-      Object.keys(config).forEach(function (key) {
+    Object.keys(config).forEach((key) => {
       configData.push({
         key: key,
         value: config[key],
       });
     });
-      this.config = configData;
+    this.setProperties({ config: configData });
-      this.selectedConfigParameterChanged(this.selectedConfigParameter);
+    this._selectedConfigParameterChanged(this._selectedConfigParameter);
-    }.bind(this));
   }
 }
 

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

@@ -46,10 +46,7 @@ class ZwaveNodeInformation extends PolymerElement {
 
   static get properties() {
     return {
-      nodes: {
+      nodes: Array,
-        type: Array,
-        observer: 'nodeChanged'
-      },
 
       selectedNode: {
         type: Number,
@@ -57,21 +54,17 @@ class ZwaveNodeInformation extends PolymerElement {
         observer: 'nodeChanged'
       },
 
-      selectedNodeAttrs: {
+      selectedNodeAttrs: Array,
-        type: Array,
-      },
 
-      nodeInfoActive: {
+      nodeInfoActive: Boolean,
-        type: Boolean,
-      },
     };
   }
 
   nodeChanged(selectedNode) {
     if (!this.nodes || selectedNode === -1) return;
-    var nodeAttrs = this.nodes[this.selectedNode].attributes;
+    const nodeAttrs = this.nodes[this.selectedNode].attributes;
-    var att = [];
+    const att = [];
-    Object.keys(nodeAttrs).forEach(function (key) {
+    Object.keys(nodeAttrs).forEach((key) => {
       att.push(key + ': ' + nodeAttrs[key]);
     });
     this.selectedNodeAttrs = att.sort();

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

@@ -44,7 +44,12 @@ class ZwaveNodeProtection extends PolymerElement {
           </paper-dropdown-menu>
           </div>
           <div class="card-actions">
-            <ha-call-api-button hass="[[hass]]" path="[[_nodePath]]" data="[[_protectionData]]">Set Protection</ha-call-service-button>
+            <ha-call-api-button
+              hass="[[hass]]"
+              path="[[_nodePath]]"
+              data="[[_protectionData]]">
+              Set Protection
+            </ha-call-service-button>
           </div>
         </div>
 `;

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

@@ -34,23 +34,40 @@ class ZwaveUsercodes extends PolymerElement {
         <paper-card heading="Node user codes">
           <div class="device-picker">
           <paper-dropdown-menu label="Code slot" dynamic-align="" class="flex">
-            <paper-listbox slot="dropdown-content" selected="{{selectedUserCode}}">
+            <paper-listbox slot="dropdown-content" selected="{{_selectedUserCode}}">
               <template is="dom-repeat" items="[[userCodes]]" as="state">
-                <paper-item>[[computeSelectCaptionUserCodes(state)]]</paper-item>
+                <paper-item>[[_computeSelectCaptionUserCodes(state)]]</paper-item>
               </template>
             </paper-listbox>
           </paper-dropdown-menu>
           </div>
 
-          <template is="dom-if" if="[[isUserCodeSelected(selectedUserCode)]]">
+          <template is="dom-if" if="[[_isUserCodeSelected(_selectedUserCode)]]">
             <div class="card-actions">
-              <paper-input label="User code" type="text" allowed-pattern="[0-9,a-f,x,\\\\]" maxlength="{{userCodeMaxLen}}" minlength="16" value="{{selectedUserCodeValue}}">
+              <paper-input
+                label="User code"
+                type="text"
+                allowed-pattern="[0-9,a-f,x,\\\\]"
+                maxlength="{{_userCodeMaxLen}}"
+                minlength="16" value="{{_selectedUserCodeValue}}">
               </paper-input>
-              <pre>Ascii: [[computedCodeOutput]]</pre>
+              <pre>Ascii: [[_computedCodeOutput]]</pre>
             </div>
             <div class="card-actions">
-              <ha-call-service-button hass="[[hass]]" domain="lock" service="set_usercode" service-data="[[computeUserCodeServiceData(selectedUserCodeValue, &quot;Add&quot;)]]">Set Usercode</ha-call-service-button>
+              <ha-call-service-button
-              <ha-call-service-button hass="[[hass]]" domain="lock" service="clear_usercode" service-data="[[computeUserCodeServiceData(selectedUserCode, &quot;Delete&quot;)]]">Delete Usercode</ha-call-service-button>
+                hass="[[hass]]"
+                domain="lock"
+                service="set_usercode"
+                service-data="[[_computeUserCodeServiceData(_selectedUserCodeValue, &quot;Add&quot;)]]">
+                Set Usercode
+              </ha-call-service-button>
+              <ha-call-service-button
+                hass="[[hass]]"
+                domain="lock"
+                service="clear_usercode"
+                service-data="[[_computeUserCodeServiceData(_selectedUserCode, &quot;Delete&quot;)]]">
+                Delete Usercode
+              </ha-call-service-button>
             </div>
           </template>
         </paper-card>
@@ -60,38 +77,31 @@ class ZwaveUsercodes extends PolymerElement {
 
   static get properties() {
     return {
-      hass: {
+      hass: Object,
-        type: Object,
-      },
 
-      nodes: {
+      nodes: Array,
-        type: Array,
-      },
 
       selectedNode: {
         type: Number,
+        observer: '_selectedNodeChanged'
       },
 
-      userCodes: {
+      userCodes: Object,
-        type: Object,
-      },
 
-      userCodeMaxLen: {
+      _userCodeMaxLen: {
         type: Number,
         value: 4
       },
 
-      selectedUserCode: {
+      _selectedUserCode: {
         type: Number,
         value: -1,
-        observer: 'selectedUserCodeChanged'
+        observer: '_selectedUserCodeChanged'
       },
 
-      selectedUserCodeValue: {
+      _selectedUserCodeValue: String,
-        type: String,
-      },
 
-      computedCodeOutput: {
+      _computedCodeOutput: {
         type: String,
         value: ''
       },
@@ -105,72 +115,72 @@ class ZwaveUsercodes extends PolymerElement {
 
   serviceCalled(ev) {
     if (ev.detail.success) {
-      var foo = this;
+      setTimeout(() => {
-      setTimeout(function () {
+        this._refreshUserCodes(this.selectedNode);
-        foo.refreshUserCodes(foo.selectedNode);
       }, 5000);
     }
   }
 
-  isUserCodeSelected(selectedUserCode) {
+  _isUserCodeSelected(selectedUserCode) {
     if (selectedUserCode === -1) return false;
     return true;
   }
 
-  computeSelectCaptionUserCodes(stateObj) {
+  _computeSelectCaptionUserCodes(stateObj) {
-    return (stateObj.key + ': ' + stateObj.value.label);
+    return `${stateObj.key}: ${stateObj.value.label}`;
   }
 
-  selectedUserCodeChanged(selectedUserCode) {
+  _selectedUserCodeChanged(selectedUserCode) {
-    if (this.selectedUserCode === -1 || selectedUserCode === -1) return;
+    if (this._selectedUserCode === -1 || selectedUserCode === -1) return;
-    var value = this.userCodes[selectedUserCode].value.code;
+    const value = this.userCodes[selectedUserCode].value.code;
-    this.userCodeMaxLen = (this.userCodes[selectedUserCode].value.length * 4);
+    this.setProperties({
-    this.selectedUserCodeValue = this.a2hex(value);
+      _userCodeMaxLen: (this.userCodes[selectedUserCode].value.length * 4),
-    this.computedCodeOutput = '[' + this.hex2a(this.selectedUserCodeValue) + ']';
+      _selectedUserCodeValue: this._a2hex(value),
+      _computedCodeOutput: `[${this._hex2a(this._selectedUserCodeValue)}]`
+    });
   }
 
-  computeUserCodeServiceData(selectedUserCodeValue, type) {
+  _computeUserCodeServiceData(selectedUserCodeValue, type) {
     if (this.selectedNode === -1 || !selectedUserCodeValue) return -1;
-    var serviceData = null;
+    let serviceData = null;
-    var valueData = null;
+    let valueData = null;
     if (type === 'Add') {
-      valueData = this.hex2a(selectedUserCodeValue);
+      valueData = this._hex2a(selectedUserCodeValue);
-      this.computedCodeOutput = '[' + valueData + ']';
+      this._computedCodeOutput = `[${valueData}]`;
       serviceData = {
         node_id: this.nodes[this.selectedNode].attributes.node_id,
-        code_slot: this.selectedUserCode,
+        code_slot: this._selectedUserCode,
         usercode: valueData
       };
     }
     if (type === 'Delete') {
       serviceData = {
         node_id: this.nodes[this.selectedNode].attributes.node_id,
-        code_slot: this.selectedUserCode
+        code_slot: this._selectedUserCode
       };
     }
     return serviceData;
   }
 
-  refreshUserCodes(selectedNode) {
+  async _refreshUserCodes(selectedNode) {
-    this.selectedUserCodeValue = '';
+    this.setProperties({ _selectedUserCodeValue: '' });
-    var userCodes = [];
+    const userCodes = [];
-    this.hass.callApi('GET', 'zwave/usercodes/' + this.nodes[selectedNode].attributes.node_id).then(function (usercodes) {
+    const userCodeData = await this.hass.callApi('GET', `zwave/usercodes/${this.nodes[selectedNode].attributes.node_id}`);
-      Object.keys(usercodes).forEach(function (key) {
+    Object.keys(userCodeData).forEach((key) => {
       userCodes.push({
         key: key,
-          value: usercodes[key],
+        value: userCodeData[key],
       });
     });
-      this.userCodes = userCodes;
+    this.setProperties({ userCodes: userCodeData });
-      this.selectedUserCodeChanged(this.selectedUserCode);
+    this._selectedUserCodeChanged(this._selectedUserCode);
-    }.bind(this));
   }
 
-  a2hex(str) {
+  _a2hex(str) {
-    var arr = [];
+    const arr = [];
-    var output = '';
+    let output = '';
-    for (var i = 0, l = str.length; i < l; i++) {
+    for (let i = 0, l = str.length; i < l; i++) {
-      var hex = Number(str.charCodeAt(i)).toString(16);
+      const hex = Number(str.charCodeAt(i)).toString(16);
       if (hex === '0') {
         output = '00';
       } else {
@@ -181,15 +191,20 @@ class ZwaveUsercodes extends PolymerElement {
     return arr.join('');
   }
 
-  hex2a(hexx) {
+  _hex2a(hexx) {
-    var hex = hexx.toString();
+    const hex = hexx.toString();
-    var hexMod = hex.replace(/\\x/g, '');
+    const hexMod = hex.replace(/\\x/g, '');
-    var str = '';
+    let str = '';
-    for (var i = 0; i < hexMod.length; i += 2) {
+    for (let i = 0; i < hexMod.length; i += 2) {
       str += String.fromCharCode(parseInt(hexMod.substr(i, 2), 16));
     }
     return str;
   }
+
+  _selectedNodeChanged() {
+    if (this.selectedNode === -1) return;
+    this.setProperties({ _selecteduserCode: -1 });
+  }
 }
 
 customElements.define('zwave-usercodes', ZwaveUsercodes);

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

@@ -38,9 +38,9 @@ class ZwaveValues extends PolymerElement {
       <paper-card heading="Node Values">
         <div class="device-picker">
         <paper-dropdown-menu label="Value" dynamic-align="" class="flex">
-          <paper-listbox slot="dropdown-content" selected="{{selectedValue}}">
+          <paper-listbox slot="dropdown-content" selected="{{_selectedValue}}">
              <template is="dom-repeat" items="[[values]]" as="item">
-              <paper-item>[[computeSelectCaption(item)]]</paper-item>
+              <paper-item>[[_computeSelectCaption(item)]]</paper-item>
             </template>
           </paper-listbox>
         </paper-dropdown-menu>
@@ -52,26 +52,21 @@ class ZwaveValues extends PolymerElement {
 
   static get properties() {
     return {
-      hass: {
+      hass: Object,
-        type: Object,
-      },
 
-      nodes: {
+      nodes: Array,
-        type: Array,
-      },
 
-      values: {
+      values: Array,
-        type: Array,
-      },
 
       selectedNode: {
         type: Number,
+        observer: 'selectedNodeChanged',
       },
 
-      selectedValue: {
+      _selectedValue: {
         type: Number,
         value: -1,
-        observer: 'selectedValueChanged'
+        observer: '_selectedValueChanged'
       },
     };
   }
@@ -82,40 +77,36 @@ class ZwaveValues extends PolymerElement {
   }
 
   serviceCalled(ev) {
-    var foo = this;
     if (ev.detail.success) {
-      setTimeout(function () {
+      setTimeout(() => {
-        foo.refreshValues(foo.selectedNode);
+        this._refreshValues(this.selectedNode);
       }, 5000);
     }
   }
 
-  computeSelectCaption(item) {
+  _computeSelectCaption(item) {
-    return item.value.label + ' (Instance: ' + item.value.instance + ', Index: ' + item.value.index + ')';
+    return `${item.value.label} (Instance: ${item.value.instance}, Index: ${item.value.index})`;
   }
 
-  refreshValues(selectedNode) {
+  async _refreshValues(selectedNode) {
-    var valueData = [];
+    const valueData = [];
-    this.hass.callApi('GET', 'zwave/values/' + this.nodes[selectedNode].attributes.node_id).then(function (values) {
+    const values = await this.hass.callApi('GET', `zwave/values/${this.nodes[selectedNode].attributes.node_id}`);
-      Object.keys(values).forEach(function (key) {
+    Object.keys(values).forEach((key) => {
       valueData.push({
-          key: key,
+        key,
         value: values[key],
       });
     });
-      this.values = valueData;
+    this.setProperties({ values: valueData });
-      this.selectedValueChanged(this.selectedValue);
+    this._selectedValueChanged(this._selectedValue);
-    }.bind(this));
   }
 
-  selectedValueChanged(selectedValue) {
+  _selectedValueChanged() {
-    if (!this.selectedNode === -1 || this.selectedValue === -1) return;
+  }
-    var el = this;
+
-    this.hass.callApi('GET', 'config/zwave/device_config/' + this.values[selectedValue].value.entity_id)
+  selectedNodeChanged(selectedNode) {
-      .then(function (data) {
+    if (selectedNode === -1) return;
-        el.entityIgnored = data.ignored || false;
+    this.setProperties({ _selectedValue: -1 });
-        el.entityPollingIntensity = el.values[selectedValue].value.poll_intensity;
-      });
   }
 }