add fan mode

dist/thermostat-popup-card.js

@@ -2970,6 +2970,12 @@ class ThermostatPopupCard extends LitElement {
             fan_only: 6,
             off: 7,
         };
+        this.fanModeOrdering = {
+            Auto: 1,
+            Low: 2,
+            Medium: 3,
+            High: 4,
+        };
         this.modeIcons = {
             auto: "hass:calendar-refresh",
             heat_cool: "hass:autorenew",
@@ -2979,10 +2985,18 @@ class ThermostatPopupCard extends LitElement {
             fan_only: "hass:fan",
             dry: "hass:water-percent",
         };
+        this.fanModeIcons = {
+            Auto: "hass:fan-auto",
+            Low: "hass:fan-speed-1",
+            Medium: "hass:fan-speed-2",
+            High: "hass:fan-speed-3"
+
+        };
         this.settings = false;
         this.settingsCustomCard = false;
         this.settingsPosition = "bottom";
         this._compareClimateHvacModes = (mode1, mode2) => this.hvacModeOrdering[mode1] - this.hvacModeOrdering[mode2];
+        this._compareClimateFanModes = (mode1, mode2) => this.fanModeOrdering[mode1] - this.fanModeOrdering[mode2];
     }
     static get properties() {
         return {
@@ -3000,6 +3014,7 @@ class ThermostatPopupCard extends LitElement {
         var targetTemp = stateObj.attributes.temperature !== null && stateObj.attributes.temperature ? stateObj.attributes.temperature : stateObj.attributes.min_temp;
         var currentTemp = stateObj.attributes.current_temperature;
         var mode = stateObj.state in this.modeIcons ? stateObj.state : "unknown-mode";
+        var fanmode = stateObj.attributes.fan_mode in this.fanModeIcons ? stateObj.attributes.fan_mode : "unknown-mode";
         var _handleSize = 15;
         var _stepSize = this.config.stepSize ? this.config.stepSize : stateObj.attributes.target_temp_step ? stateObj.attributes.target_temp_step : 1;
         var gradient = true;
@@ -3117,6 +3132,13 @@ class ThermostatPopupCard extends LitElement {
             .sort(this._compareClimateHvacModes)
             .map((modeItem) => this._renderIcon(modeItem, mode))}
             </div>
+            <br>
+            <div id="modes">
+              ${(stateObj.attributes.fan_modes || [])
+            .concat()
+            .sort(this._compareClimateFanModes)
+            .map((modeItem) => this._renderFanIcon(modeItem, fanmode))}
+            </div>
             ${this.settings ? html `<button class="settings-btn ${this.settingsPosition}${fullscreen === true ? ' fullscreen' : ''}" @click="${() => this._openSettings()}">${this.config.settings.openButton ? this.config.settings.openButton : 'Settings'}</button>` : html ``}
           </div>
           ${this.settings ? html `
@@ -3148,7 +3170,9 @@ class ThermostatPopupCard extends LitElement {
     firstUpdated() {
         if (this.settings && !this.settingsCustomCard) {
             const mic = this.shadowRoot.querySelector("more-info-controls").shadowRoot;
-            mic.removeChild(mic.querySelector("app-toolbar"));
+//             if(mic.querySelector("app-toolbar")!=null) {
+//                 mic.removeChild(mic.querySelector("app-toolbar"));
+//             }
         }
         else if (this.settings && this.settingsCustomCard) {
             this.shadowRoot.querySelectorAll("card-maker").forEach(customCard => {
@@ -3199,17 +3223,41 @@ class ThermostatPopupCard extends LitElement {
         class="${classMap({ "selected-icon": currentMode === mode })}"
         .mode="${mode}"
         .icon="${this.modeIcons[mode]}"
+        style="margin:0 5px;" 
         @click="${this._handleModeClick}"
         tabindex="0"
       ></ha-icon>
     `;
     }
+    _renderFanIcon(mode, currentMode) {
+        var mode_temp=mode.toLowerCase();
+        if (!this.fanModeIcons[mode]) {
+            return html ``;
+        }
+        //throw new Error(currentMode);
+        return html `      
+      <ha-icon
+        class="${classMap({ "selected-icon": currentMode === mode })}"
+        .mode="${mode}"
+        .icon="${this.fanModeIcons[mode]}"
+        style="margin:0 5px;" 
+        @click="${this._handleFanModeClick}"
+        tabindex="0"
+      ></ha-icon>
+    `;
+    }
     _handleModeClick(e) {
         this.hass.callService("climate", "set_hvac_mode", {
             entity_id: this.config.entity,
             hvac_mode: e.currentTarget.mode,
         });
     }
+    _handleFanModeClick(e) {
+        this.hass.callService("climate", "set_fan_mode", {
+            entity_id: this.config.entity,
+            fan_mode: e.currentTarget.mode,
+        });
+    }
     _getSetTemp(stateObj) {
         if (stateObj.state === "unavailable") {
             return this.hass.localize("state.default.unavailable");
@@ -3281,10 +3329,13 @@ class ThermostatPopupCard extends LitElement {
             --heat-color: #EE7600;
             --manual-color: #44739e;
             --off-color: lightgrey;
-            --fan_only-color: #8a8a8a;
+            --fan_only-color: #008080;
             --dry-color: #efbd07;
             --idle-color: #00CC66;
             --unknown-color: #bac;
+            --low-color: #2b9af9;
+            --medium-color: #2b9af9;
+            --high-color: #2b9af9;
         }
         .popup-wrapper {
           margin-top:64px;
@@ -3439,6 +3490,12 @@ class ThermostatPopupCard extends LitElement {
         .unknown-mode {
           --mode-color: var(--unknown-color);
         }
+        .low {
+          --fanmode-color: var(--cool-color);
+        }
+        .Low {
+          --fanmode-color: var(--cool-color);
+        }
         #controls {
           display: flex;
           justify-content: center;
@@ -3498,6 +3555,9 @@ class ThermostatPopupCard extends LitElement {
         #modes .selected-icon {
           color: var(--mode-color);
         }
+        #fan_modes .selected-icon {
+            color: var(--fanmode-color);
+          }
         text {
           color: var(--primary-text-color);
         }