Implement Feature Request 1088 (#1625)

* Implement Feature Request 1088

1. Added current humidity to state info
2. Added status badge to indicate if humidifier is idle or not

* Updated per PR comments

Mostly removing unneeded code and improving readability.

* Use clock icon if outline

---------

Co-authored-by: Vinny Furia <vinny@furia.dev>
Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

src/cards/humidifier-card/humidifier-card.ts

@@ -1,6 +1,7 @@
 import { css, CSSResultGroup, html, nothing } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
@@ -10,6 +11,7 @@ import {
   HomeAssistant,
   HumidifierEntity,
   isActive,
+  isAvailable,
   LovelaceCard,
   LovelaceCardEditor,
 } from "../../ha";
@@ -64,8 +66,6 @@ export class HumidifierCard
     };
   }
 
-  @state() private humidity?: number;
-
   protected get hasControls(): boolean {
     return Boolean(this._config?.show_target_humidity_control);
   }
@@ -86,12 +86,6 @@ export class HumidifierCard
     handleAction(this, this.hass!, this._config!, ev.detail.action!);
   }
 
-  private onCurrentHumidityChange(e: CustomEvent<{ value?: number }>): void {
-    if (e.detail.value != null) {
-      this.humidity = e.detail.value;
-    }
-  }
-
   protected render() {
     if (!this._config || !this.hass || !this._config.entity) {
       return nothing;
@@ -109,13 +103,12 @@ export class HumidifierCard
     const picture = computeEntityPicture(stateObj, appearance.icon_type);
 
     let stateDisplay = this.hass.formatEntityState(stateObj);
-    if (this.humidity) {
+    if (stateObj.attributes.current_humidity !== null) {
       const humidity = this.hass.formatEntityAttributeValue(
         stateObj,
-        "current_humidity",
-        this.humidity
+        "current_humidity"
       );
-      stateDisplay = humidity;
+      stateDisplay += ` ⸱ ${humidity}`;
     }
 
     const rtl = computeRTL(this.hass);
@@ -150,7 +143,6 @@ export class HumidifierCard
                   <mushroom-humidifier-humidity-control
                     .hass=${this.hass}
                     .entity=${stateObj}
-                    @current-change=${this.onCurrentHumidityChange}
                   ></mushroom-humidifier-humidity-control>
                 </div>
               `
@@ -160,6 +152,33 @@ export class HumidifierCard
     `;
   }
 
+  protected renderBadge(entity: HumidifierEntity) {
+    if (isAvailable(entity)) {
+      return this.renderActionBadge(entity);
+    } else {
+      return super.renderBadge(entity);
+    }
+  }
+
+  renderActionBadge(entity: HumidifierEntity) {
+    const action = entity.attributes.action;
+    if (!action || action == "off") return nothing;
+
+    const color =
+      action === "idle" ? "var(--rgb-disabled)" : "var(--rgb-state-humidifier)";
+    const icon = action === "idle" ? "mdi:clock-outline" : "mdi:water-percent";
+
+    return html`
+      <mushroom-badge-icon
+        slot="badge"
+        .icon=${icon}
+        style=${styleMap({
+          "--main-color": `rgb(${color})`,
+        })}
+      ></mushroom-badge-icon>
+    `;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       super.styles,

src/ha/data/humidifier.ts

@@ -3,11 +3,15 @@ import {
   HassEntityBase,
 } from "home-assistant-js-websocket";
 
+export type HumidifierAction = "off" | "humidifying" | "dehumidifying" | "idle";
+
 export type HumidifierEntity = HassEntityBase & {
   attributes: HassEntityAttributeBase & {
     humidity?: number;
+    current_humidity?: number;
     min_humidity?: number;
     max_humidity?: number;
+    action: HumidifierAction;
     mode?: string;
     available_modes?: string[];
   };