Add minimal UI for climate and water entity without target (#18666)

This commit is contained in:
Paul Bottein 2023-11-16 12:16:37 +01:00 committed by GitHub
parent f3f63d95b5
commit 98cdbb4559
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 107 additions and 49 deletions

View File

@ -66,6 +66,9 @@ export class HaControlCircularSlider extends LitElement {
@property({ type: Boolean, reflect: true })
public disabled = false;
@property({ type: Boolean, reflect: true })
public readonly = false;
@property({ type: Boolean })
public dual?: boolean;
@ -258,7 +261,7 @@ export class HaControlCircularSlider extends LitElement {
e.srcEvent.preventDefault();
});
this._mc.on("panstart", (e) => {
if (this.disabled) return;
if (this.disabled || this.readonly) return;
const percentage = this._getPercentageFromEvent(e);
const raw = this._percentageToValue(percentage);
this._activeSlider = this._findActiveSlider(raw);
@ -266,11 +269,11 @@ export class HaControlCircularSlider extends LitElement {
this.shadowRoot?.getElementById("#slider")?.focus();
});
this._mc.on("pancancel", () => {
if (this.disabled) return;
if (this.disabled || this.readonly) return;
this._activeSlider = undefined;
});
this._mc.on("panmove", (e) => {
if (this.disabled) return;
if (this.disabled || this.readonly) return;
const percentage = this._getPercentageFromEvent(e);
const raw = this._percentageToValue(percentage);
const bounded = this._boundedValue(raw);
@ -281,7 +284,7 @@ export class HaControlCircularSlider extends LitElement {
}
});
this._mc.on("panend", (e) => {
if (this.disabled) return;
if (this.disabled || this.readonly) return;
const percentage = this._getPercentageFromEvent(e);
const raw = this._percentageToValue(percentage);
const bounded = this._boundedValue(raw);
@ -296,7 +299,7 @@ export class HaControlCircularSlider extends LitElement {
this._activeSlider = undefined;
});
this._mc.on("singletap", (e) => {
if (this.disabled) return;
if (this.disabled || this.readonly) return;
const percentage = this._getPercentageFromEvent(e);
const raw = this._percentageToValue(percentage);
this._activeSlider = this._findActiveSlider(raw);
@ -436,11 +439,15 @@ export class HaControlCircularSlider extends LitElement {
? current <= target
: false;
const activeArc = showActive
? mode === "end"
? this._strokeDashArc(target, current)
: this._strokeDashArc(current, target)
: this._strokeCircleDashArc(target);
const showTarget = value != null;
const activeArc = showTarget
? showActive
? mode === "end"
? this._strokeDashArc(target, current)
: this._strokeDashArc(current, target)
: this._strokeCircleDashArc(target)
: undefined;
const coloredArc =
mode === "full"
@ -449,7 +456,9 @@ export class HaControlCircularSlider extends LitElement {
? this._strokeDashArc(target, limit)
: this._strokeDashArc(limit, target);
const targetCircle = this._strokeCircleDashArc(target);
const targetCircle = showTarget
? this._strokeCircleDashArc(target)
: undefined;
const currentCircle =
this.current != null &&
@ -473,26 +482,33 @@ export class HaControlCircularSlider extends LitElement {
stroke-dasharray=${coloredArc[0]}
stroke-dashoffset=${coloredArc[1]}
/>
<path
.id=${id}
d=${path}
class="arc arc-active ${classMap({ [id]: true })}"
stroke-dasharray=${activeArc[0]}
stroke-dashoffset=${activeArc[1]}
role="slider"
tabindex="0"
aria-valuemin=${this.min}
aria-valuemax=${this.max}
aria-valuenow=${
this._localValue != null
? this._steppedValue(this._localValue)
: undefined
}
aria-disabled=${this.disabled}
aria-label=${ifDefined(this.lowLabel ?? this.label)}
@keydown=${this._handleKeyDown}
@keyup=${this._handleKeyUp}
/>
${
activeArc
? svg`
<path
.id=${id}
d=${path}
class="arc arc-active ${classMap({ [id]: true })}"
stroke-dasharray=${activeArc[0]}
stroke-dashoffset=${activeArc[1]}
role="slider"
tabindex="0"
aria-valuemin=${this.min}
aria-valuemax=${this.max}
aria-valuenow=${
this._localValue != null
? this._steppedValue(this._localValue)
: undefined
}
aria-disabled=${this.disabled}
aria-readonly=${this.readonly}
aria-label=${ifDefined(this.lowLabel ?? this.label)}
@keydown=${this._handleKeyDown}
@keyup=${this._handleKeyUp}
/>
`
: nothing
}
${
currentCircle
? svg`
@ -505,18 +521,24 @@ export class HaControlCircularSlider extends LitElement {
`
: nothing
}
<path
class="target-border ${classMap({ [id]: true })}"
d=${path}
stroke-dasharray=${targetCircle[0]}
stroke-dashoffset=${targetCircle[1]}
/>
<path
class="target"
d=${path}
stroke-dasharray=${targetCircle[0]}
stroke-dashoffset=${targetCircle[1]}
/>
${
targetCircle
? svg`
<path
class="target-border ${classMap({ [id]: true })}"
d=${path}
stroke-dasharray=${targetCircle[0]}
stroke-dashoffset=${targetCircle[1]}
/>
<path
class="target"
d=${path}
stroke-dasharray=${targetCircle[0]}
stroke-dashoffset=${targetCircle[1]}
/>
`
: nothing
}
</g>
`;
}
@ -568,7 +590,7 @@ export class HaControlCircularSlider extends LitElement {
/>
`
: nothing}
${lowValue != null
${lowValue != null || this.mode === "full"
? this.renderArc(
this.dual ? "low" : "value",
lowValue,
@ -615,7 +637,8 @@ export class HaControlCircularSlider extends LitElement {
#display {
pointer-events: none;
}
:host([disabled]) #interaction {
:host([disabled]) #interaction,
:host([readonly]) #interaction {
cursor: initial;
}

View File

@ -159,6 +159,21 @@ export class HaMoreInfoClimateTemperature extends LitElement {
`;
}
if (
!supportsFeature(
this.stateObj,
ClimateEntityFeature.TARGET_TEMPERATURE
) &&
!supportsFeature(
this.stateObj,
ClimateEntityFeature.TARGET_TEMPERATURE_RANGE
)
) {
return html`
<p class="label">${this.hass.formatEntityState(this.stateObj)}</p>
`;
}
const action = this.stateObj.attributes.hvac_action;
const actionLabel = this.hass.formatEntityAttributeValue(
@ -383,15 +398,17 @@ export class HaMoreInfoClimateTemperature extends LitElement {
<div
class="container"
style=${styleMap({
"--action-color": actionColor,
"--state-color": stateColor,
})}
>
<ha-control-circular-slider
mode="full"
.current=${this.stateObj.attributes.current_temperature}
.min=${this._min}
.max=${this._max}
.step=${this._step}
disabled
readonly
.disabled=${!active}
>
</ha-control-circular-slider>
<div class="info">

View File

@ -99,6 +99,17 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement {
`;
}
if (
!supportsFeature(
this.stateObj,
WaterHeaterEntityFeature.TARGET_TEMPERATURE
)
) {
return html`
<p class="label">${this.hass.formatEntityState(this.stateObj)}</p>
`;
}
return html`
<p class="label">
${this.hass.localize(
@ -202,13 +213,20 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement {
}
return html`
<div class="container">
<div
class="container"
style=${styleMap({
"--state-color": stateColor,
})}
>
<ha-control-circular-slider
mode="full"
.current=${this.stateObj.attributes.current_temperature}
.min=${this._min}
.max=${this._max}
.step=${this._step}
disabled
readonly
.disabled=${!active}
>
</ha-control-circular-slider>
<div class="info">