ZWave Panel Values Card (#295)

panels/zwave/ha-panel-zwave.html

@@ -14,9 +14,10 @@
 <link rel="import" href="./zwave-log.html">
 <link rel="import" href="./zwave-network.html">
 <link rel="import" href="./zwave-node-information.html">
+<link rel="import" href="./zwave-values.html">
+<link rel="import" href="./zwave-groups.html">
 <link rel="import" href="./zwave-node-config.html">
 <link rel="import" href="./zwave-usercodes.html">
-<link rel="import" href="./zwave-groups.html">
 
 <dom-module id="ha-panel-zwave">
   <template>
@@ -168,6 +169,15 @@
             selected-node='[[selectedNode]]'
           ></zwave-node-information>
         </template>
+<!--Value card-->
+        <template is='dom-if' if='[[!computeIsNodeSelected(selectedNode)]]'>
+          <zwave-values
+            hass='[[hass]]'
+            nodes='[[nodes]]'
+            selected-node='[[selectedNode]]'
+            values='[[values]]'
+          ></zwave-values>
+        </template>
 <!--Group card-->
         <template is='dom-if' if='[[!computeIsNodeSelected(selectedNode)]]'>
           <zwave-groups
@@ -265,6 +275,10 @@ Polymer({
       computed: 'computeSelectedEntityAttrs(selectedEntity)'
     },
 
+    values: {
+      type: Array,
+    },
+
     groups: {
       type: Array,
     },
@@ -344,6 +358,13 @@ Polymer({
       });
       this.config = configData;
     }.bind(this));
+    var valueData = [];
+    this.hass.callApi('GET', 'zwave/values/' + this.nodes[selectedNode].attributes.node_id).then(function (values) {
+      Object.entries(values).forEach(([key, value]) => {
+        valueData.push({ key, value });
+      });
+      this.values = valueData;
+    }.bind(this));
     var groupData = [];
     this.hass.callApi('GET', 'zwave/groups/' + this.nodes[selectedNode].attributes.node_id).then(function (groups) {
       Object.entries(groups).forEach(([key, value]) => {

panels/zwave/zwave-values.html

@@ -0,0 +1,140 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href="../../bower_components/paper-listbox/paper-listbox.html">
+
+<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
+
+<dom-module id='zwave-values'>
+  <template>
+    <style include="iron-flex ha-style">
+      .content {
+        margin-top: 24px;
+      }
+
+      paper-card {
+        display: block;
+        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'>
+      <paper-card heading='Node Values'>
+        <div class='device-picker'>
+        <paper-dropdown-menu label="Value" class='flex'>
+          <paper-listbox
+            class="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>
+        <template is='dom-if' if='[[!computeIsValueSelected(selectedValue)]]'>
+          <paper-input
+            float-label="Value Name"
+            type=text
+            value={{newValueNameInput}}
+            placeholder=[[computeGetValueName(selectedValue)]]>
+          </paper-input>
+          <ha-call-service-button
+            hass='[[hass]]'
+            domain='zwave'
+            service='rename_value'
+            service-data=[[computeValueNameServiceData(newValueNameInput)]]
+          >Rename Value</ha-call-service-button>
+        </template>
+      </paper-card>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'zwave-values',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    nodes: {
+      type: Array,
+    },
+
+    values: {
+      type: Array,
+    },
+
+    selectedNode: {
+      type: Number,
+    },
+
+    selectedValue: {
+      type: Number,
+      value: -1,
+    },
+  },
+
+  listeners: {
+    'hass-service-called': 'serviceCalled',
+  },
+
+  serviceCalled: function (ev) {
+    if (ev.detail.success) {
+      var foo = this;
+      setTimeout(function () {
+        foo.refreshValues(foo.selectedNode);
+      }, 5000);
+    }
+  },
+
+  computeSelectCaption: function (item) {
+    return item.value.label;
+  },
+
+  computeGetValueName: function (selectedValue) {
+    return this.values[selectedValue].value.label;
+  },
+
+  computeIsValueSelected: function (selectedValue) {
+    return (!this.nodes || this.selectedNode === -1 || selectedValue === -1);
+  },
+
+  refreshValues: function (selectedNode) {
+    var valueData = [];
+    this.hass.callApi('GET', 'zwave/values/' + this.nodes[selectedNode].attributes.node_id).then(function (values) {
+      Object.entries(values).forEach(([key, value]) => {
+        valueData.push({ key, value });
+      });
+      this.values = valueData;
+      this.selectedValueChanged(this.selectedValue);
+    }.bind(this));
+  },
+
+  computeValueNameServiceData: function (newValueNameInput) {
+    if (!this.selectedNode === -1 || this.selectedValue === -1) return -1;
+    return {
+      node_id: this.nodes[this.selectedNode].attributes.node_id,
+      value_id: this.values[this.selectedValue].key,
+      name: newValueNameInput,
+    };
+  },
+});
+</script>
+