From bb670b76a983b8029516c7ad1e4a62a1ced3af86 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Fri, 29 Jun 2018 10:54:52 -0400
Subject: [PATCH] Migrate cards to use setConfig to get config. (#1363)

* Experiment with setConfig

* More cleanup

* fix filter card

* Wait for DOM to be done

* 1 line

* Lint

* Lint2

* Lint
---
 .../lovelace/cards/hui-camera-preview-card.js |  22 +---
 src/panels/lovelace/cards/hui-column-card.js  |  30 ++---
 .../lovelace/cards/hui-entities-card.js       |  26 +++--
 .../lovelace/cards/hui-entity-filter-card.js  |  51 +++------
 src/panels/lovelace/cards/hui-error-card.js   |  10 +-
 src/panels/lovelace/cards/hui-glance-card.js  |  30 ++---
 .../lovelace/cards/hui-history-graph-card.js  | 105 +++++++-----------
 src/panels/lovelace/cards/hui-iframe-card.js  |  33 ++++--
 .../lovelace/cards/hui-markdown-card.js       |  12 +-
 .../lovelace/cards/hui-media-control-card.js  |  21 +---
 .../cards/hui-picture-elements-card.js        | 100 ++++++++++-------
 .../lovelace/cards/hui-picture-entity-card.js |  23 +---
 .../lovelace/cards/hui-picture-glance-card.js |  39 +++----
 .../lovelace/cards/hui-plant-status-card.js   |  21 +---
 src/panels/lovelace/cards/hui-row-card.js     |  27 ++---
 .../cards/hui-weather-forecast-card.js        |  21 +---
 .../lovelace/common/create-card-element.js    |   9 +-
 .../common/validate-entities-config.js        |   4 +-
 18 files changed, 265 insertions(+), 319 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-camera-preview-card.js b/src/panels/lovelace/cards/hui-camera-preview-card.js
index 75c0908b62..eb2262306c 100644
--- a/src/panels/lovelace/cards/hui-camera-preview-card.js
+++ b/src/panels/lovelace/cards/hui-camera-preview-card.js
@@ -2,8 +2,6 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../cards/ha-camera-card.js';
 
-import createCardElement from '../common/create-card-element.js';
-import createErrorCardConfig from '../common/create-error-card-config.js';
 import validateEntityConfig from '../common/validate-entity-config.js';
 
 class HuiCameraPreviewCard extends PolymerElement {
@@ -13,10 +11,6 @@ class HuiCameraPreviewCard extends PolymerElement {
         type: Object,
         observer: '_hassChanged'
       },
-      config: {
-        type: Object,
-        observer: '_configChanged'
-      }
     };
   }
 
@@ -24,20 +18,18 @@ class HuiCameraPreviewCard extends PolymerElement {
     return 4;
   }
 
