HA Trigger to HA Form (#11645 )

Co-authored-by: Paulus Schoutsen <[email protected]>
Geo Location Trigger to HA - Form (#11644 )
2026-08-27 09:26:28 +00:00 · 2022-02-10 14:12:12 -08:00 · 2022-02-10 14:12:01 -08:00 · 2022-02-10 14:11:57 -08:00 · 2022-02-10 14:11:45 -08:00 · 2022-02-10 14:11:29 -08:00
5 changed files with 169 additions and 234 deletions
@@ -1,13 +1,12 @@
-import { css, html, LitElement } from "lit";
+import "../../../../../components/ha-form/ha-form";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/entity/ha-entity-picker";
-import type { HaRadio } from "../../../../../components/ha-radio";
+import { HaFormSchema } from "../../../../../components/ha-form/types";
 import type { GeoLocationTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import { handleChangeEvent } from "../ha-automation-trigger-row";
-
-const includeDomains = ["zone"];
+import type { LocalizeFunc } from "../../../../../common/translations/localize";

@customElement("ha-automation-trigger-geo_location")
 export class HaGeolocationTrigger extends LitElement {
@@ -15,6 +14,30 @@ export class HaGeolocationTrigger extends LitElement {

  @property({ attribute: false }) public trigger!: GeoLocationTrigger;

+  private _schema = memoizeOne((localize: LocalizeFunc) => [
+    { name: "source", selector: { text: {} } },
+    { name: "zone", selector: { entity: { domain: "zone" } } },
+    {
+      name: "event",
+      type: "select",
+      required: true,
+      options: [
+        [
+          "enter",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.geo_location.enter"
+          ),
+        ],
+        [
+          "leave",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.geo_location.leave"
+          ),
+        ],
+      ],
+    },
+  ]);
+
  public static get defaultConfig() {
    return {
      source: "",
@@ -24,86 +47,27 @@ export class HaGeolocationTrigger extends LitElement {
  }

  protected render() {
-    const { source, zone, event } = this.trigger;
-
    return html`
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.geo_location.source"
-        )}
-        name="source"
-        .value=${source}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <ha-entity-picker
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.geo_location.zone"
-        )}
-        .value=${zone}
-        @value-changed=${this._zonePicked}
+      <ha-form
+        .schema=${this._schema(this.hass.localize)}
+        .data=${this.trigger}
        .hass=${this.hass}
-        allow-custom-entity
-        .includeDomains=${includeDomains}
-      ></ha-entity-picker>
-      <label>
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.geo_location.event"
-        )}
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.geo_location.enter"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="enter"
-            .checked=${event === "enter"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.geo_location.leave"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="leave"
-            .checked=${event === "leave"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-      </label>
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
    `;
  }

  private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
-  }
-
-  private _zonePicked(ev: CustomEvent) {
    ev.stopPropagation();
-    fireEvent(this, "value-changed", {
-      value: { ...this.trigger, zone: ev.detail.value },
-    });
+    const newTrigger = ev.detail.value;
+    fireEvent(this, "value-changed", { value: newTrigger });
  }

-  private _radioGroupPicked(ev: CustomEvent) {
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.trigger,
-        event: (ev.target as HaRadio).value,
-      },
-    });
-  }
-
-  static styles = css`
-    label {
-      display: flex;
-      align-items: center;
-    }
-  `;
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.triggers.type.geo_location.${schema.name}`
+    );
 }

 declare global {
@@ -1,11 +1,12 @@
+import "../../../../../components/ha-form/ha-form";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import type { HaRadio } from "../../../../../components/ha-radio";
 import type { HassTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import "../../../../../components/ha-formfield";
-import "../../../../../components/ha-radio";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import type { LocalizeFunc } from "../../../../../common/translations/localize";

@customElement("ha-automation-trigger-homeassistant")
 export class HaHassTrigger extends LitElement {
@@ -13,6 +14,28 @@ export class HaHassTrigger extends LitElement {

  @property({ attribute: false }) public trigger!: HassTrigger;

+  private _schema = memoizeOne((localize: LocalizeFunc) => [
+    {
+      name: "event",
+      type: "select",
+      required: true,
+      options: [
+        [
+          "start",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.homeassistant.start"
+          ),
+        ],
+        [
+          "shutdown",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown"
+          ),
+        ],
+      ],
+    },
+  ]);
+
  public static get defaultConfig() {
    return {
      event: "start" as HassTrigger["event"],
@@ -20,50 +43,28 @@ export class HaHassTrigger extends LitElement {
  }

  protected render() {
-    const { event } = this.trigger;
    return html`
-      <label id="eventlabel">
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.homeassistant.event"
-        )}
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.homeassistant.start"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="start"
-            .checked=${event === "start"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="shutdown"
-            .checked=${event === "shutdown"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-      </label>
+      <ha-form
+        .schema=${this._schema(this.hass.localize)}
+        .data=${this.trigger}
+        .hass=${this.hass}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
    `;
  }

-  private _radioGroupPicked(ev) {
+  private _valueChanged(ev: CustomEvent): void {
    ev.stopPropagation();
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.trigger,
-        event: (ev.target as HaRadio).value,
-      },
-    });
+    const newTrigger = ev.detail.value;
+    fireEvent(this, "value-changed", { value: newTrigger });
  }

+  private _computeLabelCallback = (schema: HaFormSchema): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.triggers.type.geo_location.${schema.name}`
+    );
+
  static styles = css`
    label {
      display: flex;
@@ -1,12 +1,15 @@
-import "@polymer/paper-input/paper-input";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import { MqttTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
-import {
-  handleChangeEvent,
-  TriggerElement,
-} from "../ha-automation-trigger-row";
+import type { TriggerElement } from "../ha-automation-trigger-row";
+
+const SCHEMA: HaFormSchema[] = [
+  { name: "topic", required: true, selector: { text: {} } },
+  { name: "payload", selector: { text: {} } },
+];

@customElement("ha-automation-trigger-mqtt")
 export class HaMQTTTrigger extends LitElement implements TriggerElement {
@@ -19,30 +22,27 @@ export class HaMQTTTrigger extends LitElement implements TriggerElement {
  }

  protected render() {
-    const { topic, payload } = this.trigger;
    return html`
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.mqtt.topic"
-        )}
-        name="topic"
-        .value=${topic}
+      <ha-form
+        .schema=${SCHEMA}
+        .data=${this.trigger}
+        .hass=${this.hass}
+        .computeLabel=${this._computeLabelCallback}
        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.mqtt.payload"
