mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-27 03:06:41 +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',
|
'vertical-stack',
|
||||||
'weather-forecast'
|
'weather-forecast'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const CUSTOM_TYPE_PREFIX = 'custom:';
|
const CUSTOM_TYPE_PREFIX = 'custom:';
|
||||||
|
const TIMEOUT = 2000;
|
||||||
|
|
||||||
function _createElement(tag, config) {
|
function _createElement(tag, config) {
|
||||||
const element = document.createElement(tag);
|
const element = document.createElement(tag);
|
||||||
@ -61,24 +61,29 @@ function _createErrorElement(error, config) {
|
|||||||
return _createElement('hui-error-card', createErrorCardConfig(error, config));
|
return _createElement('hui-error-card', createErrorCardConfig(error, config));
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function createCardElement(config) {
|
function _hideErrorElement(element) {
|
||||||
let tag;
|
element.style.display = 'None';
|
||||||
|
return window.setTimeout(() => { element.style.display = ''; }, TIMEOUT);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function createCardElement(config) {
|
||||||
if (!config || typeof config !== 'object' || !config.type) {
|
if (!config || typeof config !== 'object' || !config.type) {
|
||||||
return _createErrorElement('No card type configured.', config);
|
return _createErrorElement('No card type configured.', config);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (config.type.startsWith(CUSTOM_TYPE_PREFIX)) {
|
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)) {
|
if (customElements.get(tag)) {
|
||||||
return _createElement(tag, config);
|
return _createElement(tag, config);
|
||||||
}
|
}
|
||||||
|
|
||||||
const element = _createErrorElement(`Custom element doesn't exist: ${tag}.`, config);
|
const element = _createErrorElement(`Custom element doesn't exist: ${tag}.`, config);
|
||||||
|
const timer = _hideErrorElement(element);
|
||||||
|
|
||||||
customElements.whenDefined(tag)
|
customElements.whenDefined(tag).then(() => {
|
||||||
.then(() => fireEvent(element, 'rebuild-view'));
|
clearTimeout(timer);
|
||||||
|
fireEvent(element, 'rebuild-view');
|
||||||
|
});
|
||||||
|
|
||||||
return element;
|
return element;
|
||||||
}
|
}
|
||||||
|
@ -17,6 +17,7 @@ const ELEMENT_TYPES = new Set([
|
|||||||
'state-icon',
|
'state-icon',
|
||||||
'state-label',
|
'state-label',
|
||||||
]);
|
]);
|
||||||
|
const TIMEOUT = 2000;
|
||||||
|
|
||||||
function _createElement(tag, config) {
|
function _createElement(tag, config) {
|
||||||
const element = document.createElement(tag);
|
const element = document.createElement(tag);
|
||||||
@ -35,6 +36,11 @@ function _createErrorElement(error, config) {
|
|||||||
return _createElement('hui-error-card', createErrorCardConfig(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) {
|
export default function createHuiElement(config) {
|
||||||
if (!config || typeof config !== 'object' || !config.type) {
|
if (!config || typeof config !== 'object' || !config.type) {
|
||||||
return _createErrorElement('No element type configured.', config);
|
return _createErrorElement('No element type configured.', config);
|
||||||
@ -46,11 +52,13 @@ export default function createHuiElement(config) {
|
|||||||
if (customElements.get(tag)) {
|
if (customElements.get(tag)) {
|
||||||
return _createElement(tag, config);
|
return _createElement(tag, config);
|
||||||
}
|
}
|
||||||
|
|
||||||
const element = _createErrorElement(`Custom element doesn't exist: ${tag}.`, config);
|
const element = _createErrorElement(`Custom element doesn't exist: ${tag}.`, config);
|
||||||
|
const timer = _hideErrorElement(element);
|
||||||
|
|
||||||
customElements.whenDefined(tag)
|
customElements.whenDefined(tag).then(() => {
|
||||||
.then(() => fireEvent(element, 'rebuild-view'));
|
clearTimeout(timer);
|
||||||
|
fireEvent(element, 'rebuild-view');
|
||||||
|
});
|
||||||
|
|
||||||
return element;
|
return element;
|
||||||
}
|
}
|
||||||
|
@ -45,6 +45,7 @@ const DOMAIN_TO_ELEMENT_TYPE = {
|
|||||||
switch: 'toggle',
|
switch: 'toggle',
|
||||||
vacuum: 'toggle'
|
vacuum: 'toggle'
|
||||||
};
|
};
|
||||||
|
const TIMEOUT = 2000;
|
||||||
|
|
||||||
function _createElement(tag, config) {
|
function _createElement(tag, config) {
|
||||||
const element = document.createElement(tag);
|
const element = document.createElement(tag);
|
||||||
@ -64,6 +65,11 @@ function _createErrorElement(error, config) {
|
|||||||
return _createElement('hui-error-card', createErrorCardConfig(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) {
|
export default function createRowElement(config) {
|
||||||
let tag;
|
let tag;
|
||||||
|
|
||||||
@ -83,9 +89,12 @@ export default function createRowElement(config) {
|
|||||||
return _createElement(tag, config);
|
return _createElement(tag, config);
|
||||||
}
|
}
|
||||||
const element = _createErrorElement(`Custom element doesn't exist: ${tag}.`, config);
|
const element = _createErrorElement(`Custom element doesn't exist: ${tag}.`, config);
|
||||||
|
const timer = _hideErrorElement(element);
|
||||||
|
|
||||||
customElements.whenDefined(tag)
|
customElements.whenDefined(tag).then(() => {
|
||||||
.then(() => fireEvent(element, 'rebuild-view'));
|
clearTimeout(timer);
|
||||||
|
fireEvent(element, 'rebuild-view');
|
||||||
|
});
|
||||||
|
|
||||||
return element;
|
return element;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user