jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 08:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

warning when light unavilable (#2771)

Browse Source 
* error-card when light unavilable

* single warning element for all

* address review comments

* address review comments
This commit is contained in:
Ian Richardson 2019-02-17 22:43:46 -06:00 committed by Paulus Schoutsen
parent 7d8f790708
commit a4ec8719f9
20 changed files with 446 additions and 497 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/panels/lovelace/cards/hui-alarm-panel-card.ts
View File

@ -19,10 +19,7 @@ import {
import "../../../components/ha-card";
import "../../../components/ha-label-badge";
import {
createErrorCardConfig,
createErrorCardElement,
} from "./hui-error-card";
import "../components/hui-warning";
const ICONS = {
armed_away: "hass:shield-lock",
@ -107,11 +104,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
const stateObj = this.hass.states[this._config.entity];
if (!stateObj) {
const element = createErrorCardElement(
createErrorCardConfig("Entity not Found!", this._config)
);
return html`
${element}
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}

273
src/panels/lovelace/cards/hui-gauge-card.ts
View File

@ -1,27 +1,27 @@
import {
html,
LitElement,
PropertyDeclarations,
PropertyValues,
TemplateResult,
css,
CSSResult,
property,
} from "lit-element";
import { styleMap } from "lit-html/directives/style-map";
import "../../../components/ha-card";
import "../components/hui-warning";
import { LovelaceCardConfig } from "../../../data/lovelace";
import { HomeAssistant } from "../../../types";
import { fireEvent } from "../../../common/dom/fire_event";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { LovelaceCard, LovelaceCardEditor } from "../types";
import isValidEntityId from "../../../common/entity/valid_entity_id";
import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
import computeStateName from "../../../common/entity/compute_state_name";
import { LovelaceCard, LovelaceCardEditor } from "../types";
import {
createErrorCardConfig,
createErrorCardElement,
} from "./hui-error-card";
export interface SeverityConfig {
green?: number;
yellow?: number;
@ -54,17 +54,10 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
return {};
}
public hass?: HomeAssistant;
private _config?: Config;
@property() public hass?: HomeAssistant;
@property() private _config?: Config;
private _updated?: boolean;
static get properties(): PropertyDeclarations {
return {
hass: {},
_config: {},
};
}
public getCardSize(): number {
return 2;
}
@ -88,57 +81,59 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
if (!this._config || !this.hass) {
return html``;
}
const stateObj = this.hass.states[this._config.entity];
let state;
let error;
if (!stateObj) {
error = "Entity not available: " + this._config.entity;
} else {
state = Number(stateObj.state);
if (isNaN(state)) {
error = "Entity is non-numeric: " + this._config.entity;
}
return html`
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}
if (error) {
const state = Number(stateObj.state);
if (isNaN(state)) {
return html`
${createErrorCardElement(createErrorCardConfig(error, this._config))}
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_non_numeric",
"entity",
this._config.entity
)}</hui-warning
>
`;
}
return html`
${this.renderStyle()}
<ha-card @click="${this._handleClick}">
${error
? html`
<div class="not-found">${error}</div>
`
: html`
<div class="container">
<div class="gauge-a"></div>
<div class="gauge-b"></div>
<div
class="gauge-c"
style="${styleMap({
transform: `rotate(${this._translateTurn(state)}turn)`,
"background-color": this._computeSeverity(state),
})}"
></div>
<div class="gauge-data">
<div id="percent">
${stateObj.state}
${this._config.unit ||
stateObj.attributes.unit_of_measurement ||
""}
</div>
<div id="name">
${this._config.name || computeStateName(stateObj)}
</div>
</div>
</div>
`}
<div class="container">
<div class="gauge-a"></div>
<div class="gauge-b"></div>
<div
class="gauge-c"
style="${styleMap({
transform: `rotate(${this._translateTurn(state)}turn)`,
"background-color": this._computeSeverity(state),
})}"
></div>
<div class="gauge-data">
<div id="percent">
${stateObj.state}
${this._config.unit ||
stateObj.attributes.unit_of_measurement ||
""}
</div>
<div id="name">
${this._config.name || computeStateName(stateObj)}
</div>
</div>
</div>
</ha-card>
`;
}
@ -225,90 +220,88 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
}
private renderStyle(): TemplateResult {
return html`
<style>
ha-card {
--base-unit: 50px;
height: calc(var(--base-unit) * 3);
position: relative;
cursor: pointer;
}
.container {
width: calc(var(--base-unit) * 4);
height: calc(var(--base-unit) * 2);
position: absolute;
top: calc(var(--base-unit) * 1.5);
left: 50%;
overflow: hidden;
text-align: center;
transform: translate(-50%, -50%);
}
.gauge-a {
z-index: 1;
position: absolute;
background-color: var(--primary-background-color);
width: calc(var(--base-unit) * 4);
height: calc(var(--base-unit) * 2);
top: 0%;
border-radius: calc(var(--base-unit) * 2.5)
calc(var(--base-unit) * 2.5) 0px 0px;
}
.gauge-b {
z-index: 3;
position: absolute;
background-color: var(--paper-card-background-color);
width: calc(var(--base-unit) * 2.5);
height: calc(var(--base-unit) * 1.25);
top: calc(var(--base-unit) * 0.75);
margin-left: calc(var(--base-unit) * 0.75);
margin-right: auto;
border-radius: calc(var(--base-unit) * 2.5)
calc(var(--base-unit) * 2.5) 0px 0px;
}
.gauge-c {
z-index: 2;
position: absolute;
background-color: var(--label-badge-blue);
width: calc(var(--base-unit) * 4);
height: calc(var(--base-unit) * 2);
top: calc(var(--base-unit) * 2);
margin-left: auto;
margin-right: auto;
border-radius: 0px 0px calc(var(--base-unit) * 2)
calc(var(--base-unit) * 2);
transform-origin: center top;
}
.init .gauge-c {
transition: all 1.3s ease-in-out;
}
.gauge-data {
z-index: 4;
color: var(--primary-text-color);
line-height: calc(var(--base-unit) * 0.3);
position: absolute;
width: calc(var(--base-unit) * 4);
height: calc(var(--base-unit) * 2.1);
top: calc(var(--base-unit) * 1.2);
margin-left: auto;
margin-right: auto;
}
.init .gauge-data {
transition: all 1s ease-out;
}
.gauge-data #percent {
font-size: calc(var(--base-unit) * 0.55);
}
.gauge-data #name {
padding-top: calc(var(--base-unit) * 0.15);
font-size: calc(var(--base-unit) * 0.3);
}
.not-found {
flex: 1;
background-color: yellow;
padding: 8px;
}
</style>
static get styles(): CSSResult {
return css`
ha-card {
--base-unit: 50px;
height: calc(var(--base-unit) * 3);
position: relative;
cursor: pointer;
}
.container {
width: calc(var(--base-unit) * 4);
height: calc(var(--base-unit) * 2);
position: absolute;
top: calc(var(--base-unit) * 1.5);
left: 50%;
overflow: hidden;
text-align: center;
transform: translate(-50%, -50%);
}
.gauge-a {
z-index: 1;
position: absolute;
background-color: var(--primary-background-color);
width: calc(var(--base-unit) * 4);
height: calc(var(--base-unit) * 2);
top: 0%;
border-radius: calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5)
0px 0px;
}
.gauge-b {
z-index: 3;
position: absolute;
background-color: var(--paper-card-background-color);
width: calc(var(--base-unit) * 2.5);
height: calc(var(--base-unit) * 1.25);
top: calc(var(--base-unit) * 0.75);
margin-left: calc(var(--base-unit) * 0.75);
margin-right: auto;
border-radius: calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5)
0px 0px;
}
.gauge-c {
z-index: 2;
position: absolute;
background-color: var(--label-badge-blue);
width: calc(var(--base-unit) * 4);
height: calc(var(--base-unit) * 2);
top: calc(var(--base-unit) * 2);
margin-left: auto;
margin-right: auto;
border-radius: 0px 0px calc(var(--base-unit) * 2)
calc(var(--base-unit) * 2);
transform-origin: center top;
}
.init .gauge-c {
transition: all 1.3s ease-in-out;
}
.gauge-data {
z-index: 4;
color: var(--primary-text-color);
line-height: calc(var(--base-unit) * 0.3);
position: absolute;
width: calc(var(--base-unit) * 4);
height: calc(var(--base-unit) * 2.1);
top: calc(var(--base-unit) * 1.2);
margin-left: auto;
margin-right: auto;
}
.init .gauge-data {
transition: all 1s ease-out;
}
.gauge-data #percent {
font-size: calc(var(--base-unit) * 0.55);
}
.gauge-data #name {
padding-top: calc(var(--base-unit) * 0.15);
font-size: calc(var(--base-unit) * 0.3);
}
.not-found {
flex: 1;
background-color: yellow;
padding: 8px;
}
`;
}
}

74
src/panels/lovelace/cards/hui-light-card.ts
View File

@ -22,6 +22,7 @@ import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
import "../../../components/ha-card";
import "../../../components/ha-icon";
import "../components/hui-warning";
const lightConfig = {
radius: 80,
@ -78,41 +79,45 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
const stateObj = this.hass.states[this._config!.entity] as LightEntity;
if (!stateObj) {
return html`
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}
return html`
${this.renderStyle()}
<ha-card>
${!stateObj
? html`
<div class="not-found">
Entity not available: ${this._config.entity}
</div>
`
: html`
<paper-icon-button
icon="hass:dots-vertical"
class="more-info"
@click="${this._handleMoreInfo}"
></paper-icon-button>
<div id="light"></div>
<div id="tooltip">
<div class="icon-state">
<ha-icon
class="light-icon"
data-state="${stateObj.state}"
.icon="${stateIcon(stateObj)}"
style="${styleMap({
filter: this._computeBrightness(stateObj),
color: this._computeColor(stateObj),
})}"
@click="${this._handleTap}"
></ha-icon>
<div class="brightness" @ha-click="${this._handleTap}"></div>
<div class="name">
${this._config.name || computeStateName(stateObj)}
</div>
</div>
</div>
`}
<paper-icon-button
icon="hass:dots-vertical"
class="more-info"
@click="${this._handleMoreInfo}"
></paper-icon-button>
<div id="light"></div>
<div id="tooltip">
<div class="icon-state">
<ha-icon
class="light-icon"
data-state="${stateObj.state}"
.icon="${stateIcon(stateObj)}"
style="${styleMap({
filter: this._computeBrightness(stateObj),
color: this._computeColor(stateObj),
})}"
@click="${this._handleTap}"
></ha-icon>
<div class="brightness" @ha-click="${this._handleTap}"></div>
<div class="name">
${this._config.name || computeStateName(stateObj)}
</div>
</div>
</div>
</ha-card>
`;
}
@ -272,11 +277,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
.show_brightness {
opacity: 1;
}
.not-found {
flex: 1;
background-color: yellow;
padding: 8px;
}
.more-info {
position: absolute;
cursor: pointer;

18
src/panels/lovelace/cards/hui-picture-entity-card.ts
View File

@ -8,6 +8,7 @@ import { classMap } from "lit-html/directives/class-map";
import "../../../components/ha-card";
import "../components/hui-image";
import "../components/hui-warning";
import computeDomain from "../../../common/entity/compute_domain";
import computeStateDisplay from "../../../common/entity/compute_state_display";
@ -19,10 +20,6 @@ import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace";
import { LovelaceCard } from "../types";
import { handleClick } from "../common/handle-click";
import { UNAVAILABLE } from "../../../data/entity";
import {
createErrorCardElement,
createErrorCardConfig,
} from "./hui-error-card";
interface Config extends LovelaceCardConfig {
entity: string;
@ -76,12 +73,13 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
${createErrorCardElement(
createErrorCardConfig(
`Entity not found: ${this._config.entity}`,
this._config
)
)}
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}

21
src/panels/lovelace/cards/hui-thermostat-card.ts
View File

@ -10,6 +10,7 @@ import "@polymer/paper-icon-button/paper-icon-button";
import "../../../components/ha-card";
import "../../../components/ha-icon";
import "../components/hui-warning";
import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
import computeStateName from "../../../common/entity/compute_state_name";
@ -102,16 +103,19 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
return html``;
}
const stateObj = this.hass.states[this._config.entity] as ClimateEntity;
if (!stateObj) {
return html`
${this.renderStyle()}
<ha-card>
<div class="not-found">
Entity not available: ${this._config.entity}
</div>
</ha-card>
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}
const mode = modeIcons[stateObj.attributes.operation_mode || ""]
? stateObj.attributes.operation_mode!
: "unknown-mode";
@ -387,11 +391,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
--idle-color: #8a8a8a;
--unknown-color: #bac;
}
.not-found {
flex: 1;
background-color: yellow;
padding: 8px;
}
#root {
position: relative;
overflow: hidden;

34
src/panels/lovelace/components/hui-warning.ts Normal file
View File

@ -0,0 +1,34 @@
import {
html,
LitElement,
TemplateResult,
CSSResult,
css,
customElement,
} from "lit-element";
@customElement("hui-warning")
export class HuiWarning extends LitElement {
protected render(): TemplateResult | void {
return html`
<slot></slot>
`;
}
static get styles(): CSSResult {
return css`
:host {
display: block;
color: black;
background-color: #fce588;
padding: 8px;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"hui-warning": HuiWarning;
}
}

