From e895e91a114d3c71be5ef83bb786daedd4e3182e Mon Sep 17 00:00:00 2001
From: Erik <erik@montnemery.com>
Date: Wed, 9 Oct 2019 07:36:08 +0200
Subject: [PATCH 1/2] Allow device triggers to specify extra fields

---
 src/components/ha-form.js               | 18 ++++--
 src/data/device_automation.ts           | 17 ++++++
 src/panels/config/js/preact-types.ts    |  1 +
 src/panels/config/js/trigger/device.tsx | 80 ++++++++++++++++++++++++-
 src/translations/en.json                |  7 ++-
 5 files changed, 115 insertions(+), 8 deletions(-)

diff --git a/src/components/ha-form.js b/src/components/ha-form.js
index e954e4b336..565b33e7c6 100644
--- a/src/components/ha-form.js
+++ b/src/components/ha-form.js
@@ -36,8 +36,9 @@ class HaForm extends EventsMixin(PolymerElement) {
             schema="[[item]]"
             error="[[_getValue(error, item)]]"
             on-data-changed="_valueChanged"
-            compute-label="[[computeLabel]]"
             compute-error="[[computeError]]"
+            compute-label="[[computeLabel]]"
+            compute-suffix="[[computeSuffix]]"
           ></ha-form>
         </template>
       </template>
@@ -126,7 +127,9 @@ class HaForm extends EventsMixin(PolymerElement) {
             required="[[schema.required]]"
             auto-validate="[[schema.required]]"
             error-message="Required"
-          ></paper-input>
+          >
+            <span suffix="" slot="suffix">[[computeSuffix(schema)]]</span>
+          </paper-input>
         </template>
 
         <template
@@ -173,14 +176,21 @@ class HaForm extends EventsMixin(PolymerElement) {
       schema: Object,
       error: Object,
 
-      // A function that will computes the label to be displayed for a given
+      // A function that computes the label to be displayed for a given
       // schema object.
       computeLabel: {
         type: Function,
         value: () => (schema) => schema && schema.name,
       },
 
-      // A function that will computes an error message to be displayed for a
+      // A function that computes the suffix to be displayed for a given
+      // schema object.
+      computeSuffix: {
+        type: Function,
+        value: () => () => "abc",
+      },
+
+      // A function that computes an error message to be displayed for a
       // given error ID, and relevant schema object
       computeError: {
         type: Function,
diff --git a/src/data/device_automation.ts b/src/data/device_automation.ts
index 6939190f07..093de90b2f 100644
--- a/src/data/device_automation.ts
+++ b/src/data/device_automation.ts
@@ -39,6 +39,17 @@ export const fetchDeviceTriggers = (hass: HomeAssistant, deviceId: string) =>
     device_id: deviceId,
   });
 
+export const fetchDeviceTriggerCapabilities = (
+  hass: HomeAssistant,
+  trigger: DeviceTrigger
+) =>
+  hass.callWS<DeviceTrigger[]>({
+    type: "device_automation/trigger/capabilities",
+    trigger,
+  });
+
+const whitelist = ["above", "below", "for"];
+
 export const deviceAutomationsEqual = (
   a: DeviceAutomation,
   b: DeviceAutomation
@@ -48,11 +59,17 @@ export const deviceAutomationsEqual = (
   }
 
   for (const property in a) {
+    if (whitelist.includes(property)) {
+      continue;
+    }
     if (!Object.is(a[property], b[property])) {
       return false;
     }
   }
   for (const property in b) {
+    if (whitelist.includes(property)) {
+      continue;
+    }
     if (!Object.is(a[property], b[property])) {
       return false;
     }
diff --git a/src/panels/config/js/preact-types.ts b/src/panels/config/js/preact-types.ts
index 9873fa3dd1..374fbebb04 100644
--- a/src/panels/config/js/preact-types.ts
+++ b/src/panels/config/js/preact-types.ts
@@ -24,6 +24,7 @@ declare global {
       "mwc-button": any;
       "ha-device-trigger-picker": any;
       "ha-device-action-picker": any;
+      "ha-form": any;
     }
   }
 }
diff --git a/src/panels/config/js/trigger/device.tsx b/src/panels/config/js/trigger/device.tsx
index 3a97b21e7c..d6f958241d 100644
--- a/src/panels/config/js/trigger/device.tsx
+++ b/src/panels/config/js/trigger/device.tsx
@@ -2,21 +2,29 @@ import { h, Component } from "preact";
 
 import "../../../../components/device/ha-device-picker";
 import "../../../../components/device/ha-device-trigger-picker";
+import "../../../../components/ha-form";
+
+import { fetchDeviceTriggerCapabilities } from "../../../../data/device_automation";
 
 export default class DeviceTrigger extends Component<any, any> {
   constructor() {
     super();
     this.devicePicked = this.devicePicked.bind(this);
     this.deviceTriggerPicked = this.deviceTriggerPicked.bind(this);
-    this.state = { device_id: undefined };
+    this._extraFieldsChanged = this._extraFieldsChanged.bind(this);
+    this.state = { device_id: undefined, capabilities: undefined };
   }
 
   public devicePicked(ev) {
-    this.setState({ device_id: ev.target.value });
+    this.setState({ ...this.state, device_id: ev.target.value });
   }
 
-  public deviceTriggerPicked(ev) {
+  public async deviceTriggerPicked(ev) {
     const deviceTrigger = ev.target.value;
+    const capabilities = deviceTrigger.domain
+      ? await fetchDeviceTriggerCapabilities(this.props.hass, deviceTrigger)
+      : null;
+    this.setState({ ...this.state, capabilities });
     this.props.onChange(this.props.index, deviceTrigger);
   }
 
@@ -25,6 +33,16 @@ export default class DeviceTrigger extends Component<any, any> {
     if (device_id === undefined) {
       device_id = trigger.device_id;
     }
+    let extraFieldsData = {};
+    if (this.state.capabilities && this.state.capabilities.extra_fields) {
+      this.state.capabilities.extra_fields.forEach(
+        (item) =>
+          (extraFieldsData = {
+            ...extraFieldsData,
+            [item.name]: this.props.trigger[item.name],
+          })
+      );
+    }
 
     return (
       <div>
@@ -41,9 +59,65 @@ export default class DeviceTrigger extends Component<any, any> {
           hass={hass}
           label="Trigger"
         />
+        {this.state.capabilities && this.state.capabilities.extra_fields && (
+          <ha-form
+            data={extraFieldsData}
+            onData-changed={this._extraFieldsChanged}
+            schema={this.state.capabilities.extra_fields}
+            // error={step.errors} // TODO
+            computeLabel={this._extraFieldsComputeLabelCallback(hass.localize)}
+            computeSuffix={this._extraFieldsComputeSuffixCallback()}
+            // computeError={this._extraFieldsComputeErrorCallback} // TODO
+          />
+        )}
       </div>
     );
   }
+
+  public componentDidMount() {
+    const hass = this.props.hass;
+    const trigger = this.props.trigger;
+
+    if (!this.state.capabilities && trigger.domain) {
+      fetchDeviceTriggerCapabilities(hass, trigger).then((capabilities) => {
+        this.setState({ ...this.state, capabilities });
+      });
+    }
+  }
+
+  private _extraFieldsChanged(ev) {
+    if (!ev.detail.path) {
+      return;
+    }
+    const item = ev.detail.path.replace("data.", "");
+    const value = ev.detail.value || undefined;
+
+    this.props.onChange(this.props.index, {
+      ...this.props.trigger,
+      [item]: value,
+    });
+  }
+
+  private _extraFieldsComputeLabelCallback(localize) {
+    // Returns a callback for ha-form to calculate labels per schema object
+    return (schema) =>
+      localize(
+        `ui.panel.config.automation.editor.triggers.type.device.extra_fields.${
+          schema.name
+        }`
+      ) || schema.name;
+  }
+
+  private _extraFieldsComputeSuffixCallback() {
+    // Returns a callback for ha-form to calculate suffixes per schema object
+    return (schema) => {
+      let description = "";
+      if (schema.description) {
+        description = schema.description.unit_of_measurement || "";
+      }
+      return description;
+    };
+  }
 }
 
 (DeviceTrigger as any).defaultConfig = {
diff --git a/src/translations/en.json b/src/translations/en.json
index 5e082f51f2..4129c53f58 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -737,7 +737,12 @@
               "type_select": "Trigger type",
               "type": {
                 "device": {
-                  "label": "Device"
+                  "label": "Device",
+                  "extra_fields": {
+                    "above": "Above",
+                    "below": "Below",
+                    "for": "Duration"
+                  }
                 },
                 "event": {
                   "label": "Event",

From 6a098ad0b5e5581af971b17025aeceb2480ffac9 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 9 Oct 2019 13:34:34 +0200
Subject: [PATCH 2/2] Save orig value + some cleanup

---
 src/components/ha-form.js               |  5 +-
 src/panels/config/js/trigger/device.tsx | 82 +++++++++++++------------
 2 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/src/components/ha-form.js b/src/components/ha-form.js
index 565b33e7c6..f6dfe613ee 100644
--- a/src/components/ha-form.js
+++ b/src/components/ha-form.js
@@ -187,7 +187,10 @@ class HaForm extends EventsMixin(PolymerElement) {
       // schema object.
       computeSuffix: {
         type: Function,
-        value: () => () => "abc",
+        value: () => (schema) =>
+          schema &&
+          schema.description &&
+          schema.description.unit_of_measurement,
       },
 
       // A function that computes an error message to be displayed for a
diff --git a/src/panels/config/js/trigger/device.tsx b/src/panels/config/js/trigger/device.tsx
index d6f958241d..982fe55a01 100644
--- a/src/panels/config/js/trigger/device.tsx
+++ b/src/panels/config/js/trigger/device.tsx
@@ -4,9 +4,14 @@ import "../../../../components/device/ha-device-picker";
 import "../../../../components/device/ha-device-trigger-picker";
 import "../../../../components/ha-form";
 
-import { fetchDeviceTriggerCapabilities } from "../../../../data/device_automation";
+import {
+  fetchDeviceTriggerCapabilities,
+  deviceAutomationsEqual,
+} from "../../../../data/device_automation";
 
 export default class DeviceTrigger extends Component<any, any> {
+  private _origTrigger;
+
   constructor() {
     super();
     this.devicePicked = this.devicePicked.bind(this);
@@ -19,30 +24,28 @@ export default class DeviceTrigger extends Component<any, any> {
     this.setState({ ...this.state, device_id: ev.target.value });
   }
 
-  public async deviceTriggerPicked(ev) {
-    const deviceTrigger = ev.target.value;
-    const capabilities = deviceTrigger.domain
-      ? await fetchDeviceTriggerCapabilities(this.props.hass, deviceTrigger)
-      : null;
-    this.setState({ ...this.state, capabilities });
-    this.props.onChange(this.props.index, deviceTrigger);
+  public deviceTriggerPicked(ev) {
+    let trigger = ev.target.value;
+    if (
+      this._origTrigger &&
+      deviceAutomationsEqual(this._origTrigger, trigger)
+    ) {
+      trigger = this._origTrigger;
+    }
+    this.props.onChange(this.props.index, trigger);
   }
 
   /* eslint-disable camelcase */
-  public render({ trigger, hass }, { device_id }) {
+  public render({ trigger, hass }, { device_id, capabilities }) {
     if (device_id === undefined) {
       device_id = trigger.device_id;
     }
-    let extraFieldsData = {};
-    if (this.state.capabilities && this.state.capabilities.extra_fields) {
-      this.state.capabilities.extra_fields.forEach(
-        (item) =>
-          (extraFieldsData = {
-            ...extraFieldsData,
-            [item.name]: this.props.trigger[item.name],
+    const extraFieldsData =
+      capabilities && capabilities.extra_fields
+        ? capabilities.extra_fields.map((item) => {
+            return { [item.name]: this.props.trigger[item.name] };
           })
-      );
-    }
+        : undefined;
 
     return (
       <div>
@@ -59,15 +62,12 @@ export default class DeviceTrigger extends Component<any, any> {
           hass={hass}
           label="Trigger"
         />
-        {this.state.capabilities && this.state.capabilities.extra_fields && (
+        {extraFieldsData && (
           <ha-form
-            data={extraFieldsData}
+            data={Object.assign({}, ...extraFieldsData)}
             onData-changed={this._extraFieldsChanged}
             schema={this.state.capabilities.extra_fields}
-            // error={step.errors} // TODO
             computeLabel={this._extraFieldsComputeLabelCallback(hass.localize)}
-            computeSuffix={this._extraFieldsComputeSuffixCallback()}
-            // computeError={this._extraFieldsComputeErrorCallback} // TODO
           />
         )}
       </div>
@@ -75,14 +75,27 @@ export default class DeviceTrigger extends Component<any, any> {
   }
 
   public componentDidMount() {
-    const hass = this.props.hass;
+    if (!this.state.capabilities) {
+      this._getCapabilities();
+    }
+    if (this.props.trigger) {
+      this._origTrigger = this.props.trigger;
+    }
+  }
+
+  public componentDidUpdate(prevProps) {
+    if (prevProps.trigger !== this.props.trigger) {
+      this._getCapabilities();
+    }
+  }
+
+  private async _getCapabilities() {
     const trigger = this.props.trigger;
 
-    if (!this.state.capabilities && trigger.domain) {
-      fetchDeviceTriggerCapabilities(hass, trigger).then((capabilities) => {
-        this.setState({ ...this.state, capabilities });
-      });
-    }
+    const capabilities = trigger.domain
+      ? await fetchDeviceTriggerCapabilities(this.props.hass, trigger)
+      : null;
+    this.setState({ ...this.state, capabilities });
   }
 
   private _extraFieldsChanged(ev) {
@@ -107,17 +120,6 @@ export default class DeviceTrigger extends Component<any, any> {
         }`
       ) || schema.name;
   }
-
-  private _extraFieldsComputeSuffixCallback() {
-    // Returns a callback for ha-form to calculate suffixes per schema object
-    return (schema) => {
-      let description = "";
-      if (schema.description) {
-        description = schema.description.unit_of_measurement || "";
-      }
-      return description;
-    };
-  }
 }
 
 (DeviceTrigger as any).defaultConfig = {