Picture Glance to HA Form (#11821)

src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts

@@ -1,25 +1,21 @@
-import "@material/mwc-list/mwc-list-item";
-import "@polymer/paper-input/paper-input";
+import "../../components/hui-action-editor";
+import "../../../../components/ha-form/ha-form";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { array, assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { stopPropagation } from "../../../../common/dom/stop_propagation";
-import "../../../../components/entity/ha-entity-picker";
-import "../../../../components/ha-select";
-import { ActionConfig } from "../../../../data/lovelace";
-import { HomeAssistant } from "../../../../types";
-import { PictureGlanceCardConfig } from "../../cards/types";
-import "../../components/hui-action-editor";
+import type { HaFormSchema } from "../../../../components/ha-form/types";
+import type { ActionConfig } from "../../../../data/lovelace";
+import type { HomeAssistant } from "../../../../types";
+import type { PictureGlanceCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
-import "../../components/hui-theme-select-editor";
-import { EntityConfig } from "../../entity-rows/types";
-import { LovelaceCardEditor } from "../../types";
+import type { EntityConfig } from "../../entity-rows/types";
+import type { LovelaceCardEditor } from "../../types";
 import { processEditorEntities } from "../process-editor-entities";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { entitiesConfigStruct } from "../structs/entities-struct";
-import { EditorTarget } from "../types";
+import type { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = assign(
@@ -38,7 +34,26 @@ const cardConfigStruct = assign(
   })
 );
 
-const includeDomains = ["camera"];
+const actions = ["more-info", "toggle", "navigate", "call-service", "none"];
+
+const SCHEMA: HaFormSchema[] = [
+  { name: "title", selector: { text: {} } },
+  { name: "image", selector: { text: {} } },
+  { name: "camera_image", selector: { entity: { domain: "camera" } } },
+  {
+    name: "",
+    type: "grid",
+    schema: [
+      {
+        name: "camera_view",
+        selector: { select: { options: ["auto", "live"] } },
+      },
+      { name: "aspect_ratio", selector: { text: {} } },
+    ],
+  },
+  { name: "entity", selector: { entity: {} } },
+  { name: "theme", selector: { theme: {} } },
+];
 
 @customElement("hui-picture-glance-card-editor")
 export class HuiPictureGlanceCardEditor
@@ -57,39 +72,6 @@ export class HuiPictureGlanceCardEditor
     this._configEntities = processEditorEntities(config.entities);
   }
 
-  get _entity(): string {
-    return this._config!.entity || "";
-  }
-
-  get _title(): string {
-    return this._config!.title || "";
-  }
-
-  get _image(): string {
-    return (
-      this._config!.image ||
-      (this._camera_image
-        ? ""
-        : "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png")
-    );
-  }
-
-  get _camera_image(): string {
-    return this._config!.camera_image || "";
-  }
-
-  get _camera_view(): string {
-    return this._config!.camera_view || "auto";
-  }
-
-  get _state_image(): Record<string, unknown> {
-    return this._config!.state_image || {};
-  }
-
-  get _aspect_ratio(): string {
-    return this._config!.aspect_ratio || "";
-  }
-
   get _tap_action(): ActionConfig {
     return this._config!.tap_action || { action: "toggle" };
   }
@@ -98,102 +80,27 @@ export class HuiPictureGlanceCardEditor
     return this._config!.hold_action || { action: "more-info" };
   }
 
-  get _theme(): string {
-    return this._config!.theme || "";
-  }
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const actions = ["more-info", "toggle", "navigate", "call-service", "none"];
-    const views = ["auto", "live"];
+    const data = { camera_view: "auto", ...this._config };
 
     return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${data}
+        .schema=${SCHEMA}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
       <div class="card-config">
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.title"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value=${this._title}
-          .configValue=${"title"}
-          @value-changed=${this._valueChanged}
-        ></paper-input>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.image"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value=${this._image}
-          .configValue=${"image"}
-          @value-changed=${this._valueChanged}
-        ></paper-input>
-        <ha-entity-picker
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.camera_image"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .value=${this._camera_image}
-          .configValue=${"camera_image"}
-          @value-changed=${this._valueChanged}
-          allow-custom-entity
-          .includeDomains=${includeDomains}
-        ></ha-entity-picker>
-        <div class="side-by-side">
-          <ha-select
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.camera_view"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .configValue=${"camera_view"}
-            @selected=${this._valueChanged}
-            @closed=${stopPropagation}
-            fixedMenuPosition
-            naturalMenuWidth
-            .value=${this._camera_view}
-          >
-            ${views.map(
-              (view) =>
-                html`<mwc-list-item .value=${view}>${view}</mwc-list-item> `
-            )}
-          </ha-select>
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._aspect_ratio}
-            .configValue=${"aspect_ratio"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
-        </div>
-        <ha-entity-picker
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.picture-glance.state_entity"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .value=${this._entity}
-          .configValue=${"entity"}
-          @value-changed=${this._valueChanged}
-          allow-custom-entity
-        ></ha-entity-picker>
         <div class="side-by-side">
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.tap_action"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
+            )}
             .hass=${this.hass}
             .config=${this._tap_action}
             .actions=${actions}
@@ -201,11 +108,9 @@ export class HuiPictureGlanceCardEditor
             @value-changed=${this._valueChanged}
           ></hui-action-editor>
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.hold_action"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
+            )}
             .hass=${this.hass}
             .config=${this._hold_action}
             .actions=${actions}
@@ -216,19 +121,17 @@ export class HuiPictureGlanceCardEditor
         <hui-entity-editor
           .hass=${this.hass}
           .entities=${this._configEntities}
-          @entities-changed=${this._valueChanged}
+          @entities-changed=${this._changed}
         ></hui-entity-editor>
-        <hui-theme-select-editor
-          .hass=${this.hass}
-          .value=${this._theme}
-          .configValue=${"theme"}
-          @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
       </div>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
+  }
+
+  private _changed(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
@@ -257,9 +160,24 @@ export class HuiPictureGlanceCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResultGroup {
-    return configElementStyle;
-  }
+  private _computeLabelCallback = (schema: HaFormSchema) => {
+    if (schema.name === "entity") {
+      return this.hass!.localize(
+        "ui.panel.lovelace.editor.card.picture-glance.state_entity"
+      );
+    }
+
+    return (
+      this.hass!.localize(
+        `ui.panel.lovelace.editor.card.generic.${schema.name}`
+      ) ||
+      this.hass!.localize(
+        `ui.panel.lovelace.editor.card.picture-glance.${schema.name}`
+      )
+    );
+  };
+
+  static styles: CSSResultGroup = configElementStyle;
 }
 
 declare global {