Add an entity picker (#666)

* Add an entity picker

* Lint

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>