diff --git a/dist/binary-control-button-row.js b/dist/binary-control-button-row.js index b31c495..57b8994 100644 --- a/dist/binary-control-button-row.js +++ b/dist/binary-control-button-row.js @@ -1,201 +1,188 @@ class CustomBinaryRow extends Polymer.Element { static get template() { - return Polymer.html` - - - -
- - -
-
- `; - } + return Polymer.html` + + + +
+ + +
+
+ `; + } - static get properties() { - return { - hass: { - type: Object, - observer: 'hassChanged' - }, - _config: Object, - _stateObj: Object, - //_onColor: String, - //_offColor: String, - //_onText: String, - //_offText: String, - //_onName: String, - //_offName: String, - //_isOffState: Boolean, - //_isOnState: Boolean, - - _leftColor: String, - _leftText: String, - _leftName: String, - _leftState: Boolean, - _rightColor: String, - _rightText: String, - _rightName: String, - _rightState: Boolean, - - } - } + static get properties() { + return { + hass: { + type: Object, + observer: 'hassChanged' + }, + _config: Object, + _stateObj: Object, + _leftColor: String, + _leftText: String, + _leftName: String, + _leftState: Boolean, + _rightColor: String, + _rightText: String, + _rightName: String, + _rightState: Boolean, + } + } - setConfig(config) { - this._config = config; - - this._config = { - customTheme: false, - reverseButtons: false, - isOnColor: '#43A047', - isOffColor: '#f44c09', - buttonInactiveColor: '#759aaa', - customOffText: 'OFF', - customOnText: 'ON', - ...config - }; - } + setConfig(config) { + this._config = config; - hassChanged(hass) { + this._config = { + customTheme: false, + reverseButtons: false, + isOnColor: '#43A047', + isOffColor: '#f44c09', + buttonInactiveColor: '#759aaa', + customOffText: 'OFF', + customOnText: 'ON', + ...config + }; + } - const config = this._config; - const stateObj = hass.states[config.entity]; - const custTheme = config.customTheme; - const revButtons = config.reverseButtons; - const custOnClr = config.isOnColor; - const custOffClr = config.isOffColor; - const custInactiveClr = config.buttonInactiveColor; - const custOffTxt = config.customOffText; - const custOnTxt = config.customOnText; + hassChanged(hass) { + + const config = this._config; + const stateObj = hass.states[config.entity]; + const custTheme = config.customTheme; + const revButtons = config.reverseButtons; + const custOnClr = config.isOnColor; + const custOffClr = config.isOffColor; + const custInactiveClr = config.buttonInactiveColor; + const custOffTxt = config.customOffText; + const custOnTxt = config.customOnText; - let state; - if (stateObj) { - state = stateObj.state; - } + let state; + if (stateObj) { + state = stateObj.state; + } - let onstate; - let offstate; - - if (stateObj) { - if (stateObj.state == 'on') { - onstate = 'on'; - } else { - offstate = 'on'; + let onstate; + let offstate; + + if (stateObj) { + if (stateObj.state == 'on') { + onstate = 'on'; + } else { + offstate = 'on'; + } } - } - let oncolor; - let offcolor; + let oncolor; + let offcolor; - if (custTheme) { - if (onstate == 'on') { - oncolor = 'background-color:' + custOnClr; - } else { - oncolor = 'background-color:' + custInactiveClr; - } + if (custTheme) { + if (onstate == 'on') { + oncolor = 'background-color:' + custOnClr; + } else { + oncolor = 'background-color:' + custInactiveClr; + } - if (offstate == 'on') { - offcolor = 'background-color:' + custOffClr; - } else { - offcolor = 'background-color:' + custInactiveClr; - } - } else { - if (onstate == 'on') { - oncolor = 'background-color: var(--primary-color)'; + if (offstate == 'on') { + offcolor = 'background-color:' + custOffClr; + } else { + offcolor = 'background-color:' + custInactiveClr; + } } else { - oncolor = 'background-color: var(--disabled-text-color)'; - } + if (onstate == 'on') { + oncolor = 'background-color: var(--primary-color)'; + } else { + oncolor = 'background-color: var(--disabled-text-color)'; + } - if (offstate == 'on') { - offcolor = 'background-color: var(--primary-color)'; - } else { - offcolor = 'background-color: var(--disabled-text-color)'; + if (offstate == 'on') { + offcolor = 'background-color: var(--primary-color)'; + } else { + offcolor = 'background-color: var(--disabled-text-color)'; + } } - } - let offtext = custOffTxt; - let ontext = custOnTxt; + let offtext = custOffTxt; + let ontext = custOnTxt; - let offname = 'off'; - let onname = 'on'; + let offname = 'off'; + let onname = 'on'; - if (revButtons) { - this.setProperties({ - _stateObj: stateObj, - _rightState: stateObj.state === 'on', - _leftState: stateObj.state == 'off', - _rightName: onname, - _leftName: offname, - _rightColor: oncolor, - _leftColor: offcolor, - _rightText: ontext, - _leftText: offtext, - }); - } else { - this.setProperties({ - _stateObj: stateObj, - _leftState: stateObj.state === 'on', - _rightState: stateObj.state == 'off', - _leftName: onname, - _rightName: offname, - _leftColor: oncolor, - _rightColor: offcolor, - _leftText: ontext, - _rightText: offtext, - }); - } - } + if (revButtons) { + this.setProperties({ + _stateObj: stateObj, + _rightState: stateObj.state === 'on', + _leftState: stateObj.state == 'off', + _rightName: onname, + _leftName: offname, + _rightColor: oncolor, + _leftColor: offcolor, + _rightText: ontext, + _leftText: offtext, + }); + } else { + this.setProperties({ + _stateObj: stateObj, + _leftState: stateObj.state === 'on', + _rightState: stateObj.state == 'off', + _leftName: onname, + _rightName: offname, + _leftColor: oncolor, + _rightColor: offcolor, + _leftText: ontext, + _rightText: offtext, + }); + } + } - stopPropagation(e) { - e.stopPropagation(); - } + stopPropagation(e) { + e.stopPropagation(); + } - setState(e) { - const state = e.currentTarget.getAttribute('name'); - if( state == 'off' ){ - this.hass.callService('homeassistant', 'turn_off', {entity_id: this._config.entity}); - } else { - this.hass.callService('homeassistant', 'turn_on', {entity_id: this._config.entity}); + setState(e) { + const state = e.currentTarget.getAttribute('name'); + if( state == 'off' ){ + this.hass.callService('homeassistant', 'turn_off', {entity_id: this._config.entity}); + } else { + this.hass.callService('homeassistant', 'turn_on', {entity_id: this._config.entity}); } } - - } customElements.define('binary-control-button-row', CustomBinaryRow);