From 62aa6353908851a8fd648a981e9bf06f2a14a6dc Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 12 Feb 2017 22:29:35 -0800
Subject: [PATCH] Add a Z-Wave config panel (#209)

---
 panels/config/ha-config-section-core.html     |   9 +-
 panels/config/ha-config-section-hassbian.html |  16 +-
 panels/config/ha-config-section-zwave.html    | 252 ++++++++++++++++++
 panels/config/ha-config-section.html          |  22 +-
 panels/config/ha-panel-config.html            |  81 ++++--
 src/resources/ha-style.html                   |   4 +-
 6 files changed, 327 insertions(+), 57 deletions(-)
 create mode 100644 panels/config/ha-config-section-zwave.html

diff --git a/panels/config/ha-config-section-core.html b/panels/config/ha-config-section-core.html
index 1780f29cb8..e96e3d870c 100644
--- a/panels/config/ha-config-section-core.html
+++ b/panels/config/ha-config-section-core.html
@@ -52,8 +52,7 @@
       }
     </style>
     <ha-config-section
-      narrow='[[narrow]]'
-      show-menu='[[showMenu]]'
+      is-wide='[[isWide]]'
     >
       <span slot='header'>Server Management</span>
       <span slot='introduction'>
@@ -140,11 +139,7 @@ Polymer({
       type: Object,
     },
 
-    narrow: {
-      type: Boolean,
-    },
-
-    showMenu: {
+    isWide: {
       type: Boolean,
       value: false,
     },
diff --git a/panels/config/ha-config-section-hassbian.html b/panels/config/ha-config-section-hassbian.html
index 3a6787da74..3b560b79a6 100644
--- a/panels/config/ha-config-section-hassbian.html
+++ b/panels/config/ha-config-section-hassbian.html
@@ -32,10 +32,7 @@
         font-weight: 500;
       }
     </style>
-    <ha-config-section
-      narrow='[[narrow]]'
-      show-menu='[[showMenu]]'
-    >
+    <ha-config-section is-wide='[[isWide]]'>
       <span slot='header'>Bring Hassbian to the next level</span>
       <span slot='introduction'>
         Discover exciting add-ons to enhance your Home Assistant installation. Add an MQTT server or control a connected TV via HDMI-CEC.
@@ -76,15 +73,10 @@ Polymer({
       type: Object,
     },
 
-    narrow: {
+    isWide: {
       type: Boolean,
     },
 
-    showMenu: {
-      type: Boolean,
-      value: false,
-    },
-
     suiteStatus: {
       type: Object,
       value: null,
@@ -94,7 +86,7 @@ Polymer({
   updateStatus: function () {
     // TODO tapping install while something is installing triggers a second
     //      update loop to start.
-    this.hass.callApi('GET', 'hassbian/suites').then(function (suites) {
+    this.hass.callApi('GET', 'config/hassbian/suites').then(function (suites) {
       this.suiteStatus = suites;
 
       var isInstalling = false;
@@ -169,7 +161,7 @@ Polymer({
 
   suiteActionTapped: function () {
     // TODO install tapped suite
-    this.hass.callApi('POST', 'hassbian/suites/openzwave/install').then(this.updateStatus);
+    this.hass.callApi('POST', 'config/hassbian/suites/openzwave/install').then(this.updateStatus);
   },
 });
 </script>
diff --git a/panels/config/ha-config-section-zwave.html b/panels/config/ha-config-section-zwave.html
new file mode 100644
index 0000000000..6e61ba8f34
--- /dev/null
+++ b/panels/config/ha-config-section-zwave.html
@@ -0,0 +1,252 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
+<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
+<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
+
+<link rel="import" href="../../src/resources/ha-style.html">
+
+<link rel="import" href="./ha-config-section.html">
+
+<dom-module id="ha-config-section-zwave">
+  <template>
+    <style include="iron-flex ha-style">
+      .device-picker {
+        @apply(--layout-horizontal);
+        padding-bottom: 32px;
+      }
+
+      .form-placeholder {
+        @apply(--layout-vertical);
+        @apply(--layout-center-center);
+        height: 96px;
+      }
+
+      .form-group {
+        @apply(--layout-horizontal);
+        @apply(--layout-center);
+        padding: 4px 16px;
+      }
+
+      .form-group label {
+        @apply(--layout-flex-2);
+      }
+
+      .form-group .form-control {
+        @apply(--layout-flex-1);
+      }
+    </style>
+    <ha-config-section is-wide='[[isWide]]'>
+      <span slot='header'>Z-Wave</span>
+      <span slot='introduction'>
+        Z-Wave devices contain a lot of options. These controls will allow you to get into the nitty gritty details.
+      </span>
+
+      <paper-card>
+        <div class='card-content'>
+          <div class='device-picker'>
+            <paper-dropdown-menu
+              label='Device'
+              class='flex'
+              disabled='[[!entities.length]]'
+            >
+              <paper-listbox
+                class="dropdown-content"
+                selected='{{selectedEntity}}'
+              >
+                <template is='dom-repeat' items='[[entities]]' as='state'>
+                  <paper-item>[[computeSelectCaption(state)]]</paper-item>
+                </template>
+              </paper-listbox>
+            </paper-dropdown-menu>
+          </div>
+
+          <div class='form-container'>
+            <template is='dom-if' if='[[computeShowPlaceholder(formState)]]'>
+              <div class='form-placeholder'>
+                <template is='dom-if' if='[[computeShowNoDevices(formState)]]'>
+                  No Z-Wave devices found! :-(
+                </template>
+
+                <template is='dom-if' if='[[computeShowSpinner(formState)]]'>
+                  <paper-spinner active alt='[[formState]]'></paper-spinner>
+                  [[formState]]
+                </template>
+              </div>
+            </template>
+
+            <template is='dom-if' if='[[computeShowForm(formState)]]'>
+              <div class='form-group'>
+                <paper-checkbox
+                  checked='{{entityIgnored}}'
+                  class='form-control'
+                >
+                  Exclude from Home Assistant
+                </paper-checkbox>
+              </div>
+
+              <div class='form-group'>
+                <paper-dropdown-menu
+                  class='form-control flex'
+                  label='Polling intensity'
+                  disabled='[[entityIgnored]]'
+                >
+                  <paper-listbox
+                    class="dropdown-content"
+                    selected='{{entityPollingIntensity}}'
+                  >
+                    <paper-item>Do not poll (0)</paper-item>
+                    <paper-item>Poll every time (1)</paper-item>
+                    <paper-item>Poll every other time (2)</paper-item>
+                  </paper-listbox>
+                </paper-dropdown-menu>
+              </div>
+            </template>
+          </div>
+        </div>
+        <div class='card-actions'>
+          <paper-button
+            on-tap='saveEntity'
+            disabled='[[computeShowPlaceholder(formState)]]'
+          >SAVE</paper-button>
+        </div>
+      </paper-card>
+
+    </ha-config-section>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-config-section-zwave',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    isWide: {
+      type: Boolean,
+      value: false,
+    },
+
+    entities: {
+      type: Array,
+      computed: 'computeEntities(hass)',
+      observer: 'entitiesChanged',
+    },
+
+    selectedEntity: {
+      type: Number,
+      value: -1,
+      observer: 'entityChanged',
+    },
+
+    entityIgnored: {
+      type: Boolean,
+    },
+
+    entityPollingIntensity: {
+      type: Number,
+    },
+
+    formState: {
+      type: String,
+      // no-devices, loading, saving, editing
+      value: 'no-devices',
+    },
+  },
+
+  computeEntities: function (hass) {
+    return Object.keys(hass.states).map(function (key) { return hass.states[key]; })
+      .filter(function (el) {
+        return (!el.attributes.hidden &&
+                true);
+                // 'node_id' in el.attributes);
+      })
+      .sort(function (entityA, entityB) {
+        if (entityA.entity_id < entityB.entity_id) {
+          return -1;
+        }
+        if (entityA.entity_id > entityB.entity_id) {
+          return 1;
+        }
+        return 0;
+      });
+  },
+
+  computeSelectCaption: function (stateObj) {
+    return window.hassUtil.computeStateName(stateObj) +
+      ' (' + window.hassUtil.computeDomain(stateObj) + ')';
+  },
+
+  computeShowNoDevices: function (formState) {
+    return formState === 'no-devices';
+  },
+
+  computeShowSpinner: function (formState) {
+    return formState === 'loading' || formState === 'saving';
+  },
+
+  computeShowPlaceholder: function (formState) {
+    return formState !== 'editing';
+  },
+
+  computeShowForm: function (formState) {
+    return formState === 'editing';
+  },
+
+  entitiesChanged: function (entities, oldEntities) {
+    if (entities.length === 0) {
+      this.formState = 'no-devices';
+      return;
+    } else if (!oldEntities) {
+      this.selectedEntity = 0;
+      return;
+    }
+
+    var oldEntityId = oldEntities[this.selectedEntity].entity_id;
+
+    var newIndex = entities.findIndex(function (ent) {
+      return ent.entity_id === oldEntityId;
+    });
+
+    if (newIndex === -1) {
+      this.selectedEntity = 0;
+    } else if (newIndex !== this.selectedEntity) {
+      // Entity moved index
+      this.selectedEntity = newIndex;
+    }
+  },
+
+  entityChanged: function (index) {
+    if (!this.entities) return;
+    var entity = this.entities[index];
+    this.formState = 'loading';
+    var el = this;
+    this.hass.callApi('GET', 'config/zwave/device_config/' + entity.entity_id)
+      .then(function (data) {
+        el.entityIgnored = data.ignored || false;
+        el.entityPollingIntensity = data.polling_intensity || 0;
+        el.formState = 'editing';
+      });
+  },
+
+  saveEntity: function () {
+    var entity = this.entities[this.selectedEntity];
+    var data = {
+      ignored: this.entityIgnored,
+      polling_intensity: this.entityPollingIntensity,
+    };
+    this.formState = 'saving';
+    var el = this;
+    this.hass.callApi('POST', 'config/zwave/device_config/' + entity.entity_id, data)
+      .then(function () {
+        el.formState = 'editing';
+      });
+  },
+});
+</script>
diff --git a/panels/config/ha-config-section.html b/panels/config/ha-config-section.html
index 79b8123916..38223e2a02 100644
--- a/panels/config/ha-config-section.html
+++ b/panels/config/ha-config-section.html
@@ -1,5 +1,4 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
 <link rel="import" href="../../src/resources/ha-style.html">
 
 <dom-module id="ha-config-section">
@@ -53,11 +52,6 @@
         max-width: 500px;
       }
     </style>
-    <iron-media-query query="(min-width: 1040px)" query-matches="{{wide}}">
-    </iron-media-query>
-    <iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
-    </iron-media-query>
-
     <div class$='[[computeContentClasses(isWide)]]'>
       <div class='header'><slot name="header"></slot></div>
       <div class$='[[computeClasses(isWide)]]'>
@@ -90,22 +84,10 @@ Polymer({
       value: false,
     },
 
-    wide: {
-      type: Boolean,
-    },
-
-    wideSidebar: {
-      type: Boolean,
-    },
-
     isWide: {
       type: Boolean,
-      computed: 'computeIsWide(showMenu, wideSidebar, wide)'
-    }
-  },
-
-  computeIsWide: function (showMenu, wideSidebar, wide) {
-    return showMenu ? wideSidebar : wide;
+      value: false,
+    },
   },
 
   computeContentClasses: function (isWide) {
diff --git a/panels/config/ha-panel-config.html b/panels/config/ha-panel-config.html
index 7850822289..cb5d15e1a2 100644
--- a/panels/config/ha-panel-config.html
+++ b/panels/config/ha-panel-config.html
@@ -3,9 +3,10 @@
 <link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 <link rel="import" href="../../src/components/ha-menu-button.html">
-
+<link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
 <link rel="import" href="./ha-config-section-core.html">
 <link rel="import" href="./ha-config-section-hassbian.html">
+<link rel="import" href="./ha-config-section-zwave.html">
 
 <dom-module id="ha-panel-config">
   <template>
@@ -13,10 +14,25 @@
       app-header-layout {
         background-color: #fafafa;
       }
-      .spacer {
-        height: 32px;
+
+      .content {
+        padding-bottom: 32px;
+      }
+
+      .border {
+        margin: 32px auto 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+        max-width: 1040px;
+      }
+
+      .narrow .border {
+        max-width: 640px;
       }
     </style>
+    <iron-media-query query="(min-width: 1040px)" query-matches="{{wide}}">
+    </iron-media-query>
+    <iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
+    </iron-media-query>
     <app-header-layout has-scrolling-region>
       <app-header fixed>
         <app-toolbar>
@@ -25,20 +41,28 @@
         </app-toolbar>
       </app-header>
 
-      <ha-config-section-core
-        narrow='[[narrow]]'
-        show-menu='[[showMenu]]'
-        hass='[[hass]]'
-      ></ha-config-section-core>
-
-      <template is='dom-if' if='[[computeIsHassbianLoaded(hass)]]'>
-        <ha-config-section-hassbian
-          narrow='[[narrow]]'
-          show-menu='[[showMenu]]'
+      <div class$='[[computeClasses(isWide)]]'>
+        <ha-config-section-core
+          is-wide='[[isWide]]'
           hass='[[hass]]'
-        ></ha-config-section-hassbian>
-      </template>
-      <div class='spacer'></div>
+        ></ha-config-section-core>
+
+        <template is='dom-if' if='[[computeIsHassbianLoaded(hass)]]'>
+          <div class='border'></div>
+          <ha-config-section-hassbian
+            is-wide='[[isWide]]'
+            hass='[[hass]]'
+          ></ha-config-section-hassbian>
+        </template>
+
+        <template is='dom-if' if='[[computeIsZwaveLoaded(hass)]]'>
+          <div class='border'></div>
+          <ha-config-section-zwave
+            is-wide='[[isWide]]'
+            hass='[[hass]]'
+          ></ha-config-section-zwave>
+        </template>
+      </div>
     </app-header-layout>
   </template>
 </dom-module>
@@ -60,10 +84,35 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    wide: {
+      type: Boolean,
+    },
+
+    wideSidebar: {
+      type: Boolean,
+    },
+
+    isWide: {
+      type: Boolean,
+      computed: 'computeIsWide(showMenu, wideSidebar, wide)'
+    },
+  },
+
+  computeIsWide: function (showMenu, wideSidebar, wide) {
+    return showMenu ? wideSidebar : wide;
+  },
+
+  computeClasses: function (isWide) {
+    return isWide ? 'content' : 'content narrow';
   },
 
   computeIsHassbianLoaded(hass) {
     return window.hassUtil.isComponentLoaded(hass, 'config.hassbian');
   },
+
+  computeIsZwaveLoaded(hass) {
+    return window.hassUtil.isComponentLoaded(hass, 'config.zwave');
+  },
 });
 </script>
diff --git a/src/resources/ha-style.html b/src/resources/ha-style.html
index 657405f44a..74c7a580ee 100644
--- a/src/resources/ha-style.html
+++ b/src/resources/ha-style.html
@@ -77,8 +77,8 @@
         @apply(--paper-font-title);
       }
 
-      .card-actions > paper-button,
-      .card-actions > ha-call-service-button {
+      .card-actions > paper-button:not([disabled]),
+      .card-actions > ha-call-service-button:not([disabled]) {
         color: var(--default-primary-color);
         font-weight: 500;
       }