Skip to content

Commit d808a1a

Browse files
finity69x2finity69x2
authored
Update binary-control-button-row.js
1 parent 2f86904 commit d808a1a

1 file changed

Lines changed: 158 additions & 171 deletions

File tree

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

Lines changed: 158 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -1,201 +1,188 @@
11
class CustomBinaryRow extends Polymer.Element {
22

33
static get template() {
4-
return Polymer.html`
5-
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
6-
<style>
7-
:host {
8-
line-height: inherit;
9-
}
10-
.switch {
11-
min-width: 30px;
12-
max-width: 30px;
13-
height: 30px;
14-
margin-left: 2px;
15-
margin-right: 2px;
16-
background-color: #759aaa;
17-
border: 1px solid lightgrey;
18-
border-radius: 4px;
19-
font-size: 10px !important;
20-
color: inherit;
21-
text-align: center;
22-
float: right !important;
23-
padding: 1px;
24-
cursor: pointer;
25-
}
26-
27-
</style>
28-
<hui-generic-entity-row hass="[[hass]]" config="[[_config]]">
29-
<div class='horizontal justified layout' on-click="stopPropagation">
30-
<button
31-
class='switch'
32-
style='[[_leftColor]]'
33-
toggles name='[[_leftName]]'
34-
on-click='setState'
35-
disabled='[[_leftState]]'>[[_leftText]]</button>
36-
<button
37-
class='switch'
38-
style='[[_rightColor]]'
39-
toggles name='[[_rightName]]'
40-
on-click='setState'
41-
disabled='[[_rightState]]'>[[_rightText]]</button>
42-
</div>
43-
</hui-generic-entity-row>
44-
`;
45-
}
4+
return Polymer.html`
5+
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
6+
<style>
7+
:host {
8+
line-height: inherit;
9+
}
10+
.switch {
11+
min-width: 30px;
12+
max-width: 30px;
13+
height: 30px;
14+
margin-left: 2px;
15+
margin-right: 2px;
16+
background-color: #759aaa;
17+
border: 1px solid lightgrey;
18+
border-radius: 4px;
19+
font-size: 10px !important;
20+
color: inherit;
21+
text-align: center;
22+
float: right !important;
23+
padding: 1px;
24+
cursor: pointer;
25+
}
26+
</style>
27+
<hui-generic-entity-row hass="[[hass]]" config="[[_config]]">
28+
<div class='horizontal justified layout' on-click="stopPropagation">
29+
<button
30+
class='switch'
31+
style='[[_leftColor]]'
32+
toggles name='[[_leftName]]'
33+
on-click='setState'
34+
disabled='[[_leftState]]'>[[_leftText]]</button>
35+
<button
36+
class='switch'
37+
style='[[_rightColor]]'
38+
toggles name='[[_rightName]]'
39+
on-click='setState'
40+
disabled='[[_rightState]]'>[[_rightText]]</button>
41+
</div>
42+
</hui-generic-entity-row>
43+
`;
44+
}
4645

47-
static get properties() {
48-
return {
49-
hass: {
50-
type: Object,
51-
observer: 'hassChanged'
52-
},
53-
_config: Object,
54-
_stateObj: Object,
55-
//_onColor: String,
56-
//_offColor: String,
57-
//_onText: String,
58-
//_offText: String,
59-
//_onName: String,
60-
//_offName: String,
61-
//_isOffState: Boolean,
62-
//_isOnState: Boolean,
63-
64-
_leftColor: String,
65-
_leftText: String,
66-
_leftName: String,
67-
_leftState: Boolean,
68-
_rightColor: String,
69-
_rightText: String,
70-
_rightName: String,
71-
_rightState: Boolean,
72-
73-
}
74-
}
46+
static get properties() {
47+
return {
48+
hass: {
49+
type: Object,
50+
observer: 'hassChanged'
51+
},
52+
_config: Object,
53+
_stateObj: Object,
54+
_leftColor: String,
55+
_leftText: String,
56+
_leftName: String,
57+
_leftState: Boolean,
58+
_rightColor: String,
59+
_rightText: String,
60+
_rightName: String,
61+
_rightState: Boolean,
62+
}
63+
}
7564

