-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2f86904
commit d808a1a
Showing
1 changed file
with
158 additions
and
171 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,201 +1,188 @@ | ||
| class CustomBinaryRow extends Polymer.Element { | ||
|
|
||
| static get template() { | ||
| return Polymer.html` | ||
| <style is="custom-style" include="iron-flex iron-flex-alignment"></style> | ||
| <style> | ||
| :host { | ||
| line-height: inherit; | ||
| } | ||
| .switch { | ||
| min-width: 30px; | ||
| max-width: 30px; | ||
| height: 30px; | ||
| margin-left: 2px; | ||
| margin-right: 2px; | ||
| background-color: #759aaa; | ||
| border: 1px solid lightgrey; | ||
| border-radius: 4px; | ||
| font-size: 10px !important; | ||
| color: inherit; | ||
| text-align: center; | ||
| float: right !important; | ||
| padding: 1px; | ||
| cursor: pointer; | ||
| } | ||
| </style> | ||
| <hui-generic-entity-row hass="[[hass]]" config="[[_config]]"> | ||
| <div class='horizontal justified layout' on-click="stopPropagation"> | ||
| <button | ||
| class='switch' | ||
| style='[[_leftColor]]' | ||
| toggles name='[[_leftName]]' | ||
| on-click='setState' | ||
| disabled='[[_leftState]]'>[[_leftText]]</button> | ||
| <button | ||
| class='switch' | ||
| style='[[_rightColor]]' | ||
| toggles name='[[_rightName]]' | ||
| on-click='setState' | ||
| disabled='[[_rightState]]'>[[_rightText]]</button> | ||
| </div> | ||
| </hui-generic-entity-row> | ||
| `; | ||
| } | ||
| return Polymer.html` | ||
| <style is="custom-style" include="iron-flex iron-flex-alignment"></style> | ||
| <style> | ||
| :host { | ||
| line-height: inherit; | ||
| } | ||
| .switch { | ||
| min-width: 30px; | ||
| max-width: 30px; | ||
| height: 30px; | ||
| margin-left: 2px; | ||
| margin-right: 2px; | ||
| background-color: #759aaa; | ||
| border: 1px solid lightgrey; | ||
| border-radius: 4px; | ||
| font-size: 10px !important; | ||
| color: inherit; | ||
| text-align: center; | ||
| float: right !important; | ||
| padding: 1px; | ||
| cursor: pointer; | ||
| } | ||
| </style> | ||
| <hui-generic-entity-row hass="[[hass]]" config="[[_config]]"> | ||
| <div class='horizontal justified layout' on-click="stopPropagation"> | ||
| <button | ||
| class='switch' | ||
| style='[[_leftColor]]' | ||
| toggles name='[[_leftName]]' | ||
| on-click='setState' | ||
| disabled='[[_leftState]]'>[[_leftText]]</button> | ||
| <button | ||
| class='switch' | ||
| style='[[_rightColor]]' | ||
| toggles name='[[_rightName]]' | ||
| on-click='setState' | ||
| disabled='[[_rightState]]'>[[_rightText]]</button> | ||
| </div> | ||
| </hui-generic-entity-row> | ||
| `; | ||
| } | ||
|
|
||
| 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); |