Various climate improvements (#3389)

* Sort HVAC modes

* Add translations for HVAC action

* Show hvac_action if available

src/components/ha-climate-state.js

@@ -39,7 +39,7 @@ class HaClimateState extends LocalizeMixin(PolymerElement) {
       <div class="target">
         <template is="dom-if" if="[[_hasKnownState(stateObj.state)]]">
           <span class="state-label">
-            [[_localizeState(localize, stateObj.state)]]
+            [[_localizeState(localize, stateObj)]]
             <template is="dom-if" if="[[stateObj.attributes.preset_mode]]">
               - [[_localizePreset(localize, stateObj.attributes.preset_mode)]]
             </template>
@@ -116,8 +116,15 @@ class HaClimateState extends LocalizeMixin(PolymerElement) {
     return state !== "unknown";
   }
 
-  _localizeState(localize, state) {
+  _localizeState(localize, stateObj) {
-    return localize(`state.climate.${state}`) || state;
+    const stateString = localize(`state.climate.${stateObj.state}`);
+    return stateObj.attributes.hvac_action
+      ? `${localize(
+          `state_attributes.climate.hvac_action.${
+            stateObj.attributes.hvac_action
+          }`
+        )} (${stateString})`
+      : stateString;
   }
 
   _localizePreset(localize, preset) {

src/data/climate.ts

@@ -49,3 +49,16 @@ export const CLIMATE_SUPPORT_FAN_MODE = 8;
 export const CLIMATE_SUPPORT_PRESET_MODE = 16;
 export const CLIMATE_SUPPORT_SWING_MODE = 32;
 export const CLIMATE_SUPPORT_AUX_HEAT = 64;
+
+const hvacModeOrdering: { [key in HvacMode]: number } = {
+  auto: 1,
+  heat_cool: 2,
+  heat: 3,
+  cool: 4,
+  dry: 5,
+  fan_only: 6,
+  off: 7,
+};
+
+export const compareClimateHvacModes = (mode1: HvacMode, mode2: HvacMode) =>
+  hvacModeOrdering[mode1] - hvacModeOrdering[mode2];

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

@@ -29,6 +29,7 @@ import {
   CLIMATE_SUPPORT_SWING_MODE,
   CLIMATE_SUPPORT_AUX_HEAT,
   CLIMATE_SUPPORT_PRESET_MODE,
+  compareClimateHvacModes,
 } from "../../../data/climate";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { classMap } from "lit-html/directives/class-map";
@@ -176,7 +177,10 @@ class MoreInfoClimate extends LitElement {
                 .selected=${stateObj.state}
                 @selected-changed=${this._handleOperationmodeChanged}
               >
-                ${stateObj.attributes.hvac_modes.map(
+                ${stateObj.attributes.hvac_modes
+                  .concat()
+                  .sort(compareClimateHvacModes)
+                  .map(
                     (mode) => html`
                       <paper-item item-name=${mode}>
                         ${hass.localize(`state.climate.${mode}`)}

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

@@ -23,7 +23,11 @@ import { loadRoundslider } from "../../../resources/jquery.roundslider.ondemand"
 import { UNIT_F } from "../../../common/const";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { ThermostatCardConfig } from "./types";
-import { ClimateEntity, HvacMode } from "../../../data/climate";
+import {
+  ClimateEntity,
+  HvacMode,
+  compareClimateHvacModes,
+} from "../../../data/climate";
 
 const thermostatConfig = {
   radius: 150,
@@ -144,7 +148,13 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
             <div class="climate-info">
               <div id="set-temperature"></div>
               <div class="current-mode">
-                ${this.hass!.localize(`state.climate.${stateObj.state}`)}
+                ${stateObj.attributes.hvac_action
+                  ? this.hass!.localize(
+                      `state_attributes.climate.hvac_action.${
+                        stateObj.attributes.hvac_action
+                      }`
+                    )
+                  : this.hass!.localize(`state.climate.${stateObj.state}`)}
                 ${stateObj.attributes.preset_mode
                   ? html`
                       -
@@ -157,9 +167,10 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
                   : ""}
               </div>
               <div class="modes">
-                ${stateObj.attributes.hvac_modes.map((modeItem) =>
+                ${stateObj.attributes.hvac_modes
-                  this._renderIcon(modeItem, mode)
+                  .concat()
-                )}
+                  .sort(compareClimateHvacModes)
+                  .map((modeItem) => this._renderIcon(modeItem, mode))}
               </div>
             </div>
           </div>

src/translations/en.json

@@ -323,6 +323,14 @@
         "home": "Home",
         "sleep": "Sleep",
         "activity": "Activity"
+      },
+      "hvac_action": {
+        "off": "Off",
+        "heating": "Heating",
+        "cooling": "Cooling",
+        "drying": "Drying",
+        "idle": "Idle",
+        "fan": "Fan"
       }
     }
   },