Merge pull request #3970 from emontnemery/automation_device_action_form

Allow device triggers to specify extra fields

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,24 @@ 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: () => (schema) =>
+          schema &&
+          schema.description &&
+          schema.description.unit_of_measurement,
+      },
+
+      // A function that computes an error message to be displayed for a
       // given error ID, and relevant schema object
       computeError: {
         type: Function,

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;
     }

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;
     }
   }
 }

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

@@ -2,29 +2,50 @@ import { h, Component } from "preact";
 
 import "../../../../components/device/ha-device-picker";
 import "../../../../components/device/ha-device-trigger-picker";
+import "../../../../components/ha-form";
+
+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);
     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) {
-    const deviceTrigger = ev.target.value;
-    this.props.onChange(this.props.index, deviceTrigger);
+    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;
     }
+    const extraFieldsData =
+      capabilities && capabilities.extra_fields
+        ? capabilities.extra_fields.map((item) => {
+            return { [item.name]: this.props.trigger[item.name] };
+          })
+        : undefined;
 
     return (
       <div>
@@ -41,9 +62,64 @@ export default class DeviceTrigger extends Component<any, any> {
           hass={hass}
           label="Trigger"
         />
+        {extraFieldsData && (
+          <ha-form
+            data={Object.assign({}, ...extraFieldsData)}
+            onData-changed={this._extraFieldsChanged}
+            schema={this.state.capabilities.extra_fields}
+            computeLabel={this._extraFieldsComputeLabelCallback(hass.localize)}
+          />
+        )}
       </div>
     );
   }
+
+  public componentDidMount() {
+    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;
+
+    const capabilities = trigger.domain
+      ? await fetchDeviceTriggerCapabilities(this.props.hass, trigger)
+      : null;
+    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;
+  }
 }
 
 (DeviceTrigger as any).defaultConfig = {

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",