Make unavailable elements disabled (#5386)

* Make unavailable elements disabled

* Unused

* Add checks for unknown

* Update hui-weather-entity-row.ts
This commit is contained in:
Bram Kragten 2020-04-08 13:58:36 +02:00 committed by GitHub
parent 2253275640
commit ebb20abee0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 113 additions and 150 deletions

View File

@ -18,9 +18,12 @@ import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { computeStateName } from "../../common/entity/compute_state_name";
import "../ha-switch";
import { UNAVAILABLE_STATES } from "../../data/entity";
const isOn = (stateObj?: HassEntity) =>
stateObj !== undefined && !STATES_OFF.includes(stateObj.state);
stateObj !== undefined &&
!STATES_OFF.includes(stateObj.state) &&
!UNAVAILABLE_STATES.includes(stateObj.state);
class HaEntityToggle extends LitElement {
// hass is not a property so that we only re-render on stateObj changes
@ -40,12 +43,14 @@ class HaEntityToggle extends LitElement {
<paper-icon-button
aria-label=${`Turn ${computeStateName(this.stateObj)} off`}
icon="hass:flash-off"
.disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
@click=${this._turnOff}
?state-active=${!this._isOn}
></paper-icon-button>
<paper-icon-button
aria-label=${`Turn ${computeStateName(this.stateObj)} on`}
icon="hass:flash"
.disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
@click=${this._turnOn}
?state-active=${this._isOn}
></paper-icon-button>
@ -58,6 +63,7 @@ class HaEntityToggle extends LitElement {
this._isOn ? "off" : "on"
}`}
.checked=${this._isOn}
.disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
@change=${this._toggleChanged}
></ha-switch>
`;

View File

@ -3,6 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import CoverEntity from "../util/cover-model";
import { UNAVAILABLE_STATES } from "../data/entity";
class HaCoverControls extends PolymerElement {
static get template() {
@ -81,11 +82,17 @@ class HaCoverControls extends PolymerElement {
}
computeOpenDisabled(stateObj, entityObj) {
if (UNAVAILABLE_STATES.includes(stateObj.state)) {
return true;
}
var assumedState = stateObj.attributes.assumed_state === true;
return (entityObj.isFullyOpen || entityObj.isOpening) && !assumedState;
}
computeClosedDisabled(stateObj, entityObj) {
if (UNAVAILABLE_STATES.includes(stateObj.state)) {
return true;
}
var assumedState = stateObj.attributes.assumed_state === true;
return (entityObj.isFullyClosed || entityObj.isClosing) && !assumedState;
}

View File

@ -4,6 +4,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import CoverEntity from "../util/cover-model";
import { UNAVAILABLE_STATES } from "../data/entity";
class HaCoverTiltControls extends PolymerElement {
static get template() {
@ -63,11 +64,17 @@ class HaCoverTiltControls extends PolymerElement {
}
computeOpenDisabled(stateObj, entityObj) {
if (UNAVAILABLE_STATES.includes(stateObj.state)) {
return true;
}
var assumedState = stateObj.attributes.assumed_state === true;
return entityObj.isFullyOpenTilt && !assumedState;
}
computeClosedDisabled(stateObj, entityObj) {
if (UNAVAILABLE_STATES.includes(stateObj.state)) {
return true;
}
var assumedState = stateObj.attributes.assumed_state === true;
return entityObj.isFullyClosedTilt && !assumedState;
}

View File

@ -1,6 +1,8 @@
export const UNAVAILABLE = "unavailable";
export const UNKNOWN = "unknown";
export const UNAVAILABLE_STATES = [UNAVAILABLE, UNKNOWN];
export const ENTITY_COMPONENT_DOMAINS = [
"air_quality",
"alarm_control_panel",

View File

@ -30,7 +30,7 @@ import { actionHandler } from "../common/directives/action-handler-directive";
import { isValidEntityId } from "../../../common/entity/valid_entity_id";
import { findEntities } from "../common/find-entites";
import { createHeaderFooterElement } from "../create-element/create-header-footer-element";
import { UNKNOWN, UNAVAILABLE } from "../../../data/entity";
import { UNAVAILABLE_STATES } from "../../../data/entity";
import { HuiErrorCard } from "./hui-error-card";
@customElement("hui-entity-card")
@ -105,7 +105,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
const showUnit = this._config.attribute
? this._config.attribute in stateObj.attributes
: stateObj.state !== UNKNOWN && stateObj.state !== UNAVAILABLE;
: !UNAVAILABLE_STATES.includes(stateObj.state);
return html`
<ha-card>

View File

@ -30,7 +30,7 @@ import { hasAction } from "../common/has-action";
import { ActionHandlerEvent } from "../../../data/lovelace";
import { handleAction } from "../common/handle-action";
import { computeDomain } from "../../../common/entity/compute_domain";
import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
import { UNAVAILABLE_STATES } from "../../../data/entity";
import { findEntities } from "../common/find-entites";
@customElement("hui-glance-card")
@ -263,8 +263,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
<div>
${computeDomain(entityConf.entity) === "sensor" &&
stateObj.attributes.device_class === "timestamp" &&
stateObj.state !== UNAVAILABLE &&
stateObj.state !== UNKNOWN
!UNAVAILABLE_STATES.includes(stateObj.state)
? html`
<hui-timestamp-display
.hass=${this.hass}

View File

@ -19,7 +19,6 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen
import "../../../components/ha-card";
import "../components/hui-warning";
import "../components/hui-unavailable";
import { fireEvent } from "../../../common/dom/fire_event";
import { HomeAssistant, LightEntity } from "../../../types";
@ -29,7 +28,7 @@ import { LightCardConfig } from "./types";
import { supportsFeature } from "../../../common/entity/supports-feature";
import { SUPPORT_BRIGHTNESS } from "../../../data/light";
import { findEntities } from "../common/find-entites";
import { UNAVAILABLE } from "../../../data/entity";
import { UNAVAILABLE_STATES } from "../../../data/entity";
import { actionHandler } from "../common/directives/action-handler-directive";
import { hasAction } from "../common/has-action";
import { ActionHandlerEvent } from "../../../data/lovelace";
@ -107,14 +106,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
return html`
<ha-card>
${stateObj.state === UNAVAILABLE
? html`
<hui-unavailable
.text=${this.hass.localize("state.default.unavailable")}
@click=${this._handleMoreInfo}
></hui-unavailable>
`
: ""}
<paper-icon-button
icon="hass:dots-vertical"
class="more-info"
@ -128,6 +119,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
<round-slider
min="0"
.value=${brightness}
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
@value-changing=${this._dragEvent}
@value-changed=${this._setBrightness}
style=${styleMap({
@ -145,6 +137,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
"state-on": stateObj.state === "on",
"state-unavailable": stateObj.state === "unavailable",
})}"
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
.icon=${this._config.icon || stateIcon(stateObj)}
style=${styleMap({
filter: this._computeBrightness(stateObj),
@ -161,9 +154,18 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
</div>
<div id="info">
<div class="brightness">
%
</div>
${UNAVAILABLE_STATES.includes(stateObj.state)
? html`
<div>
${this.hass.localize(`state.default.${stateObj.state}`) ||
stateObj.state}
</div>
`
: html`
<div class="brightness">
%
</div>
`}
${this._config.name || computeStateName(stateObj)}
</div>
</div>
@ -267,10 +269,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
display: block;
}
hui-unavailable {
cursor: pointer;
}
ha-card {
height: 100%;
box-sizing: border-box;
@ -353,9 +351,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
cursor: pointer;
pointer-events: none;
padding-left: 0.5em;
}
.show_brightness {

View File

@ -30,7 +30,7 @@ import { stateIcon } from "../../../common/entity/state_icon";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { contrast } from "../common/color/contrast";
import { findEntities } from "../common/find-entites";
import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
import { UNAVAILABLE_STATES } from "../../../data/entity";
import {
SUPPORT_PAUSE,
SUPPORT_TURN_ON,
@ -285,8 +285,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
const isOffState = state === "off";
const isUnavailable =
state === UNAVAILABLE ||
state === UNKNOWN ||
UNAVAILABLE_STATES.includes(state) ||
(state === "off" && !supportsFeature(stateObj, SUPPORT_TURN_ON));
const hasNoImage = !this._image;
const controls = this._getControls();
@ -501,7 +500,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
const state = stateObj.state;
if (state === UNAVAILABLE || state === UNKNOWN) {
if (UNAVAILABLE_STATES.includes(state)) {
return undefined;
}

View File

@ -21,7 +21,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
import { computeStateDisplay } from "../../../common/entity/compute_state_display";
import { HomeAssistant } from "../../../types";
import { LovelaceCard, LovelaceCardEditor } from "../types";
import { UNAVAILABLE } from "../../../data/entity";
import { UNAVAILABLE_STATES } from "../../../data/entity";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { PictureEntityCardConfig } from "./types";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
@ -178,7 +178,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
: undefined
)}
class=${classMap({
clickable: stateObj.state !== UNAVAILABLE,
clickable: !UNAVAILABLE_STATES.includes(stateObj.state),
})}
></hui-image>
${footer}

View File

@ -15,7 +15,6 @@ import "@thomasloven/round-slider";
import "../../../components/ha-card";
import "../components/hui-warning";
import "../components/hui-unavailable";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
import { computeStateName } from "../../../common/entity/compute_state_name";
@ -35,7 +34,7 @@ import {
import { HassEntity } from "home-assistant-js-websocket";
import { actionHandler } from "../common/directives/action-handler-directive";
import { findEntities } from "../common/find-entites";
import { UNAVAILABLE } from "../../../data/entity";
import { UNAVAILABLE_STATES } from "../../../data/entity";
const modeIcons: { [mode in HvacMode]: string } = {
auto: "hass:calendar-repeat",
@ -127,23 +126,22 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
? stateObj.attributes.temperature
: stateObj.attributes.min_temp;
const slider =
stateObj.state === "unavailable"
? html`
<round-slider disabled="true"></round-slider>
`
: html`
<round-slider
.value=${targetTemp}
.low=${stateObj.attributes.target_temp_low}
.high=${stateObj.attributes.target_temp_high}
.min=${stateObj.attributes.min_temp}
.max=${stateObj.attributes.max_temp}
.step=${this._stepSize}
@value-changing=${this._dragEvent}
@value-changed=${this._setTemperature}
></round-slider>
`;
const slider = UNAVAILABLE_STATES.includes(stateObj.state)
? html`
<round-slider disabled="true"></round-slider>
`
: html`
<round-slider
.value=${targetTemp}
.low=${stateObj.attributes.target_temp_low}
.high=${stateObj.attributes.target_temp_high}
.min=${stateObj.attributes.min_temp}
.max=${stateObj.attributes.max_temp}
.step=${this._stepSize}
@value-changing=${this._dragEvent}
@value-changed=${this._setTemperature}
></round-slider>
`;
const currentTemperature = !isNaN(stateObj.attributes.current_temperature)
? svg`
@ -224,14 +222,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
[mode]: true,
})}
>
${stateObj.state === UNAVAILABLE
? html`
<hui-unavailable
.text="${this.hass.localize("state.default.unavailable")}"
@click=${this._handleMoreInfo}
></hui-unavailable>
`
: ""}
<paper-icon-button
icon="hass:dots-vertical"
class="more-info"
@ -333,7 +323,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
}
private _getSetTemp(stateObj: HassEntity) {
if (stateObj.state === "unavailable") {
if (UNAVAILABLE_STATES.includes(stateObj.state)) {
return this.hass!.localize("state.default.unavailable");
}
@ -420,10 +410,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
display: block;
}
hui-unavailable {
cursor: pointer;
}
ha-card {
height: 100%;
position: relative;

View File

@ -1,57 +0,0 @@
import {
html,
LitElement,
TemplateResult,
CSSResult,
css,
customElement,
property,
} from "lit-element";
@customElement("hui-unavailable")
export class HuiUnavailable extends LitElement {
@property() public text?: string;
protected render(): TemplateResult {
return html`
<div class="disabled-overlay"></div>
<div class="disabled-overlay-text">${this.text}</div>
`;
}
static get styles(): CSSResult {
return css`
.disabled-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--state-icon-unavailable-color);
opacity: 0.6;
z-index: 50;
}
.disabled-overlay-text {
position: absolute;
top: 50%;
left: 50%;
font-size: 24px;
text-align: center;
color: var(--primary-text-color);
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 50;
opacity: 0.7;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"hui-unavailable": HuiUnavailable;
}
}

View File

@ -22,7 +22,7 @@ import {
computeUsedEntities,
calcUnusedEntities,
} from "../../common/compute-unused-entities";
import { UNKNOWN, UNAVAILABLE } from "../../../../data/entity";
import { UNAVAILABLE_STATES } from "../../../../data/entity";
import {
customCards,
getCustomCardEntry,
@ -168,14 +168,12 @@ export class HuiCardPicker extends LitElement {
this._usedEntities = [...usedEntities].filter(
(eid) =>
this.hass!.states[eid] &&
this.hass!.states[eid].state !== UNKNOWN &&
this.hass!.states[eid].state !== UNAVAILABLE
!UNAVAILABLE_STATES.includes(this.hass!.states[eid].state)
);
this._unusedEntities = [...unusedEntities].filter(
(eid) =>
this.hass!.states[eid] &&
this.hass!.states[eid].state !== UNKNOWN &&
this.hass!.states[eid].state !== UNAVAILABLE
!UNAVAILABLE_STATES.includes(this.hass!.states[eid].state)
);
this.requestUpdate();

View File

@ -19,6 +19,7 @@ import { HomeAssistant } from "../../../types";
import { LovelaceRow, EntityConfig } from "./types";
import { setInputDateTimeValue } from "../../../data/input_datetime";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { UNAVAILABLE_STATES } from "../../../data/entity";
@customElement("hui-input-datetime-entity-row")
class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
@ -60,6 +61,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
${stateObj.attributes.has_date
? html`
<ha-date-input
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
.year=${stateObj.attributes.year}
.month=${("0" + stateObj.attributes.month).slice(-2)}
.day=${("0" + stateObj.attributes.day).slice(-2)}
@ -72,6 +74,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
${stateObj.attributes.has_time
? html`
<paper-time-input
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
.hour=${stateObj.state === "unknown"
? ""
: ("0" + stateObj.attributes.hour).slice(-2)}

View File

@ -18,6 +18,7 @@ import { LovelaceRow, EntityConfig } from "./types";
import { HomeAssistant } from "../../../types";
import { setValue } from "../../../data/input_text";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { UNAVAILABLE_STATES } from "../../../data/entity";
@customElement("hui-input-number-entity-row")
class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
@ -79,6 +80,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
? html`
<div class="flex">
<ha-slider
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
.dir="${computeRTLDirection(this.hass!)}"
.step="${Number(stateObj.attributes.step)}"
.min="${Number(stateObj.attributes.min)}"
@ -99,6 +101,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
<paper-input
no-label-float
auto-validate
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
.pattern="[0-9]+([\\.][0-9]+)?"
.step="${Number(stateObj.attributes.step)}"
.min="${Number(stateObj.attributes.min)}"

View File

@ -32,8 +32,7 @@ import { actionHandler } from "../common/directives/action-handler-directive";
import { hasAction } from "../common/has-action";
import { ActionHandlerEvent } from "../../../data/lovelace";
import { handleAction } from "../common/handle-action";
import { UNAVAILABLE } from "../../../data/entity";
import { fireEvent } from "../../../common/dom/fire_event";
import { UNAVAILABLE_STATES } from "../../../data/entity";
@customElement("hui-input-select-entity-row")
class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
@ -80,14 +79,6 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
!DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this._config.entity)));
return html`
${stateObj.state === UNAVAILABLE
? html`
<hui-unavailable
.text=${this.hass.localize("state.default.unavailable")}
@click=${this._showMoreInfo}
></hui-unavailable>
`
: ""}
<state-badge
.stateObj=${stateObj}
.stateColor=${this._config.state_color}
@ -106,6 +97,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
<ha-paper-dropdown-menu
.label=${this._config.name || computeStateName(stateObj)}
.value=${stateObj.state}
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
@iron-select=${this._selectedChanged}
@click=${stopPropagation}
>
@ -149,10 +141,6 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
handleAction(this, this.hass!, this._config!, ev.detail.action!);
}
private _showMoreInfo() {
fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
}
static get styles(): CSSResult {
return css`
:host {
@ -175,9 +163,6 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
background: var(--divider-color);
border-radius: 100%;
}
hui-unavailable {
cursor: pointer;
}
`;
}

View File

@ -15,6 +15,7 @@ import { HomeAssistant } from "../../../types";
import { LovelaceRow, EntityConfig } from "./types";
import { setValue } from "../../../data/input_text";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { UNAVAILABLE_STATES } from "../../../data/entity";
@customElement("hui-input-text-entity-row")
class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
@ -56,6 +57,7 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<paper-input
no-label-float
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
.value="${stateObj.state}"
.minlength="${stateObj.attributes.min}"
.maxlength="${stateObj.attributes.max}"

View File

@ -15,6 +15,7 @@ import "../components/hui-warning";
import { HomeAssistant } from "../../../types";
import { LovelaceRow, EntityConfig } from "./types";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { UNAVAILABLE_STATES } from "../../../data/entity";
@customElement("hui-lock-entity-row")
class HuiLockEntityRow extends LitElement implements LovelaceRow {
@ -54,7 +55,11 @@ class HuiLockEntityRow extends LitElement implements LovelaceRow {
return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<mwc-button @click="${this._callService}" class="text-content">
<mwc-button
@click="${this._callService}"
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
class="text-content"
>
${stateObj.state === "locked"
? this.hass!.localize("ui.card.lock.unlock")
: this.hass!.localize("ui.card.lock.lock")}

View File

@ -17,6 +17,7 @@ import { HomeAssistant } from "../../../types";
import { LovelaceRow, ActionRowConfig } from "./types";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { activateScene } from "../../../data/scene";
import { UNAVAILABLE_STATES } from "../../../data/entity";
@customElement("hui-scene-entity-row")
class HuiSceneEntityRow extends LitElement implements LovelaceRow {
@ -56,7 +57,11 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow {
return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<mwc-button @click="${this._callService}" class="text-content">
<mwc-button
@click="${this._callService}"
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
class="text-content"
>
${this._config.action_name ||
this.hass!.localize("ui.card.scene.activate")}
</mwc-button>

View File

@ -16,6 +16,7 @@ import "../components/hui-warning";
import { HomeAssistant } from "../../../types";
import { LovelaceRow, ActionRowConfig } from "./types";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { UNAVAILABLE_STATES } from "../../../data/entity";
@customElement("hui-script-entity-row")
class HuiScriptEntityRow extends LitElement implements LovelaceRow {
@ -58,12 +59,17 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
${stateObj.attributes.can_cancel
? html`
<ha-entity-toggle
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
.hass=${this.hass}
.stateObj=${stateObj}
></ha-entity-toggle>
`
: html`
<mwc-button @click=${this._callService} class="text-content">
<mwc-button
@click=${this._callService}
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
class="text-content"
>
${this._config.action_name ||
this.hass!.localize("ui.card.script.execute")}
</mwc-button>

View File

@ -15,6 +15,7 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa
import { HomeAssistant } from "../../../types";
import { LovelaceRow, EntityConfig } from "./types";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { UNAVAILABLE_STATES } from "../../../data/entity";
@customElement("hui-toggle-entity-row")
class HuiToggleEntityRow extends LitElement implements LovelaceRow {
@ -54,7 +55,9 @@ class HuiToggleEntityRow extends LitElement implements LovelaceRow {
return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
${stateObj.state === "on" || stateObj.state === "off"
${stateObj.state === "on" ||
stateObj.state === "off" ||
UNAVAILABLE_STATES.includes(stateObj.state)
? html`
<ha-entity-toggle
.hass=${this.hass}

View File

@ -22,6 +22,8 @@ import {
weatherImages,
} from "../../../data/weather";
import { UNAVAILABLE_STATES } from "../../../data/entity";
@customElement("hui-weather-entity-row")
class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
@property() public hass?: HomeAssistant;
@ -68,11 +70,18 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
<hui-generic-entity-row .hass=${this.hass} .config=${weatherRowConfig}>
<div class="attributes">
<div>
${stateObj.attributes.temperature}
${getWeatherUnit(this.hass, "temperature")}
${UNAVAILABLE_STATES.includes(stateObj.state)
? this.hass.localize(`state.default.${stateObj.state}`) ||
stateObj.state
: html`
${stateObj.attributes.temperature}
${getWeatherUnit(this.hass, "temperature")}
`}
</div>
<div class="secondary">
${this._getSecondaryAttribute(stateObj)}
${!UNAVAILABLE_STATES.includes(stateObj.state)
? this._getSecondaryAttribute(stateObj)
: ""}
</div>
</div>
</hui-generic-entity-row>