mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 02:06:42 +00:00
Lovelace Custom ui fallback (#1670)
* Custom ui elements fallback to default instead of error * Lint * Changed fallback to timeout
This commit is contained in:
parent
2665c86683
commit
650d2d7a47
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user