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 {
static get template() {
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`
<style>
hui-generic-entity-row {
margin: var(--ha-themed-slider-margin, initial);
}
paper-slider {
margin-left: auto;
.flex {
display: flex;
align-items: center;
}
.second-line paper-slider {
width: 100%;
}
</style>
<hui-generic-entity-row config="[[_config]]" hass="[[_hass]]">
<template is='dom-if' if='{{showTop}}'>
${slider}
</template>
<template is='dom-if' if='{{!hideControl}}'>
<ha-entity-toggle state-obj="[[stateObj]]" hass="[[_hass]]"></ha-entity-toggle>
</template>
</hui-generic-entity-row>
<template is='dom-if' if='{{showBottom}}'>
<div class="second-line">
${slider}
<hui-generic-entity-row
config="[[_config]]"
hass="[[_hass]]"
>
<div class="flex">
<template is='dom-if' if='{{showTop}}'>
${slider}
</template>
<template is='dom-if' if='{{!hideControl}}'>
<ha-entity-toggle
state-obj="[[stateObj]]"
hass="[[_hass]]"
></ha-entity-toggle>
</template>
</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 },
stateObj: { type: Object, value: null },
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' },
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;
if(this.stateObj) {
if(this.stateObj.state === 'on') {
this.value = this.stateObj.attributes[this.attribute];
this.value = this.stateObj.attributes[this.attribute]/2.55;
this.isOn = true;
} else {
this.value = this.min;
@ -92,7 +111,7 @@ class SliderEntityRow extends Polymer.Element {
}
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 };
if(Number.isNaN(value)) return;
if(value === 0) {