Exp. UI: add support for "big" cards (#1296)

* Exp. UI: add support for "big" cards

* Lint

* Requested changes

* Revert outdated changes

* ...2

* ...3

* Feedback

src/panels/experimental-ui/hui-camera-preview-card.js

@@ -0,0 +1,74 @@
+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';
+
+class HuiCameraPreviewCard extends PolymerElement {
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: '_hassChanged',
+      },
+      config: {
+        type: Object,
+        observer: '_configChanged',
+      }
+    };
+  }
+
+  getCardSize() {
+    return 4;
+  }
+
+  _configChanged(config) {
+    this._entityId = null;
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    let error = null;
+    let cardConfig;
+    let tag;
+
+    const entityId = config && config.entity;
+    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';
+    }
+
+    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;
+    this.appendChild(element);
+  }
+
+  _hassChanged(hass) {
+    if (this.lastChild && this._entityId) {
+      const element = this.childNodes[0];
+      const stateObj = hass.states[this._entityId];
+      element.stateObj = stateObj;
+      element.hass = hass;
+    }
+  }
+}
+
+customElements.define('hui-camera-preview-card', HuiCameraPreviewCard);

src/panels/experimental-ui/hui-error-card.js

@@ -6,6 +6,7 @@ class HuiErrorCard extends PolymerElement {
     return html`
       <style>
         :host {
+          display: block;
           background-color: red;
           color: white;
           text-align: center;

src/panels/experimental-ui/hui-history-graph-card.js

@@ -0,0 +1,74 @@
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import computeDomain from '../../common/entity/compute_domain.js';
+
+import '../../cards/ha-history_graph-card.js';
+import './hui-error-card.js';
+
+class HuiHistoryGraphCard extends PolymerElement {
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: '_hassChanged',
+      },
+      config: {
+        type: Object,
+        observer: '_configChanged',
+      }
+    };
+  }
+
+  getCardSize() {
+    return 4;
+  }
+
+  _configChanged(config) {
+    this._entityId = null;
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    let error = null;
+    let cardConfig;
+    let tag;
+
+    const entityId = config && config.entity;
+    if (entityId) {
+      if (computeDomain(entityId) === 'history_graph') {
+        this._entityId = entityId;
+        tag = 'ha-history_graph-card';
+        cardConfig = config;
+      } else {
+        error = 'Entity domain must be "history_graph"';
+      }
+    } else {
+      error = 'Entity not defined in card config';
+    }
+
+    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;
+    this.appendChild(element);
+  }
+
+  _hassChanged(hass) {
+    if (this.lastChild && this._entityId) {
+      const element = this.childNodes[0];
+      const stateObj = hass.states[this._entityId];
+      element.stateObj = stateObj;
+      element.hass = hass;
+    }
+  }
+}
+
+customElements.define('hui-history-graph-card', HuiHistoryGraphCard);

src/panels/experimental-ui/hui-media-control-card.js

@@ -0,0 +1,74 @@
+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';
+
+class HuiMediaControlCard extends PolymerElement {
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: '_hassChanged',
+      },
+      config: {
+        type: Object,
+        observer: '_configChanged',
+      }
+    };
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  _configChanged(config) {
+    this._entityId = null;
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    let error = null;
+    let cardConfig;
+    let tag;
+
+    const entityId = config && config.entity;
+    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';
+    }
+
+    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;
+    this.appendChild(element);
+  }
+
+  _hassChanged(hass) {
+    if (this.lastChild && this._entityId) {
+      const element = this.childNodes[0];
+      const stateObj = hass.states[this._entityId];
+      element.stateObj = stateObj;
+      element.hass = hass;
+    }
+  }
+}
+
+customElements.define('hui-media-control-card', HuiMediaControlCard);

src/panels/experimental-ui/hui-plant-status-card.js

@@ -0,0 +1,74 @@
+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';
+
+class HuiPlantStatusCard extends PolymerElement {
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: '_hassChanged',
+      },
+      config: {
+        type: Object,
+        observer: '_configChanged',
+      }
+    };
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  _configChanged(config) {
+    this._entityId = null;
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    let error = null;
+    let cardConfig;
+    let tag;
+
+    const entityId = config && config.entity;
+    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';
+    }
+
+    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;
+    this.appendChild(element);
+  }
+
+  _hassChanged(hass) {
+    if (this.lastChild && this._entityId) {
+      const element = this.childNodes[0];
+      const stateObj = hass.states[this._entityId];
+      element.stateObj = stateObj;
+      element.hass = hass;
+    }
+  }
+}
+
+customElements.define('hui-plant-status-card', HuiPlantStatusCard);

src/panels/experimental-ui/hui-view.js

@@ -3,11 +3,24 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import './hui-entities-card.js';
 import './hui-entity-filter-card.js';
+import './hui-camera-preview-card.js';
+import './hui-history-graph-card.js';
+import './hui-media-control-card.js';
+import './hui-plant-status-card.js';
+import './hui-weather-forecast-card';
 import './hui-error-card.js';
 
 import applyThemesOnElement from '../../common/dom/apply_themes_on_element.js';
 
-const VALID_TYPES = ['entities', 'entity-filter'];
+const VALID_TYPES = [
+  'camera-preview',
+  'entities',
+  'entity-filter',
+  'history-graph',
+  'media-control',
+  'plant-status',
+  'weather-forecast'
+];
 const CUSTOM_TYPE_PREFIX = 'custom:';
 
 function cardElement(type) {

src/panels/experimental-ui/hui-weather-forecast-card.js

@@ -0,0 +1,74 @@
+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';
+
+class HuiWeatherForecastCard extends PolymerElement {
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: '_hassChanged',
+      },
+      config: {
+        type: Object,
+        observer: '_configChanged',
+      }
+    };
+  }
+
+  getCardSize() {
+    return 4;
+  }
+
+  _configChanged(config) {
+    this._entityId = null;
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    let error = null;
+    let cardConfig;
+    let tag;
+
+    const entityId = config && config.entity;
+    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';
+    }
+
+    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;
+    this.appendChild(element);
+  }
+
+  _hassChanged(hass) {
+    if (this.lastChild && this._entityId) {
+      const element = this.childNodes[0];
+      const stateObj = hass.states[this._entityId];
+      element.stateObj = stateObj;
+      element.hass = hass;
+    }
+  }
+}
+
+customElements.define('hui-weather-forecast-card', HuiWeatherForecastCard);