From 78cc75c57ce457d7002f2ebff277da4781e43fa0 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Thu, 30 Mar 2023 11:55:13 +0200 Subject: [PATCH] Fix cover more info state display (#15974) --- src/data/cover.ts | 17 +++++ .../more-info/controls/more-info-cover.ts | 71 ++++++++++++------- src/panels/lovelace/cards/hui-tile-card.ts | 28 ++++---- 3 files changed, 76 insertions(+), 40 deletions(-) diff --git a/src/data/cover.ts b/src/data/cover.ts index ee45ed5c81..8a47b1528c 100644 --- a/src/data/cover.ts +++ b/src/data/cover.ts @@ -3,7 +3,9 @@ import { HassEntityBase, } from "home-assistant-js-websocket"; import { supportsFeature } from "../common/entity/supports-feature"; +import { blankBeforePercent } from "../common/translations/blank_before_percent"; import { UNAVAILABLE } from "./entity"; +import { FrontendLocaleData } from "./translation"; export const enum CoverEntityFeature { OPEN = 1, @@ -106,3 +108,18 @@ interface CoverEntityAttributes extends HassEntityAttributeBase { export interface CoverEntity extends HassEntityBase { attributes: CoverEntityAttributes; } + +export function computeCoverPositionStateDisplay( + stateObj: CoverEntity, + locale: FrontendLocaleData, + position?: number +) { + const currentPosition = + position ?? + stateObj.attributes.current_position ?? + stateObj.attributes.current_tilt_position; + + return currentPosition && currentPosition !== 100 + ? `${Math.round(currentPosition)}${blankBeforePercent(locale)}%` + : ""; +} diff --git a/src/dialogs/more-info/controls/more-info-cover.ts b/src/dialogs/more-info/controls/more-info-cover.ts index 659862a9b1..ef9b0f069d 100644 --- a/src/dialogs/more-info/controls/more-info-cover.ts +++ b/src/dialogs/more-info/controls/more-info-cover.ts @@ -10,9 +10,12 @@ import { import { customElement, property, state } from "lit/decorators"; import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { supportsFeature } from "../../../common/entity/supports-feature"; -import { blankBeforePercent } from "../../../common/translations/blank_before_percent"; import "../../../components/ha-attributes"; -import { CoverEntity, CoverEntityFeature } from "../../../data/cover"; +import { + computeCoverPositionStateDisplay, + CoverEntity, + CoverEntityFeature, +} from "../../../data/cover"; import type { HomeAssistant } from "../../../types"; import "../components/cover/ha-more-info-cover-buttons"; import "../components/cover/ha-more-info-cover-position"; @@ -27,7 +30,9 @@ class MoreInfoCover extends LitElement { @property({ attribute: false }) public stateObj?: CoverEntity; - @state() private _displayedPosition?: number; + @state() private _livePosition?: number; + + @state() private _liveTilt?: number; @state() private _mode?: "position" | "button"; @@ -35,20 +40,29 @@ class MoreInfoCover extends LitElement { this._mode = this._mode === "position" ? "button" : "position"; } - private _positionChanged(ev) { + private _positionSliderMoved(ev) { const value = (ev.detail as any).value; if (isNaN(value)) return; - this._displayedPosition = value; + this._livePosition = value; + } + + private _positionValueChanged() { + this._livePosition = undefined; + } + + private _tiltSliderMoved(ev) { + const value = (ev.detail as any).value; + if (isNaN(value)) return; + this._liveTilt = value; + } + + private _tiltValueChanged() { + this._liveTilt = undefined; } protected willUpdate(changedProps: PropertyValues): void { super.willUpdate(changedProps); if (changedProps.has("stateObj") && this.stateObj) { - if (supportsFeature(this.stateObj, CoverEntityFeature.SET_POSITION)) { - const currentPosition = this.stateObj?.attributes.current_position; - this._displayedPosition = - currentPosition != null ? Math.round(currentPosition) : undefined; - } if (!this._mode) { this._mode = supportsFeature(this.stateObj, CoverEntityFeature.SET_POSITION) || @@ -60,29 +74,29 @@ class MoreInfoCover extends LitElement { } private get _stateOverride() { - if (this._displayedPosition == null) return undefined; + const liveValue = this._livePosition ?? this._liveTilt; - const tempState = { - ...this.stateObj, - state: this._displayedPosition ? "open" : "closed", - attributes: { - ...this.stateObj!.attributes, - current_position: this._displayedPosition, - }, - } as CoverEntity; + const forcedState = + liveValue != null ? (liveValue ? "open" : "closed") : undefined; const stateDisplay = computeStateDisplay( this.hass.localize, - tempState!, + this.stateObj!, this.hass.locale, - this.hass.entities + this.hass.entities, + forcedState ); - return this._displayedPosition && this._displayedPosition !== 100 - ? `${stateDisplay} - ${Math.round( - this._displayedPosition - )}${blankBeforePercent(this.hass!.locale)}%` - : stateDisplay; + const positionStateDisplay = computeCoverPositionStateDisplay( + this.stateObj!, + this.hass.locale, + liveValue + ); + + if (positionStateDisplay) { + return `${stateDisplay} ⸱ ${positionStateDisplay}`; + } + return stateDisplay; } protected render() { @@ -133,7 +147,8 @@ class MoreInfoCover extends LitElement { ` : nothing} @@ -142,6 +157,8 @@ class MoreInfoCover extends LitElement { ` : nothing} diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts index 6993c7698e..ffa97e181a 100644 --- a/src/panels/lovelace/cards/hui-tile-card.ts +++ b/src/panels/lovelace/cards/hui-tile-card.ts @@ -36,8 +36,11 @@ import "../../../components/tile/ha-tile-icon"; import "../../../components/tile/ha-tile-image"; import "../../../components/tile/ha-tile-info"; import { cameraUrlWithWidthHeight } from "../../../data/camera"; -import { CoverEntity } from "../../../data/cover"; -import { isUnavailableState, ON } from "../../../data/entity"; +import { + computeCoverPositionStateDisplay, + CoverEntity, +} from "../../../data/cover"; +import { isUnavailableState } from "../../../data/entity"; import { FanEntity } from "../../../data/fan"; import { LightEntity } from "../../../data/light"; import { ActionHandlerEvent } from "../../../data/lovelace"; @@ -202,7 +205,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard { `; } - if (domain === "light" && stateObj.state === ON) { + if (domain === "light" && stateActive(stateObj)) { const brightness = (stateObj as LightEntity).attributes.brightness; if (brightness) { return `${Math.round((brightness * 100) / 255)}${blankBeforePercent( @@ -211,7 +214,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard { } } - if (domain === "fan" && stateObj.state === ON) { + if (domain === "fan" && stateActive(stateObj)) { const speed = (stateObj as FanEntity).attributes.percentage; if (speed) { return `${Math.round(speed)}${blankBeforePercent(this.hass!.locale)}%`; @@ -225,15 +228,14 @@ export class HuiTileCard extends LitElement implements LovelaceCard { this.hass!.entities ); - if ( - domain === "cover" && - ["open", "opening", "closing"].includes(stateObj.state) - ) { - const position = (stateObj as CoverEntity).attributes.current_position; - if (position && position !== 100) { - return `${stateDisplay} - ${Math.round(position)}${blankBeforePercent( - this.hass!.locale - )}%`; + if (domain === "cover" && stateActive(stateObj)) { + const positionStateDisplay = computeCoverPositionStateDisplay( + stateObj as CoverEntity, + this.hass!.locale + ); + + if (positionStateDisplay) { + return `${stateDisplay} ⸱ ${positionStateDisplay}`; } } return stateDisplay;