Love: Allow custom title per entity in entities card (#1374)

* Allow custom title per entity in entities card

* Change entityConfig to config

* Only pass title to state-cards

src/components/entity/state-info.js

@@ -82,12 +82,13 @@ class StateInfo extends PolymerElement {
       },
       hass: Object,
       stateObj: Object,
-      inDialog: Boolean
+      inDialog: Boolean,
+      overrideName: String
     };
   }
 
   computeStateName(stateObj) {
-    return computeStateName(stateObj);
+    return this.overrideName || computeStateName(stateObj);
   }
 }
 

src/panels/lovelace/cards/hui-entities-card.js

@@ -5,6 +5,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import stateCardType from '../../../common/entity/state_card_type.js';
 import computeDomain from '../../../common/entity/compute_domain.js';
 import { DOMAINS_HIDE_MORE_INFO } from '../../../common/const.js';
+import computeConfigEntities from '../common/compute-config-entities';
+import validateEntitiesConfig from '../common/validate-entities-config';
 
 import '../../../components/ha-card.js';
 import '../components/hui-entities-toggle.js';
@@ -98,6 +100,10 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
   }
 
   setConfig(config) {
+    if (!validateEntitiesConfig(config)) {
+      throw Error('Error in card config.');
+    }
+
     this._config = config;
     if (this.$) this._buildConfig();
   }
@@ -105,6 +111,7 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
   _buildConfig() {
     const config = this._config;
     const root = this.$.states;
+    const entities = computeConfigEntities(config);
 
     while (root.lastChild) {
       root.removeChild(root.lastChild);
@@ -112,8 +119,9 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
 
     this._elements = [];
 
-    for (let i = 0; i < config.entities.length; i++) {
-      const entityId = config.entities[i];
+    for (let i = 0; i < entities.length; i++) {
+      const entity = entities[i];
+      const entityId = entity.entity;
       if (!(entityId in this.hass.states)) continue;
       const stateObj = this.hass.states[entityId];
       const tag = stateObj ? `state-card-${stateCardType(this.hass, stateObj)}` : 'state-card-display';
@@ -124,6 +132,9 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
       }
       element.stateObj = stateObj;
       element.hass = this.hass;
+      if (entity.title) {
+        element.overrideName = entity.title;
+      }
       this._elements.push({ entityId, element });
       const container = document.createElement('div');
       container.appendChild(element);

src/state-summary/state-card-climate.js

@@ -30,7 +30,12 @@ class StateCardClimate extends PolymerElement {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info 
+      hass="[[hass]]" 
+      state-obj="[[stateObj]]" 
+      in-dialog="[[inDialog]]" 
+      override-name="[[overrideName]]">
+    </state-info>
 `;
   }
 
@@ -42,6 +47,7 @@ class StateCardClimate extends PolymerElement {
         type: Boolean,
         value: false,
       },
+      overrideName: String
     };
   }
 }

src/state-summary/state-card-configurator.js

@@ -38,7 +38,12 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info 
+      hass="[[hass]]" 
+      state-obj="[[stateObj]]" 
+      in-dialog="[[inDialog]]" 
+      override-name="[[overrideName]]">
+    </state-info>
 `;
   }
 
@@ -50,6 +55,7 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
         type: Boolean,
         value: false,
       },
+      overrideName: String
     };
   }
 

src/state-summary/state-card-cover.js

@@ -29,7 +29,12 @@ class StateCardCover extends PolymerElement {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info 
+      hass="[[hass]]" 
+      state-obj="[[stateObj]]" 
+      in-dialog="[[inDialog]]" 
+      override-name="[[overrideName]]">
+    </state-info>
 `;
   }
 
@@ -45,6 +50,7 @@ class StateCardCover extends PolymerElement {
         type: Object,
         computed: 'computeEntityObj(hass, stateObj)',
       },
+      overrideName: String
     };
   }
 

src/state-summary/state-card-display.js

@@ -46,7 +46,12 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info 
+      hass="[[hass]]" 
+      state-obj="[[stateObj]]" 
+      in-dialog="[[inDialog]]" 
+      override-name="[[overrideName]]">
+    </state-info>
 `;
   }
 
@@ -58,6 +63,7 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
         type: Boolean,
         value: false,
       },
+      overrideName: String
     };
   }
 

src/state-summary/state-card-input_number.js

