Add support for and and or conditions to the automation editor. (#3724)

* Add support for `and` and `or` conditions in automations

* Remove debug prints, fix lint errors

* Fix

* Merge `and` and `or` conditions

* Add missing file

src/panels/config/js/condition/condition_edit.tsx

@@ -4,6 +4,7 @@ import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-item/paper-item";
 
 import DeviceCondition from "./device";
+import LogicalCondition from "./logical";
 import NumericStateCondition from "./numeric_state";
 import StateCondition from "./state";
 import SunCondition from "./sun";
@@ -12,9 +13,11 @@ import TimeCondition from "./time";
 import ZoneCondition from "./zone";
 
 const TYPES = {
+  and: LogicalCondition,
   device: DeviceCondition,
-  state: StateCondition,
   numeric_state: NumericStateCondition,
+  or: LogicalCondition,
+  state: StateCondition,
   sun: SunCondition,
   template: TemplateCondition,
   time: TimeCondition,
@@ -23,7 +26,7 @@ const TYPES = {
 
 const OPTIONS = Object.keys(TYPES).sort();
 
-export default class ConditionRow extends Component<any> {
+export default class ConditionEdit extends Component<any> {
   constructor() {
     super();
 

src/panels/config/js/condition/logical.tsx

@@ -0,0 +1,46 @@
+import { h, Component } from "preact";
+
+import Condition from "./index";
+
+export default class LogicalCondition extends Component<any, any> {
+  private _mounted = false;
+  constructor() {
+    super();
+    this.conditionChanged = this.conditionChanged.bind(this);
+  }
+
+  public conditionChanged(conditions) {
+    if (this._mounted) {
+      this.props.onChange(this.props.index, {
+        ...this.props.condition,
+        conditions,
+      });
+    }
+  }
+
+  public componentWillMount() {
+    this._mounted = true;
+  }
+
+  public componentWillUnmount() {
+    this._mounted = false;
+  }
+
+  /* eslint-disable camelcase */
+  public render({ condition, hass, localize }) {
+    return (
+      <div>
+        <Condition
+          condition={condition.conditions || []}
+          onChange={this.conditionChanged}
+          hass={hass}
+          localize={localize}
+        />
+      </div>
+    );
+  }
+}
+
+(LogicalCondition as any).defaultConfig = {
+  conditions: [{ condition: "state" }],
+};

src/translations/en.json

@@ -806,19 +806,25 @@
               "unsupported_condition": "Unsupported condition: {condition}",
               "type_select": "Condition type",
               "type": {
+                "and": {
+                  "label": "And"
+                },
                 "device": {
                   "label": "Device"
                 },
-                "state": {
-                  "label": "[%key:ui::panel::config::automation::editor::triggers::type::state::label%]",
-                  "state": "[%key:ui::panel::config::automation::editor::triggers::type::state::label%]"
-                },
                 "numeric_state": {
                   "label": "[%key:ui::panel::config::automation::editor::triggers::type::numeric_state::label%]",
                   "above": "[%key:ui::panel::config::automation::editor::triggers::type::numeric_state::above%]",
                   "below": "[%key:ui::panel::config::automation::editor::triggers::type::numeric_state::below%]",
                   "value_template": "[%key:ui::panel::config::automation::editor::triggers::type::numeric_state::value_template%]"
                 },
+                "or": {
+                  "label": "Or"
+                },
+                "state": {
+                  "label": "[%key:ui::panel::config::automation::editor::triggers::type::state::label%]",
+                  "state": "[%key:ui::panel::config::automation::editor::triggers::type::state::label%]"
+                },
                 "sun": {
                   "label": "[%key:ui::panel::config::automation::editor::triggers::type::sun::label%]",
                   "before": "Before:",