mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-14 21:06:34 +00:00
Lovelace custom ui (#1404)
* Lovelace custom ui * Allow ForOf * Move code
This commit is contained in:
parent
d96c5f6bde
commit
f58c612018
@ -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"
|
||||
|
@ -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);
|
||||
|
64
src/panels/lovelace/common/create-entity-row-element.js
Normal file
64
src/panels/lovelace/common/create-entity-row-element.js
Normal 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);
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user