Lovelace Custom ui fallback (#1670)

* Custom ui elements fallback to default instead of error

* Lint

* Changed fallback to timeout
This commit is contained in:
cdce8p 2018-09-17 14:06:17 +02:00 committed by Paulus Schoutsen
parent 2665c86683
commit 650d2d7a47
3 changed files with 34 additions and 12 deletions

View File

@ -41,8 +41,8 @@ const CARD_TYPES = new Set([
'vertical-stack',
'weather-forecast'
]);
const CUSTOM_TYPE_PREFIX = 'custom:';
const TIMEOUT = 2000;
function _createElement(tag, config) {
const element = document.createElement(tag);
@ -61,24 +61,29 @@ function _createErrorElement(error, config) {
return _createElement('hui-error-card', createErrorCardConfig(error, config));
}
export default function createCardElement(config) {
let tag;
function _hideErrorElement(element) {
element.style.display = 'None';
return window.setTimeout(() => { element.style.display = ''; }, TIMEOUT);
}
export default function createCardElement(config) {
if (!config || typeof config !== 'object' || !config.type) {
return _createErrorElement('No card type configured.', config);
}
if (config.type.startsWith(CUSTOM_TYPE_PREFIX)) {
tag = config.type.substr(CUSTOM_TYPE_PREFIX.length);
const tag = config.type.substr(CUSTOM_TYPE_PREFIX.length);
if (customElements.get(tag)) {
return _createElement(tag, config);
}
const element = _createErrorElement(`Custom element doesn't exist: ${tag}.`, config);
const timer = _hideErrorElement(element);
customElements.whenDefined(tag)
.then(() => fireEvent(element, 'rebuild-view'));
customElements.whenDefined(tag).then(() => {
clearTimeout(timer);
fireEvent(element, 'rebuild-view');
});
return element;
}

View File

@ -17,6 +17,7 @@ const ELEMENT_TYPES = new Set([
'state-icon',
'state-label',
]);
const TIMEOUT = 2000;
function _createElement(tag, config) {
const element = document.createElement(tag);
@ -35,6 +36,11 @@ function _createErrorElement(error, config) {
return _createElement('hui-error-card', createErrorCardConfig(error, config));
}
function _hideErrorElement(element) {
element.style.display = 'None';
return window.setTimeout(() => { element.style.display = ''; }, TIMEOUT);
}
export default function createHuiElement(config) {
if (!config || typeof config !== 'object' || !config.type) {
return _createErrorElement('No element type configured.', config);
@ -46,11 +52,13 @@ export default function createHuiElement(config) {
if (customElements.get(tag)) {
return _createElement(tag, config);
}
const element = _createErrorElement(`Custom element doesn't exist: ${tag}.`, config);
const timer = _hideErrorElement(element);
customElements.whenDefined(tag)
.then(() => fireEvent(element, 'rebuild-view'));
customElements.whenDefined(tag).then(() => {
clearTimeout(timer);
fireEvent(element, 'rebuild-view');
});
return element;
}

View File

@ -45,6 +45,7 @@ const DOMAIN_TO_ELEMENT_TYPE = {
switch: 'toggle',
vacuum: 'toggle'
};
const TIMEOUT = 2000;
function _createElement(tag, config) {
const element = document.createElement(tag);
@ -64,6 +65,11 @@ function _createErrorElement(error, config) {
return _createElement('hui-error-card', createErrorCardConfig(error, config));
}
function _hideErrorElement(element) {
element.style.display = 'None';
return window.setTimeout(() => { element.style.display = ''; }, TIMEOUT);
}
export default function createRowElement(config) {
let tag;
@ -83,9 +89,12 @@ export default function createRowElement(config) {
return _createElement(tag, config);
}
const element = _createErrorElement(`Custom element doesn't exist: ${tag}.`, config);
const timer = _hideErrorElement(element);
customElements.whenDefined(tag)
.then(() => fireEvent(element, 'rebuild-view'));
customElements.whenDefined(tag).then(() => {
clearTimeout(timer);
fireEvent(element, 'rebuild-view');
});
return element;
}