Love: move create card element to component, improve error card (#1328)

* Love: move create card element to component, improve error card

* Remove whenDefined

* Fix config check

* Allow enity_id only card config

* Feedback

* Fix conflicts

* Add import

* Lint

* Lint

* Lint -.-"

src/panels/lovelace/cards/hui-entity-filter-card.js

@@ -1,17 +1,9 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import './hui-camera-preview-card.js';
+import './hui-error-card';
-import './hui-entities-card.js';
-import './hui-entity-filter-card.js';
-import './hui-glance-card';
-import './hui-history-graph-card.js';
-import './hui-media-control-card.js';
-import './hui-picture-glance-card';
-import './hui-plant-status-card.js';
-import './hui-weather-forecast-card';
 
 import computeStateDomain from '../../../common/entity/compute_state_domain.js';
-import computeCardElement from '../common/compute-card-element.js';
+import createCardElement from '../common/create-card-element';
 
 class HuiEntitiesCard extends PolymerElement {
   static get properties() {
@@ -30,6 +22,7 @@ class HuiEntitiesCard extends PolymerElement {
   constructor() {
     super();
     this._whenDefined = {};
+    this.elementNotDefinedCallback = this.elementNotDefinedCallback.bind(this);
   }
 
   getCardSize() {
@@ -72,48 +65,49 @@ class HuiEntitiesCard extends PolymerElement {
     if (this.lastChild) {
       this.removeChild(this.lastChild);
     }
-    let error = null;
+    let error;
-    let cardConfig;
+    let element;
-    let tag = config.card ? computeCardElement(config.card) : 'hui-entities-card';
 
-    if (tag === null) {
+    if (!config.filter || !Array.isArray(config.filter)) {
-      error = `Unknown card type encountered: "${config.card}".`;
+      error = 'Incorrect filter config.';
-    } else if (!customElements.get(tag)) {
+    } else if (!config.card) {
-      error = `Custom element doesn't exist: "${tag}".`;
+      config.card = { type: 'entities' };
-      if (!(tag in this._whenDefined)) {
+    } else if (!config.card.type) {
-        this._whenDefined[tag] = customElements.whenDefined(tag)
+      config.card.type = 'entities';
-          .then(() => this._configChanged(this.config));
-      }
-    } else if (!config.filter || !Array.isArray(config.filter)) {
-      error = 'No or incorrect filter.';
     }
+
+
     if (error) {
-      tag = 'hui-error-card';
+      element = createCardElement(config, this.elementNotDefinedCallback, error);
-      cardConfig = { error };
     } else {
-      cardConfig = this._computeCardConfig(config);
+      element = createCardElement(config.card, this.elementNotDefinedCallback, null);
-    }
+      element.config = this._computeCardConfig(config);
-
-    const element = document.createElement(tag);
-    element.config = cardConfig;
       element.hass = this.hass;
+    }
     this.appendChild(element);
   }
 
   _hassChanged(hass) {
     const element = this.lastChild;
-    if (element) {
+    if (!element || element.tagName === 'HUI-ERROR-CARD') return;
+
     element.hass = hass;
     element.config = this._computeCardConfig(this.config);
   }
-  }
 
   _computeCardConfig(config) {
     return Object.assign(
       {},
-      config.card_config,
+      config.card,
       { entities: this._getEntities(this.hass, config.filter) }
     );
   }
+
+  elementNotDefinedCallback(tag) {
+    if (!(tag in this._whenDefined)) {
+      this._whenDefined[tag] = customElements.whenDefined(tag)
+        .then(() => this._configChanged(this.config));
+    }
+  }
 }
 customElements.define('hui-entity-filter-card', HuiEntitiesCard);

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

@@ -9,23 +9,28 @@ class HuiErrorCard extends PolymerElement {
           display: block;
           background-color: red;
           color: white;
-          text-align: center;
           padding: 8px;
         }
       </style>
-      [[config.error]]
+      [[error]]
+      <pre>[[_toStr(config)]]</pre>
     `;
   }
 
   static get properties() {
     return {
-      config: Object
+      config: Object,
+      error: String
     };
   }
 
   getCardSize() {
     return 1;
   }
+
+  _toStr(obj) {
+    return JSON.stringify(obj, null, 2);
+  }
 }
 
 customElements.define('hui-error-card', HuiErrorCard);

src/panels/lovelace/common/compute-card-element.js

@@ -1,38 +0,0 @@
-import '../cards/hui-camera-preview-card.js';
-import '../cards/hui-entities-card.js';
-import '../cards/hui-entity-filter-card.js';
-import '../cards/hui-glance-card';
-import '../cards/hui-history-graph-card.js';
-import '../cards/hui-markdown-card.js';
-import '../cards/hui-media-control-card.js';
-import '../cards/hui-entity-picture-card.js';
-import '../cards/hui-picture-glance-card';
-import '../cards/hui-plant-status-card.js';
-import '../cards/hui-weather-forecast-card';
-import '../cards/hui-error-card.js';
-import '../cards/hui-iframe-card.js';
-
-const CARD_TYPES = [
-  'camera-preview',
-  'entities',
-  'entity-filter',
-  'entity-picture',
-  'glance',
-  'history-graph',
-  'iframe',
-  'markdown',
-  'media-control',
-  'picture-glance',
-  'plant-status',
-  'weather-forecast'
-];
-const CUSTOM_TYPE_PREFIX = 'custom:';
-
-export default function computeCardElement(type) {
-  if (CARD_TYPES.includes(type)) {
-    return `hui-${type}-card`;
-  } else if (type.startsWith(CUSTOM_TYPE_PREFIX)) {
-    return type.substr(CUSTOM_TYPE_PREFIX.length);
-  }
-  return null;
-}

src/panels/lovelace/common/create-card-element.js

@@ -0,0 +1,61 @@
+import '../cards/hui-camera-preview-card.js';
+import '../cards/hui-entities-card.js';
+import '../cards/hui-entity-filter-card.js';
+import '../cards/hui-glance-card';
+import '../cards/hui-history-graph-card.js';
+import '../cards/hui-iframe-card.js';
+import '../cards/hui-markdown-card.js';
+import '../cards/hui-media-control-card.js';
+import '../cards/hui-entity-picture-card.js';
+import '../cards/hui-picture-glance-card';
+import '../cards/hui-plant-status-card.js';
+import '../cards/hui-weather-forecast-card';
+import '../cards/hui-error-card.js';
+
+const CARD_TYPES = [
+  'camera-preview',
+  'entities',
+  'entity-filter',
+  'entity-picture',
+  'glance',
+  'history-graph',
+  'iframe',
+  'markdown',
+  'media-control',
+  'picture-glance',
+  'plant-status',
+  'weather-forecast'
+];
+
+const CUSTOM_TYPE_PREFIX = 'custom:';
+
+export default function
+createCardElement(config, elementNotDefinedCallback = null, invalidConfig = null) {
+  let error = invalidConfig;
+  let tag;
+
+  if (!error && config && typeof config === 'object' && config.type) {
+    if (CARD_TYPES.includes(config.type)) {
+      tag = `hui-${config.type}-card`;
+    } else if (config.type.startsWith(CUSTOM_TYPE_PREFIX)) {
+      tag = config.type.substr(CUSTOM_TYPE_PREFIX.length);
+    }
+
+    if (tag) {
+      if (!customElements.get(tag)) {
+        error = 'Custom element doesn\'t exist.';
+        if (elementNotDefinedCallback) elementNotDefinedCallback(tag);
+      }
+    } else {
+      error = 'Unknown card type encountered.';
+    }
+  } else {
+    error = 'No card type configured.';
+  }
+
+  if (error) tag = 'hui-error-card';
+  const element = document.createElement(tag);
+  if (error) element.error = error;
+  element.config = config;
+  return element;
+}

src/panels/lovelace/hui-view.js

@@ -2,7 +2,7 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import applyThemesOnElement from '../../common/dom/apply_themes_on_element.js';
-import computeCardElement from './common/compute-card-element.js';
+import createCardElement from './common/create-card-element';
 
 class HUIView extends PolymerElement {
   static get template() {
@@ -77,35 +77,14 @@ class HUIView extends PolymerElement {
     super();
     this._elements = [];
     this._whenDefined = {};
+    this.elementNotDefinedCallback = this.elementNotDefinedCallback.bind(this);
   }
 
   _getElements(cards) {
     const elements = [];
 
     for (let i = 0; i < cards.length; i++) {
-      let error = null;
+      const element = createCardElement(cards[i], this.elementNotDefinedCallback, null);
-      let cardConfig = cards[i];
-      let tag;
-      if (!cardConfig.type) {
-        error = 'Card type not configured.';
-      } else {
-        tag = computeCardElement(cardConfig.type);
-        if (tag === null) {
-          error = `Unknown card type encountered: "${cardConfig.type}".`;
-        } else if (!customElements.get(tag)) {
-          error = `Custom element doesn't exist: "${tag}".`;
-          if (!(tag in this._whenDefined)) {
-            this._whenDefined[tag] = customElements.whenDefined(tag)
-              .then(() => this._configChanged());
-          }
-        }
-      }
-      if (error) {
-        tag = 'hui-error-card';
-        cardConfig = { error };
-      }
-      const element = document.createElement(tag);
-      element.config = cardConfig;
       element.hass = this.hass;
       elements.push(element);
     }
@@ -180,6 +159,13 @@ class HUIView extends PolymerElement {
       this._elements[i].hass = hass;
     }
   }
+
+  elementNotDefinedCallback(tag) {
+    if (!(tag in this._whenDefined)) {
+      this._whenDefined[tag] = customElements.whenDefined(tag)
+        .then(() => this._configChanged());
+    }
+  }
 }
 
 customElements.define('hui-view', HUIView);