From 7373733c418f3bd6010e24008eb345c0156a9728 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 31 Jan 2016 13:36:40 -0800
Subject: [PATCH] Add input_select to the frontend

---
 src/state-summary/state-card-content.html     |  1 +
 src/state-summary/state-card-content.js       |  1 +
 .../state-card-input_select.html              | 25 ++++++++++++
 src/state-summary/state-card-input_select.js  | 40 +++++++++++++++++++
 src/util/state-card-type.js                   |  1 +
 5 files changed, 68 insertions(+)
 create mode 100644 src/state-summary/state-card-input_select.html
 create mode 100644 src/state-summary/state-card-input_select.js

diff --git a/src/state-summary/state-card-content.html b/src/state-summary/state-card-content.html
index 6b3cab2e43..7bad25154e 100644
--- a/src/state-summary/state-card-content.html
+++ b/src/state-summary/state-card-content.html
@@ -2,6 +2,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-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 f5a329f457..71416a2267 100644
--- a/src/state-summary/state-card-content.js
+++ b/src/state-summary/state-card-content.js
@@ -4,6 +4,7 @@ import stateCardType from '../util/state-card-type';
 
 require('./state-card-configurator');
 require('./state-card-display');
+require('./state-card-input_select');
 require('./state-card-media_player');
 require('./state-card-scene');
 require('./state-card-rollershutter');
diff --git a/src/state-summary/state-card-input_select.html b/src/state-summary/state-card-input_select.html
new file mode 100644
index 0000000000..5a0a002de0
--- /dev/null
+++ b/src/state-summary/state-card-input_select.html
@@ -0,0 +1,25 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+
+<link rel="import" href="../components/state-info.html">
+
+<dom-module id="state-card-input_select">
+  <style>
+  paper-dropdown-menu {
+    margin-left: 16px;
+  }
+  </style>
+
+  <template>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]"></state-info>
+      <paper-dropdown-menu no-label-float selected-item-label='{{selectedOption}}' on-tap='stopPropagation'>
+        <paper-menu class="dropdown-content" selected="[[computeSelected(stateObj)]]">
+          <template is='dom-repeat' items='[[stateObj.attributes.options]]'>
+            <paper-item>[[item]]</paper-item>
+          </template>
+        </paper-menu>
+      </paper-dropdown-menu>
+    </div>
+  </template>
+</dom-module>
diff --git a/src/state-summary/state-card-input_select.js b/src/state-summary/state-card-input_select.js
new file mode 100644
index 0000000000..3f1c446e68
--- /dev/null
+++ b/src/state-summary/state-card-input_select.js
@@ -0,0 +1,40 @@
+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_select',
+
+  properties: {
+    stateObj: {
+      type: Object,
+    },
+
+    selectedOption: {
+      type: String,
+      observer: 'selectedOptionChanged',
+    },
+  },
+
+  computeSelected(stateObj) {
+    return stateObj.attributes.options.indexOf(stateObj.state);
+  },
+
+  selectedOptionChanged(option) {
+    // Selected Option will transition to '' before transitioning to new value
+    if (option === '' || option === this.stateObj.state) {
+      return;
+    }
+    serviceActions.callService('input_select', 'select_option', {
+      option,
+      entity_id: this.stateObj.entityId,
+    });
+  },
+
+  stopPropagation(ev) {
+    ev.stopPropagation();
+  },
+});
diff --git a/src/util/state-card-type.js b/src/util/state-card-type.js
index a97fbf1253..9a1be50d4e 100644
--- a/src/util/state-card-type.js
+++ b/src/util/state-card-type.js
@@ -2,6 +2,7 @@ import canToggle from './can-toggle';
 
 const DOMAINS_WITH_CARD = [
   'configurator',
+  'input_select',
   'media_player',
   'rollershutter',
   'scene',