From 4530a182b9e718863ef3974916af7d8f07756cc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Per=20Sandstr=C3=B6m?= <per.j.sandstrom@gmail.com>
Date: Tue, 15 Mar 2016 19:40:08 +0100
Subject: [PATCH] add input slider

---
 src/state-summary/state-card-content.html     |  1 +
 src/state-summary/state-card-content.js       |  1 +
 .../state-card-input_slider.html              | 20 +++++++++
 src/state-summary/state-card-input_slider.js  | 44 +++++++++++++++++++
 src/util/domain-icon.js                       |  3 ++
 src/util/state-card-type.js                   |  1 +
 6 files changed, 70 insertions(+)
 create mode 100644 src/state-summary/state-card-input_slider.html
 create mode 100644 src/state-summary/state-card-input_slider.js

diff --git a/src/state-summary/state-card-content.html b/src/state-summary/state-card-content.html
index 71a7c5c47d..a80034ba4d 100644
--- a/src/state-summary/state-card-content.html
+++ b/src/state-summary/state-card-content.html
@@ -3,6 +3,7 @@
 <link rel="import" href="state-card-configurator.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-media_player.html">
 <link rel="import" href="state-card-rollershutter.html">
 <link rel="import" href="state-card-scene.html">
diff --git a/src/state-summary/state-card-content.js b/src/state-summary/state-card-content.js
index 44e0a17130..29a85ca7c5 100644
--- a/src/state-summary/state-card-content.js
+++ b/src/state-summary/state-card-content.js
@@ -6,6 +6,7 @@ import dynamicContentUpdater from '../util/dynamic-content-updater';
 require('./state-card-configurator');
 require('./state-card-display');
 require('./state-card-input_select');
+require('./state-card-input_slider');
 require('./state-card-media_player');
 require('./state-card-scene');
 require('./state-card-script');
diff --git a/src/state-summary/state-card-input_slider.html b/src/state-summary/state-card-input_slider.html
new file mode 100644
index 0000000000..5f2a42ecc6
--- /dev/null
+++ b/src/state-summary/state-card-input_slider.html
@@ -0,0 +1,20 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
+
+<link rel="import" href="../components/state-info.html">
+
+<dom-module id="state-card-input_slider">
+  <style>
+  paper-slider {
+    margin-left: 16px;
+  }
+  </style>
+
+  <template>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]"></state-info>
+      <paper-slider min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' on-change='selectedValueChanged'>
+      </paper-slider>
+    </div>
+  </template>
+</dom-module>
diff --git a/src/state-summary/state-card-input_slider.js b/src/state-summary/state-card-input_slider.js
new file mode 100644
index 0000000000..902550d638
--- /dev/null
+++ b/src/state-summary/state-card-input_slider.js
@@ -0,0 +1,44 @@
+import hass from '../util/home-assistant-js-instance';
+import Polymer from '../polymer';
+
+require('../components/state-info');
+
+const { serviceActions } = hass;
+
+export default new Polymer({
+  is: 'state-card-input_slider',
+
+  properties: {
+    stateObj: {
+      type: Object,
+      observer: 'stateObjectChanged',
+    },
+    min: {
+      type: Number,
+    },
+    max: {
+      type: Number,
+    },
+    step: {
+      type: Number,
+    },
+    value: {
+      type: Number,
+    },
+  },
+  stateObjectChanged(newVal) {
+    this.value = Number(newVal.state);
+    this.min = Number(newVal.attributes.min);
+    this.max = Number(newVal.attributes.max);
+    this.step = Number(newVal.attributes.step);
+  },
+  selectedValueChanged() {
+    if (this.value === Number(this.stateObj.state)) {
+      return;
+    }
+    serviceActions.callService('input_slider', 'select_value', {
+      value: this.value,
+      entity_id: this.stateObj.entityId,
+    });
+  },
+});
diff --git a/src/util/domain-icon.js b/src/util/domain-icon.js
index 52f2786aa4..d908e49134 100644
--- a/src/util/domain-icon.js
+++ b/src/util/domain-icon.js
@@ -38,6 +38,9 @@ export default function domainIcon(domain, state) {
     case 'input_select':
       return 'mdi:format-list-bulleted';
 
+    case 'input_slider':
+      return 'mdi:ray-vertex';
+
     case 'light':
       return 'mdi:lightbulb';
 
diff --git a/src/util/state-card-type.js b/src/util/state-card-type.js
index 8601266ae8..9fb1678ce3 100644
--- a/src/util/state-card-type.js
+++ b/src/util/state-card-type.js
@@ -3,6 +3,7 @@ import canToggle from './can-toggle';
 const DOMAINS_WITH_CARD = [
   'configurator',
   'input_select',
+  'input_slider',
   'media_player',
   'rollershutter',
   'scene',