I’m trying to create a Homeassitant Lovelace Layout Card with which I can use Lovelace Cards for all devices (desktop, tablet, phone).
Project see: https://github.com/zibous/ha-layoutcard
I cannot solve the following:
With slow network connections, the cards are loaded but not fully initialized. This means that the data updates via HASS does not work.
this._config.cards.forEach((items, r) => {
const view_row = document.createElement("div");
view_row.setAttribute("class", "cl-layout-row");
items.row.forEach((item, c) => {
const view_col = document.createElement("div");
view_col.setAttribute("class", "cl-layout-col clearfix");
if (item.title) {
const view_title = document.createElement("h2");
view_title.innerHTML = item.title;
view_col.append(view_title);
}
if (item.description) {
const view_descr = document.createElement("p");
view_descr.innerHTML = item.description;
view_col.append(view_descr);
}
// all for the columns settings
let _cardWidth = item.width || "100%";
let _cardHeight = item.height || "100%";
let _cardcss = {
width: cssAttr(_cardWidth),
height: cssAttr(_cardHeight),
style: null
};
const _cards = item.entities;
const promises = _cards.map((cardConfig) => this.createCardElement(cardConfig));
Promise.all(promises).then((cards) => {
cards.forEach((card, index) => {
// container for the card
const _cardSettings = _cards[index];
const card_layer = document.createElement("div");
card_layer.setAttribute("class", "cl-card-layer");
// set the container size
card_layer.style.width = card_layer.style.maxWidth = _cardcss.width || _cardWidth;
card_layer.style.height = card_layer.style.maxHeight = _cardcss.height || _cardWidth;
if (_cardSettings.maxwidth) {
card_layer.style.maxWidth = cssAttr(_cardSettings.maxwidth);
}
if (_cardSettings.maxheight) {
card_layer.style.maxheight = cssAttr(_cardSettings.maxheight);
}
card.classList.add("cl-cde");
// ------------------------------------
// style the card
// TODO; how to handle slow networks ??
// ------------------------------------
window.setTimeout(() => {
if (card.updateComplete) {
card.updateComplete.then(() => this.styleCard(card, _cardSettings));
} else {
// ERROR: no hass, no style !!!!
this.styleCard(card, _cardSettings);
}
}, 800);
card_layer.append(card);
view_col.appendChild(card_layer);
});
});
view_row.append(view_col);
});
view_layout.append(view_row);
});
Does anyone know where I’m making the mistake, or what solution is there for it.
Thanks