Feat/fan auto control

docs/cards/fan.md

@@ -20,6 +20,7 @@ All the options are available in the lovelace editor but you can use `yaml` if y
 | `hide_state`              | boolean | `false`     | Hide the entity state                                                     |
 | `icon_animation`          | boolean | `false`     | Animate the icon when fan is `on`                                         |
 | `show_percentage_control` | boolean | `false`     | Show a slider to control speed                                            |
+| `show_auto_control`       | boolean | `false`     | Show a button to set auto speed                                           |
 | `show_oscillate_control`  | boolean | `false`     | Show a button to control oscillation                                      |
 | `tap_action`              | action  | `toggle`    | Home assistant action to perform on tap                                   |
 | `hold_action`             | action  | `more-info` | Home assistant action to perform on hold                                  |

src/cards/fan-card/controls/fan-auto-control.ts

@@ -0,0 +1,61 @@
+import { HomeAssistant } from "custom-card-helpers";
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import "../../../shared/slider";
+import { isActive } from "../../../utils/entity";
+import { isAuto, getPresetModes} from "../utils";
+
+@customElement("mushroom-fan-auto-control")
+export class FanPercentageControl extends LitElement {
+    @property({ attribute: false }) public hass!: HomeAssistant;
+
+    @property({ attribute: false }) public entity!: HassEntity;
+
+    private _onTap(e: MouseEvent): void {
+        e.stopPropagation();
+        const auto = isAuto(this.entity);
+
+        if (!auto) {
+            const validAutoModes = ["auto", "smart", "woosh", "eco", "breeze"];
+            getPresetModes(this.entity).every(presetMode => {
+                if (validAutoModes.includes(presetMode.toLowerCase())) {
+                    this.hass.callService("fan", "set_preset_mode", {
+                        entity_id: this.entity.entity_id,
+                        preset_mode: presetMode,
+                    });
+                    return false;
+                } else {
+                    return true;
+                }
+            });
+        }
+    };
+
+    protected render(): TemplateResult {
+        const auto = isAuto(this.entity);
+        const active = isActive(this.entity);
+
+        return html`
+            <mushroom-button
+                class=${classMap({ active: auto})}
+                .icon=${"mdi:fan-auto"}
+                @click=${this._onTap}
+                .disabled=${!active}
+            />
+        `;
+    }
+
+    static get styles(): CSSResultGroup {
+        return css`
+            :host {
+                display: flex;
+            }
+            mushroom-button.active {
+                --icon-color: rgb(var(--rgb-white));
+                --bg-color: rgb(var(--rgb-state-fan));
+            }
+        `;
+    }
+}

src/cards/fan-card/fan-card-config.ts

