jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-19 15:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
1 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/ha-climate-control.html
View File

@ -14,7 +14,10 @@
@apply(--layout-horizontal); @apply(--layout-horizontal);
@apply(--layout-justified); @apply(--layout-justified);
} }
.target-temperature { .in-flux#target_temperature {
color: var(--google-red-500);
}
#target_temperature {
@apply(--layout-self-center); @apply(--layout-self-center);
font-size: 200%; font-size: 200%;
} }
@ -29,7 +32,7 @@
</style> </style>
<!-- local DOM goes here --> <!-- local DOM goes here -->
<div class="target-temperature"> <div id="target_temperature">
[[value]] [[units]] [[value]] [[units]]
</div> </div>
<div class="control-buttons"> <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() { incrementValue() {
var newval = this.value + this.step; const newval = this.value + this.step;
this.last_changed = Date.now(); if (this.value < this.max) {
this.last_changed = Date.now();
this.temperatureStateInFlux(true);
}
if (newval <= this.max) { if (newval <= this.max) {
this.value = newval; // 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 { } else {
this.value = this.max; this.value = this.max;
} }
} }
decrementValue() { decrementValue() {
var newval = this.value - this.step; const newval = this.value - this.step;
this.last_changed = Date.now(); if (this.value > this.min) {
this.last_changed = Date.now();
this.temperatureStateInFlux(true);
}
if (newval >= this.min) { if (newval >= this.min) {
this.value = newval; this.value = newval;
} else { } else {
@ -86,19 +105,16 @@ class HaClimateControl extends window.hassMixins.EventsMixin(Polymer.Element) {
} }
} }
valueChanged() { 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 // the future, as long as last changed is far enough in the
// past. // 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) { if (this.last_changed) {
window.setTimeout(() => { window.setTimeout(() => {
var now = Date.now(); const now = Date.now();
if (now - this.last_changed >= 2000) { if (now - this.last_changed >= 2000) {
this.fire('change'); this.fire('change');
this.temperatureStateInFlux(false);
this.last_changed = null; this.last_changed = null;
} }
}, 2010); }, 2010);