weather forecast editor to HA form (#11823)

src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts

@@ -1,22 +1,18 @@
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import "../../../../components/ha-form/ha-form";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { assert, boolean, object, optional, string, assign } from "superstruct";
+import { memoize } from "@fullcalendar/common";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
+import type { HomeAssistant } from "../../../../types";
-import "../../../../components/entity/ha-entity-attribute-picker";
+import type { WeatherForecastCardConfig } from "../../cards/types";
-import "../../../../components/entity/ha-entity-picker";
+import type { LovelaceCardEditor } from "../../types";
-import "../../../../components/ha-formfield";
-import "../../../../components/ha-radio";
-import { HomeAssistant } from "../../../../types";
-import { WeatherForecastCardConfig } from "../../cards/types";
-import "../../components/hui-theme-select-editor";
-import { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
-import { configElementStyle } from "./config-elements-style";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { UNAVAILABLE } from "../../../../data/entity";
-import { WeatherEntity } from "../../../../data/weather";
+import type { WeatherEntity } from "../../../../data/weather";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
+import type { HaFormSchema } from "../../../../components/ha-form/types";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -33,8 +29,6 @@ const cardConfigStruct = assign(
   })
 );
 
-const includeDomains = ["weather"];
-
 @customElement("hui-weather-forecast-card-editor")
 export class HuiWeatherForecastCardEditor
   extends LitElement
@@ -61,30 +55,6 @@ export class HuiWeatherForecastCardEditor
     }
   }
 
