diff --git a/src/panels/lovelace/create-element/create-row-element.ts b/src/panels/lovelace/create-element/create-row-element.ts index 0bcf355154..1c12fbf3e6 100644 --- a/src/panels/lovelace/create-element/create-row-element.ts +++ b/src/panels/lovelace/create-element/create-row-element.ts @@ -4,6 +4,7 @@ import "../entity-rows/hui-script-entity-row"; import "../entity-rows/hui-sensor-entity-row"; import "../entity-rows/hui-text-entity-row"; import "../entity-rows/hui-toggle-entity-row"; +import "../special-rows/hui-attribute-row"; import "../special-rows/hui-call-service-row"; import { EntityConfig } from "../entity-rows/types"; import { createLovelaceElement } from "./create-element-base"; @@ -37,6 +38,7 @@ const LAZY_LOAD_TYPES = { weblink: () => import("../special-rows/hui-weblink-row"), cast: () => import("../special-rows/hui-cast-row"), buttons: () => import("../special-rows/hui-buttons-row"), + attribute: () => import("../special-rows/hui-attribute-row"), }; const DOMAIN_TO_ELEMENT_TYPE = { _domain_not_found: "text", diff --git a/src/panels/lovelace/entity-rows/types.ts b/src/panels/lovelace/entity-rows/types.ts index f620fb4d49..b113bf33ee 100644 --- a/src/panels/lovelace/entity-rows/types.ts +++ b/src/panels/lovelace/entity-rows/types.ts @@ -55,7 +55,8 @@ export type LovelaceRowConfig = | CallServiceConfig | CastConfig | ButtonsRowConfig - | ConditionalRowConfig; + | ConditionalRowConfig + | AttributeRowConfig; export interface LovelaceRow extends HTMLElement { hass?: HomeAssistant; @@ -66,3 +67,8 @@ export interface ConditionalRowConfig extends EntityConfig { row: EntityConfig; conditions: Condition[]; } +export interface AttributeRowConfig extends EntityConfig { + attribute: string; + prefix?: string; + suffix?: string; +} diff --git a/src/panels/lovelace/special-rows/hui-attribute-row.ts b/src/panels/lovelace/special-rows/hui-attribute-row.ts new file mode 100644 index 0000000000..289c1f5a64 --- /dev/null +++ b/src/panels/lovelace/special-rows/hui-attribute-row.ts @@ -0,0 +1,83 @@ +import { + html, + LitElement, + TemplateResult, + property, + CSSResult, + css, + customElement, + PropertyValues, +} from "lit-element"; + +import "../components/hui-generic-entity-row"; +import "../components/hui-warning"; + +import { HomeAssistant } from "../../../types"; +import { LovelaceRow, AttributeRowConfig } from "../entity-rows/types"; +import { hasConfigOrEntityChanged } from "../common/has-changed"; + +@customElement("hui-attribute-row") +class HuiAttributeRow extends LitElement implements LovelaceRow { + @property() public hass?: HomeAssistant; + @property() private _config?: AttributeRowConfig; + + public setConfig(config: AttributeRowConfig): void { + if (!config) { + throw new Error("Configuration error"); + } + if (!config.entity) { + throw new Error("Entity not defined"); + } + if (!config.attribute) { + throw new Error("Attribute not defined"); + } + this._config = config; + } + + protected shouldUpdate(changedProps: PropertyValues): boolean { + return hasConfigOrEntityChanged(this, changedProps); + } + + protected render(): TemplateResult { + if (!this._config || !this.hass) { + return html``; + } + + const stateObj = this.hass.states[this._config.entity]; + const attribute = stateObj.attributes[this._config.attribute]; + + if (!stateObj) { + return html` + ${this.hass.localize( + "ui.panel.lovelace.warning.entity_not_found", + "entity", + this._config.entity + )} + `; + } + + return html` + +
+ ${this._config.prefix} ${attribute || "-"} ${this._config.suffix} +
+
+ `; + } + + static get styles(): CSSResult { + return css` + div { + text-align: right; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-attribute-row": HuiAttributeRow; + } +}