Add target temperature to climate-card

* Introduces `show_target_temperature` configuration param for climate-card
piitaya · Jul 28, 2023 · dc41a66 · dc41a66
1 parent 3bbc20e
commit dc41a66
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/src/cards/climate-card/climate-card-config.ts b/src/cards/climate-card/climate-card-config.ts
@@ -23,6 +23,7 @@ export type ClimateCardConfig = LovelaceCardConfig &
     AppearanceSharedConfig &
     ActionsSharedConfig & {
         show_temperature_control?: false;
+        show_target_temperature?: false;
         hvac_modes?: HvacMode[];
         collapsible_controls?: boolean;
     };
@@ -32,6 +33,7 @@ export const climateCardConfigStruct = assign(
     assign(entitySharedConfigStruct, appearanceSharedConfigStruct, actionsSharedConfigStruct),
     object({
         show_temperature_control: optional(boolean()),
+        show_target_temperature: optional(boolean()),
         hvac_modes: optional(array(string())),
         collapsible_controls: optional(boolean()),
     })

diff --git a/src/cards/climate-card/climate-card-editor.ts b/src/cards/climate-card/climate-card-editor.ts
@@ -13,7 +13,7 @@ import { loadHaComponents } from "../../utils/loader";
 import { ClimateCardConfig, climateCardConfigStruct, HVAC_MODES } from "./climate-card-config";
 import { CLIMATE_CARD_EDITOR_NAME, CLIMATE_ENTITY_DOMAINS } from "./const";
 
-const CLIMATE_LABELS = ["hvac_modes", "show_temperature_control"] as string[];
+const CLIMATE_LABELS = ["hvac_modes", "show_temperature_control", "show_target_temperature"] as string[];
 
 const computeSchema = memoizeOne((localize: LocalizeFunc): HaFormSchema[] => [
     { name: "entity", selector: { entity: { domain: CLIMATE_ENTITY_DOMAINS } } },
@@ -38,6 +38,7 @@ const computeSchema = memoizeOne((localize: LocalizeFunc): HaFormSchema[] => [
                 },
             },
             { name: "show_temperature_control", selector: { boolean: {} } },
+            { name: "show_target_temperature", selector: { boolean: {} } },
             { name: "collapsible_controls", selector: { boolean: {} } },
         ],
     },

diff --git a/src/cards/climate-card/climate-card.ts b/src/cards/climate-card/climate-card.ts
@@ -144,6 +144,7 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
 
         const name = this._config.name || stateObj.attributes.friendly_name || "";
         const icon = this._config.icon;
+        const showTargetTemperature = this._config.show_target_temperature
         const appearance = computeAppearance(this._config);
         const picture = computeEntityPicture(stateObj, appearance.icon_type);
 
@@ -154,6 +155,12 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
             this.hass.config,
             this.hass.entities
         );
+
+        if (showTargetTemperature && stateObj.state !== "off") {
+            const targetTemperature = this._computeTarget(stateObj);
+            stateDisplay += ` (${targetTemperature})`;
+        }
+
         if (stateObj.attributes.current_temperature !== null) {
             const temperature = formatNumber(
                 stateObj.attributes.current_temperature,
@@ -292,4 +299,52 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
             `,
         ];
     }
+
+    // ported from https://github.com/home-assistant/frontend/blob/d3ba19b0e00de1de14b4a17b331210325de8614e/src/components/ha-climate-state.ts#L43
+    private _computeTarget(stateObj: ClimateEntity): string {
+        if (!this.hass || !stateObj) {
+          return "";
+        }
+
+        if (
+          stateObj.attributes.target_temp_low != null &&
+          stateObj.attributes.target_temp_high != null
+        ) {
+          return `${formatNumber(
+            stateObj.attributes.target_temp_low,
+            this.hass.locale
+          )}-${formatNumber(
+            stateObj.attributes.target_temp_high,
+            this.hass.locale
+          )} ${this.hass.config.unit_system.temperature}`;
+        }
+
+        if (stateObj.attributes.temperature != null) {
+          return `${formatNumber(
+            stateObj.attributes.temperature,
+            this.hass.locale
+          )} ${this.hass.config.unit_system.temperature}`;
+        }
+        if (
+          stateObj.attributes.target_humidity_low != null &&
+          stateObj.attributes.target_humidity_high != null
+        ) {
+          return `${formatNumber(
+            stateObj.attributes.target_humidity_low,
+            this.hass.locale
+          )}-${formatNumber(
+            stateObj.attributes.target_humidity_high,
+            this.hass.locale
+          )} %`;
+        }
+
+        if (stateObj.attributes.humidity != null) {
+          return `${formatNumber(
+            stateObj.attributes.humidity,
+            this.hass.locale
+          )} %`;
+        }
+
+        return "";
+      }
 }