|
| 1 | +import { mdiArrowOscillating, mdiArrowOscillatingOff } from "@mdi/js"; |
| 2 | +import type { PropertyValues, TemplateResult } from "lit"; |
| 3 | +import { LitElement, html } from "lit"; |
| 4 | +import { customElement, property, state } from "lit/decorators"; |
| 5 | +import { styleMap } from "lit/directives/style-map"; |
| 6 | +import { computeDomain } from "../../../common/entity/compute_domain"; |
| 7 | +import { stateColorCss } from "../../../common/entity/state_color"; |
| 8 | +import "../../../components/ha-control-select"; |
| 9 | +import type { ControlSelectOption } from "../../../components/ha-control-select"; |
| 10 | +import { UNAVAILABLE } from "../../../data/entity"; |
| 11 | +import type { FanEntity } from "../../../data/fan"; |
| 12 | +import { FanEntityFeature } from "../../../data/fan"; |
| 13 | +import type { HomeAssistant } from "../../../types"; |
| 14 | +import type { LovelaceCardFeature } from "../types"; |
| 15 | +import { cardFeatureStyles } from "./common/card-feature-styles"; |
| 16 | +import type { |
| 17 | + FanOscillateCardFeatureConfig, |
| 18 | + LovelaceCardFeatureContext, |
| 19 | +} from "./types"; |
| 20 | +import { supportsFeature } from "../../../common/entity/supports-feature"; |
| 21 | + |
| 22 | +export const supportsFanOscilatteCardFeature = ( |
| 23 | + hass: HomeAssistant, |
| 24 | + context: LovelaceCardFeatureContext |
| 25 | +) => { |
| 26 | + const stateObj = context.entity_id |
| 27 | + ? hass.states[context.entity_id] |
| 28 | + : undefined; |
| 29 | + if (!stateObj) return false; |
| 30 | + const domain = computeDomain(stateObj.entity_id); |
| 31 | + return ( |
| 32 | + domain === "fan" && supportsFeature(stateObj, FanEntityFeature.OSCILLATE) |
| 33 | + ); |
| 34 | +}; |
| 35 | + |
| 36 | +@customElement("hui-fan-oscillate-card-feature") |
| 37 | +class HuiFanOscillateCardFeature |
| 38 | + extends LitElement |
| 39 | + implements LovelaceCardFeature |
| 40 | +{ |
| 41 | + @property({ attribute: false }) public hass?: HomeAssistant; |
| 42 | + |
| 43 | + @property({ attribute: false }) public context?: LovelaceCardFeatureContext; |
| 44 | + |
| 45 | + @state() private _config?: FanOscillateCardFeatureConfig; |
| 46 | + |
| 47 | + @state() _oscillate?: boolean; |
| 48 | + |
| 49 | + private get _stateObj() { |
| 50 | + if (!this.hass || !this.context || !this.context.entity_id) { |
| 51 | + return undefined; |
| 52 | + } |
| 53 | + return this.hass.states[this.context.entity_id!] as FanEntity | undefined; |
| 54 | + } |
| 55 | + |
| 56 | + static getStubConfig(): FanOscillateCardFeatureConfig { |
| 57 | + return { |
| 58 | + type: "fan-oscillate", |
| 59 | + }; |
| 60 | + } |
| 61 | + |
| 62 | + public setConfig(config: FanOscillateCardFeatureConfig): void { |
| 63 | + if (!config) { |
| 64 | + throw new Error("Invalid configuration"); |
| 65 | + } |
| 66 | + this._config = config; |
| 67 | + } |
| 68 | + |
| 69 | + protected willUpdate(changedProp: PropertyValues): void { |
| 70 | + if ( |
| 71 | + (changedProp.has("hass") || changedProp.has("context")) && |
| 72 | + this._stateObj |
| 73 | + ) { |
| 74 | + const oldHass = changedProp.get("hass") as HomeAssistant | undefined; |
| 75 | + const oldStateObj = oldHass?.states[this.context!.entity_id!]; |
| 76 | + if (oldStateObj !== this._stateObj) { |
| 77 | + this._oscillate = this._stateObj.attributes.oscillating; |
| 78 | + } |
| 79 | + } |
| 80 | + } |
| 81 | + |
| 82 | + private async _valueChanged(ev: CustomEvent) { |
| 83 | + const shouldOscillate = (ev.detail as any).value === "yes"; |
| 84 | + |
| 85 | + if (shouldOscillate === this._stateObj!.attributes.oscillating) return; |
| 86 | + |
| 87 | + const wasOscillating = this._stateObj!.attributes.oscillating; |
| 88 | + this._oscillate = shouldOscillate; |
| 89 | + |
| 90 | + try { |
| 91 | + await this._updateOscillate(shouldOscillate); |
| 92 | + } catch (_err) { |
| 93 | + this._oscillate = wasOscillating; |
| 94 | + } |
| 95 | + } |
| 96 | + |
| 97 | + private async _updateOscillate(oscillate: boolean) { |
| 98 | + await this.hass!.callService("fan", "oscillate", { |
| 99 | + entity_id: this._stateObj!.entity_id, |
| 100 | + oscillating: oscillate, |
| 101 | + }); |
| 102 | + } |
| 103 | + |
| 104 | + protected render(): TemplateResult | null { |
| 105 | + if ( |
| 106 | + !this._config || |
| 107 | + !this.hass || |
| 108 | + !this.context || |
| 109 | + !this._stateObj || |
| 110 | + !supportsFanOscilatteCardFeature(this.hass, this.context) |
| 111 | + ) { |
| 112 | + return null; |
| 113 | + } |
| 114 | + |
| 115 | + const color = stateColorCss(this._stateObj); |
| 116 | + |
| 117 | + const yesNo = ["no", "yes"] as const; |
| 118 | + const options = yesNo.map<ControlSelectOption>((oscillating) => ({ |
| 119 | + value: oscillating, |
| 120 | + label: this.hass!.localize(`ui.common.${oscillating}`), |
| 121 | + path: |
| 122 | + oscillating === "yes" ? mdiArrowOscillating : mdiArrowOscillatingOff, |
| 123 | + })); |
| 124 | + |
| 125 | + return html` |
| 126 | + <ha-control-select |
| 127 | + .options=${options} |
| 128 | + .value=${this._oscillate ? "yes" : "no"} |
| 129 | + @value-changed=${this._valueChanged} |
| 130 | + hide-option-label |
| 131 | + .label=${this.hass.localize("ui.card.fan.oscillate")} |
| 132 | + style=${styleMap({ |
| 133 | + "--control-select-color": color, |
| 134 | + })} |
| 135 | + .disabled=${this._stateObj!.state === UNAVAILABLE} |
| 136 | + > |
| 137 | + </ha-control-select> |
| 138 | + `; |
| 139 | + } |
| 140 | + |
| 141 | + static get styles() { |
| 142 | + return cardFeatureStyles; |
| 143 | + } |
| 144 | +} |
| 145 | + |
| 146 | +declare global { |
| 147 | + interface HTMLElementTagNameMap { |
| 148 | + "hui-fan-oscillate-card-feature": HuiFanOscillateCardFeature; |
| 149 | + } |
| 150 | +} |
0 commit comments