Add fan direction button to fan card (#1647)

* Added fan direction control

* localization for direction control

* fan-direction, removed active state, removed non english translations

Author: savino

.hass_dev/views/fan-view.yaml

@@ -48,6 +48,7 @@ cards:
         name: Multiple controls
         show_percentage_control: true
         show_oscillate_control: true
+        show_direction_control: true
       - type: custom:mushroom-fan-card
         entity: fan.living_room_fan
         name: Collapsible controls
@@ -66,6 +67,7 @@ cards:
             entity: fan.living_room_fan
             show_percentage_control: true
             show_oscillate_control: true
+            show_direction_control: true
       - type: grid
         columns: 2
         square: false
@@ -74,9 +76,11 @@ cards:
             entity: fan.living_room_fan
             show_percentage_control: true
             show_oscillate_control: true
+            show_direction_control: true
             layout: "vertical"
       - type: custom:mushroom-fan-card
         entity: fan.living_room_fan
         show_percentage_control: true
         show_oscillate_control: true
+        show_direction_control: true
         layout: "horizontal"

docs/cards/fan.md

@@ -24,6 +24,7 @@ All the options are available in the lovelace editor but you can use `yaml` if y
 | `icon_animation`          | boolean                                             | `false`     | Animate the icon when fan is `on`                                                               |
 | `show_percentage_control` | boolean                                             | `false`     | Show a slider to control speed                                                                  |
 | `show_oscillate_control`  | boolean                                             | `false`     | Show a button to control oscillation                                                            |
+| `show_direction_control`  | boolean                                             | `false`     | Show a button to control direction                                                              |
 | `collapsible_controls`    | boolean                                             | `false`     | Collapse controls when off. When used if section, it can produce a layout shift for cards below |
 | `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-direction-control.ts

@@ -0,0 +1,51 @@
+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 { HomeAssistant, isActive } from "../../../ha";
+import "../../../shared/slider";
+import { isOscillating } from "../utils";
+
+@customElement("mushroom-fan-direction-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 currentDirection = this.entity.attributes.direction;
+    const newDirection = currentDirection === "forward" ? "reverse" : "forward";
+
+    this.hass.callService("fan", "set_direction", {
+      entity_id: this.entity.entity_id,
+      direction: newDirection,
+    });
+  }
+
+  protected render(): TemplateResult {
+    const currentDirection = this.entity.attributes.direction;
+    const active = isActive(this.entity);
+
+    return html`
+      <mushroom-button
+        @click=${this._onTap}
+        .disabled=${!active}
+      >
+        <ha-icon
+          .icon=${currentDirection === "reverse"
+            ? "mdi:rotate-left"
+            : "mdi:rotate-right"}
+        ></ha-icon>
+      </mushroom-button>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex;
+      }
+    `;
+  }
+}

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

@@ -21,6 +21,7 @@ export type FanCardConfig = LovelaceCardConfig &
     icon_animation?: boolean;
     show_percentage_control?: boolean;
     show_oscillate_control?: boolean;
+    show_direction_control?: boolean;
     collapsible_controls?: boolean;
   };
 
@@ -35,6 +36,7 @@ export const fanCardConfigStruct = assign(
     icon_animation: optional(boolean()),
     show_percentage_control: optional(boolean()),
     show_oscillate_control: optional(boolean()),
+    show_direction_control: optional(boolean()),
     collapsible_controls: optional(boolean()),
   })
 );

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

@@ -16,6 +16,7 @@ const FAN_LABELS = [
   "icon_animation",
   "show_percentage_control",
   "show_oscillate_control",
+  "show_direction_control"
 ];
 
 const SCHEMA: HaFormSchema[] = [
@@ -40,6 +41,7 @@ const SCHEMA: HaFormSchema[] = [
     schema: [
       { name: "show_percentage_control", selector: { boolean: {} } },
       { name: "show_oscillate_control", selector: { boolean: {} } },
+      { name: "show_direction_control", selector: { boolean: {} } },
       { name: "collapsible_controls", selector: { boolean: {} } },
     ],
   },

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

@@ -39,6 +39,7 @@ import {
   FAN_ENTITY_DOMAINS,
 } from "./const";
 import "./controls/fan-oscillate-control";
+import "./controls/fan-direction-control";
 import "./controls/fan-percentage-control";
 import { FanCardConfig } from "./fan-card-config";
 import { getPercentage } from "./utils";
@@ -75,7 +76,8 @@ export class FanCard
   protected get hasControls(): boolean {
     return (
       Boolean(this._config?.show_percentage_control) ||
-      Boolean(this._config?.show_oscillate_control)
+      Boolean(this._config?.show_oscillate_control) ||
+      Boolean(this._config?.show_direction_control)
     );
   }
 
@@ -150,7 +152,8 @@ export class FanCard
     const displayControls =
       (!this._config.collapsible_controls || isActive(stateObj)) &&
       (this._config.show_percentage_control ||
-        this._config.show_oscillate_control);
+        this._config.show_oscillate_control ||
+        this._config.show_direction_control);
 
     return html`
       <ha-card
@@ -192,6 +195,14 @@ export class FanCard
                         ></mushroom-fan-oscillate-control>
                       `
                     : nothing}
+                  ${this._config.show_direction_control
+                  ? html`
+                      <mushroom-fan-direction-control
+                        .hass=${this.hass}
+                        .entity=${stateObj}
+                      ></mushroom-fan-direction-control>
+                    `
+                  : nothing}
                 </div>
               `
             : nothing}

src/translations/en.json

@@ -64,7 +64,8 @@
       },
       "fan": {
         "show_percentage_control": "Percentage control?",
-        "show_oscillate_control": "Oscillate control?"
+        "show_oscillate_control": "Oscillate control?",
+        "show_direction_control": "Direction control?"
       },
       "cover": {
         "show_buttons_control": "Control buttons?",