-  _configChanged(config) {
+  setConfig(config) {
+    if (!validateEntityConfig(config, 'camera')) {
+      throw new Error('Error in card configuration.');
+    }
+
+    this._config = config;
     this._entityId = null;
 
     if (this.lastChild) {
       this.removeChild(this.lastChild);
     }
 
-    if (!validateEntityConfig(config, 'camera')) {
-      const error = 'Error in card configuration.';
-      const element = createCardElement(createErrorCardConfig(error, config));
-      this.appendChild(element);
-      return;
-    }
-
     const entityId = config.entity;
     if (!(entityId in this.hass.states)) {
       return;
@@ -56,8 +48,6 @@ class HuiCameraPreviewCard extends PolymerElement {
       const element = this.lastChild;
       element.stateObj = hass.states[entityId];
       element.hass = hass;
-    } else {
-      this._configChanged(this.config);
     }
   }
 }
diff --git a/src/panels/lovelace/cards/hui-column-card.js b/src/panels/lovelace/cards/hui-column-card.js
index 499d4ada17..247bb34e25 100644
--- a/src/panels/lovelace/cards/hui-column-card.js
+++ b/src/panels/lovelace/cards/hui-column-card.js
@@ -3,7 +3,6 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import computeCardSize from '../common/compute-card-size.js';
 import createCardElement from '../common/create-card-element.js';
-import createErrorConfig from '../common/create-error-card-config.js';
 
 class HuiColumnCard extends PolymerElement {
   static get template() {
@@ -29,10 +28,6 @@ class HuiColumnCard extends PolymerElement {
         type: Object,
         observer: '_hassChanged'
       },
-      config: {
-        type: Object,
-        observer: '_configChanged'
-      }
     };
   }
 
@@ -41,6 +36,11 @@ class HuiColumnCard extends PolymerElement {
     this._elements = [];
   }
 
+  ready() {
+    super.ready();
+    if (this._config) this._buildConfig();
+  }
+
   getCardSize() {
     let totalSize = 0;
     this._elements.forEach((element) => {
@@ -49,7 +49,18 @@ class HuiColumnCard extends PolymerElement {
     return totalSize;
   }
 
-  _configChanged(config) {
+  setConfig(config) {
+    if (!config || !config.cards || !Array.isArray(config.cards)) {
+      throw new Error('Card config incorrect');
+    }
+
+    this._config = config;
+    if (this.$) this._buildConfig();
+  }
+
+  _buildConfig() {
+    const config = this._config;
+
     this._elements = [];
     const root = this.$.root;
 
@@ -57,13 +68,6 @@ class HuiColumnCard extends PolymerElement {
       root.removeChild(root.lastChild);
     }
 
-    if (!config || !config.cards || !Array.isArray(config.cards)) {
-      const error = 'Card config incorrect.';
-      const element = createCardElement(createErrorConfig(error, config));
-      root.appendChild(element);
-      return;
-    }
-
     const elements = [];
     config.cards.forEach((card) => {
       const element = createCardElement(card);
diff --git a/src/panels/lovelace/cards/hui-entities-card.js b/src/panels/lovelace/cards/hui-entities-card.js
index 84811652f3..6edc11993d 100644
--- a/src/panels/lovelace/cards/hui-entities-card.js
+++ b/src/panels/lovelace/cards/hui-entities-card.js
@@ -50,9 +50,9 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
 
     <ha-card>
       <div class='header'>
-        <div class="name">[[_computeTitle(config)]]</div>
-        <template is="dom-if" if="[[_showHeaderToggle(config.show_header_toggle)]]">
-          <hui-entities-toggle hass="[[hass]]" entities="[[config.entities]]"></hui-entities-toggle>
+        <div class="name">[[_computeTitle(_config)]]</div>
+        <template is="dom-if" if="[[_showHeaderToggle(_config.show_header_toggle)]]">
+          <hui-entities-toggle hass="[[hass]]" entities="[[_config.entities]]"></hui-entities-toggle>
         </template>
       </div>
       <div id="states"></div>
@@ -66,10 +66,7 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
         type: Object,
         observer: '_hassChanged',
       },
-      config: {
-        type: Object,
-        observer: '_configChanged',
-      }
+      _config: Object,
     };
   }
 
@@ -78,9 +75,14 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
     this._elements = [];
   }
 
+  ready() {
+    super.ready();
+    if (this._config) this._buildConfig();
+  }
+
   getCardSize() {
     // +1 for the header
-    return 1 + (this.config ? this.config.entities.length : 0);
+    return 1 + (this._config ? this._config.entities.length : 0);
   }
 
   _computeTitle(config) {
@@ -91,7 +93,13 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
     return show !== false;
   }
 
-  _configChanged(config) {
+  setConfig(config) {
+    this._config = config;
+    if (this.$) this._buildConfig();
+  }
+
+  _buildConfig() {
+    const config = this._config;
     const root = this.$.states;
 
     while (root.lastChild) {
diff --git a/src/panels/lovelace/cards/hui-entity-filter-card.js b/src/panels/lovelace/cards/hui-entity-filter-card.js
index 7a0c69353e..6241fdeed6 100644
--- a/src/panels/lovelace/cards/hui-entity-filter-card.js
+++ b/src/panels/lovelace/cards/hui-entity-filter-card.js
@@ -2,7 +2,6 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import computeStateDomain from '../../../common/entity/compute_state_domain.js';
 import createCardElement from '../common/create-card-element.js';
-import createErrorCardConfig from '../common/create-error-card-config.js';
 
 class HuiEntitiesCard extends PolymerElement {
   static get properties() {
@@ -11,10 +10,6 @@ class HuiEntitiesCard extends PolymerElement {
         type: Object,
         observer: '_hassChanged'
       },
-      config: {
-        type: Object,
-        observer: '_configChanged'
-      }
     };
   }
 
@@ -54,35 +49,25 @@ class HuiEntitiesCard extends PolymerElement {
     return stateObj.entity_id.search(regEx) === 0;
   }
 
-  _configChanged(config) {
+  setConfig(config) {
+    if (!config.filter || !Array.isArray(config.filter)) {
+      throw new Error('Incorrect filter config.');
+    }
+
+    this._config = config;
+
     if (this.lastChild) {
       this.removeChild(this.lastChild);
     }
 
-    let error;
+    const card = 'card' in config ? Object.assign({}, config.card) : {};
+    if (!card.type) card.type = 'entities';
+    card.entities = [];
 
-    if (!config.filter || !Array.isArray(config.filter)) {
-      error = 'Incorrect filter config.';
-    } else if (!config.card) {
-      config = Object.assign({}, config, {
-        card: { type: 'entities' }
-      });
-    } else if (!config.card.type) {
-      config = Object.assign({}, config, {
-        card: Object.assign({}, config.card, { type: 'entities' })
-      });
-    }
-
-    let element;
-
-    if (error) {
-      element = createCardElement(createErrorCardConfig(error, config.card));
-    } else {
-      element = createCardElement(config.card);
-      element._filterRawConfig = config.card;
-      this._updateCardConfig(element);
-      element.hass = this.hass;
-    }
+    const element = createCardElement(card);
+    element._filterRawConfig = card;
+    this._updateCardConfig(element);
+    element.hass = this.hass;
     this.appendChild(element);
   }
 
@@ -93,12 +78,12 @@ class HuiEntitiesCard extends PolymerElement {
   }
 
   _updateCardConfig(element) {
-    if (!element || element.tagName === 'HUI-ERROR-CARD') return;
-    element.config = Object.assign(
+    if (!element || element.tagName === 'HUI-ERROR-CARD' || !this.hass) return;
+    element.setConfig(Object.assign(
       {},
       element._filterRawConfig,
-      { entities: this._getEntities(this.hass, this.config.filter) }
-    );
+      { entities: this._getEntities(this.hass, this._config.filter) }
+    ));
   }
 }
 customElements.define('hui-entity-filter-card', HuiEntitiesCard);
diff --git a/src/panels/lovelace/cards/hui-error-card.js b/src/panels/lovelace/cards/hui-error-card.js
index 122c22197f..e83eac18e4 100644
--- a/src/panels/lovelace/cards/hui-error-card.js
+++ b/src/panels/lovelace/cards/hui-error-card.js
@@ -12,17 +12,21 @@ class HuiErrorCard extends PolymerElement {
           padding: 8px;
         }
       </style>
-      [[config.error]]
-      <pre>[[_toStr(config.origConfig)]]</pre>
+      [[_config.error]]
+      <pre>[[_toStr(_config.origConfig)]]</pre>
     `;
   }
 
   static get properties() {
     return {
-      config: Object,
+      _config: Object,
     };
   }
 
+  setConfig(config) {
+    this._config = config;
+  }
+
   getCardSize() {
     return 4;
   }
diff --git a/src/panels/lovelace/cards/hui-glance-card.js b/src/panels/lovelace/cards/hui-glance-card.js
index c4796e4655..3a99384780 100644
--- a/src/panels/lovelace/cards/hui-glance-card.js
+++ b/src/panels/lovelace/cards/hui-glance-card.js
@@ -4,10 +4,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import computeStateDisplay from '../../../common/entity/compute_state_display.js';
 import computeStateName from '../../../common/entity/compute_state_name.js';
 import computeConfigEntities from '../common/compute-config-entities';
-import createErrorCardConfig from '../common/create-error-card-config.js';
-import validateEntitiesConfig from '../common/validate-entities-config';
 
-import './hui-error-card.js';
 import '../../../components/entity/state-badge.js';
 import '../../../components/ha-card.js';
 
@@ -50,9 +47,9 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
       </style>
 
-      <ha-card header="[[config.title]]">
+      <ha-card header="[[_config.title]]">
         <div class="entities">
-          <template is="dom-repeat" items="[[_entities]]">
+          <template is="dom-repeat" items="[[_computeEntities(_config)]]">
             <template is="dom-if" if="[[_showEntity(item, hass.states)]]">
               <div class="entity" on-click="_openDialog">
                 <div>[[_computeName(item, hass.states)]]</div>
@@ -62,9 +59,6 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
             </template>
           </template>
         </div>
-        <template is="dom-if" if="[[_error]]">
-          <hui-error-card config="[[_error]]"></hui-error-card>
-        </template>
       </ha-card>
     `;
   }
@@ -72,12 +66,7 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get properties() {
     return {
       hass: Object,
-      config: Object,
-      _entities: {
-        type: Array,
-        computed: '_computeEntities(config)'
-      },
-      _error: Object
+      _config: Object,
     };
   }
 
@@ -86,14 +75,15 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
   }
 
   _computeEntities(config) {
-    if (!validateEntitiesConfig(config)) {
-      const error = 'Error in card configuration.';
-      this._error = createErrorCardConfig(error, config);
-      return [];
+    return computeConfigEntities(config);
+  }
+
+  setConfig(config) {
+    if (!config || !config.entities || !Array.isArray(config.entities)) {
+      throw new Error('Error in card configuration.');
     }
 
-    this._error = null;
-    return computeConfigEntities(config);
+    this._config = config;
   }
 
   _showEntity(item, states) {
diff --git a/src/panels/lovelace/cards/hui-history-graph-card.js b/src/panels/lovelace/cards/hui-history-graph-card.js
index 3ec600370b..a9f7998573 100644
--- a/src/panels/lovelace/cards/hui-history-graph-card.js
+++ b/src/panels/lovelace/cards/hui-history-graph-card.js
@@ -1,40 +1,11 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import './hui-error-card.js';
 import '../../../components/ha-card.js';
 import '../../../components/state-history-charts.js';
 import '../../../data/ha-state-history-data.js';
 
-import createErrorCardConfig from '../common/create-error-card-config.js';
-
 class HuiHistoryGraphCard extends PolymerElement {
-  static get properties() {
-    return {
-      hass: Object,
-      config: {
-        type: Object,
-        observer: '_configChanged',
-      },
-      _error: Object,
-
-      stateHistory: Object,
-      stateHistoryLoading: Boolean,
-      cacheConfig: {
-        type: Object,
-        value: {
-          refresh: 0,
-          cacheKey: null,
-          hoursToShow: 24,
-        },
-      },
-    };
-  }
-
-  getCardSize() {
-    return 4;
-  }
-
   static get template() {
     return html`
       <style>
@@ -43,45 +14,53 @@ class HuiHistoryGraphCard extends PolymerElement {
         }
       </style>
 
-      <template is="dom-if" if="[[!_error]]">
-        <ha-card header=[[config.title]]>
-          <ha-state-history-data
-            hass="[[hass]]"
-            filter-type="recent-entity"
-            entity-id="[[config.entities]]"
-            data="{{stateHistory}}"
-            is-loading="{{stateHistoryLoading}}"
-            cache-config="[[cacheConfig]]"
-          ></ha-state-history-data>
-          <state-history-charts
-            hass="[[hass]]"
-            history-data="[[stateHistory]]"
-            is-loading-data="[[stateHistoryLoading]]"
-            up-to-now
-            no-single
-          ></state-history-charts>
-        </ha-card>
-      </template>
-
-      <template is="dom-if" if="[[_error]]">
-        <hui-error-card config="[[_error]]"></hui-error-card>
-      </template>
+      <ha-card header=[[_config.title]]>
+        <ha-state-history-data
+          hass="[[hass]]"
+          filter-type="recent-entity"
+          entity-id="[[_config.entities]]"
+          data="{{stateHistory}}"
+          is-loading="{{stateHistoryLoading}}"
+          cache-config="[[_computeCacheConfig(_config)]]"
+        ></ha-state-history-data>
+        <state-history-charts
+          hass="[[hass]]"
+          history-data="[[stateHistory]]"
+          is-loading-data="[[stateHistoryLoading]]"
+          up-to-now
+          no-single
+        ></state-history-charts>
+      </ha-card>
     `;
   }
 
-  _configChanged(config) {
-    if (config.entities && Array.isArray(config.entities)) {
-      this._error = null;
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      stateHistory: Object,
+      stateHistoryLoading: Boolean,
+    };
+  }
 
-      this.cacheConfig = {
-        cacheKey: config.entities,
-        hoursToShow: config.hours_to_show || 24,
-        refresh: config.refresh_interval || 0
-      };
-    } else {
-      const error = 'Error in card configuration.';
-      this._error = createErrorCardConfig(error, config);
+  getCardSize() {
+    return 4;
+  }
+
+  setConfig(config) {
+    if (!config.entities || !Array.isArray(config.entities)) {
+      throw new Error('Error in card configuration.');
     }
+
+    this._config = config;
+  }
+
+  _computeCacheConfig(config) {
+    return {
+      cacheKey: config.entities,
+      hoursToShow: config.hours_to_show || 24,
+      refresh: config.refresh_interval || 0
+    };
   }
 }
 
diff --git a/src/panels/lovelace/cards/hui-iframe-card.js b/src/panels/lovelace/cards/hui-iframe-card.js
index 51305734f9..f02d88c6c5 100644
--- a/src/panels/lovelace/cards/hui-iframe-card.js
+++ b/src/panels/lovelace/cards/hui-iframe-card.js
@@ -2,15 +2,6 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 class HuiIframeCard extends PolymerElement {
-  static get properties() {
-    return {
-      config: {
-        type: Object,
-        observer: '_configChanged'
-      }
-    };
-  }
-
   static get template() {
     return html`
       <style>
@@ -31,15 +22,33 @@ class HuiIframeCard extends PolymerElement {
           height: 100%;
         }
       </style>
-      <ha-card header="[[config.title]]">
+      <ha-card header="[[_config.title]]">
         <div id="root">
-          <iframe src="[[config.url]]"></iframe>
+          <iframe src="[[_config.url]]"></iframe>
         </div>
       </ha-card>
     `;
   }
 
-  _configChanged(config) {
+  static get properties() {
+    return {
+      _config: Object,
+    };
+  }
+
+  ready() {
+    super.ready();
+    if (this._config) this._buildConfig();
+  }
+
+  setConfig(config) {
+    this._config = config;
+    if (this.$) this._buildConfig();
+  }
+
+  _buildConfig() {
+    const config = this._config;
+
     this.$.root.style.paddingTop = config.aspect_ratio || '50%';
   }
 
diff --git a/src/panels/lovelace/cards/hui-markdown-card.js b/src/panels/lovelace/cards/hui-markdown-card.js
index e73cd9f2a1..e4abbaea1f 100644
--- a/src/panels/lovelace/cards/hui-markdown-card.js
+++ b/src/panels/lovelace/cards/hui-markdown-card.js
@@ -34,15 +34,15 @@ class HuiMarkdownCard extends PolymerElement {
           max-width: 100%;
         }
       </style>
-      <ha-card header="[[config.title]]">
-        <ha-markdown content='[[config.content]]'></ha-markdown>
+      <ha-card header="[[_config.title]]">
+        <ha-markdown content='[[_config.content]]'></ha-markdown>
       </ha-card>
     `;
   }
 
   static get properties() {
     return {
-      config: Object,
+      _config: Object,
       noTitle: {
         type: Boolean,
         reflectToAttribute: true,
@@ -51,8 +51,12 @@ class HuiMarkdownCard extends PolymerElement {
     };
   }
 
+  setConfig(config) {
+    this._config = config;
+  }
+
   getCardSize() {
-    return this.config.content.split('\n').length;
+    return this._config.content.split('\n').length;
   }
 
   _computeNoTitle(title) {
diff --git a/src/panels/lovelace/cards/hui-media-control-card.js b/src/panels/lovelace/cards/hui-media-control-card.js
index b13d4371f9..e2626f0edf 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.js
+++ b/src/panels/lovelace/cards/hui-media-control-card.js
@@ -2,8 +2,6 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../cards/ha-media_player-card.js';
 
-import createCardElement from '../common/create-card-element.js';
-import createErrorCardConfig from '../common/create-error-card-config.js';
 import validateEntityConfig from '../common/validate-entity-config.js';
 
 class HuiMediaControlCard extends PolymerElement {
@@ -13,10 +11,6 @@ class HuiMediaControlCard extends PolymerElement {
         type: Object,
         observer: '_hassChanged'
       },
-      config: {
-        type: Object,
-        observer: '_configChanged'
-      }
     };
   }
 
@@ -24,20 +18,17 @@ class HuiMediaControlCard extends PolymerElement {
     return 3;
   }
 
-  _configChanged(config) {
+  setConfig(config) {
+    if (!validateEntityConfig(config, 'media_player')) {
+      throw new Error('Error in card configuration.');
+    }
+
     this._entityId = null;
 
     if (this.lastChild) {
       this.removeChild(this.lastChild);
     }
 
-    if (!validateEntityConfig(config, 'media_player')) {
-      const error = 'Error in card configuration.';
-      const element = createCardElement(createErrorCardConfig(error, config));
-      this.appendChild(element);
-      return;
-    }
-
     const entityId = config.entity;
     if (!(entityId in this.hass.states)) {
       return;
@@ -56,8 +47,6 @@ class HuiMediaControlCard extends PolymerElement {
       const element = this.lastChild;
       element.stateObj = hass.states[entityId];
       element.hass = hass;
-    } else {
-      this._configChanged(this.config);
     }
   }
 }
diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.js b/src/panels/lovelace/cards/hui-picture-elements-card.js
index 19a8e7d6e9..b05bca9cc6 100644
--- a/src/panels/lovelace/cards/hui-picture-elements-card.js
+++ b/src/panels/lovelace/cards/hui-picture-elements-card.js
@@ -47,7 +47,7 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
       }
     </style>
 
-    <ha-card header="[[config.title]]">
+    <ha-card header="[[_config.title]]">
       <div id="root"></div>
     </ha-card>
 `;
@@ -59,18 +59,36 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
         type: Object,
         observer: '_hassChanged'
       },
-      config: {
-        type: Object,
-        observer: '_configChanged'
-      }
+      _config: Object,
     };
   }
 
+  constructor() {
+    super();
+    this._requiresStateObj = [];
+    this._requiresTextState = [];
+  }
+
+  ready() {
+    super.ready();
+    if (this._config) this._buildConfig();
+  }
+
   getCardSize() {
     return 4;
   }
 
-  _configChanged(config) {
+  setConfig(config) {
+    if (!config || !config.image || !Array.isArray(config.elements)) {
+      throw new Error('Invalid card configuration');
+    }
+
+    this._config = config;
+    if (this.$) this._buildConfig();
+  }
+
+  _buildConfig() {
+    const config = this._config;
     const root = this.$.root;
     this._requiresStateObj = [];
     this._requiresTextState = [];
@@ -79,41 +97,43 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
       root.removeChild(root.lastChild);
     }
 
-    if (config && config.image && config.elements) {
-      const img = document.createElement('img');
-      img.src = config.image;
-      root.appendChild(img);
+    const img = document.createElement('img');
+    img.src = config.image;
+    root.appendChild(img);
 
-      config.elements.forEach((element) => {
-        let el;
-        if (element.type === 'state-badge') {
-          const entityId = element.entity;
-          el = document.createElement('state-badge');
-          el.addEventListener('click', () => this._handleClick(entityId, element.tap_action === 'toggle'));
-          el.classList.add('clickable');
-          this._requiresStateObj.push({ el, entityId });
-        } else if (element.type === 'state-text') {
-          const entityId = element.entity;
-          el = document.createElement('div');
-          el.addEventListener('click', () => this._handleClick(entityId, false));
-          el.classList.add('clickable', 'state-text');
-          this._requiresTextState.push({ el, entityId });
-        } else if (element.type === 'service-button') {
-          el = document.createElement('ha-call-service-button');
-          el.hass = this.hass;
-          el.domain = (element.service && element.domain) || 'homeassistant';
-          el.service = (element.service && element.service.service) || '';
-          el.serviceData = (element.service && element.service.data) || {};
-          el.innerText = element.title;
-        }
-        el.classList.add('element');
-        if (element.style) {
-          Object.keys(element.style).forEach((prop) => {
-            el.style.setProperty(prop, element.style[prop]);
-          });
-        }
-        root.appendChild(el);
-      });
+    config.elements.forEach((element) => {
+      let el;
+      if (element.type === 'state-badge') {
+        const entityId = element.entity;
+        el = document.createElement('state-badge');
+        el.addEventListener('click', () => this._handleClick(entityId, element.tap_action === 'toggle'));
+        el.classList.add('clickable');
+        this._requiresStateObj.push({ el, entityId });
+      } else if (element.type === 'state-text') {
+        const entityId = element.entity;
+        el = document.createElement('div');
+        el.addEventListener('click', () => this._handleClick(entityId, false));
+        el.classList.add('clickable', 'state-text');
+        this._requiresTextState.push({ el, entityId });
+      } else if (element.type === 'service-button') {
+        el = document.createElement('ha-call-service-button');
+        el.hass = this.hass;
+        el.domain = (element.service && element.domain) || 'homeassistant';
+        el.service = (element.service && element.service.service) || '';
+        el.serviceData = (element.service && element.service.data) || {};
+        el.innerText = element.title;
+      }
+      el.classList.add('element');
+      if (element.style) {
+        Object.keys(element.style).forEach((prop) => {
+          el.style.setProperty(prop, element.style[prop]);
+        });
+      }
+      root.appendChild(el);
+    });
+
+    if (this.hass) {
+      this._hassChanged(this.hass);
     }
   }
 
diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.js b/src/panels/lovelace/cards/hui-picture-entity-card.js
index e67d94abe1..82e91cfb0e 100644
--- a/src/panels/lovelace/cards/hui-picture-entity-card.js
+++ b/src/panels/lovelace/cards/hui-picture-entity-card.js
@@ -1,7 +1,6 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import './hui-error-card.js';
 import '../../../components/ha-card.js';
 
 import { STATES_OFF } from '../../../common/const.js';
@@ -9,7 +8,6 @@ import computeDomain from '../../../common/entity/compute_domain.js';
 import computeStateDisplay from '../../../common/entity/compute_state_display.js';
 import computeStateDomain from '../../../common/entity/compute_state_domain.js';
 import computeStateName from '../../../common/entity/compute_state_name.js';
-import createErrorCardConfig from '../common/create-error-card-config.js';
 import toggleEntity from '../common/entity/toggle-entity.js';
 
 import LocalizeMixin from '../../../mixins/localize-mixin.js';
@@ -58,9 +56,6 @@ class HuiPictureEntityCard extends LocalizeMixin(PolymerElement) {
           <div id="title"></div>
           <div id="state"></div>
         </div>
-        <template is="dom-if" if="[[_error]]">
-          <hui-error-card config="[[_error]]"></hui-error-card>
-        </template>
       </ha-card>
     `;
   }
@@ -71,11 +66,7 @@ class HuiPictureEntityCard extends LocalizeMixin(PolymerElement) {
         type: Object,
         observer: '_hassChanged'
       },
-      config: {
-        type: Object,
-        observer: '_configChanged'
-      },
-      _error: Object
+      _config: Object,
     };
   }
 
@@ -83,17 +74,15 @@ class HuiPictureEntityCard extends LocalizeMixin(PolymerElement) {
     return 3;
   }
 
-  _configChanged(config) {
+  setConfig(config) {
     if (!config || !config.entity || (!config.image && !config.state_image)) {
-      const error = 'Error in card configuration.';
-      this._error = createErrorCardConfig(error, config);
-      return;
+      throw new Error('Error in card configuration.');
     }
-    this._error = null;
+    this._config = config;
   }
 
   _hassChanged(hass) {
-    const config = this.config;
+    const config = this._config;
     const entityId = config && config.entity;
     if (!entityId) {
       return;
@@ -136,7 +125,7 @@ class HuiPictureEntityCard extends LocalizeMixin(PolymerElement) {
   }
 
   _cardClicked() {
-    const entityId = this.config && this.config.entity;
+    const entityId = this._config && this._config.entity;
     if (!(entityId in this.hass.states)) {
       return;
     }
diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.js b/src/panels/lovelace/cards/hui-picture-glance-card.js
index 5e61c922c8..ccc8ee06a5 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.js
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.js
@@ -2,14 +2,12 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import '@polymer/paper-icon-button/paper-icon-button.js';
 
-import './hui-error-card.js';
 import '../../../components/ha-card.js';
 
 import { STATES_OFF } from '../../../common/const.js';
 import canToggleState from '../../../common/entity/can_toggle_state.js';
 import computeStateDisplay from '../../../common/entity/compute_state_display.js';
 import computeStateName from '../../../common/entity/compute_state_name.js';
-import createErrorCardConfig from '../common/create-error-card-config.js';
 import stateIcon from '../../../common/entity/state_icon.js';
 import toggleEntity from '../common/entity/toggle-entity.js';
 
@@ -63,9 +61,9 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </style>
 
       <ha-card>
-        <img src="[[config.image]]">
+        <img src="[[_config.image]]">
         <div class="box">
-          <div class="title">[[config.title]]</div>
+          <div class="title">[[_config.title]]</div>
           <div>
             <template is="dom-repeat" items="[[_entitiesDialog]]">
               <template is="dom-if" if="[[_showEntity(item, hass.states)]]">
@@ -91,9 +89,6 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
             </template>
           </div>
         </div>
-        <template is="dom-if" if="[[_error]]">
-          <hui-error-card config="[[_error]]"></hui-error-card>
-        </template>
       </ha-card>
     `;
   }
@@ -101,13 +96,9 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get properties() {
     return {
       hass: Object,
-      config: {
-        type: Object,
-        observer: '_configChanged'
-      },
+      _config: Object,
       _entitiesDialog: Array,
       _entitiesService: Array,
-      _error: Object
     };
   }
 
@@ -115,26 +106,24 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
     return 3;
   }
 
-  _configChanged(config) {
+  setConfig(config) {
+    if (!config || !config.entities || !Array.isArray(config.entities) || !config.image) {
+      throw new Error('Invalid card configuration');
+    }
+
+    this._config = config;
     let dialog = [];
     let service = [];
-    let _error = null;
-    if (config && config.entities && Array.isArray(config.entities) && config.image) {
-      if (config.force_dialog) {
-        dialog = config.entities;
-      } else {
-        service = config.entities.filter(entity =>
-          canToggleState(this.hass, this.hass.states[entity]));
-        dialog = config.entities.filter(entity => !service.includes(entity));
-      }
+    if (config.force_dialog) {
+      dialog = config.entities;
     } else {
-      const error = 'Error in card configuration.';
-      _error = createErrorCardConfig(error, config);
+      service = config.entities.filter(entity =>
+        canToggleState(this.hass, this.hass.states[entity]));
+      dialog = config.entities.filter(entity => !service.includes(entity));
     }
     this.setProperties({
       _entitiesDialog: dialog,
       _entitiesService: service,
-      _error
     });
   }
 
diff --git a/src/panels/lovelace/cards/hui-plant-status-card.js b/src/panels/lovelace/cards/hui-plant-status-card.js
index 1929680244..1fae28ddda 100644
--- a/src/panels/lovelace/cards/hui-plant-status-card.js
+++ b/src/panels/lovelace/cards/hui-plant-status-card.js
@@ -2,8 +2,6 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../cards/ha-plant-card.js';
 
-import createCardElement from '../common/create-card-element.js';
-import createErrorCardConfig from '../common/create-error-card-config.js';
 import validateEntityConfig from '../common/validate-entity-config.js';
 
 class HuiPlantStatusCard extends PolymerElement {
@@ -13,10 +11,6 @@ class HuiPlantStatusCard extends PolymerElement {
         type: Object,
         observer: '_hassChanged'
       },
-      config: {
-        type: Object,
-        observer: '_configChanged'
-      }
     };
   }
 
@@ -24,20 +18,17 @@ class HuiPlantStatusCard extends PolymerElement {
     return 3;
   }
 
-  _configChanged(config) {
+  setConfig(config) {
+    if (!validateEntityConfig(config, 'plant')) {
+      throw new Error('Error in card configuration.');
+    }
+
     this._entityId = null;
 
     if (this.lastChild) {
       this.removeChild(this.lastChild);
     }
 
-    if (!validateEntityConfig(config, 'plant')) {
-      const error = 'Error in card configuration.';
-      const element = createCardElement(createErrorCardConfig(error, config));
-      this.appendChild(element);
-      return;
-    }
-
     const entityId = config.entity;
     if (!(entityId in this.hass.states)) {
       return;
@@ -56,8 +47,6 @@ class HuiPlantStatusCard extends PolymerElement {
       const element = this.lastChild;
       element.stateObj = hass.states[entityId];
       element.hass = hass;
-    } else {
-      this._configChanged(this.config);
     }
   }
 }
diff --git a/src/panels/lovelace/cards/hui-row-card.js b/src/panels/lovelace/cards/hui-row-card.js
index a5d06256af..fc36c3a5e0 100644
--- a/src/panels/lovelace/cards/hui-row-card.js
+++ b/src/panels/lovelace/cards/hui-row-card.js
@@ -3,7 +3,6 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import computeCardSize from '../common/compute-card-size.js';
 import createCardElement from '../common/create-card-element.js';
-import createErrorConfig from '../common/create-error-card-config.js';
 
 class HuiRowCard extends PolymerElement {
   static get template() {
@@ -29,10 +28,6 @@ class HuiRowCard extends PolymerElement {
         type: Object,
         observer: '_hassChanged'
       },
-      config: {
-        type: Object,
-        observer: '_configChanged'
-      }
     };
   }
 
@@ -41,6 +36,11 @@ class HuiRowCard extends PolymerElement {
     this._elements = [];
   }
 
+  ready() {
+    super.ready();
+    if (this._config) this._buildConfig();
+  }
+
   getCardSize() {
     let size = 1;
     this._elements.forEach((element) => {
@@ -50,7 +50,15 @@ class HuiRowCard extends PolymerElement {
     return size;
   }
 
-  _configChanged(config) {
+  setConfig(config) {
+    if (!config || !config.cards || !Array.isArray(config.cards)) {
+      throw new Error('Card config incorrect.');
+    }
+    if (this.$) this._buildConfig();
+  }
+
+  _buildConfig() {
+    const config = this._config;
     this._elements = [];
     const root = this.$.root;
 
@@ -58,13 +66,6 @@ class HuiRowCard extends PolymerElement {
       root.removeChild(root.lastChild);
     }
 
-    if (!config || !config.cards || !Array.isArray(config.cards)) {
-      const error = 'Card config incorrect.';
-      const element = createCardElement(createErrorConfig(error, config));
-      root.appendChild(element);
-      return;
-    }
-
     const elements = [];
     config.cards.forEach((card) => {
       const element = createCardElement(card);
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.js b/src/panels/lovelace/cards/hui-weather-forecast-card.js
index 657f036e6a..0ffcd7cc60 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.js
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.js
@@ -2,8 +2,6 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../cards/ha-weather-card.js';
 
-import createCardElement from '../common/create-card-element.js';
-import createErrorCardConfig from '../common/create-error-card-config.js';
 import validateEntityConfig from '../common/validate-entity-config.js';
 
 class HuiWeatherForecastCard extends PolymerElement {
@@ -13,10 +11,6 @@ class HuiWeatherForecastCard extends PolymerElement {
         type: Object,
         observer: '_hassChanged'
       },
-      config: {
-        type: Object,
-        observer: '_configChanged'
-      }
     };
   }
 
@@ -24,20 +18,17 @@ class HuiWeatherForecastCard extends PolymerElement {
     return 4;
   }
 
-  _configChanged(config) {
+  setConfig(config) {
+    if (!validateEntityConfig(config, 'weather')) {
+      throw new Error('Error in card configuration.');
+    }
+
     this._entityId = null;
 
     if (this.lastChild) {
       this.removeChild(this.lastChild);
     }
 
-    if (!validateEntityConfig(config, 'weather')) {
-      const error = 'Error in card configuration.';
-      const element = createCardElement(createErrorCardConfig(error, config));
-      this.appendChild(element);
-      return;
-    }
-
     const entityId = config.entity;
     if (!(entityId in this.hass.states)) {
       return;
@@ -56,8 +47,6 @@ class HuiWeatherForecastCard extends PolymerElement {
       const element = this.lastChild;
       element.stateObj = hass.states[entityId];
       element.hass = hass;
-    } else {
-      this._configChanged(this.config);
     }
   }
 }
diff --git a/src/panels/lovelace/common/create-card-element.js b/src/panels/lovelace/common/create-card-element.js
index 6e18620336..8e8e4bd657 100644
--- a/src/panels/lovelace/common/create-card-element.js
+++ b/src/panels/lovelace/common/create-card-element.js
@@ -42,7 +42,14 @@ const CUSTOM_TYPE_PREFIX = 'custom:';
 
 function _createElement(tag, config) {
   const element = document.createElement(tag);
-  element.config = config;
+  try {
+    element.setConfig(config);
+  } catch (err) {
+    // eslint-disable-next-line
+    console.error(tag, err);
+    // eslint-disable-next-line
+    return _createErrorElement(err.message, config);
+  }
   return element;
 }
 
diff --git a/src/panels/lovelace/common/validate-entities-config.js b/src/panels/lovelace/common/validate-entities-config.js
index 4fe36aa438..c8f535aa45 100644
--- a/src/panels/lovelace/common/validate-entities-config.js
+++ b/src/panels/lovelace/common/validate-entities-config.js
@@ -13,11 +13,11 @@ export default function validateEntitiesConfig(config, additionalKeys = []) {
     return false;
   }
 
-  return entities.every(entity => {
+  return entities.every((entity) => {
     if (typeof entity === 'string') {
       return validEntityId(entity) && !additionalKeys.length;
     }
     return entity && typeof entity === 'object' && !Array.isArray(entity) &&
-      'entity' in entity && validEntityId(entity.entity) && additionalKeys.every(key => key in entity)
+      'entity' in entity && validEntityId(entity.entity) && additionalKeys.every(key => key in entity);
   });
 }