diff --git a/src/panels/lovelace/editor/config-elements/elements/hui-image-element-editor.ts b/src/panels/lovelace/editor/config-elements/elements/hui-image-element-editor.ts index 092f26456e..3533604437 100644 --- a/src/panels/lovelace/editor/config-elements/elements/hui-image-element-editor.ts +++ b/src/panels/lovelace/editor/config-elements/elements/hui-image-element-editor.ts @@ -1,7 +1,9 @@ +import memoizeOne from "memoize-one"; import { mdiGestureTap } from "@mdi/js"; import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { any, assert, literal, object, optional, string } from "superstruct"; +import type { LocalizeFunc } from "../../../../../common/translations/localize"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-form/ha-form"; import type { SchemaUnion } from "../../../../../components/ha-form/types"; @@ -27,61 +29,6 @@ const imageElementConfigStruct = object({ aspect_ratio: optional(string()), }); -const SCHEMA = [ - { name: "entity", selector: { entity: {} } }, - { name: "title", selector: { text: {} } }, - { - name: "interactions", - type: "expandable", - flatten: true, - iconPath: mdiGestureTap, - schema: [ - { - name: "tap_action", - selector: { - ui_action: { - default_action: "more-info", - }, - }, - }, - { - name: "hold_action", - selector: { - ui_action: { - default_action: "more-info", - }, - }, - }, - { - name: "", - type: "optional_actions", - flatten: true, - schema: [ - { - name: "double_tap_action", - selector: { - ui_action: { - default_action: "none", - }, - }, - }, - ], - }, - ], - }, - { name: "image", selector: { image: {} } }, - { name: "camera_image", selector: { entity: { domain: "camera" } } }, - { - name: "camera_view", - selector: { select: { options: ["auto", "live"] } }, - }, - { name: "state_image", selector: { object: {} } }, - { name: "filter", selector: { text: {} } }, - { name: "state_filter", selector: { object: {} } }, - { name: "aspect_ratio", selector: { text: {} } }, - { name: "style", selector: { object: {} } }, -] as const; - @customElement("hui-image-element-editor") export class HuiImageElementEditor extends LitElement @@ -96,6 +43,74 @@ export class HuiImageElementEditor this._config = config; } + private _schema = memoizeOne( + (localize: LocalizeFunc) => + [ + { name: "entity", selector: { entity: {} } }, + { name: "title", selector: { text: {} } }, + { + name: "interactions", + type: "expandable", + flatten: true, + iconPath: mdiGestureTap, + schema: [ + { + name: "tap_action", + selector: { + ui_action: { + default_action: "more-info", + }, + }, + }, + { + name: "hold_action", + selector: { + ui_action: { + default_action: "more-info", + }, + }, + }, + { + name: "", + type: "optional_actions", + flatten: true, + schema: [ + { + name: "double_tap_action", + selector: { + ui_action: { + default_action: "none", + }, + }, + }, + ], + }, + ], + }, + { name: "image", selector: { image: {} } }, + { name: "camera_image", selector: { entity: { domain: "camera" } } }, + { + name: "camera_view", + selector: { + select: { + options: ["auto", "live"].map((value) => ({ + value, + label: localize( + `ui.panel.lovelace.editor.card.generic.camera_view_options.${value}` + ), + })), + mode: "dropdown", + }, + }, + }, + { name: "state_image", selector: { object: {} } }, + { name: "filter", selector: { text: {} } }, + { name: "state_filter", selector: { object: {} } }, + { name: "aspect_ratio", selector: { text: {} } }, + { name: "style", selector: { object: {} } }, + ] as const + ); + protected render() { if (!this.hass || !this._config) { return nothing; @@ -105,7 +120,7 @@ export class HuiImageElementEditor @@ -116,7 +131,9 @@ export class HuiImageElementEditor fireEvent(this, "config-changed", { config: ev.detail.value }); } - private _computeLabelCallback = (schema: SchemaUnion) => + private _computeLabelCallback = ( + schema: SchemaUnion> + ) => this.hass!.localize( `ui.panel.lovelace.editor.card.generic.${schema.name}` ) || diff --git a/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts index d73fe9ecd2..7248d9fdc3 100644 --- a/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts @@ -25,6 +25,7 @@ import { computeDomain } from "../../../../common/entity/compute_domain"; import { caseInsensitiveStringCompare } from "../../../../common/string/compare"; import type { SelectOption } from "../../../../data/selector"; import { getSensorNumericDeviceClasses } from "../../../../data/sensor"; +import type { LocalizeFunc } from "../../../../common/translations/localize"; const cardConfigStruct = assign( baseLovelaceCardConfig, @@ -53,6 +54,7 @@ export class HuiAreaCardEditor private _schema = memoizeOne( ( + localize: LocalizeFunc, showCamera: boolean, binaryClasses: SelectOption[], sensorClasses: SelectOption[] @@ -64,7 +66,17 @@ export class HuiAreaCardEditor ? ([ { name: "camera_view", - selector: { select: { options: ["auto", "live"] } }, + selector: { + select: { + options: ["auto", "live"].map((value) => ({ + value, + label: localize( + `ui.panel.lovelace.editor.card.generic.camera_view_options.${value}` + ), + })), + mode: "dropdown", + }, + }, }, ] as const) : []), @@ -212,6 +224,7 @@ export class HuiAreaCardEditor ); const schema = this._schema( + this.hass.localize, this._config.show_camera || false, binarySelectOptions, sensorSelectOptions diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts index 6e1f761f30..7167e6c02e 100644 --- a/src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts @@ -1,3 +1,4 @@ +import memoizeOne from "memoize-one"; import type { CSSResultGroup } from "lit"; import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -11,7 +12,6 @@ import { string, type, } from "superstruct"; -import memoizeOne from "memoize-one"; import type { HASSDomEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-card"; @@ -84,7 +84,17 @@ export class HuiPictureElementsCardEditor }, { name: "camera_view", - selector: { select: { options: ["auto", "live"] } }, + selector: { + select: { + options: ["auto", "live"].map((value) => ({ + value, + label: localize( + `ui.panel.lovelace.editor.card.generic.camera_view_options.${value}` + ), + })), + mode: "dropdown", + }, + }, }, { name: "theme", selector: { theme: {} } }, { name: "state_filter", selector: { object: {} } }, diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts index 5fbd83db4e..c827a48ed3 100644 --- a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts @@ -1,8 +1,8 @@ +import memoizeOne from "memoize-one"; import { mdiGestureTap } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; -import memoizeOne from "memoize-one"; import { assert, assign, 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 53cf5fd8b0..3afa9250a2 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 @@ -173,13 +173,11 @@ export class HuiPictureGlanceCardEditor const data = { camera_view: "auto", fit_mode: "cover", ...this._config }; - const schema = this._schema(this.hass.localize); - return html`