Entity dropdown improvement

.eslintrc-hound.json

@@ -48,6 +48,7 @@
     "import/prefer-default-export": 0,
     "import/no-unresolved": 0,
     "import/extensions": [2, "ignorePackages"],
+    "object-curly-newline": 0,
     "react/jsx-no-bind": [2, { "ignoreRefs": true }],
     "react/jsx-no-duplicate-props": 2,
     "react/self-closing-comp": 2,

bower.json

@@ -51,7 +51,7 @@
     "paper-toast": "PolymerElements/paper-toast#^2.0.0",
     "paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0",
     "polymer": "^2.1.1",
-    "vaadin-combo-box": "vaadin/vaadin-combo-box#^2.0.0",
+    "vaadin-combo-box": "vaadin/vaadin-combo-box#^3.0.2",
     "vaadin-date-picker": "vaadin/vaadin-date-picker#^2.0.0",
     "web-animations-js": "^2.2.5",
     "webcomponentsjs": "^1.0.10"

js/automation-editor/automation.js

@@ -42,7 +42,7 @@ export default class Automation extends Component {
     });
   }
 
-  render({ automation, isWide }) {
+  render({ automation, isWide, hass }) {
     const {
       alias, trigger, condition, action
     } = automation;
@@ -77,7 +77,11 @@ export default class Automation extends Component {
               Learn more about triggers.
             </a></p>
           </span>
-          <Trigger trigger={trigger} onChange={this.triggerChanged} />
+          <Trigger
+            trigger={trigger}
+            onChange={this.triggerChanged}
+            hass={hass}
+          />
         </ha-config-section>
 
         <ha-config-section is-wide={isWide}>
@@ -93,7 +97,11 @@ export default class Automation extends Component {
               Learn more about conditions.
             </a></p>
           </span>
-          <Condition condition={condition || []} onChange={this.conditionChanged} />
+          <Condition
+            condition={condition || []}
+            onChange={this.conditionChanged}
+            hass={hass}
+          />
         </ha-config-section>
 
         <ha-config-section is-wide={isWide}>
@@ -104,7 +112,11 @@ export default class Automation extends Component {
               Learn more about actions.
             </a></p>
           </span>
-          <Script script={action} onChange={this.actionChanged} />
+          <Script
+            script={action}
+            onChange={this.actionChanged}
+            hass={hass}
+          />
         </ha-config-section>
       </div>
     );

js/automation-editor/trigger/index.js

@@ -32,14 +32,15 @@ export default class Trigger extends Component {
     this.props.onChange(trigger);
   }
 
-  render({ trigger }) {
+  render({ trigger, hass }) {
     return (
       <div class="triggers">
         {trigger.map((trg, idx) => (
           <TriggerRow
             index={idx}
             trigger={trg}
             onChange={this.triggerChanged}
+            hass={hass}
           />))}
         <paper-card>
           <div class='card-actions add-card'>

js/automation-editor/trigger/numeric_state.js

@@ -7,20 +7,29 @@ export default class NumericStateTrigger extends Component {
     super();
 
     this.onChange = onChangeEvent.bind(this, 'trigger');
+    this.entityPicked = this.entityPicked.bind(this);
+  }
+
+  entityPicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.trigger,
+      entity_id: ev.target.value,
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ trigger }) {
+  render({ trigger, hass }) {
     const {
       value_template, entity_id, below, above
     } = trigger;
+
     return (
       <div>
-        <paper-input
-          label="Entity Id"
-          name="entity_id"
+        <ha-entity-picker
           value={entity_id}
-          onChange={this.onChange}
+          onChange={this.entityPicked}
+          hass={hass}
+          allowCustomEntity
         />
         <paper-input
           label="Above"

js/automation-editor/trigger/state.js

@@ -7,20 +7,28 @@ export default class StateTrigger extends Component {
     super();
 
     this.onChange = onChangeEvent.bind(this, 'trigger');
+    this.entityPicked = this.entityPicked.bind(this);
+  }
+
+  entityPicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.trigger,
+      entity_id: ev.target.value,
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ trigger }) {
+  render({ trigger, hass }) {
     const { entity_id, to } = trigger;
     const trgFrom = trigger.from;
     const trgFor = trigger.for;
     return (
       <div>
-        <paper-input
-          label="Entity Id"
-          name="entity_id"
+        <ha-entity-picker
           value={entity_id}
-          onChange={this.onChange}
+          onChange={this.entityPicked}
+          hass={hass}
+          allowCustomEntity
         />
         <paper-input
           label="From"

js/automation-editor/trigger/trigger_edit.js

@@ -42,7 +42,7 @@ export default class TriggerEdit extends Component {
     }
   }
 
-  render({ index, trigger, onChange }) {
+  render({ index, trigger, onChange, hass }) {
     const Comp = TYPES[trigger.platform];
     const selected = OPTIONS.indexOf(trigger.platform);
 
@@ -69,6 +69,7 @@ export default class TriggerEdit extends Component {
           index={index}
           trigger={trigger}
           onChange={onChange}
+          hass={hass}
         />
       </div>
     );

js/automation-editor/trigger/zone.js

@@ -1,13 +1,35 @@
 import { h, Component } from 'preact';
 
 import { onChangeEvent } from '../../common/util/event.js';
+import { hasLocation } from '../../common/util/location.js';
+import computeDomain from '../../common/util/compute_domain.js';
+
+function zoneAndLocationFilter(stateObj) {
+  return hasLocation(stateObj) && computeDomain(stateObj) !== 'zone';
+}
 
 export default class ZoneTrigger extends Component {
   constructor() {
     super();
 
     this.onChange = onChangeEvent.bind(this, 'trigger');
     this.radioGroupPicked = this.radioGroupPicked.bind(this);
+    this.entityPicked = this.entityPicked.bind(this);
+    this.zonePicked = this.zonePicked.bind(this);
+  }
+
+  entityPicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.trigger,
+      entity_id: ev.target.value,
+    });
+  }
+
+  zonePicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.trigger,
+      zone: ev.target.value,
+    });
   }
 
   radioGroupPicked(ev) {
@@ -18,21 +40,25 @@ export default class ZoneTrigger extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ trigger }) {
+  render({ trigger, hass }) {
     const { entity_id, zone, event } = trigger;
     return (
       <div>
-        <paper-input
-          label="Entity Id"
-          name="entity_id"
+        <ha-entity-picker
+          label='Entity with location'
           value={entity_id}
-          onChange={this.onChange}
+          onChange={this.entityPicked}
+          hass={hass}
+          allowCustomEntity
+          entityFilter={zoneAndLocationFilter}
         />
-        <paper-input
-          label="Zone"
-          name="zone"
+        <ha-entity-picker
+          label='Zone'
           value={zone}
-          onChange={this.onChange}
+          onChange={this.zonePicked}
+          hass={hass}
+          allowCustomEntity
+          domainFilter='zone'
         />
         <label id="eventlabel">Event:</label>
         <paper-radio-group

js/common/component/condition/condition_edit.js

@@ -36,7 +36,7 @@ export default class ConditionRow extends Component {
     }
   }
 
-  render({ index, condition, onChange }) {
+  render({ index, condition, onChange, hass }) {
     const Comp = TYPES[condition.condition];
     const selected = OPTIONS.indexOf(condition.condition);
 
@@ -64,6 +64,7 @@ export default class ConditionRow extends Component {
           index={index}
           condition={condition}
           onChange={onChange}
+          hass={hass}
         />
       </div>
     );

js/common/component/condition/index.js

@@ -30,14 +30,15 @@ export default class Condition extends Component {
     this.props.onChange(condition);
   }
 
-  render({ condition }) {
+  render({ condition, hass }) {
     return (
       <div class="triggers">
         {condition.map((cnd, idx) => (
           <ConditionRow
             index={idx}
             condition={cnd}
             onChange={this.conditionChanged}
+            hass={hass}
           />))}
         <paper-card>
           <div class='card-actions add-card'>

js/common/component/condition/numeric_state.js

@@ -7,20 +7,28 @@ export default class NumericStateCondition extends Component {
     super();
 
     this.onChange = onChangeEvent.bind(this, 'condition');
+    this.entityPicked = this.entityPicked.bind(this);
+  }
+
+  entityPicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.condition,
+      entity_id: ev.target.value,
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ condition }) {
+  render({ condition, hass }) {
     const {
       value_template, entity_id, below, above
     } = condition;
     return (
       <div>
-        <paper-input
-          label="Entity Id"
-          name="entity_id"
+        <ha-entity-picker
           value={entity_id}
-          onChange={this.onChange}
+          onChange={this.entityPicked}
+          hass={hass}
+          allowCustomEntity
         />
         <paper-input
           label="Above"

js/common/component/condition/state.js

@@ -7,19 +7,27 @@ export default class StateCondition extends Component {
     super();
 
     this.onChange = onChangeEvent.bind(this, 'condition');
+    this.entityPicked = this.entityPicked.bind(this);
+  }
+
+  entityPicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.condition,
+      entity_id: ev.target.value,
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ condition }) {
+  render({ condition, hass }) {
     const { entity_id, state } = condition;
     const cndFor = condition.for;
     return (
       <div>
-        <paper-input
-          label="Entity Id"
-          name="entity_id"
+        <ha-entity-picker
           value={entity_id}
-          onChange={this.onChange}
+          onChange={this.entityPicked}
+          hass={hass}
+          allowCustomEntity
         />
         <paper-input
           label="State"