Bug fix for #761 and color enhance when temperature in flux (#772)

* Correct triggering temperature when min is reached and user clicks extra #761

* Fixed build problems from lint

* Fixed as per feedback from @c727

* Updated based on PR feedback from @andrey-git

* Improved defect based on better solution from @andrey-git

* Updated vars to const based on feedback

* Updated control to support better changing values regardless of step based on feedback
This commit is contained in:
Marius 2018-01-16 17:02:55 +02:00 committed by Andrey
parent 40731152e9
commit 3e0193c704

View File

@ -14,7 +14,10 @@
@apply(--layout-horizontal);
@apply(--layout-justified);
}
.target-temperature {
.in-flux#target_temperature {
color: var(--google-red-500);
}
#target_temperature {
@apply(--layout-self-center);
font-size: 200%;
}
@ -29,7 +32,7 @@
</style>
<!-- local DOM goes here -->
<div class="target-temperature">
<div id="target_temperature">
[[value]] [[units]]
</div>
<div class="control-buttons">
@ -67,18 +70,34 @@ class HaClimateControl extends window.hassMixins.EventsMixin(Polymer.Element) {
},
};
}
temperatureStateInFlux(inFlux) {
this.$.target_temperature.classList.toggle('in-flux', inFlux);
}
incrementValue() {
var newval = this.value + this.step;
const newval = this.value + this.step;
if (this.value < this.max) {
this.last_changed = Date.now();
this.temperatureStateInFlux(true);
}
if (newval <= this.max) {
// If no initial target_temp
// this forces control to start
// from the min configured instead of 0
if (newval <= this.min) {
this.value = this.min;
} else {
this.value = newval;
}
} else {
this.value = this.max;
}
}
decrementValue() {
var newval = this.value - this.step;
const newval = this.value - this.step;
if (this.value > this.min) {
this.last_changed = Date.now();
this.temperatureStateInFlux(true);
}
if (newval >= this.min) {
this.value = newval;
} else {
@ -86,19 +105,16 @@ class HaClimateControl extends window.hassMixins.EventsMixin(Polymer.Element) {
}
}
valueChanged() {
// when the value is changed, trigger a potential event fire in
// when the last_changed timestamp is changed,
// trigger a potential event fire in
// the future, as long as last changed is far enough in the
// past.
//
// from a UX perspective it would probably be worth changing
// font color on the temperature when it's in the flux state
// (like set to red), then animate back to black when the
// change event is fired, and the signal sent to home-assistant.
if (this.last_changed) {
window.setTimeout(() => {
var now = Date.now();
const now = Date.now();
if (now - this.last_changed >= 2000) {
this.fire('change');
this.temperatureStateInFlux(false);
this.last_changed = null;
}
}, 2010);