jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-26 18:56:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use new select component for direction for more info fan (#17540)

Browse Source
This commit is contained in:
Paul Bottein 2023-08-14 09:29:04 +02:00 committed by GitHub
parent 43ac8f9a27
commit 134d1978f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 81 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/dialogs/more-info/controls/more-info-fan.ts
View File

@ -1,19 +1,14 @@
import { import {
mdiCreation,
mdiFan, mdiFan,
mdiFanOff, mdiFanOff,
mdiPower, mdiPower,
mdiRotateLeft, mdiRotateLeft,
mdiRotateRight, mdiRotateRight,
mdiTuneVariant,
} from "@mdi/js"; } from "@mdi/js";
import { CSSResultGroup, LitElement, PropertyValues, html, nothing } from "lit"; import { CSSResultGroup, LitElement, PropertyValues, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../common/dom/stop_propagation";
import {
computeAttributeNameDisplay,
computeAttributeValueDisplay,
} from "../../../common/entity/compute_attribute_display";
import { computeStateDisplay } from "../../../common/entity/compute_state_display";
import { stateActive } from "../../../common/entity/state_active"; import { stateActive } from "../../../common/entity/state_active";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes"; import "../../../components/ha-attributes";
@ -65,17 +60,15 @@ class MoreInfoFan extends LitElement {
}); });
}; };
_setReverseDirection() { _handleDirection(ev) {
this.hass.callService("fan", "set_direction", { const newVal = ev.target.value;
entity_id: this.stateObj!.entity_id, const oldVal = this.stateObj?.attributes.direction;
direction: "reverse",
}); if (!newVal || oldVal === newVal) return;
}
_setForwardDirection() {
this.hass.callService("fan", "set_direction", { this.hass.callService("fan", "set_direction", {
entity_id: this.stateObj!.entity_id, entity_id: this.stateObj!.entity_id,
direction: "forward", direction: newVal,
}); });
} }
@ -93,7 +86,7 @@ class MoreInfoFan extends LitElement {
} }
_handleOscillating(ev) { _handleOscillating(ev) {
const newVal = ev.target.value === "yes"; const newVal = ev.target.value === "on";
this.hass.callService("fan", "oscillate", { this.hass.callService("fan", "oscillate", {
entity_id: this.stateObj!.entity_id, entity_id: this.stateObj!.entity_id,
@ -113,12 +106,8 @@ class MoreInfoFan extends LitElement {
const forcedState = const forcedState =
liveValue != null ? (liveValue ? "on" : "off") : undefined; liveValue != null ? (liveValue ? "on" : "off") : undefined;
const stateDisplay = computeStateDisplay( const stateDisplay = this.hass.formatEntityState(
this.hass.localize,
this.stateObj!, this.stateObj!,
this.hass.locale,
this.hass.config,
this.hass.entities,
forcedState forcedState
); );
@ -186,49 +175,21 @@ class MoreInfoFan extends LitElement {
.iconPathOff=${mdiFanOff} .iconPathOff=${mdiFanOff}
></ha-more-info-toggle> ></ha-more-info-toggle>
`} `}
${supportSpeedPercentage || supportsDirection ${supportSpeedPercentage
? html`<div class="buttons"> ? html`
${supportSpeedPercentage <div class="buttons">
? html` ${supportSpeedPercentage
<ha-outlined-icon-button ? html`
.disabled=${this.stateObj.state === UNAVAILABLE} <ha-outlined-icon-button
@click=${this._toggle} .disabled=${this.stateObj.state === UNAVAILABLE}
> @click=${this._toggle}
<ha-svg-icon .path=${mdiPower}></ha-svg-icon> >
</ha-outlined-icon-button> <ha-svg-icon .path=${mdiPower}></ha-svg-icon>
` </ha-outlined-icon-button>
: nothing} `
${supportsDirection : nothing}
? html` </div>
<ha-outlined-icon-button `
.disabled=${this.stateObj.state === UNAVAILABLE ||
this.stateObj.attributes.direction === "reverse"}
.title=${this.hass.localize(
"ui.dialogs.more_info_control.fan.set_reverse_direction"
)}
.ariaLabel=${this.hass.localize(
"ui.dialogs.more_info_control.fan.set_reverse_direction"
)}
@click=${this._setReverseDirection}
>
<ha-svg-icon .path=${mdiRotateLeft}></ha-svg-icon>
</ha-outlined-icon-button>
<ha-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE ||
this.stateObj.attributes.direction === "forward"}
.title=${this.hass.localize(
"ui.dialogs.more_info_control.fan.set_forward_direction"
)}
.ariaLabel=${this.hass.localize(
"ui.dialogs.more_info_control.fan.set_forward_direction"
)}
@click=${this._setForwardDirection}
>
<ha-svg-icon .path=${mdiRotateRight}></ha-svg-icon>
</ha-outlined-icon-button>
`
: nothing}
</div> `
: nothing} : nothing}
</div> </div>
<div class="secondary-controls"> <div class="secondary-controls">
@ -236,10 +197,8 @@ class MoreInfoFan extends LitElement {
${supportsPresetMode && this.stateObj.attributes.preset_modes ${supportsPresetMode && this.stateObj.attributes.preset_modes
? html` ? html`
<ha-control-select-menu <ha-control-select-menu
.label=${computeAttributeNameDisplay( .label=${this.hass.formatEntityAttributeName(
this.hass.localize,
this.stateObj, this.stateObj,
this.hass.entities,
"preset_mode" "preset_mode"
)} )}
.value=${this.stateObj.attributes.preset_mode} .value=${this.stateObj.attributes.preset_mode}
@ -248,19 +207,15 @@ class MoreInfoFan extends LitElement {
@selected=${this._handlePresetMode} @selected=${this._handlePresetMode}
@closed=${stopPropagation} @closed=${stopPropagation}
> >
<ha-svg-icon slot="icon" .path=${mdiCreation}></ha-svg-icon> <ha-svg-icon
slot="icon"
.path=${mdiTuneVariant}
></ha-svg-icon>
${this.stateObj.attributes.preset_modes?.map( ${this.stateObj.attributes.preset_modes?.map(
(mode) => html` (mode) => html`
<ha-list-item <ha-list-item .value=${mode}>
.value=${mode} ${this.hass.formatEntityAttributeValue(
.activated=${this._presetMode === mode}
>
${computeAttributeValueDisplay(
this.hass.localize,
this.stateObj!, this.stateObj!,
this.hass.locale,
this.hass.config,
this.hass.entities,
"preset_mode", "preset_mode",
mode mode
)} )}
@ -270,16 +225,58 @@ class MoreInfoFan extends LitElement {
</ha-control-select-menu> </ha-control-select-menu>
` `
: nothing} : nothing}
${supportsDirection
? html`
<ha-control-select-menu
.label=${this.hass.formatEntityAttributeName(
this.stateObj,
"direction"
)}
.value=${this.stateObj.attributes.direction}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handleDirection}
@closed=${stopPropagation}
>
<ha-svg-icon
slot="icon"
.path=${this.stateObj.attributes.direction === "reverse"
? mdiRotateLeft
: mdiRotateRight}
></ha-svg-icon>
<ha-list-item .value=${"forward"} graphic="icon">
<ha-svg-icon
slot="graphic"
.path=${mdiRotateRight}
></ha-svg-icon>
${this.hass.formatEntityAttributeValue(
this.stateObj,
"direction",
"forward"
)}
</ha-list-item>
<ha-list-item .value=${"reverse"} graphic="icon">
<ha-svg-icon
slot="graphic"
.path=${mdiRotateLeft}
></ha-svg-icon>
${this.hass.formatEntityAttributeValue(
this.stateObj,
"direction",
"reverse"
)}
</ha-list-item>
</ha-control-select-menu>
`
: nothing}
${supportsOscillate ${supportsOscillate
? html` ? html`
<ha-control-select-menu <ha-control-select-menu
.label=${computeAttributeNameDisplay( .label=${this.hass.formatEntityAttributeName(
this.hass.localize,
this.stateObj, this.stateObj,
this.hass.entities,
"oscillating" "oscillating"
)} )}
.value=${this.stateObj.attributes.oscillating ? "yes" : "no"} .value=${this.stateObj.attributes.oscillating ? "on" : "off"}
fixedMenuPosition fixedMenuPosition
naturalMenuWidth naturalMenuWidth
@selected=${this._handleOscillating} @selected=${this._handleOscillating}
@ -291,19 +288,19 @@ class MoreInfoFan extends LitElement {
? haOscillating ? haOscillating
: haOscillatingOff} : haOscillatingOff}
></ha-svg-icon> ></ha-svg-icon>
<ha-list-item .value=${"yes"} graphic="icon"> <ha-list-item .value=${"on"} graphic="icon">
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="graphic"
.path=${haOscillating} .path=${haOscillating}
></ha-svg-icon> ></ha-svg-icon>
${this.hass.localize("ui.common.yes")} ${this.hass.localize("state.default.on")}
</ha-list-item> </ha-list-item>
<ha-list-item .value=${"no"} graphic="icon"> <ha-list-item .value=${"off"} graphic="icon">
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="graphic"
.path=${haOscillatingOff} .path=${haOscillatingOff}
></ha-svg-icon> ></ha-svg-icon>
${this.hass.localize("ui.common.no")} ${this.hass.localize("state.default.off")}
</ha-list-item> </ha-list-item>
</ha-control-select-menu> </ha-control-select-menu>
` `