Love: cleanup (#1358)

* Love: cleanup

* Lint

* Fix CopyPaste

* Change config key names for history

* Restore old card size

* Add function description

* Use createErrorCardConfig

src/panels/lovelace/cards/hui-camera-preview-card.js

@@ -1,20 +1,21 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import computeDomain from '../../../common/entity/compute_domain.js';
-
 import '../../../cards/ha-camera-card.js';
-import './hui-error-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 {
   static get properties() {
     return {
       hass: {
         type: Object,
-        observer: '_hassChanged',
+        observer: '_hassChanged'
       },
       config: {
         type: Object,
-        observer: '_configChanged',
+        observer: '_configChanged'
       }
     };
   }
@@ -25,50 +26,35 @@ class HuiCameraPreviewCard extends PolymerElement {
 
   _configChanged(config) {
     this._entityId = null;
+
     if (this.lastChild) {
       this.removeChild(this.lastChild);
     }
-    const entityId = config && config.entity;
-    if (entityId && !(entityId in this.hass.states)) {
+
+    if (!validateEntityConfig(config, 'camera')) {
+      const error = 'Error in card configuration.';
+      const element = createCardElement(createErrorCardConfig(error, config));
+      this.appendChild(element);
       return;
     }
 
-    let error = null;
-    let cardConfig;
-    let tag;
-
-    if (entityId) {
-      if (computeDomain(entityId) === 'camera') {
-        this._entityId = entityId;
-        tag = 'ha-camera-card';
-        cardConfig = config;
-      } else {
-        error = 'Entity domain must be "camera"';
-      }
-    } else {
-      error = 'Entity not defined in card config';
+    const entityId = config.entity;
+    if (!(entityId in this.hass.states)) {
+      return;
     }
 
-    if (error) {
-      tag = 'hui-error-card';
-      cardConfig = { error };
-    }
-    const element = document.createElement(tag);
-
-    if (!error) {
-      element.stateObj = this.hass.states[entityId];
-      element.hass = this.hass;
-    }
-
-    element.config = cardConfig;
+    const element = document.createElement('ha-camera-card');
+    element.stateObj = this.hass.states[entityId];
+    element.hass = this.hass;
     this.appendChild(element);
+    this._entityId = entityId;
   }
 
   _hassChanged(hass) {
-    if (this.lastChild && this._entityId && this._entityId in hass.states) {
+    const entityId = this._entityId;
+    if (entityId && entityId in hass.states) {
       const element = this.lastChild;
-      const stateObj = hass.states[this._entityId];
-      element.stateObj = stateObj;
+      element.stateObj = hass.states[entityId];
       element.hass = hass;
     } else {
       this._configChanged(this.config);

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

@@ -21,17 +21,6 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         ha-card {
           padding: 16px;
         }
-        .header {
-          @apply --paper-font-headline;
-          /* overwriting line-height +8 because entity-toggle can be 40px height,
-            compensating this with reduced padding */
-          line-height: 40px;
-          color: var(--primary-text-color);
-          padding: 4px 0 12px;
-        }
-        .header .name {
-          @apply --paper-font-common-nowrap;
-        }
         .entities {
           padding: 4px 0;
           display: flex;
@@ -62,10 +51,7 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
       </style>
 
-      <ha-card>
-        <div class="header">
-          <div class="name">[[_computeTitle(config)]]</div>
-        </div>
+      <ha-card header="[[config.title]]">
         <div class="entities">
           <template is="dom-repeat" items="[[_entities]]">
             <template is="dom-if" if="[[_showEntity(item, hass.states)]]">
@@ -100,10 +86,6 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
     return 3;
   }
 
-  _computeTitle(config) {
-    return config.title;
-  }
-
   _computeEntities(config) {
     if (config && config.entities && Array.isArray(config.entities)) {
       this._error = null;

src/panels/lovelace/cards/hui-history-graph-card.js

@@ -5,6 +5,8 @@ import './hui-error-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 {
@@ -13,7 +15,8 @@ class HuiHistoryGraphCard extends PolymerElement {
         type: Object,
         observer: '_configChanged',
       },
-      _error: String,
+      _error: Object,
+
       stateHistory: Object,
       stateHistoryLoading: Boolean,
       cacheConfig: {
@@ -37,24 +40,10 @@ class HuiHistoryGraphCard extends PolymerElement {
         ha-card {
           padding: 16px;
         }
-        .header {
-          @apply --paper-font-headline;
-          /* overwriting line-height +8 because entity-toggle can be 40px height,
-            compensating this with reduced padding */
-          line-height: 40px;
-          color: var(--primary-text-color);
-          padding: 4px 0 12px;
-        }
-        .header .name {
-          @apply --paper-font-common-nowrap;
-        }
       </style>
 
       <template is="dom-if" if="[[!_error]]">
-        <ha-card>
-          <div class='header'>
-            <div class="name">[[config.title]]</div>
-          </div>
+        <ha-card header=[[config.title]]>
           <ha-state-history-data
             hass="[[hass]]"
             filter-type="recent-entity"
@@ -74,7 +63,7 @@ class HuiHistoryGraphCard extends PolymerElement {
       </template>
 
       <template is="dom-if" if="[[_error]]">
-        <hui-error-card error="[[_error]]" config="[[config]]"></hui-error-card>
+        <hui-error-card config="[[_error]]"></hui-error-card>
       </template>
     `;
   }
@@ -84,12 +73,13 @@ class HuiHistoryGraphCard extends PolymerElement {
       this._error = null;
 
       this.cacheConfig = {
-        refresh: config.refresh || 0,
         cacheKey: config.entities,
-        hoursToShow: config.hours || 24
+        hoursToShow: config.hours_to_show || 24,
+        refresh: config.refresh_interval || 0
       };
     } else {
-      this._error = 'No entities configured.';
+      const error = 'Error in card configuration.';
+      this._error = createErrorCardConfig(error, config);
     }
   }
 }

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

@@ -18,18 +18,7 @@ class HuiIframeCard extends PolymerElement {
           line-height: 0;
           overflow: hidden;
         }
-        .header {
-          @apply --paper-font-headline;
-          /* overwriting line-height +8 because entity-toggle can be 40px height,
-            compensating this with reduced padding */
-          line-height: 40px;
-          color: var(--primary-text-color);
-          padding: 20px 16px 12px 16px;
-        }
-        .header .name {
-          @apply --paper-font-common-nowrap;
-        }
-        .wrapper {
+        #root {
           width: 100%;
           position: relative;
         }
@@ -42,26 +31,16 @@ class HuiIframeCard extends PolymerElement {
           height: 100%;
         }
       </style>
-      <ha-card>
-        <template is="dom-if" if="[[_computeTitle(config)]]">
-          <div class="header">
-            <div class="name">[[_computeTitle(config)]]</div>
-          </div>
-        </template>
-        <div class="wrapper">
+      <ha-card header="[[config.title]]">
+        <div id="root">
           <iframe src="[[config.url]]"></iframe>
         </div>
       </ha-card>
     `;
   }
 
-  _computeTitle(config) {
-    if (!config.url) return 'Error: URL not configured';
-    return config.title || '';
-  }
-
   _configChanged(config) {
-    this.shadowRoot.querySelector('.wrapper').style.paddingTop = config.aspect_ratio || '50%';
+    this.$.root.style.paddingTop = config.aspect_ratio || '50%';
   }
 
   getCardSize() {

src/panels/lovelace/cards/hui-media-control-card.js

@@ -1,20 +1,21 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import computeDomain from '../../../common/entity/compute_domain.js';
-
 import '../../../cards/ha-media_player-card.js';
-import './hui-error-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 {
   static get properties() {
     return {
       hass: {
         type: Object,
-        observer: '_hassChanged',
+        observer: '_hassChanged'
       },
       config: {
         type: Object,
-        observer: '_configChanged',
+        observer: '_configChanged'
       }
     };
   }
@@ -25,50 +26,35 @@ class HuiMediaControlCard extends PolymerElement {
 
   _configChanged(config) {
     this._entityId = null;
+
     if (this.lastChild) {
       this.removeChild(this.lastChild);
     }
-    const entityId = config && config.entity;
-    if (entityId && !(entityId in this.hass.states)) {
+
+    if (!validateEntityConfig(config, 'media_player')) {
+      const error = 'Error in card configuration.';
+      const element = createCardElement(createErrorCardConfig(error, config));
+      this.appendChild(element);
       return;
     }
 
-    let error = null;
-    let cardConfig;
-    let tag;
-
-    if (entityId) {
-      if (computeDomain(entityId) === 'media_player') {
-        this._entityId = entityId;
-        tag = 'ha-media_player-card';
-        cardConfig = config;
-      } else {
-        error = 'Entity domain must be "media_player"';
-      }
-    } else {
-      error = 'Entity not defined in card config';
+    const entityId = config.entity;
+    if (!(entityId in this.hass.states)) {
+      return;
     }
 
-    if (error) {
-      tag = 'hui-error-card';
-      cardConfig = { error };
-    }
-    const element = document.createElement(tag);
-
-    if (!error) {
-      element.stateObj = this.hass.states[entityId];
-      element.hass = this.hass;
-    }
-
-    element.config = cardConfig;
+    const element = document.createElement('ha-media_player-card');
+    element.stateObj = this.hass.states[entityId];
+    element.hass = this.hass;
     this.appendChild(element);
+    this._entityId = entityId;
   }
 
   _hassChanged(hass) {
-    if (this.lastChild && this._entityId && this._entityId in hass.states) {
+    const entityId = this._entityId;
+    if (entityId && entityId in hass.states) {
       const element = this.lastChild;
-      const stateObj = hass.states[this._entityId];
-      element.stateObj = stateObj;
+      element.stateObj = hass.states[entityId];
       element.hass = hass;
     } else {
       this._configChanged(this.config);

src/panels/lovelace/cards/hui-picture-elements-card.js

@@ -105,7 +105,7 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
           el.domain = (element.service && element.domain) || 'homeassistant';
           el.service = (element.service && element.service.service) || '';
           el.serviceData = (element.service && element.service.data) || {};
-          el.innerText = element.text;
+          el.innerText = element.title;
         }
         el.classList.add('element');
         if (element.style) {

src/panels/lovelace/cards/hui-plant-status-card.js

@@ -1,20 +1,21 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import computeDomain from '../../../common/entity/compute_domain.js';
-
 import '../../../cards/ha-plant-card.js';
-import './hui-error-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 {
   static get properties() {
     return {
       hass: {
         type: Object,
-        observer: '_hassChanged',
+        observer: '_hassChanged'
       },
       config: {
         type: Object,
-        observer: '_configChanged',
+        observer: '_configChanged'
       }
     };
   }
@@ -25,50 +26,35 @@ class HuiPlantStatusCard extends PolymerElement {
 
   _configChanged(config) {
     this._entityId = null;
+
     if (this.lastChild) {
       this.removeChild(this.lastChild);
     }
-    const entityId = config && config.entity;
-    if (entityId && !(entityId in this.hass.states)) {
+
+    if (!validateEntityConfig(config, 'plant')) {
+      const error = 'Error in card configuration.';
+      const element = createCardElement(createErrorCardConfig(error, config));
+      this.appendChild(element);
       return;
     }
 
-    let error = null;
-    let cardConfig;
-    let tag;
-
-    if (entityId) {
-      if (computeDomain(entityId) === 'plant') {
-        this._entityId = entityId;
-        tag = 'ha-plant-card';
-        cardConfig = config;
-      } else {
-        error = 'Entity domain must be "plant"';
-      }
-    } else {
-      error = 'Entity not defined in card config';
+    const entityId = config.entity;
+    if (!(entityId in this.hass.states)) {
+      return;
     }
 
-    if (error) {
-      tag = 'hui-error-card';
-      cardConfig = { error };
-    }
-    const element = document.createElement(tag);
-
-    if (!error) {
-      element.stateObj = this.hass.states[entityId];
-      element.hass = this.hass;
-    }
-
-    element.config = cardConfig;
+    const element = document.createElement('ha-plant-card');
+    element.stateObj = this.hass.states[entityId];
+    element.hass = this.hass;
     this.appendChild(element);
+    this._entityId = entityId;
   }
 
   _hassChanged(hass) {
-    if (this.lastChild && this._entityId && this._entityId in hass.states) {
+    const entityId = this._entityId;
+    if (entityId && entityId in hass.states) {
       const element = this.lastChild;
-      const stateObj = hass.states[this._entityId];
-      element.stateObj = stateObj;
+      element.stateObj = hass.states[entityId];
       element.hass = hass;
     } else {
       this._configChanged(this.config);

src/panels/lovelace/cards/hui-weather-forecast-card.js

@@ -1,20 +1,21 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import computeDomain from '../../../common/entity/compute_domain.js';
-
 import '../../../cards/ha-weather-card.js';
-import './hui-error-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 {
   static get properties() {
     return {
       hass: {
         type: Object,
-        observer: '_hassChanged',
+        observer: '_hassChanged'
       },
       config: {
         type: Object,
-        observer: '_configChanged',
+        observer: '_configChanged'
       }
     };
   }
@@ -25,50 +26,35 @@ class HuiWeatherForecastCard extends PolymerElement {
 
   _configChanged(config) {
     this._entityId = null;
+
     if (this.lastChild) {
       this.removeChild(this.lastChild);
     }
-    const entityId = config && config.entity;
-    if (entityId && !(entityId in this.hass.states)) {
+
+    if (!validateEntityConfig(config, 'weather')) {
+      const error = 'Error in card configuration.';
+      const element = createCardElement(createErrorCardConfig(error, config));
+      this.appendChild(element);
       return;
     }
 
-    let error = null;
-    let cardConfig;
-    let tag;
-
-    if (entityId) {
-      if (computeDomain(entityId) === 'weather') {
-        this._entityId = entityId;
-        tag = 'ha-weather-card';
-        cardConfig = config;
-      } else {
-        error = 'Entity domain must be "weather"';
-      }
-    } else {
-      error = 'Entity not defined in card config';
+    const entityId = config.entity;
+    if (!(entityId in this.hass.states)) {
+      return;
     }
 
-    if (error) {
-      tag = 'hui-error-card';
-      cardConfig = { error };
-    }
-    const element = document.createElement(tag);
-
-    if (!error) {
-      element.stateObj = this.hass.states[entityId];
-      element.hass = this.hass;
-    }
-
-    element.config = cardConfig;
+    const element = document.createElement('ha-weather-card');
+    element.stateObj = this.hass.states[entityId];
+    element.hass = this.hass;
     this.appendChild(element);
+    this._entityId = entityId;
   }
 
   _hassChanged(hass) {
-    if (this.lastChild && this._entityId && this._entityId in hass.states) {
+    const entityId = this._entityId;
+    if (entityId && entityId in hass.states) {
       const element = this.lastChild;
-      const stateObj = hass.states[this._entityId];
-      element.stateObj = stateObj;
+      element.stateObj = hass.states[entityId];
       element.hass = hass;
     } else {
       this._configChanged(this.config);

src/panels/lovelace/common/validate-entity-config.js

@@ -0,0 +1,16 @@
+// check for valid value of config.entity with optinal entity dommain check
+import computeDomain from '../../../common/entity/compute_domain.js';
+
+export default function validateEntityConfig(config, domain = null) {
+  const entity = config && config.entity;
+
+  if (!entity || typeof entity !== 'string') {
+    return false;
+  }
+
+  if (domain) {
+    return computeDomain(entity) === domain;
+  }
+
+  return true;
+}