@@ -51,7 +51,12 @@ class StateCardInputNumber extends mixinBehaviors([
 
   static get stateInfoTemplate() {
     return html`
-    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info 
+      hass="[[hass]]" 
+      state-obj="[[stateObj]]" 
+      in-dialog="[[inDialog]]" 
+      override-name="[[overrideName]]">
+    </state-info>
 `;
   }
 
@@ -108,7 +113,8 @@ class StateCardInputNumber extends mixinBehaviors([
       },
       mode: {
         type: String,
-      }
+      },
+      overrideName: String
     };
   }
 

src/state-summary/state-card-input_select.js

@@ -60,11 +60,12 @@ class StateCardInputSelect extends PolymerElement {
         type: String,
         observer: 'selectedOptionChanged',
       },
+      overrideName: String
     };
   }
 
   _computeStateName(stateObj) {
-    return computeStateName(stateObj);
+    return this.overrideName || computeStateName(stateObj);
   }
 
   computeSelected(stateObj) {

src/state-summary/state-card-input_text.js

@@ -25,7 +25,12 @@ class StateCardInputText extends PolymerElement {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info 
+      hass="[[hass]]" 
+      state-obj="[[stateObj]]" 
+      in-dialog="[[inDialog]]" 
+      override-name="[[overrideName]]">
+    </state-info>
 `;
   }
 
@@ -45,7 +50,8 @@ class StateCardInputText extends PolymerElement {
       },
 
       pattern: String,
-      value: String
+      value: String,
+      overrideName: String
     };
   }
 

src/state-summary/state-card-media_player.js

@@ -53,7 +53,12 @@ class StateCardMediaPlayer extends LocalizeMixin(PolymerElement) {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info 
+      hass="[[hass]]" 
+      state-obj="[[stateObj]]" 
+      in-dialog="[[inDialog]]" 
+      override-name="[[overrideName]]">
+    </state-info>
 `;
   }
 
@@ -69,6 +74,7 @@ class StateCardMediaPlayer extends LocalizeMixin(PolymerElement) {
         type: Object,
         computed: 'computePlayerObj(hass, stateObj)',
       },
+      overrideName: String
     };
   }
 

src/state-summary/state-card-scene.js

@@ -32,7 +32,12 @@ class StateCardScene extends LocalizeMixin(PolymerElement) {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info 
+      hass="[[hass]]" 
+      state-obj="[[stateObj]]" 
+      in-dialog="[[inDialog]]" 
+      override-name="[[overrideName]]">
+    </state-info>
 `;
   }
 
@@ -44,6 +49,7 @@ class StateCardScene extends LocalizeMixin(PolymerElement) {
         type: Boolean,
         value: false,
       },
+      overrideName: String
     };
   }
 

src/state-summary/state-card-script.js

@@ -43,7 +43,12 @@ class StateCardScript extends LocalizeMixin(PolymerElement) {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info 
+      hass="[[hass]]" 
+      state-obj="[[stateObj]]" 
+      in-dialog="[[inDialog]]" 
+      override-name="[[overrideName]]">
+    </state-info>
 `;
   }
 
@@ -55,6 +60,7 @@ class StateCardScript extends LocalizeMixin(PolymerElement) {
         type: Boolean,
         value: false,
       },
+      overrideName: String
     };
   }
 

src/state-summary/state-card-timer.js

@@ -36,7 +36,12 @@ class StateCardTimer extends LocalizeMixin(PolymerElement) {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info 
+      hass="[[hass]]" 
+      state-obj="[[stateObj]]" 
+      in-dialog="[[inDialog]]" 
+      override-name="[[overrideName]]">
+    </state-info>
 `;
   }
 
@@ -52,6 +57,7 @@ class StateCardTimer extends LocalizeMixin(PolymerElement) {
         type: Boolean,
         value: false,
       },
+      overrideName: String
     };
   }
 

src/state-summary/state-card-toggle.js

@@ -25,7 +25,12 @@ class StateCardToggle extends PolymerElement {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info 
+      hass="[[hass]]" 
+      state-obj="[[stateObj]]" 
+      in-dialog="[[inDialog]]" 
+      override-name="[[overrideName]]">
+    </state-info>
 `;
   }
 
@@ -37,6 +42,7 @@ class StateCardToggle extends PolymerElement {
         type: Boolean,
         value: false,
       },
+      overrideName: String
     };
   }
 }

src/state-summary/state-card-weblink.js

@@ -41,6 +41,7 @@ class StateCardWeblink extends PolymerElement {
         type: Boolean,
         value: false,
       },
+      overrideName: String
     };
   }
 
@@ -50,7 +51,7 @@ class StateCardWeblink extends PolymerElement {
   }
 
   _computeStateName(stateObj) {
-    return computeStateName(stateObj);
+    return this.overrideName || computeStateName(stateObj);
   }
 
   onTap(ev) {