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

Allow hiding slider when off. Resolves #1

Browse Source
This commit is contained in:
Thomas Lovén 2018-08-17 09:32:51 +02:00
parent b18c6bd425
commit d96c3033b2
2 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -32,3 +32,5 @@ views:
`hide_control: true` - Remove toggle `hide_control: true` - Remove toggle
`break_slider: true` - Put slider on separate row `break_slider: true` - Put slider on separate row
`hide_when_off: true` - Hide the slider when the light is off

65
slider-entity-row.js
View File

@ -1,5 +1,8 @@
class SliderEntityRow extends Polymer.Element { class SliderEntityRow extends Polymer.Element {
static get template() { static get template() {
let slider = Polymer.html`
<paper-slider min="[[min]]" max="[[max]]" value="{{value}}" on-change="selectedValue" on-click="stopPropagation"></paper-slider>
`
return Polymer.html` return Polymer.html`
<style> <style>
hui-generic-entity-row { hui-generic-entity-row {
@ -13,16 +16,16 @@ class SliderEntityRow extends Polymer.Element {
} }
</style> </style>
<hui-generic-entity-row config="[[_config]]" hass="[[_hass]]"> <hui-generic-entity-row config="[[_config]]" hass="[[_hass]]">
<template is='dom-if' if='{{!breakSlider}}'> <template is='dom-if' if='{{showTop}}'>
<paper-slider min="[[min]]" max="[[max]]" value="{{value}}" on-change="selectedValue" on-click="stopPropagation"></paper-slider> ${slider}
</template> </template>
<template is='dom-if' if='{{!hideControl}}'> <template is='dom-if' if='{{!hideControl}}'>
<ha-entity-toggle state-obj="[[stateObj]]" hass="[[_hass]]"></ha-entity-toggle> <ha-entity-toggle state-obj="[[stateObj]]" hass="[[_hass]]"></ha-entity-toggle>
</template> </template>
</hui-generic-entity-row> </hui-generic-entity-row>
<template is='dom-if' if='{{breakSlider}}'> <template is='dom-if' if='{{showBottom}}'>
<div class="second-line"> <div class="second-line">
<paper-slider min="[[min]]" max="[[max]]" value="{{value}}" on-change="selectedValue" on-click="stopPropagation"></paper-slider> ${slider}
</div> </div>
</template> </template>
` `
@ -32,30 +35,14 @@ class SliderEntityRow extends Polymer.Element {
return { return {
_hass: Object, _hass: Object,
_config: Object, _config: Object,
hideControl: { hideControl: { type: Boolean, value: false },
type: Boolean, breakSlider: { type: Boolean, value: false },
value: false, hideWhenOff: { type: Boolean, value: false },
}, isOn: { type: Boolean },
breakSlider: { stateObj: { type: Object, value: null },
type: Boolean, min: { type: Number, value: 0 },
value: false, max: { type: Number, value: 255 },
}, attribute: { type: String, value: 'brightness' },
stateObj: {
type: Object,
value: null,
},
min: {
type: Number,
value: 0,
},
max: {
type: Number,
value: 255,
},
attribute: {
type: String,
value: 'brightness',
},
value: Number, value: Number,
}; };
} }
@ -67,16 +54,34 @@ class SliderEntityRow extends Polymer.Element {
this.hideControl = true; this.hideControl = true;
if('break_slider' in config && config.break_slider) if('break_slider' in config && config.break_slider)
this.breakSlider = true; this.breakSlider = true;
if('hide_when_off' in config && config.hide_when_off)
this.hideWhenOff = true;
}
updateSliders()
{
this.showTop = false;
this.showBottom = false;
if(!(this.hideWhenOff && !this.isOn)) {
if(this.breakSlider)
this.showBottom = true;
else
this.showTop = true;
}
} }
set hass(hass) { set hass(hass) {
this._hass = hass; this._hass = hass;
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];
else this.isOn = true;
} else {
this.value = this.min; this.value = this.min;
this.isOn = false;
}
this.updateSliders();
} }
} }