Merge pull request #1794 from zsarnett/glance-unavailable

Glance Card update to show when entity is unavailable
This commit is contained in:
Zack Arnett 2018-10-18 11:21:08 -04:00 committed by GitHub
commit d97e356376
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,6 +1,5 @@
import { html, LitElement } from "@polymer/lit-element"; import { html, LitElement } from "@polymer/lit-element";
import { classMap } from "lit-html/directives/classMap.js"; import { classMap } from "lit-html/directives/classMap.js";
import { repeat } from "lit-html/directives/repeat";
import computeStateDisplay from "../../../common/entity/compute_state_display.js"; import computeStateDisplay from "../../../common/entity/compute_state_display.js";
import computeStateName from "../../../common/entity/compute_state_name.js"; import computeStateName from "../../../common/entity/compute_state_name.js";
@ -49,7 +48,7 @@ export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
} }
public getCardSize() { public getCardSize() {
return 3; return (this.config!.title ? 1 : 0) + Math.ceil(this.configEntities!.length / 5);
} }
public setConfig(config: Config) { public setConfig(config: Config) {
@ -81,10 +80,6 @@ export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
return html``; return html``;
} }
const { title } = this.config; const { title } = this.config;
const states = this.hass.states;
const entities = this.configEntities!.filter(
(conf) => conf.entity in states
);
applyThemesOnElement(this, this.hass!.themes, this.config.theme); applyThemesOnElement(this, this.hass!.themes, this.config.theme);
@ -92,11 +87,7 @@ export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
${this.renderStyle()} ${this.renderStyle()}
<ha-card .header="${title}"> <ha-card .header="${title}">
<div class="entities ${classMap({ "no-header": !title })}"> <div class="entities ${classMap({ "no-header": !title })}">
${repeat<EntityConfig>( ${this.configEntities!.map(entityConf => this.renderEntity(entityConf))}
entities,
(entityConf) => entityConf.entity,
(entityConf) => this.renderEntity(entityConf)
)}
</div> </div>
</ha-card> </ha-card>
`; `;
@ -136,6 +127,10 @@ export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
state-badge { state-badge {
margin: 8px 0; margin: 8px 0;
} }
.not-found {
background-color: yellow;
text-align: center;
}
</style> </style>
`; `;
} }
@ -143,6 +138,12 @@ export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
private renderEntity(entityConf) { private renderEntity(entityConf) {
const stateObj = this.hass!.states[entityConf.entity]; const stateObj = this.hass!.states[entityConf.entity];
if (!stateObj) {
return html`<div class="entity not-found"><div class="name">${
entityConf.entity
}</div>Entity Not Available</div>`;
}
return html` return html`
<div <div
class="entity" class="entity"