Lovelace: add basic support for badges (#1443)

* Lovelace: add basic support for badges

* Lint

* Check in entityId exists in states

* Hide badges container if no badges

* setProperties

* lint

src/panels/lovelace/hui-view.js

@@ -1,6 +1,8 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
+import '../../components/entity/ha-state-label-badge.js';
+
 import applyThemesOnElement from '../../common/dom/apply_themes_on_element.js';
 import debounce from '../../common/util/debounce.js';
 
@@ -17,6 +19,12 @@ class HUIView extends PolymerElement {
         position: relative;
       }
 
+      #badges {
+        margin: 8px 16px;
+        font-size: 85%;
+        text-align: center;
+      }
+
       #columns {
         display: flex;
         flex-direction: row;
@@ -53,7 +61,8 @@ class HUIView extends PolymerElement {
         }
       }
       </style>
-      <div id='columns' on-rebuild-view='_debouncedConfigChanged'></div>
+      <div id="badges"></div>
+      <div id="columns" on-rebuild-view="_debouncedConfigChanged"></div>
     `;
   }
 
@@ -63,40 +72,60 @@ class HUIView extends PolymerElement {
         type: Object,
         observer: '_hassChanged',
       },
-
+      config: Object,
-      columns: {
+      columns: Number
-        type: Number,
-      },
-
-      config: {
-        type: Object,
-      },
     };
   }
 
   static get observers() {
     return [
       // Put all properties in 1 observer so we only call configChanged once
-      '_configChanged(columns, config)'
+      '_createBadges(config)',
+      '_createCards(config, columns)'
     ];
   }
 
   constructor() {
     super();
-    this._elements = [];
+    this._cards = [];
+    this._badges = [];
     this._debouncedConfigChanged = debounce(this._configChanged, 100);
   }
 
-  _configChanged() {
+  _createBadges(config) {
+    const root = this.$.badges;
+    while (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    if (!config || !config.badges || !Array.isArray(config.badges)) {
+      root.style.display = 'none';
+      this._badges = [];
+      return;
+    }
+
+    const elements = [];
+    for (const entityId of config.badges) {
+      if (!(entityId in this.hass.states)) continue;
+
+      const element = document.createElement('ha-state-label-badge');
+      element.state = this.hass.states[entityId];
+      elements.push({ element, entityId });
+      root.appendChild(element);
+    }
+    this._badges = elements;
+    root.style.display = elements.length > 0 ? 'block' : 'none';
+  }
+
+  _createCards(config) {
     const root = this.$.columns;
-    const config = this.config;
 
     while (root.lastChild) {
       root.removeChild(root.lastChild);
     }
 
     if (!config) {
-      this._elements = [];
+      this._cards = [];
       return;
     }
 
@@ -151,7 +180,7 @@ class HUIView extends PolymerElement {
       root.appendChild(columnEl);
     });
 
-    this._elements = elements;
+    this._cards = elements;
 
     if ('theme' in config) {
       applyThemesOnElement(root, this.hass.themes, config.theme);
@@ -159,9 +188,16 @@ class HUIView extends PolymerElement {
   }
 
   _hassChanged(hass) {
-    for (let i = 0; i < this._elements.length; i++) {
+    this._badges.forEach((badge) => {
-      this._elements[i].hass = hass;
+      const { element, entityId } = badge;
-    }
+      element.setProperties({
+        hass,
+        state: hass.states[entityId]
+      });
+    });
+    this._cards.forEach((element) => {
+      element.hass = hass;
+    });
   }
 }