History Graph Editor to ha form

src/data/selector.ts

@@ -87,8 +87,8 @@ export interface TargetSelector {
 
 export interface NumberSelector {
   number: {
-    min: number;
-    max: number;
+    min?: number;
+    max?: number;
     step?: number;
     mode?: "box" | "slider";
     unit_of_measurement?: string;

src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts

@@ -1,5 +1,5 @@
-import "@polymer/paper-input/paper-input";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import "../../../../components/ha-form/ha-form";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import {
   array,
@@ -11,16 +11,15 @@ import {
   assign,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { HomeAssistant } from "../../../../types";
-import { HistoryGraphCardConfig } from "../../cards/types";
+import type { HomeAssistant } from "../../../../types";
+import type { HistoryGraphCardConfig } from "../../cards/types";
 import "../../components/hui-entity-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 { entitiesConfigStruct } from "../structs/entities-struct";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
-import { configElementStyle } from "./config-elements-style";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import type { HaFormSchema } from "../../../../components/ha-form/types";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -32,6 +31,21 @@ const cardConfigStruct = assign(
   })
 );
 
+const SCHEMA: HaFormSchema[] = [
+  { name: "title", selector: { text: {} } },
+  {
+    name: "",
+    type: "grid",
+    schema: [
+      { name: "hours_to_show", selector: { number: { min: 1, mode: "box" } } },
+      {
+        name: "refresh_interval",
+        selector: { number: { min: 1, mode: "box" } },
+      },
+    ],
+  },
+];
+
 @customElement("hui-history-graph-card-editor")
 export class HuiHistoryGraphCardEditor
   extends LitElement
@@ -49,104 +63,48 @@ export class HuiHistoryGraphCardEditor
     this._configEntities = processEditorEntities(config.entities);
   }
 
-  get _title(): string {
-    return this._config!.title || "";
-  }
-
-  get _hours_to_show(): number {
-    return this._config!.hours_to_show || 24;
-  }
-
-  get _refresh_interval(): number {
-    return this._config!.refresh_interval || 0;
-  }
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
     return html`
-      <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>
-        <div class="side-by-side">
-          <paper-input
-            type="number"
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.hours_to_show"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._hours_to_show}
-            min="1"
-            .configValue=${"hours_to_show"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
-          <paper-input
-            type="number"
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.refresh_interval"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._refresh_interval}
-            .configValue=${"refresh_interval"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
-        </div>
-        <hui-entity-editor
-          .hass=${this.hass}
-          .entities=${this._configEntities}
-          @entities-changed=${this._valueChanged}
-        ></hui-entity-editor>
-      </div>
+      <ha-form
+        .hass=${this.hass}
+        .data=${this._config}
+        .schema=${SCHEMA}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
+      <hui-entity-editor
+        .hass=${this.hass}
+        .entities=${this._configEntities}
+        @entities-changed=${this._entitiesChanged}
+      ></hui-entity-editor>
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
-    if (!this._config || !this.hass) {
-      return;
-    }
-    const target = ev.target! as EditorTarget;
+  private _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
+  }
 
-    if (!ev.detail && this[`_${target.configValue}`] === target.value) {
-      return;
-    }
+  private _entitiesChanged(ev: CustomEvent): void {
+    let config = this._config!;
 
-    if (ev.detail && ev.detail.entities) {
-      this._config = { ...this._config, entities: ev.detail.entities };
-      this._configEntities = processEditorEntities(this._config.entities);
-    } else if (target.configValue) {
-      if (target.value === "") {
-        this._config = { ...this._config };
-        delete this._config[target.configValue!];
-      } else {
-        let value: any = target.value;
-        if (target.type === "number") {
-          value = Number(value);
-        }
-        this._config = {
-          ...this._config,
-          [target.configValue!]: value,
-        };
-      }
-    }
+    config = { ...config, entities: ev.detail.entities };
+    this._configEntities = processEditorEntities(config.entities);
 
-    fireEvent(this, "config-changed", { config: this._config });
+    fireEvent(this, "config-changed", { config });
   }
 
-  static get styles(): CSSResultGroup {
-    return configElementStyle;
-  }
+  private _computeLabelCallback = (schema: HaFormSchema) =>
+    this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
+
+  static styles: CSSResultGroup = css`
+    ha-form {
+      margin-bottom: 24px;
+    }
+  `;
 }
 
 declare global {