Geo Location Trigger to HA - Form (#11644)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts

@@ -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 { HaFormSchema } from "../../../../../components/ha-form/types";
-import type { HaRadio } from "../../../../../components/ha-radio";
 import type { GeoLocationTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import { handleChangeEvent } from "../ha-automation-trigger-row";
+import type { LocalizeFunc } from "../../../../../common/translations/localize";
-
-const includeDomains = ["zone"];
 
 @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
+      <ha-form
-        .label=${this.hass.localize(
+        .schema=${this._schema(this.hass.localize)}
-          "ui.panel.config.automation.editor.triggers.type.geo_location.source"
+        .data=${this.trigger}
-        )}
-        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}
         .hass=${this.hass}
-        allow-custom-entity
+        .computeLabel=${this._computeLabelCallback}
-        .includeDomains=${includeDomains}
+        @value-changed=${this._valueChanged}
-      ></ha-entity-picker>
+      ></ha-form>
-      <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>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
-  }
-
-  private _zonePicked(ev: CustomEvent) {
     ev.stopPropagation();
-    fireEvent(this, "value-changed", {
+    const newTrigger = ev.detail.value;
-      value: { ...this.trigger, zone: ev.detail.value },
+    fireEvent(this, "value-changed", { value: newTrigger });
-    });
   }
 
-  private _radioGroupPicked(ev: CustomEvent) {
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    ev.stopPropagation();
+    this.hass.localize(
-    fireEvent(this, "value-changed", {
+      `ui.panel.config.automation.editor.triggers.type.geo_location.${schema.name}`
-      value: {
+    );
-        ...this.trigger,
-        event: (ev.target as HaRadio).value,
-      },
-    });
-  }
-
-  static styles = css`
-    label {
-      display: flex;
-      align-items: center;
-    }
-  `;
 }
 
 declare global {