-        )}
-        name="payload"
-        .value=${payload}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
+      ></ha-form>
    `;
  }

  private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
+    ev.stopPropagation();
+    const newTrigger = ev.detail.value;
+    fireEvent(this, "value-changed", { value: newTrigger });
  }
+
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.triggers.type.mqtt.${schema.name}`
+    );
 }

 declare global {
@@ -1,16 +1,12 @@
-import "@polymer/paper-input/paper-input";
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-radio";
-import "../../../../../components/ha-formfield";
-import type { HaRadio } from "../../../../../components/ha-radio";
 import type { SunTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import {
-  handleChangeEvent,
-  TriggerElement,
-} from "../ha-automation-trigger-row";
+import type { TriggerElement } from "../ha-automation-trigger-row";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import type { LocalizeFunc } from "../../../../../common/translations/localize";

@customElement("ha-automation-trigger-sun")
 export class HaSunTrigger extends LitElement implements TriggerElement {
@@ -18,6 +14,29 @@ export class HaSunTrigger extends LitElement implements TriggerElement {

  @property({ attribute: false }) public trigger!: SunTrigger;

+  private _schema = memoizeOne((localize: LocalizeFunc) => [
+    {
+      name: "event",
+      type: "select",
+      required: true,
+      options: [
+        [
+          "sunrise",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.sun.sunrise"
+          ),
+        ],
+        [
+          "sunset",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.sun.sunset"
+          ),
+        ],
+      ],
+    },
+    { name: "offset", selector: { text: {} } },
+  ]);
+
  public static get defaultConfig() {
    return {
      event: "sunrise" as SunTrigger["event"],
@@ -26,69 +45,27 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
  }

  protected render() {
-    const { offset, event } = this.trigger;
    return html`
-      <label>
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.sun.event"
-        )}
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.sun.sunrise"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="sunrise"
-            .checked=${event === "sunrise"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.sun.sunset"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="sunset"
-            .checked=${event === "sunset"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-      </label>
-
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.sun.offset"
-        )}
-        name="offset"
-        .value=${offset}
+      <ha-form
+        .schema=${this._schema(this.hass.localize)}
+        .data=${this.trigger}
+        .hass=${this.hass}
+        .computeLabel=${this._computeLabelCallback}
        @value-changed=${this._valueChanged}
-      ></paper-input>
+      ></ha-form>
    `;
  }

  private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
-  }
-
-  private _radioGroupPicked(ev) {
    ev.stopPropagation();
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.trigger,
-        event: (ev.target as HaRadio).value,
-      },
-    });
+    const newTrigger = ev.detail.value;
+    fireEvent(this, "value-changed", { value: newTrigger });
  }

