From 890dbc6ad721f7685af19217331bd039e0da5923 Mon Sep 17 00:00:00 2001
From: BioSehnsucht <biosehnsucht@gmail.com>
Date: Tue, 3 Oct 2017 14:34:43 -0500
Subject: [PATCH] Rename input_slider to input_number and add numeric text box
 option (#431)

* * Rename input_slider to input_number
* Update input_number to Polymer 2.0
* Update input_number to optionally display slider, input box, or both

* input_number support either input box or slider mode, but not both

* input_number : change service from select_value to set_value
---
 src/state-summary/state-card-content.html     |   2 +-
 .../state-card-input_number.html              | 121 ++++++++++++++++++
 .../state-card-input_slider.html              |  83 ------------
 src/util/hass-util.html                       |   6 +-
 4 files changed, 125 insertions(+), 87 deletions(-)
 create mode 100644 src/state-summary/state-card-input_number.html
 delete mode 100644 src/state-summary/state-card-input_slider.html
 mode change 100755 => 100644 src/util/hass-util.html

diff --git a/src/state-summary/state-card-content.html b/src/state-summary/state-card-content.html
index 5f6fce3a2b..32269e870c 100644
--- a/src/state-summary/state-card-content.html
+++ b/src/state-summary/state-card-content.html
@@ -5,7 +5,7 @@
 <link rel="import" href="state-card-cover.html">
 <link rel="import" href="state-card-display.html">
 <link rel="import" href="state-card-input_select.html">
-<link rel="import" href="state-card-input_slider.html">
+<link rel="import" href="state-card-input_number.html">
 <link rel="import" href="state-card-input_text.html">
 <link rel="import" href="state-card-media_player.html">
 <link rel="import" href="state-card-scene.html">
diff --git a/src/state-summary/state-card-input_number.html b/src/state-summary/state-card-input_number.html
new file mode 100644
index 0000000000..1e41bdb299
--- /dev/null
+++ b/src/state-summary/state-card-input_number.html
@@ -0,0 +1,121 @@
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+
+<link rel="import" href="../../bower_components/paper-input/paper-input.html">
+
+<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
+
+<link rel="import" href="../components/entity/state-info.html">
+
+<link rel="import" href="../util/hass-util.html">
+
+<dom-module id="state-card-input_number">
+  <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      paper-slider {
+        margin-left: 16px;
+      }
+    </style>
+
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
+        <div hidden='[[hiddenslider]]'>
+          <paper-slider min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' pin
+            on-change='selectedValueChanged' on-tap='stopPropagation'
+          >
+          </paper-slider>
+        </div>
+      <paper-input
+        no-label-float
+        auto-validate
+        pattern='[0-9]*'
+        value='{{value}}'
+        type='number'
+        on-change='selectedValueChanged'
+        on-tap='stopPropagation'
+        hidden='[[hiddenbox]]'
+      >
+      </paper-input>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+class StateCardInputNumber extends Polymer.Element {
+
+  static get is() { return 'state-card-input_number'; }
+
+  static get properties() {
+    return {
+      hass: Object,
+      hiddenbox: {
+        type: Boolean,
+        value: true,
+      },
+      hiddenslider: {
+        type: Boolean,
+        value: true,
+      },
+      inDialog: {
+        type: Boolean,
+        value: false,
+      },
+      stateObj: {
+        type: Object,
+        observer: 'stateObjectChanged',
+      },
+      min: {
+        type: Number,
+        value: 0,
+      },
+      max: {
+        type: Number,
+        value: 100,
+      },
+      maxlength: {
+        type: Number,
+        value: 3
+      },
+      step: {
+        type: Number,
+      },
+      value: {
+        type: Number,
+      },
+    };
+  }
+
+  stateObjectChanged(newVal) {
+    this.min = Number(newVal.attributes.min);
+    this.max = Number(newVal.attributes.max);
+    this.step = Number(newVal.attributes.step);
+    this.value = Number(newVal.state);
+    this.maxlength = this.max.legnth;
+    if (newVal.attributes.mode === 'slider') {
+      this.hiddenbox = true;
+      this.hiddenslider = false;
+    } else {
+      this.hiddenbox = false;
+      this.hiddenslider = true;
+    }
+  }
+
+  selectedValueChanged() {
+    if (this.value === Number(this.stateObj.state)) {
+      return;
+    }
+    this.hass.callService('input_number', 'set_value', {
+      value: this.value,
+      entity_id: this.stateObj.entity_id,
+    });
+  }
+
+  stopPropagation(ev) {
+    ev.stopPropagation();
+  }
+}
+
+customElements.define(StateCardInputNumber.is, StateCardInputNumber);
+</script>
diff --git a/src/state-summary/state-card-input_slider.html b/src/state-summary/state-card-input_slider.html
deleted file mode 100644
index 99a3d1ee2c..0000000000
--- a/src/state-summary/state-card-input_slider.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-
-<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
-
-<link rel="import" href="../components/entity/state-info.html">
-
-<dom-module id="state-card-input_slider">
-  <template>
-    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-    <style>
-      paper-slider {
-        margin-left: 16px;
-      }
-    </style>
-
-    <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
-      <paper-slider
-        min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' pin
-        on-change='selectedValueChanged' on-tap='stopPropagation'>
-      </paper-slider>
-    </div>
-  </template>
-</dom-module>
-
-<script>
-Polymer({
-  is: 'state-card-input_slider',
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-      observer: 'stateObjectChanged',
-    },
-    min: {
-      type: Number,
-      value: 0,
-    },
-    max: {
-      type: Number,
-      value: 100,
-    },
-    step: {
-      type: Number,
-    },
-    value: {
-      type: Number,
-    },
-  },
-
-  stateObjectChanged: function (newVal) {
-    this.min = Number(newVal.attributes.min);
-    this.max = Number(newVal.attributes.max);
-    this.step = Number(newVal.attributes.step);
-    this.value = Number(newVal.state);
-  },
-
-  selectedValueChanged: function () {
-    if (this.value === Number(this.stateObj.state)) {
-      return;
-    }
-    this.hass.callService('input_slider', 'select_value', {
-      value: this.value,
-      entity_id: this.stateObj.entity_id,
-    });
-  },
-
-  stopPropagation: function (ev) {
-    ev.stopPropagation();
-  },
-});
-</script>
diff --git a/src/util/hass-util.html b/src/util/hass-util.html
old mode 100755
new mode 100644
index 7a191001e3..504005346b
--- a/src/util/hass-util.html
+++ b/src/util/hass-util.html
@@ -15,7 +15,7 @@ window.hassUtil.DOMAINS_WITH_CARD = [
   'cover',
   'configurator',
   'input_select',
-  'input_slider',
+  'input_number',
   'input_text',
   'media_player',
   'scene',
@@ -32,7 +32,7 @@ window.hassUtil.DOMAINS_WITH_MORE_INFO = [
 window.hassUtil.DOMAINS_WITH_NO_HISTORY = ['camera', 'configurator', 'scene'];
 
 window.hassUtil.HIDE_MORE_INFO = [
-  'input_select', 'scene', 'script', 'input_slider', 'input_text'
+  'input_select', 'scene', 'script', 'input_number', 'input_text'
 ];
 
 window.hassUtil.LANGUAGE = navigator.languages ?
@@ -289,7 +289,7 @@ window.hassUtil.domainIcon = function (domain, state) {
     case 'input_select':
       return 'mdi:format-list-bulleted';
 
-    case 'input_slider':
+    case 'input_number':
       return 'mdi:ray-vertex';
 
     case 'input_text':