Lovelace StateMachineCard

1. class StateMachineCard extends HTMLElement {
2.   set hass(hass) {
3.     if (!this.content) {
4.       const card = document.createElement('ha-card');
5.       card.header = this.config.title;
6.       this.content = document.createElement('div');
7.       this.content.style.padding = '0 16px 16px';
8.       card.appendChild(this.content);
9.       this.appendChild(card);
10.     }
11.  
12.     const entityId = this.config.entity;
13.     const state = hass.states[entityId];
14.     const stateStr = state ? state.state : 'unavailable';
15.  
16.     var html = '<table width="100%"><tr>';
17.    
18.     for (let i = 0; i <= this.config.states.length-1; i++){
19.       const state = this.config.states[i]
20.       var service_data = '{"entity_id": "light.bedroom", "value": "' + i.toString()+'.0' + '" }';
21.       if (i.toString()+'.0' == stateStr) {
22.         html = html + '<td style="' + this.config.style_disabled + '">[' + state.name + ']</td>';
23.       } else {
24.         html = html + '<td style="' + this.config.style_enabled + '">[' + state.name + ']</td>';
25.         // var service_data = '{"entity_id": "input_number.state_machine_kitchen", "value": "2.0" }';
26.         // hass.services.call('input_number', 'set_value', service_data, False)
27.         // html = html + '<td style="' + this.config.style_enabled + ' " onclick=\'this._hass.services.call(\'input_number\', \'set_value\', ' + service_data + ', False)\'>[' + state.name + ']</td>';
28.       }
29.     }
30.  
31.     html = html + '</tr></table>';
32.     this.content.innerHTML = html;
33.   }
34.  
35.   setConfig(config) {
36.     if (!config.entity) {
37.       throw new Error('You need to define an entity');
38.     }
39.     this.config = config;
40.   }
41.  
42.   getCardSize() {
43.     return 3;
44.   }
45. }
46.  
47. customElements.define('state-machine-card', StateMachineCard);

عن مدير الموقع : mohamed abdelazez