mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 07:16:39 +00:00
Add minimal UI for climate and water entity without target (#18666)
This commit is contained in:
parent
f3f63d95b5
commit
98cdbb4559
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
Loading…
x
Reference in New Issue
Block a user