Skip to content

Commit

Permalink
Update light-brightness-preset-row.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@finity69x2
finity69x2 authored May 7, 2023
1 parent e59a913 commit c0c7aaa
Showing 1 changed file with 150 additions and 147 deletions.
297 changes: 150 additions & 147 deletions dist/light-brightness-preset-row.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,97 +6,14 @@ window.customCards.push({
preview: false,
});

class CustomLightBrightnessRow 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>
:host {
line-height: inherit;
}
.brightness {
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='brightness'
style='[[_leftColor]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
toggles name="[[_leftName]]"
on-click='setBrightness'
disabled='[[_leftState]]'>[[_leftText]]</button>
<button
class='brightness'
style='[[_midLeftColor]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
toggles name="[[_midLeftName]]"
on-click='setBrightness'
disabled='[[_midLeftState]]'>[[_midLeftText]]</button>
<button
class='brightness'
style='[[_midRightColor]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
toggles name="[[_midRightName]]"
on-click='setBrightness'
disabled='[[_midRightState]]'>[[_midRightText]]</button>
<button
class='brightness'
style='[[_rightColor]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
toggles name="[[_rightName]]"
on-click='setBrightness'
disabled='[[_rightState]]'>[[_rightText]]</button>
</div>
</hui-generic-entity-row>
`;
}
class CustomLightBrightnessRow extends LitElement {

static get properties() {
return {
hass: {
type: Object,
observer: 'hassChanged'
},
_config: Object,
_stateObj: Object,
_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,
_leftState: Boolean,
_midLeftState: Boolean,
_midRightState: Boolean,
_rightState: Boolean,

}
}

setConfig(config) {
this._config = config;

constructor() {
super();
this._config = {
customTheme: false,
customSetpoints: false,
Expand All @@ -115,14 +32,111 @@ class CustomLightBrightnessRow extends Polymer.Element {
customLowText: 'LOW',
customMedText: 'MED',
customHiText: 'HIGH',
...config
};
}

static get properties() {
return {
hass: Object,
_config: Object,
_stateObj: Object,
_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,
_leftState: Boolean,
_midLeftState: Boolean,
_midRightState: Boolean,
_rightState: Boolean,
};
}

static get styles() {
return css`
:host {
line-height: inherit;
}
.brightness {
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: left !important;
padding: 1px;
cursor: pointer;
}
`;
}

render() {
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<div id='button-container' class='horizontal justified layout'>
<button
class='brightness'
style='${this._leftColor};min-width:${this._width};max-width:${this._width};height:${this._height}'
toggles name="${this._leftName}"
@click=${this.setBrightness}
.disabled=${this._leftState}>${this._leftText}</button>
<button
class='brightness'
style='${this._midLeftColor};min-width:${this._width};max-width:${this._width};height:${this._height}'
toggles name="${this._midLeftName}"
@click=${this.setBrightness}
.disabled=${this._midLeftState}>${this._midLeftText}</button>
<button
class='brightness'
style='${this._midRightColor};min-width:${this._width};max-width:${this._width};height:${this._height}'
toggles name="${this._midRightName}"
@click=${this.setBrightness}
.disabled=${this._midRightState}>${this._midRightText}</button>
<button
class='brightness'
style='${this._rightColor};min-width:${this._width};max-width:${this._width};height:${this._height}'
toggles name="${this._rightName}"
@click=${this.setBrightness}
.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 = { ...this._config, ...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 custSetpoint = config.customSetpoints;
const revButtons = config.reverseButtons;
Expand Down Expand Up @@ -243,7 +257,7 @@ class CustomLightBrightnessRow extends Polymer.Element {
let offtext = custOffTxt;
let lowtext = custLowTxt;
let medtext = custMedTxt;
let hitext = custHiTxt;
let hitext = custHiTxt;

let offname = 'off'
let lowname = 'low'
Expand All @@ -254,65 +268,54 @@ class CustomLightBrightnessRow extends Polymer.Element {
let buttonheight = buttonHeight;

if (revButtons) {
this.setProperties({
_stateObj: stateObj,
_leftState: offstate == 'on',
_midLeftState: low === 'on',
_midRightState: med === 'on',
_rightState: high === 'on',
_width: buttonwidth,
_height: buttonheight,
_leftColor: offcolor,
_midLeftColor: lowcolor,
_midRightColor: medcolor,
_rightColor: hicolor,
_lowSP: lowSetpoint,
_medSP: medSetpoint,
_highSP: hiSetpoint,
_leftText: offtext,
_midLeftText: lowtext,
_midRightText: medtext,
_rightText: hitext,
_leftName: offname,
_midLeftName: lowname,
_midRightName: medname,
_rightName: hiname,

});
this._stateObj = stateObj;
this._leftState = (offstate == 'on');
this._midLeftState = (low === 'on');
this._midRightState = (med === 'on');
this._rightState = (high === 'on');
this._width = buttonwidth;
this._height = buttonheight;
this._leftColor = offcolor;
this._midLeftColor = lowcolor;
this._midRightColor = medcolor;
this._rightColor = hicolor;
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;
} else {
this.setProperties({
_stateObj: stateObj,
_leftState: high == 'on',
_midLeftState: med === 'on',
_midRightState: low === 'on',
_rightState: offstate === 'on',
_width: buttonwidth,
_height: buttonheight,
_leftColor: hicolor,
_midLeftColor: medcolor,
_midRightColor: lowcolor,
_rightColor: offcolor,
_lowSP: lowSetpoint,
_medSP: medSetpoint,
_highSP: hiSetpoint,
_leftText: hitext,
_midLeftText: medtext,
_midRightText: lowtext,
_rightText: offtext,
_leftName: hiname,
_midLeftName: medname,
_midRightName: lowname,
_rightName: offname,
});
this._stateObj = stateObj;
this._leftState = (high == 'on');
this._midLeftState = (med === 'on');
this._midRightState = (low === 'on');
this._rightState = (offstate === 'on');
this._width = buttonwidth;
this._height = buttonheight;
this._leftColor = hicolor;
this._midLeftColor = medcolor;
this._midRightColor = lowcolor;
this._rightColor = offcolor;
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;
}


}

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

setBrightness(e) {
const level = e.currentTarget.getAttribute('name');
const param = {entity_id: this._config.entity};
Expand Down

0 comments on commit c0c7aaa

Please sign in to comment.