Add effects selector in light more info (#156)

* Add effects selector in light more info

* Fix incorrect indentation
This commit is contained in:
Antoine Bertin 2016-11-28 01:38:08 +01:00 committed by Paulus Schoutsen
parent c22586de8d
commit 9184aaf33f

View File

@ -9,7 +9,11 @@
<template> <template>
<style is="custom-style" include="iron-flex"></style> <style is="custom-style" include="iron-flex"></style>
<style> <style>
.brightness, .color_temp, .white_value { .effect_list {
padding-bottom: 16px;
}
.effect_list, .brightness, .color_temp, .white_value {
max-height: 0px; max-height: 0px;
overflow: hidden; overflow: hidden;
transition: max-height .5s ease-in; transition: max-height .5s ease-in;
@ -24,6 +28,7 @@
transition: max-height .2s ease-in; transition: max-height .2s ease-in;
} }
.has-effect_list .effect_list,
.has-brightness .brightness, .has-brightness .brightness,
.has-color_temp .color_temp, .has-color_temp .color_temp,
.has-white_value .white_value { .has-white_value .white_value {
@ -37,6 +42,17 @@
<div class$='[[computeClassNames(stateObj)]]'> <div class$='[[computeClassNames(stateObj)]]'>
<div class='effect_list'>
<paper-dropdown-menu label-float label='Effect'>
<paper-menu class="dropdown-content" selected="{{effectIndex}}">
<template is='dom-repeat'
items='[[stateObj.attributes.effect_list]]'>
<paper-item>[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
</div>
<div class='brightness'> <div class='brightness'>
<ha-labeled-slider <ha-labeled-slider
caption='Brightness' icon='mdi:brightness-5' max='255' caption='Brightness' icon='mdi:brightness-5' max='255'
@ -79,6 +95,12 @@ Polymer({
observer: 'stateObjChanged', observer: 'stateObjChanged',
}, },
effectIndex: {
type: Number,
value: -1,
observer: 'effectChanged',
},
brightnessSliderValue: { brightnessSliderValue: {
type: Number, type: Number,
value: 0, value: 0,
@ -100,6 +122,13 @@ Polymer({
this.brightnessSliderValue = newVal.attributes.brightness; this.brightnessSliderValue = newVal.attributes.brightness;
this.ctSliderValue = newVal.attributes.color_temp; this.ctSliderValue = newVal.attributes.color_temp;
this.wvSliderValue = newVal.attributes.white_value; this.wvSliderValue = newVal.attributes.white_value;
if (newVal.attributes.effect_list) {
this.effectIndex = newVal.attributes.effect_list.indexOf(
newVal.attributes.effect);
} else {
this.effectIndex = -1;
}
} }
this.async(function () { this.async(function () {
@ -109,7 +138,22 @@ Polymer({
computeClassNames: function (stateObj) { computeClassNames: function (stateObj) {
return window.hassUtil.attributeClassNames( return window.hassUtil.attributeClassNames(
stateObj, ['brightness', 'rgb_color', 'color_temp', 'white_value']); stateObj, ['brightness', 'rgb_color', 'color_temp', 'white_value',
'effect_list']);
},
effectChanged: function (effectIndex) {
var effectInput;
// Selected Option will transition to '' before transitioning to new value
if (effectIndex === '' || effectIndex === -1) return;
effectInput = this.stateObj.attributes.effect_list[effectIndex];
if (effectInput === this.stateObj.attributes.effect) return;
this.hass.serviceActions.callService('light', 'turn_on', {
entity_id: this.stateObj.entityId,
effect: effectInput,
});
}, },
brightnessSliderChanged: function (ev) { brightnessSliderChanged: function (ev) {