Skip to content

Commit f3c6707

Browse files
finity69x2finity69x2
authored
Update binary-control-button-row.js
1 parent ed9d1bd commit f3c6707

1 file changed

Lines changed: 97 additions & 89 deletions

File tree

‎dist/binary-control-button-row.js‎

Lines changed: 97 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,48 @@ window.customCards.push({
66
preview: false,
77
});
88

9-
class CustomBinaryRow extends Polymer.Element {
9+
const LitElement = customElements.get("ha-panel-lovelace") ? Object.getPrototypeOf(customElements.get("ha-panel-lovelace")) : Object.getPrototypeOf(customElements.get("hc-lovelace"));
10+
const html = LitElement.prototype.html;
11+
const css = LitElement.prototype.css;
1012

11-
static get template() {
12-
return Polymer.html`
13-
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
14-
<style>
13+
class CustomBinaryRow extends LitElement {
14+
15+
constructor() {
16+
super();
17+
this._config = {
18+
customTheme: false,
19+
reverseButtons: false,
20+
width: '30px',
21+
height: '30px',
22+
isOnColor: '#43A047',
23+
isOffColor: '#f44c09',
24+
buttonInactiveColor: '#759aaa',
25+
customOffText: 'OFF',
26+
customOnText: 'ON',
27+
28+
};
29+
}
30+
31+
static get properties() {
32+
return {
33+
hass: Object,
34+
_config: Object,
35+
_stateObj: Object,
36+
_width: String,
37+
_height: String,
38+
_leftColor: String,
39+
_leftText: String,
40+
_leftName: String,
41+
_leftState: Boolean,
42+
_rightColor: String,
43+
_rightText: String,
44+
_rightName: String,
45+
_rightState: Boolean,
46+
};
47+
}
48+
49+
static get styles() {
50+
return css`
1551
:host {
1652
line-height: inherit;
1753
}
@@ -24,72 +60,52 @@ class CustomBinaryRow extends Polymer.Element {
2460
font-size: 10px !important;
2561
color: inherit;
2662
text-align: center;
27-
float: right !important;
63+
float: left !important;
2864
padding: 1px;
2965
cursor: pointer;
3066
}
31-
</style>
32-
<hui-generic-entity-row hass="[[hass]]" config="[[_config]]">
33-
<div class='horizontal justified layout' on-click="stopPropagation">
34-
<button
35-
class='switch'
36-
style='[[_leftColor]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
37-
toggles name='[[_leftName]]'
38-
on-click='setState'
39-
disabled='[[_leftState]]'>[[_leftText]]</button>
40-
<button
41-
class='switch'
42-
style='[[_rightColor]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
43-
toggles name='[[_rightName]]'
44-
on-click='setState'
45-
disabled='[[_rightState]]'>[[_rightText]]</button>
46-
</div>
47-
</hui-generic-entity-row>
4867
`;
4968
}
5069

51-
static get properties() {
52-
return {
53-
hass: {
54-
type: Object,
55-
observer: 'hassChanged'
56-
},
57-
_config: Object,
58-
_stateObj: Object,
59-
_width: String,
60-
_height: String,
61-
_leftColor: String,
62-
_leftText: String,
63-
_leftName: String,
64-
_leftState: Boolean,
65-
_rightColor: String,
66-
_rightText: String,
67-
_rightName: String,
68-
_rightState: Boolean,
69-
}
70-
}
70+
render() {
71+
return html`
72+
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
73+
<div id='button-container' class='horizontal justified layout'>
74+
<button
75+
class='switch'
76+
style='${this._leftColor};min-width:${this._width};max-width:${this._width};height:${this._height}'
77+
toggles name="${this._leftName}"
78+
@click=${this.setState}
79+
.disabled=${this._leftState}>${this._leftText}</button>
80+
<button
81+
class='switch'
82+
style='${this._rightColor};min-width:${this._width};max-width:${this._width};height:${this._height}'
83+
toggles name="${this._rightName}"
84+
@click=${this.setState}
85+
.disabled=${this._rightState}>${this._rightText}</button>
86+
</div>
87+
</hui-generic-entity-row>
88+
`;
89+
}
90+
91+
firstUpdated() {
92+
super.firstUpdated();
93+
this.shadowRoot.getElementById('button-container').addEventListener('click', (ev) => ev.stopPropagation());
94+
}
7195

7296
setConfig(config) {
73-
this._config = config;
97+
this._config = { ...this._config, ...config };
98+
}
7499

75-
this._config = {
76-
customTheme: false,
77-
reverseButtons: false,
78-
width: '30px',
79-
height: '30px',
80-
isOnColor: '#43A047',
81-
isOffColor: '#f44c09',
82-
buttonInactiveColor: '#759aaa',
83-
customOffText: 'OFF',
84-
customOnText: 'ON',
85-
...config
86-
};
100+
updated(changedProperties) {
101+
if (changedProperties.has("hass")) {
102+
this.hassChanged();
103+
}
87104
}
88105

89106
hassChanged(hass) {
90-
91107
const config = this._config;
92-
const stateObj = hass.states[config.entity];
108+
const stateObj = this.hass.states[config.entity];
93109
const custTheme = config.customTheme;
94110
const revButtons = config.reverseButtons;
95111
const buttonWidth = config.width;
@@ -155,41 +171,33 @@ class CustomBinaryRow extends Polymer.Element {
155171
let onname = 'on';
156172

157173
if (revButtons) {
158-
this.setProperties({
159-
_stateObj: stateObj,
160-
_rightState: stateObj.state === 'on',
161-
_leftState: stateObj.state == 'off',
162-
_width: buttonwidth,
163-
_height: buttonheight,
164-
_rightName: onname,
165-
_leftName: offname,
166-
_rightColor: oncolor,
167-
_leftColor: offcolor,
168-
_rightText: ontext,
169-
_leftText: offtext,
170-
});
174+
this._stateObj = stateObj;
175+
this._rightState = stateObj.state === 'on';
176+
this._leftState = stateObj.state == 'off';
177+
this._width = buttonwidth;
178+
this._height = buttonheight;
179+
this._rightName = onname;
180+
this._leftName = offname;
181+
this._rightColor = oncolor;
182+
this._leftColor = offcolor;
183+
this._rightText = ontext;
184+
this._leftText = offtext;
171185
} else {
172-
this.setProperties({
173-
_stateObj: stateObj,
174-
_leftState: stateObj.state === 'on',
175-
_rightState: stateObj.state == 'off',
176-
_width: buttonwidth,
177-
_height: buttonheight,
178-
_leftName: onname,
179-
_rightName: offname,
180-
_leftColor: oncolor,
181-
_rightColor: offcolor,
182-
_leftText: ontext,
183-
_rightText: offtext,
184-
});
186+
this._stateObj = stateObj;
187+
this._leftState = stateObj.state === 'on';
188+
this._rightState = stateObj.state == 'off';
189+
this._width = buttonwidth;
190+
this._height = buttonheight;
191+
this._leftName = onname;
192+
this._rightName = offname;
193+
this._leftColor = oncolor;
194+
this._rightColor = offcolor;
195+
this._leftText = ontext;
196+
this._rightText = offtext;
185197
}
186-
}
198+
}
187199

188200

189-
stopPropagation(e) {
190-
e.stopPropagation();
191-
}
192-
193201
setState(e) {
194202
const state = e.currentTarget.getAttribute('name');
195203
if( state == 'off' ){

0 commit comments

Comments
 (0)