@@ -12,6 +12,7 @@ export interface FanCardConfig extends LovelaceCardConfig {
     hide_state?: boolean;
     icon_animation?: boolean;
     show_percentage_control?: boolean;
+    show_auto_control?: boolean;
     show_oscillate_control?: boolean;
     tap_action?: ActionConfig;
     hold_action?: ActionConfig;
@@ -28,6 +29,7 @@ export const fanCardConfigStruct = assign(
         layout: optional(layoutStruct),
         hide_state: optional(boolean()),
         show_percentage_control: optional(boolean()),
+        show_auto_control: optional(boolean()),
         show_oscillate_control: optional(boolean()),
         tap_action: optional(actionConfigStruct),
         hold_action: optional(actionConfigStruct),

src/cards/fan-card/fan-card-editor.ts

@@ -116,6 +116,16 @@ export class FanCardEditor extends LitElement implements LovelaceCardEditor {
                             @change=${this._valueChanged}
                         ></ha-switch>
                     </ha-formfield>
+                    <ha-formfield
+                        .label=${customLocalize("editor.card.fan.show_auto_control")}
+                        .dir=${dir}
+                    >
+                        <ha-switch
+                            .checked=${!!this._config.show_auto_control}
+                            .configValue=${"show_auto_control"}
+                            @change=${this._valueChanged}
+                        ></ha-switch>
+                    </ha-formfield>
                     <ha-formfield
                         .label=${customLocalize("editor.card.fan.show_oscillate_control")}
                         .dir=${dir}

src/cards/fan-card/fan-card.ts

@@ -24,6 +24,7 @@ import { isActive, isAvailable } from "../../utils/entity";
 import { stateIcon } from "../../utils/icons/state-icon";
 import { getLayoutFromConfig } from "../../utils/layout";
 import { FAN_CARD_EDITOR_NAME, FAN_CARD_NAME, FAN_ENTITY_DOMAINS } from "./const";
+import "./controls/fan-auto-control";
 import "./controls/fan-oscillate-control";
 import "./controls/fan-percentage-control";
 import { FanCardConfig } from "./fan-card-config";
@@ -146,7 +147,7 @@ export class FanCard extends LitElement implements LovelaceCard {
                         .secondary=${!hideState && stateValue}
                     ></mushroom-state-info>
                 </mushroom-state-item>
-                ${this._config.show_percentage_control || this._config.show_oscillate_control
+                ${this._config.show_percentage_control || this._config.show_auto_control || this._config.show_oscillate_control
                     ? html`
                           <div class="actions">
                               ${this._config.show_percentage_control
@@ -157,6 +158,14 @@ export class FanCard extends LitElement implements LovelaceCard {
                                         ></mushroom-fan-percentage-control>
                                     `
                                   : null}
+                              ${this._config.show_auto_control
+                                  ? html`
+                                        <mushroom-fan-auto-control
+                                            .hass=${this.hass}
+                                            .entity=${entity}
+                                        ></mushroom-fan-auto-control>
+                                    `
+                                  : null}
                               ${this._config.show_oscillate_control
                                   ? html`
                                         <mushroom-fan-oscillate-control

src/cards/fan-card/utils.ts

@@ -6,6 +6,15 @@ export function getPercentage(entity: HassEntity) {
         : undefined;
 }
 
+export function getPresetModes(entity: HassEntity) {
+    return entity.attributes.preset_modes;
+}
+
+export function isAuto(entity: HassEntity) {
+    const validAutoModes = ["auto", "smart", "woosh", "eco", "breeze"];
+    return entity.attributes.preset_mode != null ? Boolean(validAutoModes.includes(entity.attributes.preset_mode.toLowerCase())) : false;
+}
+
 export function isOscillating(entity: HassEntity) {
     return entity.attributes.oscillating != null ? Boolean(entity.attributes.oscillating) : false;
 }

src/translations/de.json

@@ -43,6 +43,7 @@
             "fan": {
                 "animate_icon_active": "Icon animieren, wenn aktiv?",
                 "show_percentage_control": "Prozentuale Kontrolle?",
+                "show_auto_control": "Automatische Drehzahlregelung?",
                 "show_oscillate_control": "Oszillationssteuerung?"
             },
             "cover": {

src/translations/en.json

@@ -43,6 +43,7 @@
             "fan": {
                 "animate_icon_active": "Animate icon when active?",
                 "show_percentage_control": "Percentage control?",
+                "show_auto_control": "Auto Speed control?",
                 "show_oscillate_control": "Oscillate control?"
             },
             "cover": {

src/translations/fr.json

@@ -43,6 +43,7 @@
             "fan": {
                 "animate_icon_active": "Animation de l'icône ?",
                 "show_percentage_control": "Contrôle de la vitesse ?",
+                "show_auto_control": "Contrôle automatique de la vitesse ?",
                 "show_oscillate_control": "Contrôle de l'oscillation ?"
             },
             "cover": {

src/translations/pt-BR.json

@@ -43,6 +43,7 @@
             "fan": {
                 "animate_icon_active": "Animar ícone quando ativo?",
                 "show_percentage_control": "Mostrar controle de porcentagem?",
+                "show_auto_control": "Mostrar controle de automático de velocidade?",
                 "show_oscillate_control": "Mostrar controle de oscilação?"
             },
             "cover": {

src/translations/sv.json

@@ -43,6 +43,7 @@
             "fan": {
                 "animate_icon_active": "Animera ikonen när fläkten är på?",
                 "show_percentage_control": "Procentuell kontroll?",
+                "show_auto_control": "Kontroll för automatisk hastighet?",
                 "show_oscillate_control": "Kontroll för oscillera?"
             },
             "cover": {

src/translations/zh-Hans.json

@@ -42,6 +42,7 @@
             "fan": {
                 "animate_icon_active": "激活时使用动态图标?",
                 "show_percentage_control": "百分比控制?",
+                "show_auto_control": "自动调速?",
                 "show_oscillate_control": "摆动控制?"
             },
             "cover": {