diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts index ce8f41e531..dbfc55d6de 100644 --- a/src/panels/lovelace/cards/hui-tile-card.ts +++ b/src/panels/lovelace/cards/hui-tile-card.ts @@ -29,10 +29,14 @@ import { actionHandler } from "../common/directives/action-handler-directive"; import { findEntities } from "../common/find-entities"; import { handleAction } from "../common/handle-action"; import "../components/hui-timestamp-display"; -import { createTileExtraElement } from "../create-element/create-tile-extra-element"; -import { supportsTileExtra } from "../tile-extra/tile-extras"; -import { LovelaceTileExtraConfig } from "../tile-extra/types"; -import { LovelaceCard, LovelaceCardEditor, LovelaceTileExtra } from "../types"; +import { createTileFeatureElement } from "../create-element/create-tile-feature-element"; +import { supportsTileFeature } from "../tile-features/tile-features"; +import { LovelaceTileFeatureConfig } from "../tile-features/types"; +import { + LovelaceCard, + LovelaceCardEditor, + LovelaceTileFeature, +} from "../types"; import { HuiErrorCard } from "./hui-error-card"; import { computeTileBadge } from "./tile/badges/tile-badge"; import { ThermostatCardConfig, TileCardConfig } from "./types"; @@ -242,8 +246,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard { : undefined; const badge = computeTileBadge(stateObj, this.hass); - const supportedExtras = this._config.extras?.filter((extra) => - supportsTileExtra(stateObj, extra.type) + const supportedFeatures = this._config.features?.filter((feature) => + supportsTileFeature(stateObj, feature.type) ); return html` @@ -292,11 +296,11 @@ export class HuiTileCard extends LitElement implements LovelaceCard { .actionHandler=${actionHandler()} > - ${supportedExtras?.length + ${supportedFeatures?.length ? html` -
- ${supportedExtras.map((extraConf) => - this.renderExtra(extraConf, stateObj) +
+ ${supportedFeatures.map((featureConf) => + this.renderFeature(featureConf, stateObj) )}
` @@ -305,33 +309,33 @@ export class HuiTileCard extends LitElement implements LovelaceCard { `; } - private _extrasElements = new WeakMap< - LovelaceTileExtraConfig, - LovelaceTileExtra | HuiErrorCard + private _featuresElements = new WeakMap< + LovelaceTileFeatureConfig, + LovelaceTileFeature | HuiErrorCard >(); - private _getExtraElement(extra: LovelaceTileExtraConfig) { - if (!this._extrasElements.has(extra)) { - const element = createTileExtraElement(extra); - this._extrasElements.set(extra, element); + private _getFeatureElement(feature: LovelaceTileFeatureConfig) { + if (!this._featuresElements.has(feature)) { + const element = createTileFeatureElement(feature); + this._featuresElements.set(feature, element); return element; } - return this._extrasElements.get(extra)!; + return this._featuresElements.get(feature)!; } - private renderExtra( - extraConf: LovelaceTileExtraConfig, + private renderFeature( + featureConf: LovelaceTileFeatureConfig, stateObj: HassEntity ): TemplateResult { - const element = this._getExtraElement(extraConf); + const element = this._getFeatureElement(featureConf); if (this.hass) { element.hass = this.hass; - (element as LovelaceTileExtra).stateObj = stateObj; + (element as LovelaceTileFeature).stateObj = stateObj; } - return html`
${element}
`; + return html`
${element}
`; } static get styles(): CSSResultGroup { diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index b7dc898902..5bde49b650 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -11,7 +11,7 @@ import { } from "../entity-rows/types"; import { LovelaceHeaderFooterConfig } from "../header-footer/types"; import { HaDurationData } from "../../../components/ha-duration-input"; -import { LovelaceTileExtraConfig } from "../tile-extra/types"; +import { LovelaceTileFeatureConfig } from "../tile-features/types"; export interface AlarmPanelCardConfig extends LovelaceCardConfig { entity: string; @@ -502,5 +502,5 @@ export interface TileCardConfig extends LovelaceCardConfig { show_entity_picture?: string; tap_action?: ActionConfig; icon_tap_action?: ActionConfig; - extras?: LovelaceTileExtraConfig[]; + features?: LovelaceTileFeatureConfig[]; } diff --git a/src/panels/lovelace/create-element/create-element-base.ts b/src/panels/lovelace/create-element/create-element-base.ts index df2db56ba5..8a1482e43e 100644 --- a/src/panels/lovelace/create-element/create-element-base.ts +++ b/src/panels/lovelace/create-element/create-element-base.ts @@ -11,7 +11,7 @@ import type { ErrorCardConfig } from "../cards/types"; import { LovelaceElement, LovelaceElementConfig } from "../elements/types"; import { LovelaceRow, LovelaceRowConfig } from "../entity-rows/types"; import { LovelaceHeaderFooterConfig } from "../header-footer/types"; -import { LovelaceTileExtraConfig } from "../tile-extra/types"; +import { LovelaceTileFeatureConfig } from "../tile-features/types"; import { LovelaceBadge, LovelaceCard, @@ -19,8 +19,8 @@ import { LovelaceHeaderFooter, LovelaceHeaderFooterConstructor, LovelaceRowConstructor, - LovelaceTileExtra, - LovelaceTileExtraConstructor, + LovelaceTileFeature, + LovelaceTileFeatureConstructor, } from "../types"; const TIMEOUT = 2000; @@ -56,10 +56,10 @@ interface CreateElementConfigTypes { element: LovelaceViewElement; constructor: unknown; }; - "tile-extra": { - config: LovelaceTileExtraConfig; - element: LovelaceTileExtra; - constructor: LovelaceTileExtraConstructor; + "tile-feature": { + config: LovelaceTileFeatureConfig; + element: LovelaceTileFeature; + constructor: LovelaceTileFeatureConstructor; }; } diff --git a/src/panels/lovelace/create-element/create-tile-extra-element.ts b/src/panels/lovelace/create-element/create-tile-extra-element.ts deleted file mode 100644 index 25321d149f..0000000000 --- a/src/panels/lovelace/create-element/create-tile-extra-element.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { LovelaceTileExtraConfig } from "../tile-extra/types"; -import { - createLovelaceElement, - getLovelaceElementClass, -} from "./create-element-base"; -import "../tile-extra/hui-cover-open-close-tile-extra"; -import "../tile-extra/hui-cover-tilt-tile-extra"; -import "../tile-extra/hui-light-brightness-tile-extra"; -import "../tile-extra/hui-vacuum-commands-tile-extra"; - -const TYPES: Set = new Set([ - "cover-open-close", - "cover-tilt", - "light-brightness", - "vacuum-commands", -]); - -export const createTileExtraElement = (config: LovelaceTileExtraConfig) => - createLovelaceElement("tile-extra", config, TYPES); - -export const getTileExtraElementClass = (type: string) => - getLovelaceElementClass(type, "tile-extra", TYPES); diff --git a/src/panels/lovelace/create-element/create-tile-feature-element.ts b/src/panels/lovelace/create-element/create-tile-feature-element.ts new file mode 100644 index 0000000000..dd91e8488e --- /dev/null +++ b/src/panels/lovelace/create-element/create-tile-feature-element.ts @@ -0,0 +1,22 @@ +import { LovelaceTileFeatureConfig } from "../tile-features/types"; +import { + createLovelaceElement, + getLovelaceElementClass, +} from "./create-element-base"; +import "../tile-features/hui-cover-open-close-tile-feature"; +import "../tile-features/hui-cover-tilt-tile-feature"; +import "../tile-features/hui-light-brightness-tile-feature"; +import "../tile-features/hui-vacuum-commands-tile-feature"; + +const TYPES: Set = new Set([ + "cover-open-close", + "cover-tilt", + "light-brightness", + "vacuum-commands", +]); + +export const createTileFeatureElement = (config: LovelaceTileFeatureConfig) => + createLovelaceElement("tile-feature", config, TYPES); + +export const getTileFeatureElementClass = (type: string) => + getLovelaceElementClass(type, "tile-feature", TYPES); diff --git a/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts index 7ac30fb4e6..ba9b383512 100644 --- a/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts @@ -21,16 +21,16 @@ import type { SchemaUnion } from "../../../../components/ha-form/types"; import type { HomeAssistant } from "../../../../types"; import type { TileCardConfig } from "../../cards/types"; import { - LovelaceTileExtraConfig, - LovelaceTileExtraContext, -} from "../../tile-extra/types"; + LovelaceTileFeatureConfig, + LovelaceTileFeatureContext, +} from "../../tile-features/types"; import type { LovelaceCardEditor } from "../../types"; import "../hui-sub-element-editor"; import { actionConfigStruct } from "../structs/action-struct"; import { baseLovelaceCardConfig } from "../structs/base-card-struct"; import { EditSubElementEvent, SubElementEditorConfig } from "../types"; import { configElementStyle } from "./config-elements-style"; -import "./hui-tile-card-extras-editor"; +import "./hui-tile-card-features-editor"; const cardConfigStruct = assign( baseLovelaceCardConfig, @@ -42,7 +42,7 @@ const cardConfigStruct = assign( show_entity_picture: optional(boolean()), tap_action: optional(actionConfigStruct), icon_tap_action: optional(actionConfigStruct), - extras: optional(array(any())), + features: optional(array(any())), }) ); @@ -133,7 +133,7 @@ export class HuiTileCardEditor ); private _context = memoizeOne( - (entity_id?: string): LovelaceTileExtraContext => ({ entity_id }) + (entity_id?: string): LovelaceTileFeatureContext => ({ entity_id }) ); protected render(): TemplateResult { @@ -172,13 +172,13 @@ export class HuiTileCardEditor .computeLabel=${this._computeLabelCallback} @value-changed=${this._valueChanged} > - + > `; } @@ -189,26 +189,26 @@ export class HuiTileCardEditor } const config: TileCardConfig = { - extras: this._config.extras, + features: this._config.features, ...ev.detail.value, }; fireEvent(this, "config-changed", { config }); } - private _extrasChanged(ev: CustomEvent) { + private _featuresChanged(ev: CustomEvent) { ev.stopPropagation(); if (!this._config || !this.hass) { return; } - const extras = ev.detail.extras as LovelaceTileExtraConfig[]; + const features = ev.detail.features as LovelaceTileFeatureConfig[]; const config: TileCardConfig = { ...this._config, - extras, + features, }; - if (extras.length === 0) { - delete config.extras; + if (features.length === 0) { + delete config.features; } fireEvent(this, "config-changed", { config }); @@ -222,18 +222,18 @@ export class HuiTileCardEditor const value = ev.detail.config; - const newConfigExtras = this._config!.extras - ? [...this._config!.extras] + const newConfigFeatures = this._config!.features + ? [...this._config!.features] : []; if (!value) { - newConfigExtras.splice(this._subElementEditorConfig!.index!, 1); + newConfigFeatures.splice(this._subElementEditorConfig!.index!, 1); this._goBack(); } else { - newConfigExtras[this._subElementEditorConfig!.index!] = value; + newConfigFeatures[this._subElementEditorConfig!.index!] = value; } - this._config = { ...this._config!, extras: newConfigExtras }; + this._config = { ...this._config!, features: newConfigFeatures }; this._subElementEditorConfig = { ...this._subElementEditorConfig!, diff --git a/src/panels/lovelace/editor/config-elements/hui-tile-card-extras-editor.ts b/src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts similarity index 59% rename from src/panels/lovelace/editor/config-elements/hui-tile-card-extras-editor.ts rename to src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts index 24e75cf2aa..972db69887 100644 --- a/src/panels/lovelace/editor/config-elements/hui-tile-card-extras-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts @@ -22,14 +22,14 @@ import { SortableInstance, } from "../../../../resources/sortable.ondemand"; import { HomeAssistant } from "../../../../types"; -import { getTileExtraElementClass } from "../../create-element/create-tile-extra-element"; +import { getTileFeatureElementClass } from "../../create-element/create-tile-feature-element"; import { - isTileExtraEditable, - supportsTileExtra, -} from "../../tile-extra/tile-extras"; -import { LovelaceTileExtraConfig } from "../../tile-extra/types"; + isTileFeatureEditable, + supportsTileFeature, +} from "../../tile-features/tile-features"; +import { LovelaceTileFeatureConfig } from "../../tile-features/types"; -const EXTRAS_TYPE: LovelaceTileExtraConfig["type"][] = [ +const FEATURES_TYPE: LovelaceTileFeatureConfig["type"][] = [ "cover-open-close", "cover-tilt", "light-brightness", @@ -38,24 +38,24 @@ const EXTRAS_TYPE: LovelaceTileExtraConfig["type"][] = [ declare global { interface HASSDomEvents { - "extras-changed": { - extras: LovelaceTileExtraConfig[]; + "features-changed": { + features: LovelaceTileFeatureConfig[]; }; } } -@customElement("hui-tile-card-extras-editor") -export class HuiTileCardExtrasEditor extends LitElement { +@customElement("hui-tile-card-features-editor") +export class HuiTileCardFeaturesEditor extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public stateObj?: HassEntity; @property({ attribute: false }) - public extras?: LovelaceTileExtraConfig[]; + public features?: LovelaceTileFeatureConfig[]; @property() public label?: string; - private _extraKeys = new WeakMap(); + private _featuresKeys = new WeakMap(); private _sortable?: SortableInstance; @@ -63,24 +63,24 @@ export class HuiTileCardExtrasEditor extends LitElement { this._destroySortable(); } - private _getKey(extra: LovelaceTileExtraConfig) { - if (!this._extraKeys.has(extra)) { - this._extraKeys.set(extra, Math.random().toString()); + private _getKey(feature: LovelaceTileFeatureConfig) { + if (!this._featuresKeys.has(feature)) { + this._featuresKeys.set(feature, Math.random().toString()); } - return this._extraKeys.get(extra)!; + return this._featuresKeys.get(feature)!; } - private get _supportedExtraTypes() { + private get _supportedFeatureTypes() { if (!this.stateObj) return []; - return EXTRAS_TYPE.filter((type) => - supportsTileExtra(this.stateObj!, type) + return FEATURES_TYPE.filter((type) => + supportsTileFeature(this.stateObj!, type) ); } protected render(): TemplateResult { - if (!this.extras || !this.hass) { + if (!this.features || !this.hass) { return html``; } @@ -89,93 +89,94 @@ export class HuiTileCardExtrasEditor extends LitElement {

${this.hass!.localize( - "ui.panel.lovelace.editor.card.tile.extras.name" + "ui.panel.lovelace.editor.card.tile.features.name" )}

- ${this._supportedExtraTypes.length === 0 && this.extras.length === 0 + ${this._supportedFeatureTypes.length === 0 && + this.features.length === 0 ? html` ${this.hass!.localize( - "ui.panel.lovelace.editor.card.tile.extras.no_compatible_available" + "ui.panel.lovelace.editor.card.tile.features.no_compatible_available" )} ` : null} -
+
${repeat( - this.extras, - (extraConf) => this._getKey(extraConf), - (extraConf, index) => html` -
+ this.features, + (featureConf) => this._getKey(featureConf), + (featureConf, index) => html` +
-
+
${this.hass!.localize( - `ui.panel.lovelace.editor.card.tile.extras.types.${extraConf.type}.label` + `ui.panel.lovelace.editor.card.tile.features.types.${featureConf.type}.label` )} ${this.stateObj && - !supportsTileExtra(this.stateObj, extraConf.type) + !supportsTileFeature(this.stateObj, featureConf.type) ? html` ${this.hass!.localize( - "ui.panel.lovelace.editor.card.tile.extras.not_compatible" + "ui.panel.lovelace.editor.card.tile.features.not_compatible" )} ` : null}
- ${isTileExtraEditable(extraConf.type) + ${isTileFeatureEditable(featureConf.type) ? html`` : null}
` )}
- ${this._supportedExtraTypes.length > 0 + ${this._supportedFeatureTypes.length > 0 ? html` - ${this._supportedExtraTypes.map( - (extraType) => html` + ${this._supportedFeatureTypes.map( + (featureType) => html` ${this.hass!.localize( - `ui.panel.lovelace.editor.card.tile.extras.types.${extraType}.label` + `ui.panel.lovelace.editor.card.tile.features.types.${featureType}.label` )} ` )} @@ -193,24 +194,27 @@ export class HuiTileCardExtrasEditor extends LitElement { private async _createSortable() { const Sortable = await loadSortable(); - this._sortable = new Sortable(this.shadowRoot!.querySelector(".extras")!, { - animation: 150, - fallbackClass: "sortable-fallback", - handle: ".handle", - onChoose: (evt: SortableEvent) => { - (evt.item as any).placeholder = - document.createComment("sort-placeholder"); - evt.item.after((evt.item as any).placeholder); - }, - onEnd: (evt: SortableEvent) => { - // put back in original location - if ((evt.item as any).placeholder) { - (evt.item as any).placeholder.replaceWith(evt.item); - delete (evt.item as any).placeholder; - } - this._rowMoved(evt); - }, - }); + this._sortable = new Sortable( + this.shadowRoot!.querySelector(".features")!, + { + animation: 150, + fallbackClass: "sortable-fallback", + handle: ".handle", + onChoose: (evt: SortableEvent) => { + (evt.item as any).placeholder = + document.createComment("sort-placeholder"); + evt.item.after((evt.item as any).placeholder); + }, + onEnd: (evt: SortableEvent) => { + // put back in original location + if ((evt.item as any).placeholder) { + (evt.item as any).placeholder.replaceWith(evt.item); + delete (evt.item as any).placeholder; + } + this._rowMoved(evt); + }, + } + ); } private _destroySortable() { @@ -218,22 +222,22 @@ export class HuiTileCardExtrasEditor extends LitElement { this._sortable = undefined; } - private async _addExtra(ev: CustomEvent): Promise { + private async _addFeature(ev: CustomEvent): Promise { const index = ev.detail.index as number; if (index == null) return; - const value = this._supportedExtraTypes[index]; - const elClass = await getTileExtraElementClass(value); + const value = this._supportedFeatureTypes[index]; + const elClass = await getTileFeatureElementClass(value); - let newExtra: LovelaceTileExtraConfig; + let newFeature: LovelaceTileFeatureConfig; if (elClass && elClass.getStubConfig) { - newExtra = await elClass.getStubConfig(this.hass!, this.stateObj); + newFeature = await elClass.getStubConfig(this.hass!, this.stateObj); } else { - newExtra = { type: value } as LovelaceTileExtraConfig; + newFeature = { type: value } as LovelaceTileFeatureConfig; } - const newConfigExtra = this.extras!.concat(newExtra); - fireEvent(this, "extras-changed", { extras: newConfigExtra }); + const newConfigFeature = this.features!.concat(newFeature); + fireEvent(this, "features-changed", { features: newConfigFeature }); } private _rowMoved(ev: SortableEvent): void { @@ -241,29 +245,29 @@ export class HuiTileCardExtrasEditor extends LitElement { return; } - const newExtras = this.extras!.concat(); + const newFeatures = this.features!.concat(); - newExtras.splice(ev.newIndex!, 0, newExtras.splice(ev.oldIndex!, 1)[0]); + newFeatures.splice(ev.newIndex!, 0, newFeatures.splice(ev.oldIndex!, 1)[0]); - fireEvent(this, "extras-changed", { extras: newExtras }); + fireEvent(this, "features-changed", { features: newFeatures }); } - private _removeExtra(ev: CustomEvent): void { + private _removeFeature(ev: CustomEvent): void { const index = (ev.currentTarget as any).index; - const newExtras = this.extras!.concat(); + const newfeatures = this.features!.concat(); - newExtras.splice(index, 1); + newfeatures.splice(index, 1); - fireEvent(this, "extras-changed", { extras: newExtras }); + fireEvent(this, "features-changed", { features: newfeatures }); } - private _editExtra(ev: CustomEvent): void { + private _editFeature(ev: CustomEvent): void { const index = (ev.currentTarget as any).index; fireEvent(this, "edit-detail-element", { subElementConfig: { index, - type: "tile-extra", - elementConfig: this.extras![index], + type: "tile-feature", + elementConfig: this.features![index], }, }); } @@ -296,22 +300,22 @@ export class HuiTileCardExtrasEditor extends LitElement { ha-button-menu { margin-top: 8px; } - .extra { + .feature { display: flex; align-items: center; } - .extra .handle { + .feature .handle { padding-right: 8px; cursor: move; padding-inline-end: 8px; padding-inline-start: initial; direction: var(--direction); } - .extra .handle > * { + .feature .handle > * { pointer-events: none; } - .extra-content { + .feature-content { height: 60px; font-size: 16px; display: flex; @@ -320,7 +324,7 @@ export class HuiTileCardExtrasEditor extends LitElement { flex-grow: 1; } - .extra-content div { + .feature-content div { display: flex; flex-direction: column; } @@ -342,6 +346,6 @@ export class HuiTileCardExtrasEditor extends LitElement { declare global { interface HTMLElementTagNameMap { - "hui-tile-card-extras-editor": HuiTileCardExtrasEditor; + "hui-tile-card-features-editor": HuiTileCardFeaturesEditor; } } diff --git a/src/panels/lovelace/editor/config-elements/hui-vacuum-commands-tile-extra-editor.ts b/src/panels/lovelace/editor/config-elements/hui-vacuum-commands-tile-feature-editor.ts similarity index 71% rename from src/panels/lovelace/editor/config-elements/hui-vacuum-commands-tile-extra-editor.ts rename to src/panels/lovelace/editor/config-elements/hui-vacuum-commands-tile-feature-editor.ts index 8613ac9dc9..982b48ea4c 100644 --- a/src/panels/lovelace/editor/config-elements/hui-vacuum-commands-tile-extra-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-vacuum-commands-tile-feature-editor.ts @@ -6,26 +6,26 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import type { LocalizeFunc } from "../../../../common/translations/localize"; import type { SchemaUnion } from "../../../../components/ha-form/types"; import type { HomeAssistant } from "../../../../types"; -import { supportsVacuumCommand } from "../../tile-extra/hui-vacuum-commands-tile-extra"; +import { supportsVacuumCommand } from "../../tile-features/hui-vacuum-commands-tile-feature"; import { - LovelaceTileExtraContext, - VacuumCommandsTileExtraConfig, + LovelaceTileFeatureContext, + VacuumCommandsTileFeatureConfig, VACUUM_COMMANDS, -} from "../../tile-extra/types"; -import type { LovelaceTileExtraEditor } from "../../types"; +} from "../../tile-features/types"; +import type { LovelaceTileFeatureEditor } from "../../types"; -@customElement("hui-vacuum-commands-tile-extra-editor") -export class HuiVacuumCommandsTileExtraEditor +@customElement("hui-vacuum-commands-tile-feature-editor") +export class HuiVacuumCommandsTileFeatureEditor extends LitElement - implements LovelaceTileExtraEditor + implements LovelaceTileFeatureEditor { @property({ attribute: false }) public hass?: HomeAssistant; - @property({ attribute: false }) public context?: LovelaceTileExtraContext; + @property({ attribute: false }) public context?: LovelaceTileFeatureContext; - @state() private _config?: VacuumCommandsTileExtraConfig; + @state() private _config?: VacuumCommandsTileFeatureConfig; - public setConfig(config: VacuumCommandsTileExtraConfig): void { + public setConfig(config: VacuumCommandsTileFeatureConfig): void { this._config = config; } @@ -43,7 +43,7 @@ export class HuiVacuumCommandsTileExtraEditor ).map((command) => ({ value: command, label: `${localize( - `ui.panel.lovelace.editor.card.tile.extras.types.vacuum-commands.commands_list.${command}` + `ui.panel.lovelace.editor.card.tile.features.types.vacuum-commands.commands_list.${command}` )}`, })), }, @@ -84,7 +84,7 @@ export class HuiVacuumCommandsTileExtraEditor switch (schema.name) { case "commands": return this.hass!.localize( - `ui.panel.lovelace.editor.card.tile.extras.types.vacuum-commands.${schema.name}` + `ui.panel.lovelace.editor.card.tile.features.types.vacuum-commands.${schema.name}` ); default: return this.hass!.localize( @@ -96,6 +96,6 @@ export class HuiVacuumCommandsTileExtraEditor declare global { interface HTMLElementTagNameMap { - "hui-vacuum-commands-tile-extra-editor": HuiVacuumCommandsTileExtraEditor; + "hui-vacuum-commands-tile-feature-editor": HuiVacuumCommandsTileFeatureEditor; } } diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts index 7bf4a80c6d..b7b2dbf324 100644 --- a/src/panels/lovelace/editor/hui-element-editor.ts +++ b/src/panels/lovelace/editor/hui-element-editor.ts @@ -27,14 +27,14 @@ import type { LovelaceGenericElementEditor } from "../types"; import "./config-elements/hui-generic-entity-row-editor"; import { GUISupportError } from "./gui-support-error"; import { EditSubElementEvent, GUIModeChangedEvent } from "./types"; -import { LovelaceTileExtraConfig } from "../tile-extra/types"; +import { LovelaceTileFeatureConfig } from "../tile-features/types"; export interface ConfigChangedEvent { config: | LovelaceCardConfig | LovelaceRowConfig | LovelaceHeaderFooterConfig - | LovelaceTileExtraConfig; + | LovelaceTileFeatureConfig; error?: string; guiModeAvailable?: boolean; } @@ -53,7 +53,7 @@ export interface UIConfigChangedEvent extends Event { | LovelaceCardConfig | LovelaceRowConfig | LovelaceHeaderFooterConfig - | LovelaceTileExtraConfig; + | LovelaceTileFeatureConfig; }; } diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts index a8510541d6..b47953a33a 100644 --- a/src/panels/lovelace/editor/hui-sub-element-editor.ts +++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts @@ -10,7 +10,7 @@ import type { LovelaceHeaderFooterConfig } from "../header-footer/types"; import "./entity-row-editor/hui-row-element-editor"; import "./header-footer-editor/hui-header-footer-element-editor"; import type { HuiElementEditor } from "./hui-element-editor"; -import "./tile-extra/hui-tile-extra-element-editor"; +import "./tile-feature-editor/hui-tile-feature-element-editor"; import type { GUIModeChangedEvent, SubElementEditorConfig } from "./types"; declare global { @@ -84,16 +84,16 @@ export class HuiSubElementEditor extends LitElement { @GUImode-changed=${this._handleGUIModeChanged} > ` - : this.config.type === "tile-extra" + : this.config.type === "tile-feature" ? html` - + > ` : ""} `; diff --git a/src/panels/lovelace/editor/tile-extra/hui-tile-extra-element-editor.ts b/src/panels/lovelace/editor/tile-extra/hui-tile-extra-element-editor.ts deleted file mode 100644 index 95300a78d2..0000000000 --- a/src/panels/lovelace/editor/tile-extra/hui-tile-extra-element-editor.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { customElement } from "lit/decorators"; -import { getTileExtraElementClass } from "../../create-element/create-tile-extra-element"; -import { - LovelaceTileExtraConfig, - LovelaceTileExtraContext, -} from "../../tile-extra/types"; -import type { LovelaceTileExtraEditor } from "../../types"; -import { HuiElementEditor } from "../hui-element-editor"; - -@customElement("hui-tile-extra-element-editor") -export class HuiTileExtraElementEditor extends HuiElementEditor< - LovelaceTileExtraConfig, - LovelaceTileExtraContext -> { - protected async getConfigElement(): Promise< - LovelaceTileExtraEditor | undefined - > { - const elClass = await getTileExtraElementClass(this.configElementType!); - - // Check if a GUI editor exists - if (elClass && elClass.getConfigElement) { - return elClass.getConfigElement(); - } - - return undefined; - } -} - -declare global { - interface HTMLElementTagNameMap { - "hui-tile-extra-element-editor": HuiTileExtraElementEditor; - } -} diff --git a/src/panels/lovelace/editor/tile-feature-editor/hui-tile-feature-element-editor.ts b/src/panels/lovelace/editor/tile-feature-editor/hui-tile-feature-element-editor.ts new file mode 100644 index 0000000000..573d1e075c --- /dev/null +++ b/src/panels/lovelace/editor/tile-feature-editor/hui-tile-feature-element-editor.ts @@ -0,0 +1,33 @@ +import { customElement } from "lit/decorators"; +import { getTileFeatureElementClass } from "../../create-element/create-tile-feature-element"; +import { + LovelaceTileFeatureConfig, + LovelaceTileFeatureContext, +} from "../../tile-features/types"; +import type { LovelaceTileFeatureEditor } from "../../types"; +import { HuiElementEditor } from "../hui-element-editor"; + +@customElement("hui-tile-feature-element-editor") +export class HuiTileFeatureElementEditor extends HuiElementEditor< + LovelaceTileFeatureConfig, + LovelaceTileFeatureContext +> { + protected async getConfigElement(): Promise< + LovelaceTileFeatureEditor | undefined + > { + const elClass = await getTileFeatureElementClass(this.configElementType!); + + // Check if a GUI editor exists + if (elClass && elClass.getConfigElement) { + return elClass.getConfigElement(); + } + + return undefined; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-tile-feature-element-editor": HuiTileFeatureElementEditor; + } +} diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts index af2a62371c..b3f284cc52 100644 --- a/src/panels/lovelace/editor/types.ts +++ b/src/panels/lovelace/editor/types.ts @@ -6,7 +6,7 @@ import { } from "../../../data/lovelace"; import { EntityConfig, LovelaceRowConfig } from "../entity-rows/types"; import { LovelaceHeaderFooterConfig } from "../header-footer/types"; -import { LovelaceTileExtraConfig } from "../tile-extra/types"; +import { LovelaceTileFeatureConfig } from "../tile-features/types"; export interface YamlChangedEvent extends Event { detail: { @@ -78,8 +78,8 @@ export interface SubElementEditorConfig { elementConfig?: | LovelaceRowConfig | LovelaceHeaderFooterConfig - | LovelaceTileExtraConfig; - type: "header" | "footer" | "row" | "tile-extra"; + | LovelaceTileFeatureConfig; + type: "header" | "footer" | "row" | "tile-feature"; } export interface EditSubElementEvent { diff --git a/src/panels/lovelace/tile-extra/types.ts b/src/panels/lovelace/tile-extra/types.ts deleted file mode 100644 index 53d117f465..0000000000 --- a/src/panels/lovelace/tile-extra/types.ts +++ /dev/null @@ -1,36 +0,0 @@ -export interface CoverOpenCloseTileExtraConfig { - type: "cover-open-close"; -} - -export interface CoverTiltTileExtraConfig { - type: "cover-tilt"; -} - -export interface LightBrightnessTileExtraConfig { - type: "light-brightness"; -} - -export const VACUUM_COMMANDS = [ - "start_pause", - "stop", - "clean_spot", - "locate", - "return_home", -] as const; - -export type VacuumCommand = typeof VACUUM_COMMANDS[number]; - -export interface VacuumCommandsTileExtraConfig { - type: "vacuum-commands"; - commands?: VacuumCommand[]; -} - -export type LovelaceTileExtraConfig = - | CoverOpenCloseTileExtraConfig - | CoverTiltTileExtraConfig - | LightBrightnessTileExtraConfig - | VacuumCommandsTileExtraConfig; - -export type LovelaceTileExtraContext = { - entity_id?: string; -}; diff --git a/src/panels/lovelace/tile-extra/hui-cover-open-close-tile-extra.ts b/src/panels/lovelace/tile-features/hui-cover-open-close-tile-feature.ts similarity index 88% rename from src/panels/lovelace/tile-extra/hui-cover-open-close-tile-extra.ts rename to src/panels/lovelace/tile-features/hui-cover-open-close-tile-feature.ts index 2b2f2fd02e..0c64f461b1 100644 --- a/src/panels/lovelace/tile-extra/hui-cover-open-close-tile-extra.ts +++ b/src/panels/lovelace/tile-features/hui-cover-open-close-tile-feature.ts @@ -15,27 +15,27 @@ import { CoverEntityFeature, } from "../../../data/cover"; import { HomeAssistant } from "../../../types"; -import { LovelaceTileExtra } from "../types"; -import { CoverOpenCloseTileExtraConfig } from "./types"; +import { LovelaceTileFeature } from "../types"; +import { CoverOpenCloseTileFeatureConfig } from "./types"; -@customElement("hui-cover-open-close-tile-extra") -class HuiCoverOpenCloseTileExtra +@customElement("hui-cover-open-close-tile-feature") +class HuiCoverOpenCloseTileFeature extends LitElement - implements LovelaceTileExtra + implements LovelaceTileFeature { @property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public stateObj?: HassEntity; - @state() private _config?: CoverOpenCloseTileExtraConfig; + @state() private _config?: CoverOpenCloseTileFeatureConfig; - static getStubConfig(): CoverOpenCloseTileExtraConfig { + static getStubConfig(): CoverOpenCloseTileFeatureConfig { return { type: "cover-open-close", }; } - public setConfig(config: CoverOpenCloseTileExtraConfig): void { + public setConfig(config: CoverOpenCloseTileFeatureConfig): void { if (!config) { throw new Error("Invalid configuration"); } @@ -138,6 +138,6 @@ class HuiCoverOpenCloseTileExtra declare global { interface HTMLElementTagNameMap { - "hui-cover-open-close-tile-extra": HuiCoverOpenCloseTileExtra; + "hui-cover-open-close-tile-feature": HuiCoverOpenCloseTileFeature; } } diff --git a/src/panels/lovelace/tile-extra/hui-cover-tilt-tile-extra.ts b/src/panels/lovelace/tile-features/hui-cover-tilt-tile-feature.ts similarity index 88% rename from src/panels/lovelace/tile-extra/hui-cover-tilt-tile-extra.ts rename to src/panels/lovelace/tile-features/hui-cover-tilt-tile-feature.ts index af41d4c6a9..314184c854 100644 --- a/src/panels/lovelace/tile-extra/hui-cover-tilt-tile-extra.ts +++ b/src/panels/lovelace/tile-features/hui-cover-tilt-tile-feature.ts @@ -11,24 +11,27 @@ import { CoverEntityFeature, } from "../../../data/cover"; import { HomeAssistant } from "../../../types"; -import { LovelaceTileExtra } from "../types"; -import { CoverTiltTileExtraConfig } from "./types"; +import { LovelaceTileFeature } from "../types"; +import { CoverTiltTileFeatureConfig } from "./types"; -@customElement("hui-cover-tilt-tile-extra") -class HuiCoverTiltTileExtra extends LitElement implements LovelaceTileExtra { +@customElement("hui-cover-tilt-tile-feature") +class HuiCoverTiltTileFeature + extends LitElement + implements LovelaceTileFeature +{ @property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public stateObj?: HassEntity; - @state() private _config?: CoverTiltTileExtraConfig; + @state() private _config?: CoverTiltTileFeatureConfig; - static getStubConfig(): CoverTiltTileExtraConfig { + static getStubConfig(): CoverTiltTileFeatureConfig { return { type: "cover-tilt", }; } - public setConfig(config: CoverTiltTileExtraConfig): void { + public setConfig(config: CoverTiltTileFeatureConfig): void { if (!config) { throw new Error("Invalid configuration"); } @@ -127,6 +130,6 @@ class HuiCoverTiltTileExtra extends LitElement implements LovelaceTileExtra { declare global { interface HTMLElementTagNameMap { - "hui-cover-tilt-tile-extra": HuiCoverTiltTileExtra; + "hui-cover-tilt-tile-feature": HuiCoverTiltTileFeature; } } diff --git a/src/panels/lovelace/tile-extra/hui-light-brightness-tile-extra.ts b/src/panels/lovelace/tile-features/hui-light-brightness-tile-feature.ts similarity index 79% rename from src/panels/lovelace/tile-extra/hui-light-brightness-tile-extra.ts rename to src/panels/lovelace/tile-features/hui-light-brightness-tile-feature.ts index c63098e20d..657869f704 100644 --- a/src/panels/lovelace/tile-extra/hui-light-brightness-tile-extra.ts +++ b/src/panels/lovelace/tile-features/hui-light-brightness-tile-feature.ts @@ -4,27 +4,27 @@ import { customElement, property, state } from "lit/decorators"; import "../../../components/tile/ha-tile-slider"; import { UNAVAILABLE } from "../../../data/entity"; import { HomeAssistant } from "../../../types"; -import { LovelaceTileExtra } from "../types"; -import { LightBrightnessTileExtraConfig } from "./types"; +import { LovelaceTileFeature } from "../types"; +import { LightBrightnessTileFeatureConfig } from "./types"; -@customElement("hui-light-brightness-tile-extra") -class HuiLightBrightnessTileExtra +@customElement("hui-light-brightness-tile-feature") +class HuiLightBrightnessTileFeature extends LitElement - implements LovelaceTileExtra + implements LovelaceTileFeature { @property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public stateObj?: HassEntity; - @state() private _config?: LightBrightnessTileExtraConfig; + @state() private _config?: LightBrightnessTileFeatureConfig; - static getStubConfig(): LightBrightnessTileExtraConfig { + static getStubConfig(): LightBrightnessTileFeatureConfig { return { type: "light-brightness", }; } - public setConfig(config: LightBrightnessTileExtraConfig): void { + public setConfig(config: LightBrightnessTileFeatureConfig): void { if (!config) { throw new Error("Invalid configuration"); } @@ -84,6 +84,6 @@ class HuiLightBrightnessTileExtra declare global { interface HTMLElementTagNameMap { - "hui-light-brightness-tile-extra": HuiLightBrightnessTileExtra; + "hui-light-brightness-tile-feature": HuiLightBrightnessTileFeature; } } diff --git a/src/panels/lovelace/tile-extra/hui-vacuum-commands-tile-extra.ts b/src/panels/lovelace/tile-features/hui-vacuum-commands-tile-feature.ts similarity index 87% rename from src/panels/lovelace/tile-extra/hui-vacuum-commands-tile-extra.ts rename to src/panels/lovelace/tile-features/hui-vacuum-commands-tile-feature.ts index 9a2c7e9191..91ddb50f1a 100644 --- a/src/panels/lovelace/tile-extra/hui-vacuum-commands-tile-extra.ts +++ b/src/panels/lovelace/tile-features/hui-vacuum-commands-tile-feature.ts @@ -22,10 +22,10 @@ import { VacuumEntityFeature, } from "../../../data/vacuum"; import { HomeAssistant } from "../../../types"; -import { LovelaceTileExtra, LovelaceTileExtraEditor } from "../types"; +import { LovelaceTileFeature, LovelaceTileFeatureEditor } from "../types"; import { VacuumCommand, - VacuumCommandsTileExtraConfig, + VacuumCommandsTileFeatureConfig, VACUUM_COMMANDS, } from "./types"; @@ -112,21 +112,21 @@ export const VACUUM_COMMANDS_BUTTONS: Record< }), }; -@customElement("hui-vacuum-commands-tile-extra") -class HuiVacuumCommandTileExtra +@customElement("hui-vacuum-commands-tile-feature") +class HuiVacuumCommandTileFeature extends LitElement - implements LovelaceTileExtra + implements LovelaceTileFeature { @property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public stateObj?: HassEntity; - @state() private _config?: VacuumCommandsTileExtraConfig; + @state() private _config?: VacuumCommandsTileFeatureConfig; static getStubConfig( _, stateObj?: HassEntity - ): VacuumCommandsTileExtraConfig { + ): VacuumCommandsTileFeatureConfig { return { type: "vacuum-commands", commands: stateObj @@ -137,14 +137,14 @@ class HuiVacuumCommandTileExtra }; } - public static async getConfigElement(): Promise { + public static async getConfigElement(): Promise { await import( - "../editor/config-elements/hui-vacuum-commands-tile-extra-editor" + "../editor/config-elements/hui-vacuum-commands-tile-feature-editor" ); - return document.createElement("hui-vacuum-commands-tile-extra-editor"); + return document.createElement("hui-vacuum-commands-tile-feature-editor"); } - public setConfig(config: VacuumCommandsTileExtraConfig): void { + public setConfig(config: VacuumCommandsTileFeatureConfig): void { if (!config) { throw new Error("Invalid configuration"); } @@ -215,6 +215,6 @@ class HuiVacuumCommandTileExtra declare global { interface HTMLElementTagNameMap { - "hui-vacuum-commands-tile-extra": HuiVacuumCommandTileExtra; + "hui-vacuum-commands-tile-feature": HuiVacuumCommandTileFeature; } } diff --git a/src/panels/lovelace/tile-extra/tile-extras.ts b/src/panels/lovelace/tile-features/tile-features.ts similarity index 65% rename from src/panels/lovelace/tile-extra/tile-extras.ts rename to src/panels/lovelace/tile-features/tile-features.ts index 2f8cb7d05b..5dfdb32a7f 100644 --- a/src/panels/lovelace/tile-extra/tile-extras.ts +++ b/src/panels/lovelace/tile-features/tile-features.ts @@ -3,13 +3,13 @@ import { computeDomain } from "../../../common/entity/compute_domain"; import { supportsFeature } from "../../../common/entity/supports-feature"; import { CoverEntityFeature } from "../../../data/cover"; import { lightSupportsBrightness } from "../../../data/light"; -import { supportsVacuumCommand } from "./hui-vacuum-commands-tile-extra"; -import { LovelaceTileExtraConfig, VACUUM_COMMANDS } from "./types"; +import { supportsVacuumCommand } from "./hui-vacuum-commands-tile-feature"; +import { LovelaceTileFeatureConfig, VACUUM_COMMANDS } from "./types"; -type TileExtraType = LovelaceTileExtraConfig["type"]; -export type SupportsTileExtra = (stateObj: HassEntity) => boolean; +type TileFeatureType = LovelaceTileFeatureConfig["type"]; +export type SupportsTileFeature = (stateObj: HassEntity) => boolean; -const TILE_EXTRAS_SUPPORT: Record = { +const TILE_FEATURES_SUPPORT: Record = { "cover-open-close": (stateObj) => computeDomain(stateObj.entity_id) === "cover" && (supportsFeature(stateObj, CoverEntityFeature.OPEN) || @@ -26,17 +26,19 @@ const TILE_EXTRAS_SUPPORT: Record = { VACUUM_COMMANDS.some((c) => supportsVacuumCommand(stateObj, c)), }; -const TILE_EXTRAS_EDITABLE: Set = new Set(["vacuum-commands"]); +const TILE_FEATURE_EDITABLE: Set = new Set([ + "vacuum-commands", +]); -export const supportsTileExtra = ( +export const supportsTileFeature = ( stateObj: HassEntity, - extra: TileExtraType + feature: TileFeatureType ): boolean => { - const supportFunction = TILE_EXTRAS_SUPPORT[extra] as - | SupportsTileExtra + const supportFunction = TILE_FEATURES_SUPPORT[feature] as + | SupportsTileFeature | undefined; return !supportFunction || supportFunction(stateObj); }; -export const isTileExtraEditable = (extra: TileExtraType): boolean => - TILE_EXTRAS_EDITABLE.has(extra); +export const isTileFeatureEditable = (feature: TileFeatureType): boolean => + TILE_FEATURE_EDITABLE.has(feature); diff --git a/src/panels/lovelace/tile-features/types.ts b/src/panels/lovelace/tile-features/types.ts new file mode 100644 index 0000000000..d7186e6f19 --- /dev/null +++ b/src/panels/lovelace/tile-features/types.ts @@ -0,0 +1,36 @@ +export interface CoverOpenCloseTileFeatureConfig { + type: "cover-open-close"; +} + +export interface CoverTiltTileFeatureConfig { + type: "cover-tilt"; +} + +export interface LightBrightnessTileFeatureConfig { + type: "light-brightness"; +} + +export const VACUUM_COMMANDS = [ + "start_pause", + "stop", + "clean_spot", + "locate", + "return_home", +] as const; + +export type VacuumCommand = typeof VACUUM_COMMANDS[number]; + +export interface VacuumCommandsTileFeatureConfig { + type: "vacuum-commands"; + commands?: VacuumCommand[]; +} + +export type LovelaceTileFeatureConfig = + | CoverOpenCloseTileFeatureConfig + | CoverTiltTileFeatureConfig + | LightBrightnessTileFeatureConfig + | VacuumCommandsTileFeatureConfig; + +export type LovelaceTileFeatureContext = { + entity_id?: string; +}; diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts index 55a39b536c..3e0652437b 100644 --- a/src/panels/lovelace/types.ts +++ b/src/panels/lovelace/types.ts @@ -8,7 +8,7 @@ import { FrontendLocaleData } from "../../data/translation"; import { Constructor, HomeAssistant } from "../../types"; import { LovelaceRow, LovelaceRowConfig } from "./entity-rows/types"; import { LovelaceHeaderFooterConfig } from "./header-footer/types"; -import { LovelaceTileExtraConfig } from "./tile-extra/types"; +import { LovelaceTileFeatureConfig } from "./tile-features/types"; declare global { // eslint-disable-next-line @@ -96,21 +96,22 @@ export interface LovelaceGenericElementEditor extends HTMLElement { focusYamlEditor?: () => void; } -export interface LovelaceTileExtra extends HTMLElement { +export interface LovelaceTileFeature extends HTMLElement { hass?: HomeAssistant; stateObj?: HassEntity; - setConfig(config: LovelaceTileExtraConfig); + setConfig(config: LovelaceTileFeatureConfig); } -export interface LovelaceTileExtraConstructor - extends Constructor { - getConfigElement?: () => LovelaceTileExtraEditor; +export interface LovelaceTileFeatureConstructor + extends Constructor { + getConfigElement?: () => LovelaceTileFeatureEditor; getStubConfig?: ( hass: HomeAssistant, stateObj?: HassEntity - ) => LovelaceTileExtraConfig; + ) => LovelaceTileFeatureConfig; } -export interface LovelaceTileExtraEditor extends LovelaceGenericElementEditor { - setConfig(config: LovelaceTileExtraConfig): void; +export interface LovelaceTileFeatureEditor + extends LovelaceGenericElementEditor { + setConfig(config: LovelaceTileFeatureConfig): void; } diff --git a/src/translations/en.json b/src/translations/en.json index aa55aa6357..f53ec0b939 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -4224,13 +4224,13 @@ "appearance": "Appearance", "default_color": "Default color (state)", "show_entity_picture": "Show entity picture", - "extras": { - "name": "Extras", + "features": { + "name": "Features", "not_compatible": "Not compatible", - "no_compatible_available": "No compatible extras available for this entity", - "add": "Add extra", - "edit": "Edit extra", - "remove": "Remove extra", + "no_compatible_available": "No compatible features available for this entity", + "add": "Add feature", + "edit": "Edit feature", + "remove": "Remove feature", "types": { "cover-open-close": { "label": "Cover open/close"