thomas/lovelace-slider-entity-row
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Better use of Polymer

Browse Source
This commit is contained in:
Thomas Lovén 2018-08-16 15:31:38 +02:00
parent 0576e46671
commit 72bb2a73be
1 changed files with 54 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
slider-entity-row.js
View File

@ -1,78 +1,76 @@
class SliderEntityRowSlider extends Polymer.Element { class SliderEntityRow extends Polymer.Element {
static get template() { static get template() {
return Polymer.html` return Polymer.html`
<style> <style>
:host { hui-generic-entity-row {
margin: var(--ha-themed-slider-margin, initial); margin: var(--ha-themed-slider-margin, initial);
} }
paper-slider { paper-slider {
margin: 4px 0; margin-left: auto;
max-width: 100%;
min-width: 100%;
width: var(--ha-paper-slider-width, 200px);
} }
</style> </style>
<paper-slider min=0 max=255 value="{{value}}" on-change="valueChanged"></paper-slider> <hui-generic-entity-row config="[[_config]]" hass="[[_hass]]">
`; <paper-slider min="[[min]]" max="[[max]]" value="{{value}}" on-change="selectedValue" on-click="stopPropagation"></paper-slider>
<ha-entity-toggle state-obj="[[stateObj]]" hass="[[_hass]]"></ha-entity-toggle>
</hui-generic-entity-row>
`
} }
ready() { static get properties() {
super.ready(); return {
this.addEventListener('click', ev => ev.stopPropagation()); _hass: Object,
} _config: Object,
stateObj: {
valueChanged(ev) { type: Object,
const value = parseInt(this.value, 10); value: null,
const param = {entity_id: this.stateObj.entity_id }; },
if(Number.isNaN(value)) return; min: {
if(value === 0) { type: Number,
this.hass.callService('light', 'turn_off', param); value: 0,
} else { },
param['brightness'] = value; max: {
this.hass.callService('light', 'turn_on', param); type: Number,
} value: 255,
} },
attribute: {
} type: String,
value: 'brightness',
customElements.define('slider-entity-row-slider', SliderEntityRowSlider); },
value: Number,
class SliderEntityRow extends HTMLElement { };
constructor() {
super();
this.attachShadow({mode:'open'});
this.base = document.createElement('hui-generic-entity-row');
this.slider = document.createElement('slider-entity-row-slider');
this.toggle = document.createElement('ha-entity-toggle');
this.base.appendChild(this.slider);
this.base.appendChild(this.toggle);
this.shadowRoot.appendChild(this.base);
} }
setConfig(config) setConfig(config)
{ {
this.base.config = config; this._config = config;
this.entity = config.entity;
console.log(this.base);
} }
set hass(hass) { set hass(hass) {
this.base.hass = hass; this._hass = hass;
this.toggle.hass = hass; this.stateObj = this._config.entity in hass.states ? hass.states[this._config.entity] : null;
this.slider.hass = hass; if(this.stateObj) {
let stateObj = hass.states[this.entity]; if(this.stateObj.state === 'on')
this.toggle.stateObj = stateObj; this.value = this.stateObj.attributes[this.attribute];
this.slider.stateObj = stateObj; else
this.slider.value = this.isOn(stateObj) ? stateObj.attributes['brightness']: 0; this.value = this.min;
}
} }
isOn(stateObj) { selectedValue(ev) {
return stateObj && stateObj.state === 'on'; const value = parseInt(this.value, 10);
const param = {entity_id: this.stateObj.entity_id };
if(Number.isNaN(value)) return;
if(value === 0) {
this._hass.callService('light', 'turn_off', param);
} else {
param[this.attribute] = value;
this._hass.callService('light', 'turn_on', param);
}
} }
stopPropagation(ev) {
ev.stopPropagation();
}
} }
customElements.define('slider-entity-row', SliderEntityRow); customElements.define('slider-entity-row', SliderEntityRow);