diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts index 62fde8dd7f..adcd07a57e 100644 --- a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts +++ b/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 { - 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` +
- - - -
- - ${views.map( - (view) => - html`${view} ` - )} - - -
-
-
`; } 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 {