Lovelace custom ui (#1404)

* Lovelace custom ui

* Allow ForOf

* Move code
This commit is contained in:
quthla 2018-07-07 21:04:11 +02:00 committed by Paulus Schoutsen
parent d96c5f6bde
commit f58c612018
3 changed files with 75 additions and 16 deletions

View File

@ -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"

View File

@ -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++) {
const entity = entities[i];
for (const entity of entities) {
const entityId = entity.entity;
if (!(entityId in this.hass.states)) continue;
const stateObj = this.hass.states[entityId];
const tag = stateObj ? `state-card-${stateCardType(this.hass, stateObj)}` : 'state-card-display';
const element = document.createElement(tag);
if (!DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityId))) {
const element = createEntityRowElement(entity, this.hass);
if (entityId && !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);

View File

@ -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);
}