From 3338459139001593e72cffc57fb150f20cf961ad Mon Sep 17 00:00:00 2001
From: guillempages <guillempages@users.noreply.github.com>
Date: Wed, 11 Mar 2020 09:00:43 +0100
Subject: [PATCH] Allow state-label-element to show attributes (#4953)

* Allow state-label-element to show attributes

Add an additional (optional) parameter to the state-label element,
so that instead of showing the state, an attribute can be shown instead.

Can be used to e.g. add a climate entity to the floorplan,
but show the current temperature instead of the desired one.

* Improve style

Put the most frequent case as default in the ternary

* Remove unneeded variables

Use the _config.attribute directly instead of having a local temporary
Also remove superfluous checks for "!stateObj" (was already checked before)
---
 .../elements/hui-state-label-element.ts       | 21 +++++++++++++++++--
 src/panels/lovelace/elements/types.ts         |  1 +
 src/translations/en.json                      |  1 +
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts
index bd8ad45616..93aa196d33 100644
--- a/src/panels/lovelace/elements/hui-state-label-element.ts
+++ b/src/panels/lovelace/elements/hui-state-label-element.ts
@@ -58,6 +58,23 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement {
       `;
     }
 
+    if (
+      this._config.attribute &&
+      !stateObj.attributes[this._config.attribute]
+    ) {
+      return html`
+        <hui-warning-element
+          label=${this.hass.localize(
+            "ui.panel.lovelace.warning.attribute_not_found",
+            "attribute",
+            this._config.attribute,
+            "entity",
+            this._config.entity
+          )}
+        ></hui-warning-element>
+      `;
+    }
+
     return html`
       <div
         .title="${computeTooltip(this.hass, this._config)}"
@@ -70,13 +87,13 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement {
           hasAction(this._config.tap_action) ? "0" : undefined
         )}
       >
-        ${this._config.prefix}${stateObj
+        ${this._config.prefix}${!this._config.attribute
           ? computeStateDisplay(
               this.hass.localize,
               stateObj,
               this.hass.language
             )
-          : "-"}${this._config.suffix}
+          : stateObj.attributes[this._config.attribute]}${this._config.suffix}
       </div>
     `;
   }
diff --git a/src/panels/lovelace/elements/types.ts b/src/panels/lovelace/elements/types.ts
index e42f689e31..08ca175fa7 100644
--- a/src/panels/lovelace/elements/types.ts
+++ b/src/panels/lovelace/elements/types.ts
@@ -64,6 +64,7 @@ export interface StateIconElementConfig extends LovelaceElementConfig {
 
 export interface StateLabelElementConfig extends LovelaceElementConfig {
   entity: string;
+  attribute?: string;
   prefix?: string;
   suffix?: string;
   tap_action?: ActionConfig;
diff --git a/src/translations/en.json b/src/translations/en.json
index c2824ff6b5..f845e511a0 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2128,6 +2128,7 @@
           }
         },
         "warning": {
+          "attribute_not_found": "Attribute {attribute} not available in: {entity}",
           "entity_not_found": "Entity not available: {entity}",
           "entity_non_numeric": "Entity is non-numeric: {entity}"
         },