95 lines
3.1 KiB
JavaScript
95 lines
3.1 KiB
JavaScript
const TEMPLATE_REGEX = /\[\[.*?\]\]/gm;
|
|
|
|
class HtmlCard extends HTMLElement {
|
|
|
|
static get properties() {
|
|
return {
|
|
_config: {},
|
|
_hass: {},
|
|
};
|
|
}
|
|
|
|
set hass(hass) {
|
|
const oldHass = this._hass;
|
|
this._hass = hass;
|
|
if (this.shouldUpdate(oldHass)) {
|
|
this.render();
|
|
}
|
|
}
|
|
|
|
shouldUpdate(oldHass) {
|
|
if (oldHass) {
|
|
let should = false;
|
|
this._entities.forEach(entity => {
|
|
should = should || oldHass.states[entity] !== this._hass.states[entity]
|
|
|| oldHass.states[entity].attributes !== this._hass.states[entity].attributes
|
|
});
|
|
return should;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
setConfig(config) {
|
|
if (!config.content) {
|
|
throw new Error("You need to define 'content' in your configuration.")
|
|
}
|
|
let entities = [];
|
|
let m;
|
|
while ((m = TEMPLATE_REGEX.exec(config.content)) !== null) {
|
|
if (m.index === TEMPLATE_REGEX.lastIndex) {
|
|
TEMPLATE_REGEX.lastIndex++;
|
|
}
|
|
m.forEach(match => {
|
|
let e = match.replace("[[", "").replace("]]", "").replace(/\s/gm, "");
|
|
let split = e.split(".");
|
|
let entity_id = split[0] + "." + split[1];
|
|
entities.push(entity_id);
|
|
});
|
|
}
|
|
this._entities = entities;
|
|
this._config = config;
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
if (!this._config || !this._hass) {
|
|
return ``;
|
|
}
|
|
let header = ``;
|
|
let content = this._config.content;
|
|
let outputContent = content.replace(/\r?\n|\r/g, "");
|
|
let m;
|
|
while ((m = TEMPLATE_REGEX.exec(content)) !== null) {
|
|
if (m.index === TEMPLATE_REGEX.lastIndex) {
|
|
TEMPLATE_REGEX.lastIndex++;
|
|
}
|
|
m.forEach(match => {
|
|
let e = match.replace("[[", "").replace("]]", "").replace(/\s/gm, "");
|
|
let split = e.split(".");
|
|
let dots = split.length - 1;
|
|
let output;
|
|
if (dots === 1 || dots === 2 && split[2] === "state") {
|
|
let id = split[0] + "." + split[1];
|
|
output = this._hass.states[id].state;
|
|
} else if (dots === 3 && split[2] === "attributes") {
|
|
let id = split[0] + "." + split[1];
|
|
let attribute = split[3];
|
|
output = this._hass.states[id].attributes[attribute];
|
|
} else {
|
|
output = match;
|
|
}
|
|
outputContent = outputContent.replace(match, output);
|
|
});
|
|
}
|
|
if (this._config.title)
|
|
header = `<div class="card-header" style="padding: 8px 0 16px 0;"><div class="name">${this._config.title}</div></div>`;
|
|
this.innerHTML = `<ha-card id="htmlCard" style="padding: 16px">${header}<div>${outputContent}</div></ha-card>`;
|
|
}
|
|
|
|
getCardSize() {
|
|
return 1;
|
|
}
|
|
}
|
|
|
|
customElements.define('html-card', HtmlCard);
|