Add new temperature control in climate more info (#17002)

* Add circular slider as temperature control

* Move climate icons and mode mapping

* Update icon

* Add mode icon

* Improve colors

* Add temperature control buttons

* Call service

* Remove climate control

* Some fixes

* Add current temp and humidity

* Fix default mode

* Swap state and current

* Some adjustments

* prettier

* Simplify color rules

* refactor cool mode

* Color button when dual climate

* Add current temp and humidity

* Fix opacity

* Hide current temp is below min or above max

* Adjust button size

* Add action label

* Better off and unavailable state

* Improve current color

* Add gallery

* Fix dark mode

* Add overflow

* Update src/dialogs/more-info/controls/more-info-climate.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/panels/lovelace/cards/hui-thermostat-card.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/dialogs/more-info/components/climate/ha-more-info-climate-temperature.ts

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Paul Bottein
2023-08-08 12:50:21 +02:00
committed by GitHub
parent 85733655c2
commit 89e96e4681
16 changed files with 877 additions and 355 deletions

View File

@@ -19,7 +19,7 @@ import {
} from "../../common/entity/state_color";
import { iconColorCSS } from "../../common/style/icon_color_css";
import { cameraUrlWithWidthHeight } from "../../data/camera";
import { HVAC_ACTION_TO_MODE } from "../../data/climate";
import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
import type { HomeAssistant } from "../../types";
import "../ha-state-icon";
@@ -160,10 +160,10 @@ export class StateBadge extends LitElement {
}
if (stateObj.attributes.hvac_action) {
const hvacAction = stateObj.attributes.hvac_action;
if (hvacAction in HVAC_ACTION_TO_MODE) {
if (hvacAction in CLIMATE_HVAC_ACTION_TO_MODE) {
iconStyle.color = stateColorCss(
stateObj,
HVAC_ACTION_TO_MODE[hvacAction]
CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]
)!;
} else {
delete iconStyle.color;