44
src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
View File

@ -1,21 +1,22 @@
import { html, LitElement, TemplateResult } from "lit-element";
import {
html,
LitElement,
TemplateResult,
property,
css,
CSSResult,
} from "lit-element";
import "../../../components/ha-climate-state";
import "../components/hui-generic-entity-row";
import "../components/hui-warning";
import { HomeAssistant } from "../../../types";
import { EntityRow, EntityConfig } from "./types";
class HuiClimateEntityRow extends LitElement implements EntityRow {
public hass?: HomeAssistant;
private _config?: EntityConfig;
static get properties() {
return {
hass: {},
_config: {},
};
}
@property() public hass?: HomeAssistant;
@property() private _config?: EntityConfig;
public setConfig(config: EntityConfig): void {
if (!config || !config.entity) {
@ -34,14 +35,17 @@ class HuiClimateEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
<hui-error-entity-row
.entity="${this._config.entity}"
></hui-error-entity-row>
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}
return html`
${this.renderStyle()}
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<ha-climate-state
.hass="${this.hass}"
@ -51,13 +55,11 @@ class HuiClimateEntityRow extends LitElement implements EntityRow {
`;
}
private renderStyle(): TemplateResult {
return html`
<style>
ha-climate-state {
text-align: right;
}
</style>
static get styles(): CSSResult {
return css`
ha-climate-state {
text-align: right;
}
`;
}
}

42
src/panels/lovelace/entity-rows/hui-cover-entity-row.ts
View File

@ -1,29 +1,24 @@
import {
html,
LitElement,
PropertyDeclarations,
TemplateResult,
property,
css,
CSSResult,
} from "lit-element";
import "../components/hui-generic-entity-row";
import "../../../components/ha-cover-controls";
import "../../../components/ha-cover-tilt-controls";
import "./hui-error-entity-row";
import "../components/hui-warning";
import { isTiltOnly } from "../../../util/cover-model";
import { HomeAssistant } from "../../../types";
import { EntityRow, EntityConfig } from "./types";
class HuiCoverEntityRow extends LitElement implements EntityRow {
public hass?: HomeAssistant;
private _config?: EntityConfig;
static get properties(): PropertyDeclarations {
return {
hass: {},
_config: {},
};
}
@property() public hass?: HomeAssistant;
@property() private _config?: EntityConfig;
public setConfig(config: EntityConfig): void {
if (!config) {
@ -41,14 +36,17 @@ class HuiCoverEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
<hui-error-entity-row
.entity="${this._config.entity}"
></hui-error-entity-row>
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}
return html`
${this.renderStyle()}
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
${isTiltOnly(stateObj)
? html`
@ -67,14 +65,12 @@ class HuiCoverEntityRow extends LitElement implements EntityRow {
`;
}
private renderStyle(): TemplateResult {
return html`
<style>
ha-cover-controls,
ha-cover-tilt-controls {
margin-right: -0.57em;
}
</style>
static get styles(): CSSResult {
return css`
ha-cover-controls,
ha-cover-tilt-controls {
margin-right: -0.57em;
}
`;
}
}

41
src/panels/lovelace/entity-rows/hui-error-entity-row.ts
View File

@ -1,41 +0,0 @@
import { html, LitElement, TemplateResult } from "lit-element";
class HuiErrorEntityRow extends LitElement {
public entity?: string;
public error?: string;
static get properties() {
return {
error: {},
entity: {},
};
}
protected render(): TemplateResult | void {
return html`
${this.renderStyle()} ${this.error || "Entity not available"}:
${this.entity || ""}
`;
}
private renderStyle(): TemplateResult {
return html`
<style>
:host {
display: block;
color: black;
background-color: yellow;
padding: 8px;
}
</style>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"hui-error-entity-row": HuiErrorEntityRow;
}
}
customElements.define("hui-error-entity-row", HuiErrorEntityRow);

30
src/panels/lovelace/entity-rows/hui-group-entity-row.ts
View File

@ -1,13 +1,8 @@
import {
html,
LitElement,
PropertyDeclarations,
TemplateResult,
} from "lit-element";
import { html, LitElement, TemplateResult, property } from "lit-element";
import "../components/hui-generic-entity-row";
import "../../../components/entity/ha-entity-toggle";
import "./hui-error-entity-row";
import "../components/hui-warning";
import computeStateDisplay from "../../../common/entity/compute_state_display";
import { DOMAINS_TOGGLE } from "../../../common/const";
@ -15,15 +10,8 @@ import { HomeAssistant } from "../../../types";
import { EntityRow, EntityConfig } from "./types";
class HuiGroupEntityRow extends LitElement implements EntityRow {
public hass?: HomeAssistant;
private _config?: EntityConfig;
static get properties(): PropertyDeclarations {
return {
hass: {},
_config: {},
};
}
@property() public hass?: HomeAssistant;
@property() private _config?: EntityConfig;
public setConfig(config: EntityConfig): void {
if (!config) {
@ -41,9 +29,13 @@ class HuiGroupEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
<hui-error-entity-row
.entity="${this._config.entity}"
></hui-error-entity-row>
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}

50
src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
View File

@ -1,8 +1,10 @@
import {
html,
LitElement,
PropertyDeclarations,
TemplateResult,
property,
css,
CSSResult,
} from "lit-element";
import { repeat } from "lit-html/directives/repeat";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
@ -10,7 +12,7 @@ import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "../../../components/entity/state-badge";
import "./hui-error-entity-row";
import "../components/hui-warning";
import computeStateName from "../../../common/entity/compute_state_name";
import { HomeAssistant } from "../../../types";
@ -18,15 +20,8 @@ import { EntityRow, EntityConfig } from "./types";
import { setOption } from "../../../data/input-select";
class HuiInputSelectEntityRow extends LitElement implements EntityRow {
public hass?: HomeAssistant;
private _config?: EntityConfig;
static get properties(): PropertyDeclarations {
return {
hass: {},
_config: {},
};
}
@property() public hass?: HomeAssistant;
@property() private _config?: EntityConfig;
public setConfig(config: EntityConfig): void {
if (!config || !config.entity) {
@ -45,14 +40,17 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
<hui-error-entity-row
.entity="${this._config.entity}"
></hui-error-entity-row>
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}
return html`
${this.renderStyle()}
<state-badge .stateObj="${stateObj}"></state-badge>
<paper-dropdown-menu
selected-item-label="${stateObj.state}"
@ -75,18 +73,16 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
`;
}
private renderStyle(): TemplateResult {
return html`
<style>
:host {
display: flex;
align-items: center;
}
paper-dropdown-menu {
margin-left: 16px;
flex: 1;
}
</style>
static get styles(): CSSResult {
return css`
:host {
display: flex;
align-items: center;
}
paper-dropdown-menu {
margin-left: 16px;
flex: 1;
}
`;
}

30
src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts
View File

@ -1,28 +1,16 @@
import {
html,
LitElement,
PropertyDeclarations,
TemplateResult,
} from "lit-element";
import { html, LitElement, TemplateResult, property } from "lit-element";
import { PaperInputElement } from "@polymer/paper-input/paper-input";
import "../components/hui-generic-entity-row";
import "./hui-error-entity-row";
import "../components/hui-warning";
import { HomeAssistant } from "../../../types";
import { EntityRow, EntityConfig } from "./types";
import { setValue } from "../../../data/input_text";
class HuiInputTextEntityRow extends LitElement implements EntityRow {
public hass?: HomeAssistant;
private _config?: EntityConfig;
static get properties(): PropertyDeclarations {
return {
hass: {},
_config: {},
};
}
@property() public hass?: HomeAssistant;
@property() private _config?: EntityConfig;
public setConfig(config: EntityConfig): void {
if (!config) {
@ -40,9 +28,13 @@ class HuiInputTextEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
<hui-error-entity-row
.entity="${this._config.entity}"
></hui-error-entity-row>
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}

42
src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
View File

@ -1,26 +1,21 @@
import {
html,
LitElement,
PropertyDeclarations,
TemplateResult,
property,
css,
CSSResult,
} from "lit-element";
import "../components/hui-generic-entity-row";
import "./hui-error-entity-row";
import "../components/hui-warning";
import { HomeAssistant } from "../../../types";
import { EntityRow, EntityConfig } from "./types";
class HuiLockEntityRow extends LitElement implements EntityRow {
public hass?: HomeAssistant;
private _config?: EntityConfig;
static get properties(): PropertyDeclarations {
return {
hass: {},
_config: {},
};
}
@property() public hass?: HomeAssistant;
@property() private _config?: EntityConfig;
public setConfig(config: EntityConfig): void {
if (!config) {
@ -38,14 +33,17 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
<hui-error-entity-row
.entity="${this._config.entity}"
></hui-error-entity-row>
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}
return html`
${this.renderStyle()}
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<mwc-button @click="${this._callService}">
${stateObj.state === "locked"
@ -56,15 +54,11 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
`;
}
protected renderStyle(): TemplateResult {
return html`
<style>
mwc-button {
color: var(--primary-color);
font-weight: 500;
margin-right: -0.57em;
}
</style>
static get styles(): CSSResult {
return css`
mwc-button {
margin-right: -0.57em;
}
`;
}

44
src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
View File

@ -1,7 +1,15 @@
import { html, LitElement, TemplateResult } from "lit-element";
import {
html,
LitElement,
TemplateResult,
css,
CSSResult,
property,
} from "lit-element";
import "@polymer/paper-icon-button/paper-icon-button";
import "../components/hui-generic-entity-row";
import "../components/hui-warning";
import { EntityRow, EntityConfig } from "./types";
import { HomeAssistant } from "../../../types";
@ -15,15 +23,8 @@ import {
} from "../../../data/media-player";
class HuiMediaPlayerEntityRow extends LitElement implements EntityRow {
public hass?: HomeAssistant;
private _config?: EntityConfig;
static get properties() {
return {
hass: {},
_config: {},
};
}
@property() public hass?: HomeAssistant;
@property() private _config?: EntityConfig;
public setConfig(config: EntityConfig): void {
if (!config || !config.entity) {
@ -42,14 +43,17 @@ class HuiMediaPlayerEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
<hui-error-entity-row
.entity="${this._config.entity}"
></hui-error-entity-row>
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}
return html`
${this.renderStyle()}
<hui-generic-entity-row
.hass="${this.hass}"
.config="${this._config}"
@ -89,13 +93,11 @@ class HuiMediaPlayerEntityRow extends LitElement implements EntityRow {
`;
}
private renderStyle(): TemplateResult {
return html`
<style>
.controls {
white-space: nowrap;
}
</style>
static get styles(): CSSResult {
return css`
.controls {
white-space: nowrap;
}
`;
}

44
src/panels/lovelace/entity-rows/hui-scene-entity-row.ts
View File

@ -1,27 +1,22 @@
import {
html,
LitElement,
PropertyDeclarations,
TemplateResult,
CSSResult,
css,
property,
} from "lit-element";
import "../components/hui-generic-entity-row";
import "../../../components/entity/ha-entity-toggle";
import "./hui-error-entity-row";
import "../components/hui-warning";
import { HomeAssistant } from "../../../types";
import { EntityRow, EntityConfig } from "./types";
class HuiSceneEntityRow extends LitElement implements EntityRow {
public hass?: HomeAssistant;
private _config?: EntityConfig;
static get properties(): PropertyDeclarations {
return {
hass: {},
_config: {},
};
}
@property() public hass?: HomeAssistant;
@property() private _config?: EntityConfig;
public setConfig(config: EntityConfig): void {
if (!config) {
@ -39,14 +34,17 @@ class HuiSceneEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
<hui-error-entity-row
.entity="${this._config.entity}"
></hui-error-entity-row>
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}
return html`
${this.renderStyle()}
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
${stateObj.attributes.can_cancel
? html`
@ -64,15 +62,13 @@ class HuiSceneEntityRow extends LitElement implements EntityRow {
`;
}
protected renderStyle(): TemplateResult {
return html`
<style>
mwc-button {
color: var(--primary-color);
font-weight: 500;
margin-right: -0.57em;
}
</style>
static get styles(): CSSResult {
return css`
mwc-button {
color: var(--primary-color);
font-weight: 500;
margin-right: -0.57em;
}
`;
}

44
src/panels/lovelace/entity-rows/hui-script-entity-row.ts
View File

@ -1,27 +1,22 @@
import {
html,
LitElement,
PropertyDeclarations,
TemplateResult,
property,
CSSResult,
css,
} from "lit-element";
import "../components/hui-generic-entity-row";
import "../../../components/entity/ha-entity-toggle";
import "./hui-error-entity-row";
import "../components/hui-warning";
import { HomeAssistant } from "../../../types";
import { EntityRow, EntityConfig } from "./types";
class HuiScriptEntityRow extends LitElement implements EntityRow {
public hass?: HomeAssistant;
private _config?: EntityConfig;
static get properties(): PropertyDeclarations {
return {
hass: {},
_config: {},
};
}
@property() public hass?: HomeAssistant;
@property() private _config?: EntityConfig;
public setConfig(config: EntityConfig): void {
if (!config) {
@ -39,14 +34,17 @@ class HuiScriptEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
<hui-error-entity-row
.entity="${this._config.entity}"
></hui-error-entity-row>
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}
return html`
${this.renderStyle()}
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
${stateObj.attributes.can_cancel
? html`
@ -64,15 +62,13 @@ class HuiScriptEntityRow extends LitElement implements EntityRow {
`;
}
protected renderStyle(): TemplateResult {
return html`
<style>
mwc-button {
color: var(--primary-color);
font-weight: 500;
margin-right: -0.57em;
}
</style>
static get styles(): CSSResult {
return css`
mwc-button {
color: var(--primary-color);
font-weight: 500;
margin-right: -0.57em;
}
`;
}

40
src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts
View File

@ -1,13 +1,15 @@
import {
html,
LitElement,
PropertyDeclarations,
TemplateResult,
property,
CSSResult,
css,
} from "lit-element";
import "../components/hui-generic-entity-row";
import "../components/hui-timestamp-display";
import "./hui-error-entity-row";
import "../components/hui-warning";
import { HomeAssistant } from "../../../types";
import { EntityRow, EntityConfig } from "./types";
@ -19,15 +21,8 @@ interface SensorEntityConfig extends EntityConfig {
}
class HuiSensorEntityRow extends LitElement implements EntityRow {
public hass?: HomeAssistant;
private _config?: SensorEntityConfig;
static get properties(): PropertyDeclarations {
return {
hass: {},
_config: {},
};
}
@property() public hass?: HomeAssistant;
@property() private _config?: SensorEntityConfig;
public setConfig(config: SensorEntityConfig): void {
if (!config) {
@ -45,14 +40,17 @@ class HuiSensorEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
<hui-error-entity-row
.entity="${this._config.entity}"
></hui-error-entity-row>
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}
return html`
${this.renderStyle()}
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<div>
${stateObj.attributes.device_class === "timestamp"
@ -73,13 +71,11 @@ class HuiSensorEntityRow extends LitElement implements EntityRow {
`;
}
private renderStyle(): TemplateResult {
return html`
<style>
div {
text-align: right;
}
</style>
static get styles(): CSSResult {
return css`
div {
text-align: right;
}
`;
}
}

40
src/panels/lovelace/entity-rows/hui-text-entity-row.ts
View File

@ -1,27 +1,22 @@
import {
html,
LitElement,
PropertyDeclarations,
TemplateResult,
property,
CSSResult,
css,
} from "lit-element";
import "../components/hui-generic-entity-row";
import "./hui-error-entity-row";
import "../components/hui-warning";
import computeStateDisplay from "../../../common/entity/compute_state_display";
import { HomeAssistant } from "../../../types";
import { EntityRow, EntityConfig } from "./types";
class HuiTextEntityRow extends LitElement implements EntityRow {
public hass?: HomeAssistant;
private _config?: EntityConfig;
static get properties(): PropertyDeclarations {
return {
hass: {},
_config: {},
};
}
@property() public hass?: HomeAssistant;
@property() private _config?: EntityConfig;
public setConfig(config: EntityConfig): void {
if (!config) {
@ -39,14 +34,17 @@ class HuiTextEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
<hui-error-entity-row
.entity="${this._config.entity}"
></hui-error-entity-row>
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}
return html`
${this.renderStyle()}
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<div>
${computeStateDisplay(
@ -59,13 +57,11 @@ class HuiTextEntityRow extends LitElement implements EntityRow {
`;
}
private renderStyle(): TemplateResult {
return html`
<style>
div {
text-align: right;
}
</style>
static get styles(): CSSResult {
return css`
div {
text-align: right;
}
`;
}
}

12
src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts
View File

@ -7,7 +7,7 @@ import {
import "../components/hui-generic-entity-row";
import "../../../components/entity/ha-entity-toggle";
import "./hui-error-entity-row";
import "../components/hui-warning";
import computeStateDisplay from "../../../common/entity/compute_state_display";
import { HomeAssistant } from "../../../types";
@ -40,9 +40,13 @@ class HuiToggleEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
<hui-error-entity-row
.entity="${this._config.entity}"
></hui-error-entity-row>
<hui-warning
>${this.hass.localize(
"ui.panel.lovelace.warning.entity_not_found",
"entity",
this._config.entity
)}</hui-warning
>
`;
}

4
src/translations/en.json
View File

@ -899,6 +899,10 @@
"para_migrate": "Home Assistant can add ID's to all your cards and views automatically for you by pressing the 'Migrate config' button.",
"migrate": "Migrate config"
}
},
"warning": {
"entity_not_found": "Entity not available: {entity}",
"entity_non_numeric": "Entity is non-numeric: {entity}"
}
},
"mailbox": {