Lovelace custom ui (#1404)

* Lovelace custom ui

* Allow ForOf

* Move code

.eslintrc-hound.json

@@ -71,7 +71,8 @@
     "react/jsx-curly-spacing": 2,
     "react/jsx-no-undef": 2,
     "react/jsx-uses-react": 2,
-    "react/jsx-uses-vars": 2
+    "react/jsx-uses-vars": 2,
+    "no-restricted-syntax": [0, "ForOfStatement"]
   },
   "plugins": [
     "react"

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

@@ -2,9 +2,6 @@ import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import stateCardType from '../../../common/entity/state_card_type.js';
-import computeDomain from '../../../common/entity/compute_domain.js';
-import { DOMAINS_HIDE_MORE_INFO } from '../../../common/const.js';
 import processConfigEntities from '../common/process-config-entities.js';
 
 import '../../../components/ha-card.js';
@@ -15,6 +12,10 @@ import '../../../state-summary/state-card-content.js';
 
 import EventsMixin from '../../../mixins/events-mixin.js';
 
+import createEntityRowElement from '../common/create-entity-row-element.js';
+import { DOMAINS_HIDE_MORE_INFO } from '../../../common/const.js';
+import computeDomain from '../../../common/entity/compute_domain.js';
+
 /*
  * @appliesMixin EventsMixin
  */
@@ -114,22 +115,15 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
 
     this._elements = [];
 
-    for (let i = 0; i < entities.length; i++) {
+    for (const entity of entities) {
-      const entity = entities[i];
       const entityId = entity.entity;
-      if (!(entityId in this.hass.states)) continue;
+
-      const stateObj = this.hass.states[entityId];
+      const element = createEntityRowElement(entity, this.hass);
-      const tag = stateObj ? `state-card-${stateCardType(this.hass, stateObj)}` : 'state-card-display';
+      if (entityId && !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityId))) {
-      const element = document.createElement(tag);
-      if (!DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityId))) {
         element.classList.add('state-card-dialog');
         element.addEventListener('click', () => this.fire('hass-more-info', { entityId }));
       }
-      element.stateObj = stateObj;
+
-      element.hass = this.hass;
-      if (entity.name) {
-        element.overrideName = entity.name;
-      }
       this._elements.push({ entityId, element });
       const container = document.createElement('div');
       container.appendChild(element);

src/panels/lovelace/common/create-entity-row-element.js

@@ -0,0 +1,64 @@
+import fireEvent from '../../../common/dom/fire_event.js';
+
+import stateCardType from '../../../common/entity/state_card_type.js';
+
+import createErrorCardConfig from './create-error-card-config.js';
+
+const CUSTOM_TYPE_PREFIX = 'custom:';
+
+function _createElement(tag, config, stateObj, hass) {
+  const element = document.createElement(tag);
+  try {
+    if ('setConfig' in element) element.setConfig(config);
+  } catch (err) {
+    // eslint-disable-next-line
+    console.error(tag, err);
+    // eslint-disable-next-line
+    return _createErrorElement(err.message, config);
+  }
+
+  element.stateObj = stateObj;
+  element.hass = hass;
+  if (config.name) {
+    element.overrideName = config.name;
+  }
+
+  return element;
+}
+
+function _createErrorElement(error, config) {
+  return _createElement('hui-error-card', createErrorCardConfig(error, config));
+}
+
+export default function createEntityRowElement(config, hass) {
+  let tag;
+
+  if (!config || typeof config !== 'object') {
+    return _createErrorElement('Invalid config given.', config);
+  }
+
+  const entityId = config.entity;
+  if (!(entityId in hass.states)) {
+    return _createErrorElement('Entity not found.', config);
+  }
+
+  const type = config.type || 'default';
+  const stateObj = hass.states[entityId];
+  if (type.startsWith(CUSTOM_TYPE_PREFIX)) {
+    tag = type.substr(CUSTOM_TYPE_PREFIX.length);
+
+    if (customElements.get(tag)) {
+      return _createElement(tag, config, stateObj, hass);
+    }
+    const element = _createErrorElement(`Custom element doesn't exist: ${tag}.`, config);
+
+    customElements.whenDefined(tag)
+      .then(() => fireEvent(element, 'rebuild-view'));
+
+    return element;
+  }
+
+  tag = stateObj ? `state-card-${stateCardType(hass, stateObj)}` : 'state-card-display';
+
+  return _createElement(tag, config, stateObj, hass);
+}