Fixing Climate More-info does not allow dual temp target setting (#765)

* Fixing #236

* Fixed build errors

* Updated PR based on feedback from @andrey-git

* Improved side by side style for dual temperature control

* Removed unused styling

* Removed code that is no longer needed after correction from feedback

* Updated based on feedback on discord

* Corrected errors from lint and refactored more vars to const
Fixed lint
This commit is contained in:
Marius 2017-12-30 13:11:04 +02:00 committed by Andrey
parent eeb949a081
commit 5085c78f7e

View File

@ -63,19 +63,16 @@
width: 100%; width: 100%;
} }
.auto paper-slider { ha-climate-control.range-control-left,
--paper-slider-active-color: var(--paper-orange-400); ha-climate-control.range-control-right {
--paper-slider-secondary-color: var(--paper-blue-400); float: left;
width: 46%;
} }
ha-climate-control.range-control-left {
.heat paper-slider { margin-right: 4%;
--paper-slider-active-color: var(--paper-orange-400);
--paper-slider-secondary-color: var(--paper-green-400);
} }
ha-climate-control.range-control-right {
.cool paper-slider { margin-left: 4%;
--paper-slider-active-color: var(--paper-green-400);
--paper-slider-secondary-color: var(--paper-blue-400);
} }
.humidity { .humidity {
@ -97,15 +94,39 @@
<div class$='single-row, [[stateObj.attributes.operation_mode]]'> <div class$='single-row, [[stateObj.attributes.operation_mode]]'>
<div hidden$='[[computeTargetTempHidden(stateObj)]]'>Target <div hidden$='[[computeTargetTempHidden(stateObj)]]'>Target
Temperature</div> Temperature</div>
<ha-climate-control <template is='dom-if' if='[[computeIncludeTempControl(stateObj)]]'>
value='[[stateObj.attributes.temperature]]' <ha-climate-control
units='[[stateObj.attributes.unit_of_measurement]]' value='[[stateObj.attributes.temperature]]'
step='[[computeTemperatureStepSize(stateObj)]]' units='[[stateObj.attributes.unit_of_measurement]]'
min='[[stateObj.attributes.min_temp]]' step='[[computeTemperatureStepSize(stateObj)]]'
max='[[stateObj.attributes.max_temp]]' min='[[stateObj.attributes.min_temp]]'
on-change='targetTemperatureChanged' max='[[stateObj.attributes.max_temp]]'
> on-change='targetTemperatureChanged'
</ha-climate-control> >
</ha-climate-control>
</template>
<template is='dom-if' if='[[computeIncludeTempRangeControl(stateObj)]]'>
<ha-climate-control
value='[[stateObj.attributes.target_temp_low]]'
units='[[stateObj.attributes.unit_of_measurement]]'
step='[[computeTemperatureStepSize(stateObj)]]'
min='[[stateObj.attributes.min_temp]]'
max='[[stateObj.attributes.target_temp_high]]'
class='range-control-left'
on-change='targetTemperatureLowChanged'
>
</ha-climate-control>
<ha-climate-control
value='[[stateObj.attributes.target_temp_high]]'
units='[[stateObj.attributes.unit_of_measurement]]'
step='[[computeTemperatureStepSize(stateObj)]]'
min='[[stateObj.attributes.target_temp_low]]'
max='[[stateObj.attributes.max_temp]]'
class='range-control-right'
on-change='targetTemperatureHighChanged'
>
</ha-climate-control>
</template>
</div> </div>
</div> </div>
@ -270,13 +291,13 @@ class MoreInfoClimate extends window.hassMixins.EventsMixin(Polymer.Element) {
!stateObj.attributes.target_temp_high; !stateObj.attributes.target_temp_high;
} }
computeHideTempRangeSlider(stateObj) { computeIncludeTempRangeControl(stateObj) {
return !stateObj.attributes.target_temp_low && return stateObj.attributes.target_temp_low ||
!stateObj.attributes.target_temp_high; stateObj.attributes.target_temp_high;
} }
computeHideTempSlider(stateObj) { computeIncludeTempControl(stateObj) {
return !stateObj.attributes.temperature; return stateObj.attributes.temperature;
} }
computeClassNames(stateObj) { computeClassNames(stateObj) {
@ -307,81 +328,71 @@ class MoreInfoClimate extends window.hassMixins.EventsMixin(Polymer.Element) {
} }
targetTemperatureChanged(ev) { targetTemperatureChanged(ev) {
var temperature = ev.target.value; const temperature = ev.target.value;
if (temperature === this.stateObj.attributes.temperature) return; if (temperature === this.stateObj.attributes.temperature) return;
this.callServiceHelper('set_temperature', { temperature: temperature }); this.callServiceHelper('set_temperature', { temperature: temperature });
} }
targetTemperatureRangeSliderChanged(ev) { targetTemperatureLowChanged(ev) {
var targetTempLow = ev.currentTarget.valueMin; const targetTempLow = ev.currentTarget.value;
var targetTempHigh = ev.currentTarget.valueMax; if (targetTempLow === this.stateObj.attributes.target_temp_low) return;
if (targetTempLow === this.stateObj.attributes.target_temp_low &&
targetTempHigh === this.stateObj.attributes.target_temp_high) return;
this.callServiceHelper('set_temperature', { this.callServiceHelper('set_temperature', {
target_temp_low: targetTempLow, target_temp_low: targetTempLow,
target_temp_high: this.stateObj.attributes.target_temp_high,
});
}
targetTemperatureHighChanged(ev) {
const targetTempHigh = ev.currentTarget.value;
if (targetTempHigh === this.stateObj.attributes.target_temp_high) return;
this.callServiceHelper('set_temperature', {
target_temp_low: this.stateObj.attributes.target_temp_low,
target_temp_high: targetTempHigh, target_temp_high: targetTempHigh,
}); });
} }
targetHumiditySliderChanged(ev) { targetHumiditySliderChanged(ev) {
var humidity = ev.target.value; const humidity = ev.target.value;
if (humidity === this.stateObj.attributes.humidity) return; if (humidity === this.stateObj.attributes.humidity) return;
this.callServiceHelper('set_humidity', { humidity: humidity }); this.callServiceHelper('set_humidity', { humidity: humidity });
} }
awayToggleChanged(ev) { awayToggleChanged(ev) {
var oldVal = this.stateObj.attributes.away_mode === 'on'; const oldVal = this.stateObj.attributes.away_mode === 'on';
var newVal = ev.target.checked; const newVal = ev.target.checked;
if (oldVal === newVal) return; if (oldVal === newVal) return;
this.callServiceHelper('set_away_mode', { away_mode: newVal }); this.callServiceHelper('set_away_mode', { away_mode: newVal });
} }
auxToggleChanged(ev) { auxToggleChanged(ev) {
var oldVal = this.stateObj.attributes.aux_heat === 'on'; const oldVal = this.stateObj.attributes.aux_heat === 'on';
var newVal = ev.target.checked; const newVal = ev.target.checked;
if (oldVal === newVal) return; if (oldVal === newVal) return;
this.callServiceHelper('set_aux_heat', { aux_heat: newVal }); this.callServiceHelper('set_aux_heat', { aux_heat: newVal });
} }
handleFanmodeChanged(fanIndex) { handleFanmodeChanged(fanIndex) {
var fanInput;
// Selected Option will transition to '' before transitioning to new value // Selected Option will transition to '' before transitioning to new value
if (fanIndex === '' || fanIndex === -1) return; if (fanIndex === '' || fanIndex === -1) return;
const fanInput = this.stateObj.attributes.fan_list[fanIndex];
fanInput = this.stateObj.attributes.fan_list[fanIndex];
if (fanInput === this.stateObj.attributes.fan_mode) return; if (fanInput === this.stateObj.attributes.fan_mode) return;
this.callServiceHelper('set_fan_mode', { fan_mode: fanInput }); this.callServiceHelper('set_fan_mode', { fan_mode: fanInput });
} }
handleOperationmodeChanged(operationIndex) { handleOperationmodeChanged(operationIndex) {
var operationInput;
// Selected Option will transition to '' before transitioning to new value // Selected Option will transition to '' before transitioning to new value
if (operationIndex === '' || operationIndex === -1) return; if (operationIndex === '' || operationIndex === -1) return;
const operationInput = this.stateObj.attributes.operation_list[operationIndex];
operationInput = this.stateObj.attributes.operation_list[operationIndex];
if (operationInput === this.stateObj.attributes.operation_mode) return; if (operationInput === this.stateObj.attributes.operation_mode) return;
this.callServiceHelper('set_operation_mode', { operation_mode: operationInput }); this.callServiceHelper('set_operation_mode', { operation_mode: operationInput });
} }
handleSwingmodeChanged(swingIndex) { handleSwingmodeChanged(swingIndex) {
var swingInput;
// Selected Option will transition to '' before transitioning to new value // Selected Option will transition to '' before transitioning to new value
if (swingIndex === '' || swingIndex === -1) return; if (swingIndex === '' || swingIndex === -1) return;
const swingInput = this.stateObj.attributes.swing_list[swingIndex];
swingInput = this.stateObj.attributes.swing_list[swingIndex];
if (swingInput === this.stateObj.attributes.swing_mode) return; if (swingInput === this.stateObj.attributes.swing_mode) return;
this.callServiceHelper('set_swing_mode', { swing_mode: swingInput }); this.callServiceHelper('set_swing_mode', { swing_mode: swingInput });
} }