`;
}
static get properties() {
return {
hass: {
type: Object,
observer: 'hassChanged'
},
_config: Object,
_stateObj: Object,
_offSP: Number,
_lowSP: Number,
_medSP: Number,
_highSP: Number,
_width: String,
_height: String,
_leftColor: String,
_midLeftColor: String,
_midRightColor: String,
_rightColor: String,
_leftText: String,
_midLeftText: String,
_midRightText: String,
_rightText: String,
_leftName: String,
_midLeftName: String,
_midRightName: String,
_rightName: String,
_hideLeft: String,
_hideMidLeft: String,
_hideMidRight: String,
_hideRight: String,
_leftState: Boolean,
_midLeftState: Boolean,
_midRightState: Boolean,
_rightState: Boolean
};
}
setConfig(config) {
this._config = config;
this._config = {
customTheme: false,
customSetpoints: false,
reverseButtons: false,
isTwoSpeedFan: false,
hideOff: false,
sendStateWithSpeed: false,
allowDisablingButtons: true,
offPercentage: 0,
lowPercentage: 33,
medPercentage: 66,
hiPercentage: 100,
width: '30px',
height: '30px',
isOffColor: '#f44c09',
isOnLowColor: '#43A047',
isOnMedColor: '#43A047',
isOnHiColor: '#43A047',
buttonInactiveColor: '#759aaa',
customOffText: 'OFF',
customLowText: 'LOW',
customMedText: 'MED',
customHiText: 'HIGH',
...config
};
}
hassChanged() {
const config = this._config;
const stateObj = this.hass.states[config.entity];
const custTheme = config.customTheme;
const custSetpoint = config.customSetpoints;
const revButtons = config.reverseButtons;
const twoSpdFan = config.isTwoSpeedFan;
const hide_Off = config.hideOff;
config.sendStateWithSpeed;
const allowDisable = config.allowDisablingButtons;
const buttonWidth = config.width;
const buttonHeight = config.height;
const OnLowClr = config.isOnLowColor;
const OnMedClr = config.isOnMedColor;
const OnHiClr = config.isOnHiColor;
const OffClr = config.isOffColor;
const buttonOffClr = config.buttonInactiveColor;
const OffSetpoint = config.offPercentage;
const LowSetpoint = config.lowPercentage;
const MedSetpoint = config.medPercentage;
const HiSetpoint = config.hiPercentage;
const custOffTxt = config.customOffText;
const custLowTxt = config.customLowText;
const custMedTxt = config.customMedText;
const custHiTxt = config.customHiText;
let offSetpoint;
let lowSetpoint;
let medSetpoint;
let hiSetpoint;
let low;
let med;
let high;
let offstate;
if (custSetpoint) {
offSetpoint = parseInt(OffSetpoint);
medSetpoint = parseInt(MedSetpoint);
if (parseInt(LowSetpoint) < 1) {
lowSetpoint = 1;
} else {
lowSetpoint = parseInt(LowSetpoint);
}
if (parseInt(HiSetpoint) > 100) {
hiSetpoint = 100;
} else {
hiSetpoint = parseInt(HiSetpoint);
}
if (stateObj && stateObj.attributes) {
if (stateObj.state == 'on' && stateObj.attributes.percentage > offSetpoint && stateObj.attributes.percentage <= (medSetpoint + lowSetpoint) / 2) {
low = 'on';
} else if (stateObj.state == 'on' && stateObj.attributes.percentage > (medSetpoint + lowSetpoint) / 2 && stateObj.attributes.percentage <= (hiSetpoint + medSetpoint) / 2) {
med = 'on';
} else if (stateObj.state == 'on' && stateObj.attributes.percentage > (hiSetpoint + medSetpoint) / 2 && stateObj.attributes.percentage <= 100) {
high = 'on';
} else {
offstate = 'on';
}
}
} else {
offSetpoint = 0; //parseInt(OffSetpoint);
lowSetpoint = 33; //parseInt(LowSetpoint);
medSetpoint = 66; //parseInt(MedSetpoint);
hiSetpoint = 100; //parseInt(HiSetpoint);
if (stateObj && stateObj.attributes) {
if (stateObj.state == 'on' && stateObj.attributes.percentage >= 17 && stateObj.attributes.percentage <= 50) {
low = 'on';
} else if (stateObj.state == 'on' && stateObj.attributes.percentage >= 51 && stateObj.attributes.percentage <= 75) {
med = 'on';
} else if (stateObj.state == 'on' && stateObj.attributes.percentage >= 76 && stateObj.attributes.percentage <= 100) {
high = 'on';
} else {
offstate = 'on';
}
}
}
let lowcolor;
let medcolor;
let hicolor;
let offcolor;
if (custTheme) {
if (low == 'on') {
lowcolor = 'background-color:' + OnLowClr;
} else {
lowcolor = 'background-color:' + buttonOffClr;
}
if (med == 'on') {
medcolor = 'background-color:' + OnMedClr;
} else {
medcolor = 'background-color:' + buttonOffClr;
}
if (high == 'on') {
hicolor = 'background-color:' + OnHiClr;
} else {
hicolor = 'background-color:' + buttonOffClr;
}
if (offstate == 'on') {
offcolor = 'background-color:' + OffClr;
} else {
offcolor = 'background-color:' + buttonOffClr;
}
} else {
if (low == 'on') {
lowcolor = 'background-color: var(--switch-checked-color)';
} else {
lowcolor = 'background-color: var(--switch-unchecked-color)';
}
if (med == 'on') {
medcolor = 'background-color: var(--switch-checked-color)';
} else {
medcolor = 'background-color: var(--switch-unchecked-color)';
}
if (high == 'on') {
hicolor = 'background-color: var(--switch-checked-color)';
} else {
hicolor = 'background-color: var(--switch-unchecked-color)';
}
if (offstate == 'on') {
offcolor = 'background-color: var(--switch-checked-color)';
} else {
offcolor = 'background-color: var(--switch-unchecked-color)';
}
}
let offtext = custOffTxt;
let lowtext = custLowTxt;
let medtext = custMedTxt;
let hitext = custHiTxt;
let buttonwidth = buttonWidth;
let buttonheight = buttonHeight;
let offname = 'off';
let lowname = 'low';
let medname = 'medium';
let hiname = 'high';
let hideoff = 'display:block';
let hidemedium = 'display:block';
let nohide = 'display:block';
if (twoSpdFan) {
hidemedium = 'display:none';
} else {
hidemedium = 'display:block';
}
if (hide_Off) {
hideoff = 'display:none';
} else {
hideoff = 'display:block';
}
if (revButtons) {
this._stateObj = stateObj;
this._leftState = offstate == 'on' && allowDisable;
this._midLeftState = low === 'on' && allowDisable;
this._midRightState = med === 'on' && allowDisable;
this._rightState = high === 'on' && allowDisable;
this._width = buttonwidth;
this._height = buttonheight;
this._leftColor = offcolor;
this._midLeftColor = lowcolor;
this._midRightColor = medcolor;
this._rightColor = hicolor;
this._offSP = offSetpoint;
this._lowSP = lowSetpoint;
this._medSP = medSetpoint;
this._highSP = hiSetpoint;
this._leftText = offtext;
this._midLeftText = lowtext;
this._midRightText = medtext;
this._rightText = hitext;
this._leftName = offname;
this._midLeftName = lowname;
this._midRightName = medname;
this._rightName = hiname;
this._hideLeft = hideoff;
this._hideMidLeft = nohide;
this._hideMidRight = hidemedium;
this._hideRight = nohide;
} else {
this._stateObj = stateObj;
this._leftState = high == 'on' && allowDisable;
this._midLeftState = med === 'on' && allowDisable;
this._midRightState = low === 'on' && allowDisable;
this._rightState = offstate === 'on' && allowDisable;
this._width = buttonwidth;
this._height = buttonheight;
this._leftColor = hicolor;
this._midLeftColor = medcolor;
this._midRightColor = lowcolor;
this._rightColor = offcolor;
this._offSP = offSetpoint;
this._lowSP = lowSetpoint;
this._medSP = medSetpoint;
this._highSP = hiSetpoint;
this._leftText = hitext;
this._midLeftText = medtext;
this._midRightText = lowtext;
this._rightText = offtext;
this._leftName = hiname;
this._midLeftName = medname;
this._midRightName = lowname;
this._rightName = offname;
this._hideRight = hideoff;
this._hideMidRight = nohide;
this._hideMidLeft = hidemedium;
this._hideLeft = nohide;
}
}
setPercentage(e) {
e.stopPropagation();
const level = e.currentTarget.getAttribute('name');
const param = {
entity_id: this._config.entity
};
if (level == 'off') {
this.hass.callService('fan', 'turn_off', param);
} else if (level == 'low') {
if (this._config.sendStateWithSpeed) {
this.hass.callService('fan', 'turn_on', {
entity_id: this._config.entity,
percentage: this._lowSP
});
} else {
param.percentage = this._lowSP;
this.hass.callService('fan', 'set_percentage', param);
}
} else if (level == 'medium') {
if (this._config.sendStateWithSpeed) {
this.hass.callService('fan', 'turn_on', {
entity_id: this._config.entity,
percentage: this._medSP
});
} else {
param.percentage = this._medSP;
this.hass.callService('fan', 'set_percentage', param);
}
} else if (level == 'high') {
if (this._config.sendStateWithSpeed) {
this.hass.callService('fan', 'turn_on', {
entity_id: this._config.entity,
percentage: this._highSP
});
} else {
param.percentage = this._highSP;
this.hass.callService('fan', 'set_percentage', param);
}
}
}
}
customElements.define('fan-percent-button-row', CustomFanPercentRow);