diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index 067aa6df86..d86281c300 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/src/panels/lovelace/cards/hui-glance-card.ts @@ -206,7 +206,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { > ` : ""} - ${this._config!.show_state !== false + ${this._config!.show_state !== false && entityConf.show_state !== false ? html`
${entityConf.show_last_changed diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index abc489358c..a3f2f240ef 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -10,15 +10,14 @@ import { } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; -import { computeStateName } from "../../../common/entity/compute_state_name"; -import { computeDomain } from "../../../common/entity/compute_domain"; -import { stateIcon } from "../../../common/entity/state_icon"; - import "../../../components/ha-card"; import "../../../components/ha-icon"; import "../components/hui-image"; import "../components/hui-warning-element"; +import { computeStateName } from "../../../common/entity/compute_state_name"; +import { computeDomain } from "../../../common/entity/compute_domain"; +import { stateIcon } from "../../../common/entity/state_icon"; import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { DOMAINS_TOGGLE } from "../../../common/const"; import { LovelaceCard, LovelaceCardEditor } from "../types"; @@ -26,7 +25,7 @@ import { HomeAssistant } from "../../../types"; import { longPress } from "../common/directives/long-press-directive"; import { processConfigEntities } from "../common/process-config-entities"; import { handleClick } from "../common/handle-click"; -import { PictureGlanceCardConfig, ConfigEntity } from "./types"; +import { PictureGlanceCardConfig, PictureGlanceEntityConfig } from "./types"; import { hasConfigOrEntityChanged } from "../common/has-changed"; const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]); @@ -49,9 +48,9 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { @property() private _config?: PictureGlanceCardConfig; - private _entitiesDialog?: ConfigEntity[]; + private _entitiesDialog?: PictureGlanceEntityConfig[]; - private _entitiesToggle?: ConfigEntity[]; + private _entitiesToggle?: PictureGlanceEntityConfig[]; public getCardSize(): number { return 3; @@ -150,12 +149,12 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
${this._config.title}
` : ""} -
+
${this._entitiesDialog!.map((entityConf) => this.renderEntity(entityConf, true) )}
-
+
${this._entitiesToggle!.map((entityConf) => this.renderEntity(entityConf, false) )} @@ -166,7 +165,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { } private renderEntity( - entityConf: ConfigEntity, + entityConf: PictureGlanceEntityConfig, dialog: boolean ): TemplateResult { const stateObj = this.hass!.states[entityConf.entity]; @@ -189,23 +188,38 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { } return html` - + + > + ${this._config!.show_state !== true && entityConf.show_state !== true + ? html` +
+ ` + : html` +
+ ${computeStateDisplay( + this.hass!.localize, + stateObj, + this.hass!.language + )} +
+ `} +
`; } @@ -249,6 +263,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { color: white; display: flex; justify-content: space-between; + flex-direction: row; } .box .title { @@ -265,6 +280,30 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { ha-icon.state-on { color: white; } + ha-icon.show-state { + width: 20px; + height: 20px; + padding-bottom: 4px; + padding-top: 4px; + } + .state { + display: block; + font-size: 12px; + text-align: center; + line-height: 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .row { + display: flex; + flex-direction: row; + } + .wrapper { + display: flex; + flex-direction: column; + width: 40px; + } `; } } diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index fd02a0710e..fba27bf829 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -82,9 +82,14 @@ export interface ConfigEntity extends EntityConfig { hold_action?: ActionConfig; } +export interface PictureGlanceEntityConfig extends ConfigEntity { + show_state?: boolean; +} + export interface GlanceConfigEntity extends ConfigEntity { show_last_changed?: boolean; image?: string; + show_state?: boolean; } export interface GlanceCardConfig extends LovelaceCardConfig { @@ -166,7 +171,7 @@ export interface PictureEntityCardConfig extends LovelaceCardConfig { } export interface PictureGlanceCardConfig extends LovelaceCardConfig { - entities: EntityConfig[]; + entities: PictureGlanceEntityConfig[]; title?: string; image?: string; camera_image?: string; @@ -177,6 +182,7 @@ export interface PictureGlanceCardConfig extends LovelaceCardConfig { entity?: string; tap_action?: ActionConfig; hold_action?: ActionConfig; + show_state?: boolean; } export interface PlantAttributeTarget extends EventTarget {