YAML support for automation triggers

src/common/preact/event.ts

@@ -7,8 +7,11 @@
 
 // export function onChangeEvent(this: OnChangeComponent, prop, ev) {
 export function onChangeEvent(this: any, prop, ev) {
-  const origData = this.props[prop];
+  if (!this.initialized) {
+    return;
+  }
 
+  const origData = this.props[prop];
   if (ev.target.value === origData[ev.target.name]) {
     return;
   }

src/panels/config/js/automation-component.tsx

@@ -0,0 +1,23 @@
+import { h, Component, ComponentChild } from "preact";
+
+export class AutomationComponent extends Component<any, any> {
+  // @ts-ignore
+  protected initialized: boolean;
+
+  constructor(props?, context?) {
+    super(props, context);
+    this.initialized = false;
+  }
+
+  public componentDidMount() {
+    this.initialized = true;
+  }
+
+  public componentWillUnmount() {
+    this.initialized = false;
+  }
+
+  public render(_props?, _state?, _context?: any): ComponentChild {
+    return <div />;
+  }
+}

src/panels/config/js/trigger/device.tsx

@@ -1,4 +1,4 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import "../../../../components/device/ha-device-picker";
 import "../../../../components/device/ha-device-trigger-picker";
@@ -9,7 +9,9 @@ import {
   deviceAutomationsEqual,
 } from "../../../../data/device_automation";
 
-export default class DeviceTrigger extends Component<any, any> {
+import { AutomationComponent } from "../automation-component";
+
+export default class DeviceTrigger extends AutomationComponent {
   private _origTrigger;
 
   constructor() {
@@ -21,10 +23,16 @@ export default class DeviceTrigger extends Component<any, any> {
   }
 
   public devicePicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.setState({ ...this.state, device_id: ev.target.value });
   }
 
   public deviceTriggerPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     let trigger = ev.target.value;
     if (
       this._origTrigger &&
@@ -75,6 +83,7 @@ export default class DeviceTrigger extends Component<any, any> {
   }
 
   public componentDidMount() {
+    this.initialized = true;
     if (!this.state.capabilities) {
       this._getCapabilities();
     }
@@ -99,6 +108,9 @@ export default class DeviceTrigger extends Component<any, any> {
   }
 
   private _extraFieldsChanged(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.trigger,
       ...ev.detail.value,

src/panels/config/js/trigger/event.tsx

@@ -1,10 +1,12 @@
-import { h, Component } from "preact";
+import { h } from "preact";
+
 import "@polymer/paper-input/paper-input";
 
 import YAMLTextArea from "../yaml_textarea";
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class EventTrigger extends Component<any> {
+export default class EventTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();

src/panels/config/js/trigger/geo_location.tsx

@@ -1,11 +1,13 @@
-import { h, Component } from "preact";
+import { h } from "preact";
+
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 import "../../../../components/entity/ha-entity-picker";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class GeolocationTrigger extends Component<any> {
+export default class GeolocationTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();

src/panels/config/js/trigger/homeassistant.tsx

@@ -1,15 +1,21 @@
-import { h, Component } from "preact";
+import { h } from "preact";
+
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 
-export default class HassTrigger extends Component<any> {
+import { AutomationComponent } from "../automation-component";
+
+export default class HassTrigger extends AutomationComponent {
   constructor() {
     super();
 
     this.radioGroupPicked = this.radioGroupPicked.bind(this);
   }
 
   public radioGroupPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.trigger,
       event: ev.target.selected,

src/panels/config/js/trigger/mqtt.tsx

@@ -1,12 +1,14 @@
-import { h, Component } from "preact";
+import { h } from "preact";
+
 import "@polymer/paper-input/paper-input";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class MQTTTrigger extends Component<any> {
+export default class MQTTTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.onChange = onChangeEvent.bind(this, "trigger");
   }

src/panels/config/js/trigger/numeric_state.tsx

@@ -1,15 +1,17 @@
-import { h, Component } from "preact";
+import { h } from "preact";
+
 import "@polymer/paper-input/paper-input";
 import "../../../../components/ha-textarea";
 
 import "../../../../components/entity/ha-entity-picker";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class NumericStateTrigger extends Component<any> {
+export default class NumericStateTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.onChange = onChangeEvent.bind(this, "trigger");
     this.entityPicked = this.entityPicked.bind(this);

src/panels/config/js/trigger/state.tsx

@@ -1,20 +1,23 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import "@polymer/paper-input/paper-input";
 import "../../../../components/entity/ha-entity-picker";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class StateTrigger extends Component<any> {
+export default class StateTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
-  constructor() {
-    super();
-
+  constructor(props) {
+    super(props);
     this.onChange = onChangeEvent.bind(this, "trigger");
     this.entityPicked = this.entityPicked.bind(this);
   }
 
   public entityPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.trigger,
       entity_id: ev.target.value,
@@ -23,8 +26,7 @@ export default class StateTrigger extends Component<any> {
 
   /* eslint-disable camelcase */
   public render({ trigger, hass, localize }) {
-    const { entity_id, to } = trigger;
-    const trgFrom = trigger.from;
+    const { entity_id, to, from } = trigger;
     let trgFor = trigger.for;
 
     if (trgFor && (trgFor.hours || trgFor.minutes || trgFor.seconds)) {
@@ -50,7 +52,7 @@ export default class StateTrigger extends Component<any> {
             "ui.panel.config.automation.editor.triggers.type.state.from"
           )}
           name="from"
-          value={trgFrom}
+          value={from}
           onvalue-changed={this.onChange}
         />
         <paper-input

src/panels/config/js/trigger/sun.tsx

@@ -1,12 +1,13 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class SunTrigger extends Component<any> {
+export default class SunTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();
@@ -16,6 +17,9 @@ export default class SunTrigger extends Component<any> {
   }
 
   public radioGroupPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.trigger,
       event: ev.target.selected,

src/panels/config/js/trigger/template.tsx

@@ -1,10 +1,11 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import "../../../../components/ha-textarea";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class TemplateTrigger extends Component<any> {
+export default class TemplateTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();

src/panels/config/js/trigger/time.tsx

@@ -1,10 +1,11 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import "@polymer/paper-input/paper-input";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class TimeTrigger extends Component<any> {
+export default class TimeTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();

src/panels/config/js/trigger/time_pattern.tsx

@@ -1,10 +1,11 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import "@polymer/paper-input/paper-input";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class TimePatternTrigger extends Component<any> {
+export default class TimePatternTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();

src/panels/config/js/trigger/trigger_edit.tsx

@@ -4,6 +4,10 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 
+import "../../../../components/ha-code-editor";
+
+import YAMLTextArea from "../yaml_textarea";
+
 import DeviceTrigger from "./device";
 import EventTrigger from "./event";
 import GeolocationTrigger from "./geo_location";
@@ -41,25 +45,31 @@ export default class TriggerEdit extends Component<any> {
     super();
 
     this.typeChanged = this.typeChanged.bind(this);
+    this.onYamlChange = this.onYamlChange.bind(this);
   }
 
-  public render({ index, trigger, onChange, hass, localize }) {
+  public render({ index, trigger, onChange, hass, localize, yamlMode }) {
     // tslint:disable-next-line: variable-name
     const Comp = TYPES[trigger.platform];
     const selected = OPTIONS.indexOf(trigger.platform);
 
-    if (!Comp) {
+    if (yamlMode || !Comp) {
       return (
-        <div>
-          {localize(
-            "ui.panel.config.automation.editor.triggers.unsupported_platform",
-            "platform",
-            trigger.platform
+        <div style="margin-right: 24px;">
+          {!Comp && (
+            <div>
+              {localize(
+                "ui.panel.config.automation.editor.triggers.unsupported_platform",
+                "platform",
+                trigger.platform
+              )}
+            </div>
           )}
-          <pre>{JSON.stringify(trigger, null, 2)}</pre>
+          <YAMLTextArea value={trigger} onChange={this.onYamlChange} />
         </div>
       );
     }
+
     return (
       <div>
         <paper-dropdown-menu-light
@@ -103,4 +113,8 @@ export default class TriggerEdit extends Component<any> {
       });
     }
   }
+
+  private onYamlChange(trigger) {
+    this.props.onChange(this.props.index, trigger);
+  }
 }