Skip to content

Commit

Permalink
Update binary-control-button-row.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@finity69x2
finity69x2 authored May 7, 2023
1 parent ed9d1bd commit f3c6707
Showing 1 changed file with 97 additions and 89 deletions.
186 changes: 97 additions & 89 deletions dist/binary-control-button-row.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,48 @@ window.customCards.push({
preview: false,
});

class CustomBinaryRow extends Polymer.Element {
const LitElement = customElements.get("ha-panel-lovelace") ? Object.getPrototypeOf(customElements.get("ha-panel-lovelace")) : Object.getPrototypeOf(customElements.get("hc-lovelace"));
const html = LitElement.prototype.html;
const css = LitElement.prototype.css;

static get template() {
return Polymer.html`
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
class CustomBinaryRow extends LitElement {

constructor() {
super();
this._config = {
customTheme: false,
reverseButtons: false,
width: '30px',
height: '30px',
isOnColor: '#43A047',
isOffColor: '#f44c09',
buttonInactiveColor: '#759aaa',
customOffText: 'OFF',
customOnText: 'ON',

};
}

static get properties() {
return {
hass: Object,
_config: Object,
_stateObj: Object,
_width: String,
_height: String,
_leftColor: String,
_leftText: String,
_leftName: String,
_leftState: Boolean,
_rightColor: String,
_rightText: String,
_rightName: String,
_rightState: Boolean,
};
}

static get styles() {
return css`
:host {
line-height: inherit;
}
Expand All @@ -24,72 +60,52 @@ class CustomBinaryRow extends Polymer.Element {
font-size: 10px !important;
color: inherit;
text-align: center;
float: right !important;
float: left !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]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
toggles name='[[_leftName]]'
on-click='setState'
disabled='[[_leftState]]'>[[_leftText]]</button>
<button
class='switch'
style='[[_rightColor]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
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,
_width: String,
_height: String,
_leftColor: String,
_leftText: String,
_leftName: String,
_leftState: Boolean,
_rightColor: String,
_rightText: String,
_rightName: String,
_rightState: Boolean,
}
}
render() {
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<div id='button-container' class='horizontal justified layout'>
<button
class='switch'
style='${this._leftColor};min-width:${this._width};max-width:${this._width};height:${this._height}'
toggles name="${this._leftName}"
@click=${this.setState}
.disabled=${this._leftState}>${this._leftText}</button>
<button
class='switch'
style='${this._rightColor};min-width:${this._width};max-width:${this._width};height:${this._height}'
toggles name="${this._rightName}"
@click=${this.setState}
.disabled=${this._rightState}>${this._rightText}</button>
</div>
</hui-generic-entity-row>
`;
}

firstUpdated() {
super.firstUpdated();
this.shadowRoot.getElementById('button-container').addEventListener('click', (ev) => ev.stopPropagation());
}

setConfig(config) {
this._config = config;
this._config = { ...this._config, ...config };
}

this._config = {
customTheme: false,
reverseButtons: false,
width: '30px',
height: '30px',
isOnColor: '#43A047',
isOffColor: '#f44c09',
buttonInactiveColor: '#759aaa',
customOffText: 'OFF',
customOnText: 'ON',
...config
};
updated(changedProperties) {
if (changedProperties.has("hass")) {
this.hassChanged();
}
}

hassChanged(hass) {

const config = this._config;
const stateObj = hass.states[config.entity];
const stateObj = this.hass.states[config.entity];
const custTheme = config.customTheme;
const revButtons = config.reverseButtons;
const buttonWidth = config.width;
Expand Down Expand Up @@ -155,41 +171,33 @@ class CustomBinaryRow extends Polymer.Element {
let onname = 'on';

if (revButtons) {
this.setProperties({
_stateObj: stateObj,
_rightState: stateObj.state === 'on',
_leftState: stateObj.state == 'off',
_width: buttonwidth,
_height: buttonheight,
_rightName: onname,
_leftName: offname,
_rightColor: oncolor,
_leftColor: offcolor,
_rightText: ontext,
_leftText: offtext,
});
this._stateObj = stateObj;
this._rightState = stateObj.state === 'on';
this._leftState = stateObj.state == 'off';
this._width = buttonwidth;
this._height = buttonheight;
this._rightName = onname;
this._leftName = offname;
this._rightColor = oncolor;
this._leftColor = offcolor;
this._rightText = ontext;
this._leftText = offtext;
} else {
this.setProperties({
_stateObj: stateObj,
_leftState: stateObj.state === 'on',
_rightState: stateObj.state == 'off',
_width: buttonwidth,
_height: buttonheight,
_leftName: onname,
_rightName: offname,
_leftColor: oncolor,
_rightColor: offcolor,
_leftText: ontext,
_rightText: offtext,
});
this._stateObj = stateObj;
this._leftState = stateObj.state === 'on';
this._rightState = stateObj.state == 'off';
this._width = buttonwidth;
this._height = buttonheight;
this._leftName = onname;
this._rightName = offname;
this._leftColor = oncolor;
this._rightColor = offcolor;
this._leftText = ontext;
this._rightText = offtext;
}
}
}


stopPropagation(e) {
e.stopPropagation();
}

setState(e) {
const state = e.currentTarget.getAttribute('name');
if( state == 'off' ){
Expand Down

0 comments on commit f3c6707

Please sign in to comment.