-  get _entity(): string {
-    return this._config!.entity || "";
-  }
-
-  get _name(): string {
-    return this._config!.name || "";
-  }
-
-  get _theme(): string {
-    return this._config!.theme || "";
-  }
-
-  get _show_current(): boolean {
-    return this._config!.show_current ?? true;
-  }
-
-  get _show_forecast(): boolean {
-    return this._config!.show_forecast ?? this._has_forecast === true;
-  }
-
-  get _secondary_info_attribute(): string {
-    return this._config!.secondary_info_attribute || "";
-  }
-
   get _has_forecast(): boolean | undefined {
     if (this.hass && this._config) {
       const stateObj = this.hass.states[this._config.entity] as WeatherEntity;
@@ -95,146 +65,134 @@ export class HuiWeatherForecastCardEditor
     return undefined;
   }
 
+  private _schema = memoize(
+    (
+      entity: string,
+      localize: LocalizeFunc,
+      hasForecast?: boolean
+    ): HaFormSchema[] => {
+      const schema: HaFormSchema[] = [
+        {
+          name: "entity",
+          required: true,
+          selector: { entity: { domain: "weather" } },
+        },
+        { name: "name", selector: { text: {} } },
+        {
+          name: "",
+          type: "grid",
+          schema: [
+            {
+              name: "secondary_info_attribute",
+              selector: { attribute: { entity_id: entity } },
+            },
+            { name: "theme", selector: { theme: {} } },
+          ],
+        },
+      ];
+      if (hasForecast) {
+        schema.push({
+          name: "forecast",
+          selector: {
+            select: {
+              options: [
+                {
+                  value: "show_both",
+                  label: localize(
+                    "ui.panel.lovelace.editor.card.weather-forecast.show_both"
+                  ),
+                },
+                {
+                  value: "show_current",
+                  label: localize(
+                    "ui.panel.lovelace.editor.card.weather-forecast.show_only_current"
+                  ),
+                },
+                {
+                  value: "show_forecast",
+                  label: localize(
+                    "ui.panel.lovelace.editor.card.weather-forecast.show_only_forecast"
+                  ),
+                },
+              ],
+            },
+          },
+        });
+      }
+      return schema;
+    }
+  );
+
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
+    const schema = this._schema(
+      this._config.entity,
+      this.hass.localize,
+      this._has_forecast
+    );
+
+    const data: WeatherForecastCardConfig = {
+      show_current: true,
+      show_forecast: this._has_forecast,
+      ...this._config,
+    };
+
+    data.forecast =
+      data.show_current && data.show_forecast
+        ? "show_both"
+        : data.show_current
+        ? "show_current"
+        : "show_forecast";
+
     return html`
-      <div class="card-config">
+      <ha-form
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .data=${data}
-            "ui.panel.lovelace.editor.card.generic.entity"
+        .schema=${schema}
-          )} (${this.hass.localize(
+        .computeLabel=${this._computeLabelCallback}
-            "ui.panel.lovelace.editor.card.config.required"
+        @value-changed=${this._valueChanged}
-          )})"
+      ></ha-form>
-          .hass=${this.hass}
-          .value=${this._entity}
-          .configValue=${"entity"}
-          .includeDomains=${includeDomains}
-          @change=${this._valueChanged}
-          allow-custom-entity
-        ></ha-entity-picker>
-        <div class="side-by-side">
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.name"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._name}
-            .configValue=${"name"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
-          <hui-theme-select-editor
-            .hass=${this.hass}
-            .value=${this._theme}
-            .configValue=${"theme"}
-            @value-changed=${this._valueChanged}
-          ></hui-theme-select-editor>
-          <ha-entity-attribute-picker
-            .hass=${this.hass}
-            .entityId=${this._entity}
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.secondary_info_attribute"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._secondary_info_attribute}
-            .configValue=${"secondary_info_attribute"}
-            @value-changed=${this._valueChanged}
-          ></ha-entity-attribute-picker>
-        </div>
-        <div class="side-by-side">
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.weather-forecast.show_both"
-            )}
-            .dir=${computeRTLDirection(this.hass)}
-          >
-            <ha-radio
-              .disabled=${this._has_forecast === false}
-              .checked=${this._has_forecast === true &&
-              this._show_current &&
-              this._show_forecast}
-              .configValue=${"show_both"}
-              @change=${this._valueChanged}
-            ></ha-radio
-          ></ha-formfield>
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.weather-forecast.show_only_current"
-            )}
-            .dir=${computeRTLDirection(this.hass)}
-          >
-            <ha-radio
-              .disabled=${this._has_forecast === false}
-              .checked=${this._has_forecast === false ||
-              (this._show_current && !this._show_forecast)}
-              .configValue=${"show_current"}
-              @change=${this._valueChanged}
-            ></ha-radio
-          ></ha-formfield>
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.weather-forecast.show_only_forecast"
-            )}
-            .dir=${computeRTLDirection(this.hass)}
-          >
-            <ha-radio
-              .disabled=${this._has_forecast === false}
-              .checked=${this._has_forecast === true &&
-              !this._show_current &&
-              this._show_forecast}
-              .configValue=${"show_forecast"}
-              @change=${this._valueChanged}
-            ></ha-radio
-          ></ha-formfield>
-        </div>
-      </div>
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: CustomEvent): void {
-    if (!this._config || !this.hass) {
+    const config = ev.detail.value;
-      return;
+    if (config.forecast === "show_both") {
+      config.show_current = true;
+      config.show_forecast = true;
+    } else if (config.forecast === "show_current") {
+      config.show_current = true;
+      config.show_forecast = false;
+    } else {
+      config.show_current = false;
+      config.show_forecast = true;
     }
-    const target = ev.currentTarget! as EditorTarget;
 
-    if (this[`_${target.configValue}`] === target.value) {
+    delete config.forecast;
-      return;
+    fireEvent(this, "config-changed", { config });
-    }
-    if (target.configValue) {
-      if (target.configValue.startsWith("show_")) {
-        this._config = { ...this._config };
-        if (target.configValue === "show_both") {
-          /* delete since true is default */
-          delete this._config.show_current;
-          delete this._config.show_forecast;
-        } else if (target.configValue === "show_current") {
-          delete this._config.show_current;
-          this._config.show_forecast = false;
-        } else if (target.configValue === "show_forecast") {
-          delete this._config.show_forecast;
-          this._config.show_current = false;
-        }
-      } else if (target.value === "") {
-        this._config = { ...this._config };
-        delete this._config[target.configValue!];
-      } else {
-        this._config = {
-          ...this._config,
-          [target.configValue!]:
-            target.checked !== undefined ? target.checked : target.value,
-        };
-      }
-    }
-    fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResultGroup {
+  private _computeLabelCallback = (schema: HaFormSchema) => {
-    return configElementStyle;
+    if (schema.name === "entity") {
-  }
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.entity"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.required"
+      )})`;
+    }
+
+    return (
+      this.hass!.localize(
+        `ui.panel.lovelace.editor.card.generic.${schema.name}`
+      ) ||
+      this.hass!.localize(
+        `ui.panel.lovelace.editor.card.weather_forecast.${schema.name}`
+      )
+    );
+  };
 }
 
 declare global {