add show_state option for picture-glance entities (#3937)

* add states option below picture-glance entities

* address review comments

src/panels/lovelace/cards/hui-glance-card.ts

@@ -206,7 +206,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
               ></state-badge>
             `
           : ""}
-        ${this._config!.show_state !== false
+        ${this._config!.show_state !== false && entityConf.show_state !== false
           ? html`
               <div>
                 ${entityConf.show_last_changed

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 {
                 <div class="title">${this._config.title}</div>
               `
             : ""}
-          <div>
+          <div class="row">
             ${this._entitiesDialog!.map((entityConf) =>
               this.renderEntity(entityConf, true)
             )}
           </div>
-          <div>
+          <div class="row">
             ${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`
-      <ha-icon
+      <div class="wrapper">
-        @ha-click=${this._handleTap}
+        <ha-icon
-        @ha-hold=${this._handleHold}
+          @ha-click=${this._handleTap}
-        .longPress=${longPress()}
+          @ha-hold=${this._handleHold}
-        .config=${entityConf}
+          .longPress=${longPress()}
-        class="${classMap({
+          .config=${entityConf}
-          "state-on": !STATES_OFF.has(stateObj.state),
+          class="${classMap({
-        })}"
+            "state-on": !STATES_OFF.has(stateObj.state),
-        .icon="${entityConf.icon || stateIcon(stateObj)}"
+          })}"
-        title="${`
+          .icon="${entityConf.icon || stateIcon(stateObj)}"
+          title="${`
             ${computeStateName(stateObj)} : ${computeStateDisplay(
-          this.hass!.localize,
+            this.hass!.localize,
-          stateObj,
+            stateObj,
-          this.hass!.language
+            this.hass!.language
-        )}
+          )}
           `}"
-      ></ha-icon>
+        ></ha-icon>
+        ${this._config!.show_state !== true && entityConf.show_state !== true
+          ? html`
+              <div class="state"></div>
+            `
+          : html`
+              <div class="state">
+                ${computeStateDisplay(
+                  this.hass!.localize,
+                  stateObj,
+                  this.hass!.language
+                )}
+              </div>
+            `}
+      </div>
     `;
   }
 
@@ -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;
+      }
     `;
   }
 }

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 {