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

Display value when sliding. Addresses #2

Browse Source
This commit is contained in:
Thomas Lovén 2018-09-07 10:52:51 +02:00
parent 11fc8d1b73
commit 2c420a47e3
1 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
slider-entity-row.js
View File

@ -1,33 +1,51 @@
class SliderEntityRow extends Polymer.Element { class SliderEntityRow extends Polymer.Element {
static get template() { static get template() {
let slider = Polymer.html` let slider = Polymer.html`
<paper-slider min="[[min]]" max="[[max]]" value="{{value}}" on-change="selectedValue" on-click="stopPropagation"></paper-slider> <paper-slider
min="[[min]]"
max="[[max]]"
value="{{value}}"
step="[[step]]"
pin
on-change="selectedValue"
ignore-bar-touch
on-click="stopPropagation">
</paper-slider>
` `
return Polymer.html` return Polymer.html`
<style> <style>
hui-generic-entity-row { hui-generic-entity-row {
margin: var(--ha-themed-slider-margin, initial); margin: var(--ha-themed-slider-margin, initial);
} }
paper-slider { .flex {
margin-left: auto; display: flex;
align-items: center;
} }
.second-line paper-slider { .second-line paper-slider {
width: 100%; width: 100%;
} }
</style> </style>
<hui-generic-entity-row config="[[_config]]" hass="[[_hass]]"> <hui-generic-entity-row
<template is='dom-if' if='{{showTop}}'> config="[[_config]]"
${slider} hass="[[_hass]]"
</template> >
<template is='dom-if' if='{{!hideControl}}'> <div class="flex">
<ha-entity-toggle state-obj="[[stateObj]]" hass="[[_hass]]"></ha-entity-toggle> <template is='dom-if' if='{{showTop}}'>
</template> ${slider}
</hui-generic-entity-row> </template>
<template is='dom-if' if='{{showBottom}}'> <template is='dom-if' if='{{!hideControl}}'>
<div class="second-line"> <ha-entity-toggle
${slider} state-obj="[[stateObj]]"
hass="[[_hass]]"
></ha-entity-toggle>
</template>
</div> </div>
</template> </hui-generic-entity-row>
<template is='dom-if' if='{{showBottom}}'>
<div class="second-line">
${slider}
</div>
</template>
` `
} }
@ -41,7 +59,8 @@ class SliderEntityRow extends Polymer.Element {
isOn: { type: Boolean }, isOn: { type: Boolean },
stateObj: { type: Object, value: null }, stateObj: { type: Object, value: null },
min: { type: Number, value: 0 }, min: { type: Number, value: 0 },
max: { type: Number, value: 255 }, max: { type: Number, value: 100 },
step: { type: Number, value: 5 },
attribute: { type: String, value: 'brightness' }, attribute: { type: String, value: 'brightness' },
value: Number, value: Number,
}; };
@ -81,7 +100,7 @@ class SliderEntityRow extends Polymer.Element {
this.stateObj = this._config.entity in hass.states ? hass.states[this._config.entity] : null; this.stateObj = this._config.entity in hass.states ? hass.states[this._config.entity] : null;
if(this.stateObj) { if(this.stateObj) {
if(this.stateObj.state === 'on') { if(this.stateObj.state === 'on') {
this.value = this.stateObj.attributes[this.attribute]; this.value = this.stateObj.attributes[this.attribute]/2.55;
this.isOn = true; this.isOn = true;
} else { } else {
this.value = this.min; this.value = this.min;
@ -92,7 +111,7 @@ class SliderEntityRow extends Polymer.Element {
} }
selectedValue(ev) { selectedValue(ev) {
const value = parseInt(this.value, 10); const value = Math.ceil(parseInt(this.value, 10)*2.55);
const param = {entity_id: this.stateObj.entity_id }; const param = {entity_id: this.stateObj.entity_id };
if(Number.isNaN(value)) return; if(Number.isNaN(value)) return;
if(value === 0) { if(value === 0) {