Skip to content

Commit c38ed5f

Browse files
finity69x2finity69x2
authored
Create fan-control-entity-row.js
0 parents  commit c38ed5f

File tree

1 file changed

+214
-0
lines changed

1 file changed

+214
-0
lines changed

‎dist/fan-control-entity-row.js‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
class CustomFanRow extends Polymer.Element {
2+
3+
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+
.speed {
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+
}
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='speed'
31+
style='[[_lowOnColor]]'
32+
toggles name="low"
33+
on-click='setSpeed'
34+
disabled='[[_isOnLow]]'>LOW</button>
35+
<button
36+
class='speed'
37+
style='[[_medOnColor]]'
38+
toggles name="medium"
39+
on-click='setSpeed'
40+
disabled='[[_isOnMed]]'>MED</button>
41+
<button
42+
class='speed'
43+
style='[[_highOnColor]]'
44+
toggles name="high"
45+
on-click='setSpeed'
46+
disabled='[[_isOnHigh]]'>HIGH</button>
47+
<button
48+
class='speed'
49+
style='[[_offColor]]'
50+
toggles name="off"
51+
on-click='setSpeed'
52+
disabled='[[_isOffState]]'>OFF</button>
53+
</div>
54+
</hui-generic-entity-row>
55+
`;
56+
}
57+
58+
static get properties() {
59+
return {
60+
hass: {
61+
type: Object,
62+
observer: 'hassChanged'
63+
},
64+
_config: Object,
65+
_stateObj: Object,
66+
_lowOnColor: String,
67+
_medOnColor: String,
68+
_highOnColor: String,
69+
_offColor: String,
70+
_isOffState: Boolean,
71+
_isOnState: Boolean,
72+
_isOnLow: Boolean,
73+
_isOnMed: Boolean,
74+
_isOnHigh: Boolean,
75+
}
76+
}
77+
78+
setConfig(config) {
79+
this._config = config;
80+
81+
this._config = {
82+
customTheme: false,
83+
customIsOffColor: '#f44c09',
84+
customIsOnLowColor: '#43A047',
85+
customIsOnMedColor: '#43A047',
86+
customIsOnHiColor: '#43A047',
87+
customIsOffSpdColor: '#759aaa',
88+
...config
89+
};
90+
}
91+
92+
hassChanged(hass) {
93+
94+
const config = this._config;
95+
const stateObj = hass.states[config.entity];
96+
const custTheme = config.customTheme;
97+
const custOnLowClr = config.customIsOnLowColor;
98+
const custOnMedClr = config.customIsOnMedColor;
99+
const custOnHiClr = config.customIsOnHiColor;
100+
const custOffSpdClr = config.customIsOffSpdColor;
101+
const custOffClr = config.customIsOffColor;
102+
103+
104+
105+
let speed;
106+
if (stateObj && stateObj.attributes) {
107+
speed = stateObj.attributes.speed || 'off';
108+
}
109+
110+
let low;
111+
let med;
112+
let high;
113+
let offstate;
114+
115+
if (stateObj && stateObj.attributes) {
116+
if (stateObj.state == 'on' && stateObj.attributes.speed == 'low') {
117+
low = 'on';
118+
} else if (stateObj.state == 'on' && stateObj.attributes.speed == 'medium') {
119+
med = 'on';
120+
} else if (stateObj.state == 'on' && stateObj.attributes.speed == 'high') {
121+
high = 'on';
122+
} else {
123+
offstate = 'on';
124+
}
125+
}
126+
127+
let lowcolor;
128+
let medcolor;
129+
let hicolor;
130+
let offcolor;
131+
132+
if (custTheme) {
133+
134+
if (low == 'on') {
135+
lowcolor = 'background-color:' + custOnLowClr;
136+
} else {
137+
lowcolor = 'background-color:' + custOffSpdClr;
138+
}
139+
140+
if (med == 'on') {
141+
medcolor = 'background-color:' + custOnMedClr;
142+
} else {
143+
medcolor = 'background-color:' + custOffSpdClr;
144+
}
145+
146+
if (high == 'on') {
147+
hicolor = 'background-color:' + custOnHiClr;
148+
} else {
149+
hicolor = 'background-color:' + custOffSpdClr;
150+
}
151+
152+
if (offstate == 'on') {
153+
offcolor = 'background-color:' + custOffClr;
154+
} else {
155+
offcolor = 'background-color:' + custOffSpdClr;
156+
}
157+
158+
} else {
159+
160+
if (low == 'on') {
161+
lowcolor = 'background-color: var(--paper-toggle-button-checked-button-color)';
162+
} else {
163+
lowcolor = 'background-color: var(--paper-toggle-button-unchecked-button-color)';
164+
}
165+
166+
if (med == 'on') {
167+
medcolor = 'background-color: var(--paper-toggle-button-checked-button-color)';
168+
} else {
169+
medcolor = 'background-color: var(--paper-toggle-button-unchecked-button-color)';
170+
}
171+
172+
if (high == 'on') {
173+
hicolor = 'background-color: var(--paper-toggle-button-checked-button-color)';
174+
} else {
175+
hicolor = 'background-color: var(--paper-toggle-button-unchecked-button-color)';
176+
}
177+
178+
if (offstate == 'on') {
179+
offcolor = 'background-color: var(--paper-toggle-button-checked-button-color)';
180+
} else {
181+
offcolor = 'background-color: var(--paper-toggle-button-unchecked-button-color)';
182+
}
183+
}
184+
185+
186+
this.setProperties({
187+
_stateObj: stateObj,
188+
_isOffState: stateObj.state == 'off',
189+
_isOnLow: low === 'on',
190+
_isOnMed: med === 'on',
191+
_isOnHigh: high === 'on',
192+
_lowOnColor: lowcolor,
193+
_medOnColor: medcolor,
194+
_highOnColor: hicolor,
195+
_offColor: offcolor,
196+
});
197+
}
198+
199+
stopPropagation(e) {
200+
e.stopPropagation();
201+
}
202+
203+
setSpeed(e) {
204+
const speed = e.currentTarget.getAttribute('name');
205+
if( speed == 'off' ){
206+
this.hass.callService('fan', 'turn_off', {entity_id: this._config.entity});
207+
} else {
208+
this.hass.callService('fan', 'set_speed', {entity_id: this._config.entity, speed: speed});
209+
}
210+
}
211+
212+
}
213+
214+
customElements.define('fan-control-entity-row', CustomFanRow);

0 commit comments

Comments
 (0)