mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 10:56:34 +00:00
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:
parent
eeb949a081
commit
5085c78f7e
@ -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 });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user