Random fixes (#1369)

* Random fixes

* weather card to use legacy wrapper

* Lint

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

@@ -1,55 +1,15 @@
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-
 import '../../../cards/ha-camera-card.js';
 
-import validateEntityConfig from '../common/validate-entity-config.js';
+import LegacyWrapperCard from './hui-legacy-wrapper-card.js';
 
-class HuiCameraPreviewCard extends PolymerElement {
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: '_hassChanged'
-      },
-    };
+class HuiCameraPreviewCard extends LegacyWrapperCard {
+  constructor() {
+    super('ha-camera-card', 'camera');
   }
 
   getCardSize() {
     return 4;
   }
-
-  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);
-    }
-
-    const entityId = config.entity;
-    if (!(entityId in this.hass.states)) {
-      return;
-    }
-
-    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) {
-    const entityId = this._entityId;
-    if (entityId && entityId in hass.states) {
-      const element = this.lastChild;
-      element.stateObj = hass.states[entityId];
-      element.hass = hass;
-    }
-  }
 }
 
 customElements.define('hui-camera-preview-card', HuiCameraPreviewCard);

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

@@ -49,12 +49,14 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
     </style>
 
     <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>
-        </template>
-      </div>
+      <template is='dom-if' if='[[_showHeader(_config)]]'>
+        <div class='header'>
+          <div class="name">[[_config.title]]</div>
+          <template is="dom-if" if="[[_showHeaderToggle(_config.show_header_toggle)]]">
+            <hui-entities-toggle hass="[[hass]]" entities="[[_config.entities]]"></hui-entities-toggle>
+          </template>
+        </div>
+      </template>
       <div id="states"></div>
     </ha-card>
 `;
@@ -85,12 +87,14 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
     return 1 + (this._config ? this._config.entities.length : 0);
   }
 
-  _computeTitle(config) {
-    return config.title;
+  _showHeaderToggle(show) {
+    // If show is undefined, we treat it as true
+    return show !== false;
   }
 
-  _showHeaderToggle(show) {
-    return show !== false;
+  _showHeader(config) {
+    // Show header if either title or toggle configured to show in it
+    return config.title || config.show_header_toggle;
   }
 
   setConfig(config) {

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

@@ -22,6 +22,9 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         ha-card {
           padding: 16px;
         }
+        ha-card[header] {
+          padding-top: 0;
+        }
         .entities {
           padding: 4px 0;
           display: flex;
@@ -47,7 +50,7 @@ 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="[[_computeEntities(_config)]]">
             <template is="dom-if" if="[[_showEntity(item, hass.states)]]">

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

@@ -12,9 +12,12 @@ class HuiHistoryGraphCard extends PolymerElement {
         ha-card {
           padding: 16px;
         }
+        ha-card[header] {
+          padding-top: 0;
+        }
       </style>
 
-      <ha-card header=[[_config.title]]>
+      <ha-card header$='[[_config.title]]'>
         <ha-state-history-data
           hass="[[hass]]"
           filter-type="recent-entity"

src/panels/lovelace/cards/hui-legacy-wrapper-card.js

@@ -0,0 +1,49 @@
+import createErrorCardConfig from '../common/create-error-card-config.js';
+import validateEntityConfig from '../common/validate-entity-config.js';
+
+
+export default class LegacyWrapperCard extends HTMLElement {
+  constructor(tag, domain) {
+    super();
+    this._tag = tag.toUpperCase();
+    this._domain = domain;
+    this._element = null;
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  setConfig(config) {
+    if (!validateEntityConfig(config, this._domain)) {
+      throw new Error('Error in card configuration.');
+    }
+
+    this._config = config;
+  }
+
+  set hass(hass) {
+    const entityId = this._config.entity;
+
+    if (entityId in hass.states) {
+      this._ensureElement(this._tag);
+      this.lastChild.setProperties({
+        hass,
+        stateObj: hass.states[entityId],
+      });
+    } else {
+      this._ensureElement('HUI-ERROR-CARD');
+      this.lastChild.setConfig(createErrorCardConfig(`No state available for ${entityId}`, this._config));
+    }
+  }
+
+  _ensureElement(tag) {
+    if (this.lastChild && this.lastChild.tagName === tag) return;
+
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    this.appendChild(document.createElement(tag));
+  }
+}

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

@@ -21,10 +21,10 @@ class HuiMarkdownCard extends PolymerElement {
         :host([no-title]) ha-markdown {
           padding-top: 16px;
         }
-        ha-markdown p:first-child {
+        ha-markdown > *:first-child {
           margin-top: 0;
         }
-        ha-markdown p:last-child {
+        ha-markdown > *:last-child {
           margin-bottom: 0;
         }
         ha-markdown a {
@@ -46,7 +46,7 @@ class HuiMarkdownCard extends PolymerElement {
       noTitle: {
         type: Boolean,
         reflectToAttribute: true,
-        computed: '_computeNoTitle(config.title)',
+        computed: '_computeNoTitle(_config.title)',
       },
     };
   }

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

@@ -1,53 +1,10 @@
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-
 import '../../../cards/ha-media_player-card.js';
 
-import validateEntityConfig from '../common/validate-entity-config.js';
+import LegacyWrapperCard from './hui-legacy-wrapper-card.js';
 
-class HuiMediaControlCard extends PolymerElement {
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: '_hassChanged'
-      },
-    };
-  }
-
-  getCardSize() {
-    return 3;
-  }
-
-  setConfig(config) {
-    if (!validateEntityConfig(config, 'media_player')) {
-      throw new Error('Error in card configuration.');
-    }
-
-    this._entityId = null;
-
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
-
-    const entityId = config.entity;
-    if (!(entityId in this.hass.states)) {
-      return;
-    }
-
-    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) {
-    const entityId = this._entityId;
-    if (entityId && entityId in hass.states) {
-      const element = this.lastChild;
-      element.stateObj = hass.states[entityId];
-      element.hass = hass;
-    }
+class HuiMediaControlCard extends LegacyWrapperCard {
+  constructor() {
+    super('ha-media_player-card', 'media_player');
   }
 }
 

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

@@ -97,8 +97,15 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
     return {
       hass: Object,
       _config: Object,
-      _entitiesDialog: Array,
-      _entitiesService: Array,
+      _entitiesDialog: {
+        type: Array,
+        computed: '_computeEntitiesDialog(hass, _config, _entitiesService)',
+      },
+      _entitiesService: {
+        type: Array,
+        value: [],
+        computed: '_computeEntitiesService(hass, _config)',
+      },
     };
   }
 
@@ -112,19 +119,23 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
     }
 
     this._config = config;
-    let dialog = [];
-    let service = [];
+  }
+
+  _computeEntitiesDialog(hass, config, entitiesService) {
     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));
+      return config.entities;
     }
-    this.setProperties({
-      _entitiesDialog: dialog,
-      _entitiesService: service,
-    });
+
+    return config.entities.filter(entity => !entitiesService.includes(entity));
+  }
+
+  _computeEntitiesService(hass, config) {
+    if (config.force_dialog) {
+      return [];
+    }
+
+    return config.entities.filter(entity =>
+      canToggleState(this.hass, this.hass.states[entity]));
   }
 
   _showEntity(entityId, states) {

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

@@ -1,53 +1,10 @@
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-
 import '../../../cards/ha-plant-card.js';
 
-import validateEntityConfig from '../common/validate-entity-config.js';
+import LegacyWrapperCard from './hui-legacy-wrapper-card.js';
 
-class HuiPlantStatusCard extends PolymerElement {
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: '_hassChanged'
-      },
-    };
-  }
-
-  getCardSize() {
-    return 3;
-  }
-
-  setConfig(config) {
-    if (!validateEntityConfig(config, 'plant')) {
-      throw new Error('Error in card configuration.');
-    }
-
-    this._entityId = null;
-
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
-
-    const entityId = config.entity;
-    if (!(entityId in this.hass.states)) {
-      return;
-    }
-
-    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) {
-    const entityId = this._entityId;
-    if (entityId && entityId in hass.states) {
-      const element = this.lastChild;
-      element.stateObj = hass.states[entityId];
-      element.hass = hass;
-    }
+class HuiPlantStatusCard extends LegacyWrapperCard {
+  constructor() {
+    super('ha-plant-card', 'plant');
   }
 }
 

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

@@ -54,6 +54,7 @@ class HuiRowCard extends PolymerElement {
     if (!config || !config.cards || !Array.isArray(config.cards)) {
       throw new Error('Card config incorrect.');
     }
+    this._config = config;
     if (this.$) this._buildConfig();
   }
 

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

@@ -1,54 +1,15 @@
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import '../../../cards/ha-camera-card.js';
 
-import '../../../cards/ha-weather-card.js';
+import LegacyWrapperCard from './hui-legacy-wrapper-card.js';
 
-import validateEntityConfig from '../common/validate-entity-config.js';
-
-class HuiWeatherForecastCard extends PolymerElement {
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: '_hassChanged'
-      },
-    };
+class HuiWeatherForecastCard extends LegacyWrapperCard {
+  constructor() {
+    super('ha-weather-card', 'weather');
   }
 
   getCardSize() {
     return 4;
   }
-
-  setConfig(config) {
-    if (!validateEntityConfig(config, 'weather')) {
-      throw new Error('Error in card configuration.');
-    }
-
-    this._entityId = null;
-
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
-
-    const entityId = config.entity;
-    if (!(entityId in this.hass.states)) {
-      return;
-    }
-
-    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) {
-    const entityId = this._entityId;
-    if (entityId && entityId in hass.states) {
-      const element = this.lastChild;
-      element.stateObj = hass.states[entityId];
-      element.hass = hass;
-    }
-  }
 }
 
 customElements.define('hui-weather-forecast-card', HuiWeatherForecastCard);

src/panels/lovelace/hui-view.js

@@ -56,6 +56,7 @@ class HUIView extends PolymerElement {
       <div id='columns' on-rebuild-view='_debouncedConfigChanged'></div>
     `;
   }
+
   static get properties() {
     return {
       hass: {
@@ -65,16 +66,21 @@ class HUIView extends PolymerElement {
 
       columns: {
         type: Number,
-        observer: '_configChanged',
       },
 
       config: {
         type: Object,
-        observer: '_configChanged',
       },
     };
   }
 
+  static get observers() {
+    return [
+      // Put all properties in 1 observer so we only call configChanged once
+      '_configChanged(columns, config)'
+    ];
+  }
+
   constructor() {
     super();
     this._elements = [];