-  static styles = css`
-    label {
-      display: flex;
-      align-items: center;
-    }
-  `;
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.triggers.type.sun.${schema.name}`
+    );
 }

 declare global {
@@ -1,12 +1,16 @@
-import "@polymer/paper-input/paper-input";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { TimePatternTrigger } from "../../../../../data/automation";
-import { HomeAssistant } from "../../../../../types";
-import {
-  handleChangeEvent,
-  TriggerElement,
-} from "../ha-automation-trigger-row";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import type { TimePatternTrigger } from "../../../../../data/automation";
+import type { HomeAssistant } from "../../../../../types";
+import type { TriggerElement } from "../ha-automation-trigger-row";
+
+const SCHEMA: HaFormSchema[] = [
+  { name: "hours", selector: { text: {} } },
+  { name: "minutes", selector: { text: {} } },
+  { name: "seconds", selector: { text: {} } },
+];

@customElement("ha-automation-trigger-time_pattern")
 export class HaTimePatternTrigger extends LitElement implements TriggerElement {
@@ -19,38 +23,27 @@ export class HaTimePatternTrigger extends LitElement implements TriggerElement {
  }

  protected render() {
-    const { hours, minutes, seconds } = this.trigger;
    return html`
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.time_pattern.hours"
-        )}
-        name="hours"
-        .value=${hours}
+      <ha-form
+        .hass=${this.hass}
+        .schema=${SCHEMA}
+        .data=${this.trigger}
+        .computeLabel=${this._computeLabelCallback}
        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.time_pattern.minutes"
-        )}
-        name="minutes"
-        .value=${minutes}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.time_pattern.seconds"
-        )}
-        name="seconds"
-        .value=${seconds}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
+      ></ha-form>
    `;
  }

  private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
+    ev.stopPropagation();
+    const newTrigger = ev.detail.value;
+    fireEvent(this, "value-changed", { value: newTrigger });
  }
+
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.triggers.type.time_pattern.${schema.name}`
+    );
 }

 declare global {
Author	SHA1	Message	Date
Zack Barett GitHub Paulus Schoutsen	ed84ce9692	HA Trigger to HA Form (#11645 ) Co-authored-by: Paulus Schoutsen <[email protected]>	2022-02-10 14:12:12 -08:00
Zack Barett GitHub Paulus Schoutsen	9912d427f2	Geo Location Trigger to HA - Form (#11644 ) Co-authored-by: Paulus Schoutsen <[email protected]>	2022-02-10 14:12:01 -08:00
Zack Barett GitHub Paulus Schoutsen	76f574f875	Convert Sun to Ha Form (#11647 ) Co-authored-by: Paulus Schoutsen <[email protected]>	2022-02-10 14:11:57 -08:00
Zack Barett GitHub Paulus Schoutsen	ac90bb7088	MQTT Trigger to Ha-Form (#11643 ) Co-authored-by: Paulus Schoutsen <[email protected]>	2022-02-10 14:11:45 -08:00
Zack BarettandGitHub	ce9f83e9a2	Time Pattern to HA Form (#11648 )	2022-02-10 14:11:29 -08:00