Hi. I need help.
I’m trying to understand how hass works. As well as this code I was able to add events.
Now I need to know how to update the status of an item. I want them to add or remove a class when they change the state. But I can not make reference to the object in order to do it. Someone could help me?
The problem is at the end
Thank you
Blockquote
set hass(hass) {
var card;
const entities = this.config.entities;
var state = hass.states[entities[0].entity];
var stateStr = state ? state.state : ‘unavailable’;
var colorIcon;
var strHTML = ‘’;
const root = this.shadowRoot;
if (!this.content) {
card = document.createElement('ha-card');
card.header = 'Sonoff settings devices';
this.content = document.createElement('div');
const style = document.createElement('style');
style.textContent = `
table {
width: 100%;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
}
ha-icon {
cursor:pointer;
}
ha-icon.on {
color: var(--state-icon-active-color);
cursor:pointer;
}
ha-icon.off {
color: var(--state-icon-color);
}
` ;
entities.forEach(function(element) {
state = hass.states[element.entity];
stateStr = state ? state.state : 'unavailable';
strHTML += `
<table>
<tr>
<td witdth="80%">${element.name}</td><td align="right">
<span class="ha-icon">
<ha-icon id="${element.entity}_power" class="icono ${stateStr}" icon="mdi:power" ></ha-icon>
<ha-icon id="${element.entity}_setting" class="icono ${stateStr}" icon="mdi:settings" ></ha-icon>
<ha-icon id="${element.entity}_timer" class="icono ${stateStr}" icon="mdi:timer" ></ha-icon>
</span></td>
</tr>
</table>
`;
});
this.content.innerHTML = strHTML;
card.appendChild(style);
card.appendChild(this.content);
this.appendChild(card);
card.querySelectorAll(".icono").forEach(element => {
element.addEventListener('click', event => {
this._updateCard();
});
});
}
entities.forEach(function(element) {
state = hass.states[element.entity];
stateStr = state ? state.state : 'unavailable';
console.log(???.getElementById(element.entity+"_power"));
//chage style item
});
}