76-
setConfig(config) {
77-
this._config = config;
78-
79-
this._config = {
80-
customTheme: false,
81-
reverseButtons: false,
82-
isOnColor: '#43A047',
83-
isOffColor: '#f44c09',
84-
buttonInactiveColor: '#759aaa',
85-
customOffText: 'OFF',
86-
customOnText: 'ON',
87-
...config
88-
};
89-
}
65+
setConfig(config) {
66+
this._config = config;
9067

91-
hassChanged(hass) {
68+
this._config = {
69+
customTheme: false,
70+
reverseButtons: false,
71+
isOnColor: '#43A047',
72+
isOffColor: '#f44c09',
73+
buttonInactiveColor: '#759aaa',
74+
customOffText: 'OFF',
75+
customOnText: 'ON',
76+
...config
77+
};
78+
}
9279

93-
const config = this._config;
94-
const stateObj = hass.states[config.entity];
95-
const custTheme = config.customTheme;
96-
const revButtons = config.reverseButtons;
97-
const custOnClr = config.isOnColor;
98-
const custOffClr = config.isOffColor;
99-
const custInactiveClr = config.buttonInactiveColor;
100-
const custOffTxt = config.customOffText;
101-
const custOnTxt = config.customOnText;
80+
hassChanged(hass) {
81+
82+
const config = this._config;
83+
const stateObj = hass.states[config.entity];
84+
const custTheme = config.customTheme;
85+
const revButtons = config.reverseButtons;
86+
const custOnClr = config.isOnColor;
87+
const custOffClr = config.isOffColor;
88+
const custInactiveClr = config.buttonInactiveColor;
89+
const custOffTxt = config.customOffText;
90+
const custOnTxt = config.customOnText;
10291

10392

10493

10594

106-
let state;
107-
if (stateObj) {
108-
state = stateObj.state;
109-
}
95+
let state;
96+
if (stateObj) {
97+
state = stateObj.state;
98+
}
11099

111-
let onstate;
112-
let offstate;
113-
114-
if (stateObj) {
115-
if (stateObj.state == 'on') {
116-
onstate = 'on';
117-
} else {
118-
offstate = 'on';
100+
let onstate;
101+
let offstate;
102+
103+
if (stateObj) {
104+
if (stateObj.state == 'on') {
105+
onstate = 'on';
106+
} else {
107+
offstate = 'on';
108+
}
119109
}
120-
}
121110

122-
let oncolor;
123-
let offcolor;
111+
let oncolor;
112+
let offcolor;
124113

125-
if (custTheme) {
126-
if (onstate == 'on') {
127-
oncolor = 'background-color:' + custOnClr;
128-
} else {
129-
oncolor = 'background-color:' + custInactiveClr;
130-
}
114+
if (custTheme) {
115+
if (onstate == 'on') {
116+
oncolor = 'background-color:' + custOnClr;
117+
} else {
118+
oncolor = 'background-color:' + custInactiveClr;
119+
}
131120

132-
if (offstate == 'on') {
133-
offcolor = 'background-color:' + custOffClr;
134-
} else {
135-
offcolor = 'background-color:' + custInactiveClr;
136-
}
137-
} else {
138-
if (onstate == 'on') {
139-
oncolor = 'background-color: var(--primary-color)';
121+
if (offstate == 'on') {
122+
offcolor = 'background-color:' + custOffClr;
123+
} else {
124+
offcolor = 'background-color:' + custInactiveClr;
125+
}
140126
} else {
141-
oncolor = 'background-color: var(--disabled-text-color)';
142-
}
127+
if (onstate == 'on') {
128+
oncolor = 'background-color: var(--primary-color)';
129+
} else {
130+
oncolor = 'background-color: var(--disabled-text-color)';
131+
}
143132

144-
if (offstate == 'on') {
145-
offcolor = 'background-color: var(--primary-color)';
146-
} else {
147-
offcolor = 'background-color: var(--disabled-text-color)';
133+
if (offstate == 'on') {
134+
offcolor = 'background-color: var(--primary-color)';
135+
} else {
136+
offcolor = 'background-color: var(--disabled-text-color)';
137+
}
148138
}
149-
}
150139

151-
let offtext = custOffTxt;
152-
let ontext = custOnTxt;
140+
let offtext = custOffTxt;
141+
let ontext = custOnTxt;
153142

154-
let offname = 'off';
155-
let onname = 'on';
143+
let offname = 'off';
144+
let onname = 'on';
156145

157-
if (revButtons) {
158-
this.setProperties({
159-
_stateObj: stateObj,
160-
_rightState: stateObj.state === 'on',
161-
_leftState: stateObj.state == 'off',
162-
_rightName: onname,
163-
_leftName: offname,
164-
_rightColor: oncolor,
165-
_leftColor: offcolor,
166-
_rightText: ontext,
167-
_leftText: offtext,
168-
});
169-
} else {
170-
this.setProperties({
171-
_stateObj: stateObj,
172-
_leftState: stateObj.state === 'on',
173-
_rightState: stateObj.state == 'off',
174-
_leftName: onname,
175-
_rightName: offname,
176-
_leftColor: oncolor,
177-
_rightColor: offcolor,
178-
_leftText: ontext,
179-
_rightText: offtext,
180-
});
181-
}
182-
}
146+
if (revButtons) {
147+
this.setProperties({
148+
_stateObj: stateObj,
149+
_rightState: stateObj.state === 'on',
150+
_leftState: stateObj.state == 'off',
151+
_rightName: onname,
152+
_leftName: offname,
153+
_rightColor: oncolor,
154+
_leftColor: offcolor,
155+
_rightText: ontext,
156+
_leftText: offtext,
157+
});
158+
} else {
159+
this.setProperties({
160+
_stateObj: stateObj,
161+
_leftState: stateObj.state === 'on',
162+
_rightState: stateObj.state == 'off',
163+
_leftName: onname,
164+
_rightName: offname,
165+
_leftColor: oncolor,
166+
_rightColor: offcolor,
167+
_leftText: ontext,
168+
_rightText: offtext,
169+
});
170+
}
171+
}
183172

184173

185-
stopPropagation(e) {
186-
e.stopPropagation();
187-
}
174+
stopPropagation(e) {
175+
e.stopPropagation();
176+
}
188177

189-
setState(e) {
190-
const state = e.currentTarget.getAttribute('name');
191-
if( state == 'off' ){
192-
this.hass.callService('homeassistant', 'turn_off', {entity_id: this._config.entity});
193-
} else {
194-
this.hass.callService('homeassistant', 'turn_on', {entity_id: this._config.entity});
178+
setState(e) {
179+
const state = e.currentTarget.getAttribute('name');
180+
if( state == 'off' ){
181+
this.hass.callService('homeassistant', 'turn_off', {entity_id: this._config.entity});
182+
} else {
183+
this.hass.callService('homeassistant', 'turn_on', {entity_id: this._config.entity});
195184
}
196185
}
197-
198-
199186
}
200187

201188
customElements.define('binary-control-button-row', CustomBinaryRow);

0 commit comments

Comments
 (0)