Add an entity picker (#666)

* Add an entity picker

* Lint

panels/dev-state/ha-panel-dev-state.html

@@ -10,6 +10,7 @@
 <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="../../src/components/entity/ha-entity-dropdown.html">
 <link rel="import" href="../../src/resources/ha-style.html">
 
 <dom-module id="ha-panel-dev-state">
@@ -25,6 +26,11 @@
         padding: 16px;
       }
 
+      ha-entity-dropdown {
+        display: block;
+        max-width: 300px;
+      }
+
       .entities th {
         text-align: left;
       }
@@ -66,7 +72,11 @@
             This will not communicate with the actual device.
           </p>
 
-          <paper-input label="Entity ID" autofocus required value='{{_entityId}}'></paper-input>
+          <ha-entity-dropdown
+            autofocus
+            hass="[[hass]]"
+            value="{{_entityId}}"
+          ></ha-entity-dropdown>
           <paper-input label="State" required value='{{_state}}'></paper-input>
           <paper-textarea label="State attributes (JSON, optional)" value='{{_stateAttributes}}'></paper-textarea>
           <paper-button on-tap='handleSetState' raised>Set State</paper-button>

src/components/entity/ha-entity-dropdown.html

@@ -0,0 +1,67 @@
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/vaadin-combo-box/vaadin-combo-box.html">
+<link rel="import" href="../../../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-icon-item.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
+
+<link rel="import" href="./state-badge.html">
+
+<dom-module id="ha-entity-dropdown">
+  <template>
+    <vaadin-combo-box
+      autofocus="[[autofocus]]"
+      label="[[label]]"
+      items='[[computeStates(hass)]]'
+      item-value-path='entity_id'
+      item-label-path='entity_id'
+      value='{{value}}'
+    >
+      <template>
+        <style>
+          paper-icon-item {
+            margin: -13px -16px;
+          }
+        </style>
+        <paper-icon-item>
+          <state-badge state-obj="[[item]]" slot='item-icon'></state-badge>
+          <paper-item-body two-line>
+            <div>[[computeStateName(item)]]</div>
+            <div secondary>[[item.entity_id]]</div>
+          </paper-item-body>
+        </paper-icon-item>
+      </template>
+    </vaadin-combo-box>
+
+  </template>
+</dom-module>
+
+<script>
+class HaEntityDropdown extends Polymer.Element {
+  static get is() { return 'ha-entity-dropdown'; }
+
+  static get properties() {
+    return {
+      hass: Object,
+      autofocus: Boolean,
+      label: {
+        type: String,
+        value: 'Entity',
+      },
+      value: {
+        type: String,
+        notify: true,
+      }
+    };
+  }
+
+  computeStates(hass) {
+    return Object.keys(hass.states).sort().map(key => hass.states[key]);
+  }
+
+  computeStateName(state) {
+    return window.hassUtil.computeStateName(state);
+  }
+}
+
+customElements.define(HaEntityDropdown.is, HaEntityDropdown);
+</script>