Skip to content

Commit

Permalink
Add swing modes card feature (#19999)
Browse files Browse the repository at this point in the history
feat: add swing modes card feature
  • Loading branch information
mukaschultze authored Mar 12, 2024
1 parent d4d0fb2 commit 279eeaa
Show file tree
Hide file tree
Showing 8 changed files with 399 additions and 1 deletion.
12 changes: 11 additions & 1 deletion gallery/src/pages/lovelace/thermostat-card.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ const ENTITIES = [
friendly_name: "Sensibo purifier",
fan_modes: ["low", "high"],
fan_mode: "low",
supported_features: 9,
swing_modes: ["on", "off", "both", "vertical", "horizontal"],
swing_mode: "vertical",
supported_features: 41,
}),
getEntity("climate", "unavailable", "unavailable", {
supported_features: 43,
Expand Down Expand Up @@ -85,6 +87,14 @@ const CONFIGS = [
fan_modes:
- low
- high
- type: climate-swing-modes
style: icons
swing_modes:
- 'on'
- 'off'
- 'both'
- 'vertical'
- 'horizontal'
`,
},
{
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
import { mdiArrowOscillating } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeDomain } from "../../../common/entity/compute_domain";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attribute-icon";
import "../../../components/ha-control-select";
import type { ControlSelectOption } from "../../../components/ha-control-select";
import "../../../components/ha-control-select-menu";
import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu";
import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
import { UNAVAILABLE } from "../../../data/entity";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { ClimateSwingModesCardFeatureConfig } from "./types";

export const supportsClimateSwingModesCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id);
return (
domain === "climate" &&
supportsFeature(stateObj, ClimateEntityFeature.SWING_MODE)
);
};

@customElement("hui-climate-swing-modes-card-feature")
class HuiClimateSwingModesCardFeature
extends LitElement
implements LovelaceCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;

@property({ attribute: false }) public stateObj?: ClimateEntity;

@state() private _config?: ClimateSwingModesCardFeatureConfig;

@state() _currentSwingMode?: string;

@query("ha-control-select-menu", true)
private _haSelect?: HaControlSelectMenu;

static getStubConfig(
_,
stateObj?: HassEntity
): ClimateSwingModesCardFeatureConfig {
return {
type: "climate-swing-modes",
style: "dropdown",
swing_modes: stateObj?.attributes.swing_modes || [],
};
}

public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
await import(
"../editor/config-elements/hui-climate-swing-modes-card-feature-editor"
);
return document.createElement(
"hui-climate-swing-modes-card-feature-editor"
);
}

public setConfig(config: ClimateSwingModesCardFeatureConfig): void {
if (!config) {
throw new Error("Invalid configuration");
}
this._config = config;
}

protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
this._currentSwingMode = this.stateObj.attributes.swing_mode;
}
}

protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (this._haSelect && changedProps.has("hass")) {
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (
this.hass &&
this.hass.formatEntityAttributeValue !==
oldHass?.formatEntityAttributeValue
) {
this._haSelect.layoutOptions();
}
}
}

private async _valueChanged(ev: CustomEvent) {
const swingMode =
(ev.detail as any).value ?? ((ev.target as any).value as string);

const oldSwingMode = this.stateObj!.attributes.swing_mode;

if (swingMode === oldSwingMode) return;

this._currentSwingMode = swingMode;

try {
await this._setMode(swingMode);
} catch (err) {
this._currentSwingMode = oldSwingMode;
}
}

private async _setMode(mode: string) {
await this.hass!.callService("climate", "set_swing_mode", {
entity_id: this.stateObj!.entity_id,
swing_mode: mode,
});
}

protected render(): TemplateResult | null {
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsClimateSwingModesCardFeature(this.stateObj)
) {
return null;
}

const stateObj = this.stateObj;

const modes = stateObj.attributes.swing_modes || [];

const options = modes
.filter((mode) => (this._config!.swing_modes || []).includes(mode))
.map<ControlSelectOption>((mode) => ({
value: mode,
label: this.hass!.formatEntityAttributeValue(
this.stateObj!,
"swing_mode",
mode
),
icon: html`<ha-attribute-icon
slot="graphic"
.hass=${this.hass}
.stateObj=${stateObj}
attribute="swing_mode"
.attributeValue=${mode}
></ha-attribute-icon>`,
}));

if (this._config.style === "icons") {
return html`
<div class="container">
<ha-control-select
.options=${options}
.value=${this._currentSwingMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass!.formatEntityAttributeName(
stateObj,
"swing_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
</div>
`;
}

return html`
<div class="container">
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "swing_mode")}
.value=${this._currentSwingMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${this._currentSwingMode
? html`<ha-attribute-icon
slot="icon"
.hass=${this.hass}
.stateObj=${stateObj}
attribute="swing_mode"
.attributeValue=${this._currentSwingMode}
></ha-attribute-icon>`
: html` <ha-svg-icon
slot="icon"
.path=${mdiArrowOscillating}
></ha-svg-icon>`}
${options.map(
(option) => html`
<ha-list-item .value=${option.value} graphic="icon">
${option.icon}${option.label}
</ha-list-item>
`
)}
</ha-control-select-menu>
</div>
`;
}

static get styles() {
return css`
ha-control-select-menu {
box-sizing: border-box;
--control-select-menu-height: 40px;
--control-select-menu-border-radius: 10px;
line-height: 1.2;
display: block;
width: 100%;
}
ha-control-select {
--control-select-color: var(--feature-color);
--control-select-padding: 0;
--control-select-thickness: 40px;
--control-select-border-radius: 10px;
--control-select-button-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
}
}

declare global {
interface HTMLElementTagNameMap {
"hui-climate-swing-modes-card-feature": HuiClimateSwingModesCardFeature;
}
}
7 changes: 7 additions & 0 deletions src/panels/lovelace/card-features/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,12 @@ export interface ClimateFanModesCardFeatureConfig {
fan_modes?: string[];
}

export interface ClimateSwingModesCardFeatureConfig {
type: "climate-swing-modes";
style?: "dropdown" | "icons";
swing_modes?: string[];
}

export interface ClimateHvacModesCardFeatureConfig {
type: "climate-hvac-modes";
style?: "dropdown" | "icons";
Expand Down Expand Up @@ -123,6 +129,7 @@ export interface UpdateActionsCardFeatureConfig {
export type LovelaceCardFeatureConfig =
| AlarmModesCardFeatureConfig
| ClimateFanModesCardFeatureConfig
| ClimateSwingModesCardFeatureConfig
| ClimateHvacModesCardFeatureConfig
| ClimatePresetModesCardFeatureConfig
| CoverOpenCloseCardFeatureConfig
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import "../card-features/hui-alarm-modes-card-feature";
import "../card-features/hui-climate-fan-modes-card-feature";
import "../card-features/hui-climate-swing-modes-card-feature";
import "../card-features/hui-climate-hvac-modes-card-feature";
import "../card-features/hui-climate-preset-modes-card-feature";
import "../card-features/hui-cover-open-close-card-feature";
Expand Down Expand Up @@ -30,6 +31,7 @@ import {
const TYPES: Set<LovelaceCardFeatureConfig["type"]> = new Set([
"alarm-modes",
"climate-fan-modes",
"climate-swing-modes",
"climate-hvac-modes",
"climate-preset-modes",
"cover-open-close",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
import { HomeAssistant } from "../../../../types";
import { supportsAlarmModesCardFeature } from "../../card-features/hui-alarm-modes-card-feature";
import { supportsClimateFanModesCardFeature } from "../../card-features/hui-climate-fan-modes-card-feature";
import { supportsClimateSwingModesCardFeature } from "../../card-features/hui-climate-swing-modes-card-feature";
import { supportsClimateHvacModesCardFeature } from "../../card-features/hui-climate-hvac-modes-card-feature";
import { supportsClimatePresetModesCardFeature } from "../../card-features/hui-climate-preset-modes-card-feature";
import { supportsCoverOpenCloseCardFeature } from "../../card-features/hui-cover-open-close-card-feature";
Expand Down Expand Up @@ -50,6 +51,7 @@ type SupportsFeature = (stateObj: HassEntity) => boolean;
const UI_FEATURE_TYPES = [
"alarm-modes",
"climate-fan-modes",
"climate-swing-modes",
"climate-hvac-modes",
"climate-preset-modes",
"cover-open-close",
Expand Down Expand Up @@ -78,6 +80,7 @@ const EDITABLES_FEATURE_TYPES = new Set<UiFeatureTypes>([
"alarm-modes",
"climate-hvac-modes",
"climate-fan-modes",
"climate-swing-modes",
"climate-preset-modes",
"fan-preset-modes",
"humidifier-modes",
Expand All @@ -94,6 +97,7 @@ const SUPPORTS_FEATURE_TYPES: Record<
> = {
"alarm-modes": supportsAlarmModesCardFeature,
"climate-fan-modes": supportsClimateFanModesCardFeature,
"climate-swing-modes": supportsClimateSwingModesCardFeature,
"climate-hvac-modes": supportsClimateHvacModesCardFeature,
"climate-preset-modes": supportsClimatePresetModesCardFeature,
"cover-open-close": supportsCoverOpenCloseCardFeature,
Expand Down
Loading

0 comments on commit 279eeaa

Please sign in to comment.