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

Fix entity-filter-card (#5919)

Browse Source
This commit is contained in:
Bram Kragten 2020-05-18 15:16:56 +02:00 committed by GitHub
parent 91b0bd5b5e
commit 264759ddf0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 75 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/src/configs/teachingbirds/lovelace.ts
View File

@ -63,7 +63,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
elements: [ elements: [
{ {
style: { style: {
"--mdc-icon-size": "100px", "--mdc-icon-size": "100%",
top: "50%", top: "50%",
left: "50%", left: "50%",
}, },

126
src/panels/lovelace/cards/hui-entity-filter-card.ts
View File

@ -6,26 +6,28 @@ import { createCardElement } from "../create-element/create-card-element";
import { EntityFilterEntityConfig } from "../entity-rows/types"; import { EntityFilterEntityConfig } from "../entity-rows/types";
import { LovelaceCard } from "../types"; import { LovelaceCard } from "../types";
import { EntityFilterCardConfig } from "./types"; import { EntityFilterCardConfig } from "./types";
import { property, PropertyValues, UpdatingElement } from "lit-element";
import { computeCardSize } from "../common/compute-card-size";
class EntityFilterCard extends HTMLElement implements LovelaceCard { class EntityFilterCard extends UpdatingElement implements LovelaceCard {
public isPanel?: boolean; @property() public hass?: HomeAssistant;
private _editMode = false; @property() public isPanel = false;
@property() public editMode = false;
@property() private _config?: EntityFilterCardConfig;
private _element?: LovelaceCard; private _element?: LovelaceCard;
private _config?: EntityFilterCardConfig;
private _configEntities?: EntityFilterEntityConfig[]; private _configEntities?: EntityFilterEntityConfig[];
private _baseCardConfig?: LovelaceCardConfig; private _baseCardConfig?: LovelaceCardConfig;
private _hass?: HomeAssistant;
private _oldEntities?: EntityFilterEntityConfig[]; private _oldEntities?: EntityFilterEntityConfig[];
public getCardSize(): number { public getCardSize(): number {
return this._element ? this._element.getCardSize() : 1; return this._element ? computeCardSize(this._element) : 1;
} }
public setConfig(config: EntityFilterCardConfig): void { public setConfig(config: EntityFilterCardConfig): void {
@ -45,8 +47,8 @@ class EntityFilterCard extends HTMLElement implements LovelaceCard {
throw new Error("Incorrect filter config."); throw new Error("Incorrect filter config.");
} }
this._configEntities = processConfigEntities(config.entities);
this._config = config; this._config = config;
this._configEntities = undefined;
this._baseCardConfig = { this._baseCardConfig = {
type: "entities", type: "entities",
entities: [], entities: [],
@ -59,32 +61,32 @@ class EntityFilterCard extends HTMLElement implements LovelaceCard {
} }
} }
set editMode(editMode: boolean) { protected shouldUpdate(changedProps: PropertyValues): boolean {
this._editMode = editMode; if (this._element) {
if (!this._element) { this._element.hass = this.hass;
return; this._element.editMode = this.editMode;
this._element.isPanel = this.isPanel;
} }
this._element.editMode = editMode;
if (changedProps.has("_config")) {
return true;
}
if (changedProps.has("hass")) {
return this._haveEntitiesChanged(
changedProps.get("hass") as HomeAssistant | null
);
}
return false;
} }
set hass(hass: HomeAssistant) { protected update(changedProps: PropertyValues) {
if (!hass || !this._config) { super.update(changedProps);
if (!this.hass || !this._config || !this._configEntities) {
return; return;
} }
if (!this.haveEntitiesChanged(hass)) {
this._hass = hass;
return;
}
this._hass = hass;
if (!this._configEntities) {
this._configEntities = processConfigEntities(this._config.entities);
}
const entitiesList = this._configEntities.filter((entityConf) => { const entitiesList = this._configEntities.filter((entityConf) => {
const stateObj = hass.states[entityConf.entity]; const stateObj = this.hass!.states[entityConf.entity];
if (!stateObj) { if (!stateObj) {
return false; return false;
@ -112,13 +114,13 @@ class EntityFilterCard extends HTMLElement implements LovelaceCard {
return; return;
} }
const element = this._cardElement(); if (!this._element) {
this._element = this._createCardElement({
if (!element) { ...this._baseCardConfig!,
return; entities: entitiesList,
} });
this._oldEntities = entitiesList;
if (element.tagName !== "HUI-ERROR-CARD") { } else if (this._element.tagName !== "HUI-ERROR-CARD") {
const isSame = const isSame =
this._oldEntities && this._oldEntities &&
entitiesList.length === this._oldEntities.length && entitiesList.length === this._oldEntities.length &&
@ -126,24 +128,23 @@ class EntityFilterCard extends HTMLElement implements LovelaceCard {
if (!isSame) { if (!isSame) {
this._oldEntities = entitiesList; this._oldEntities = entitiesList;
element.setConfig({ ...this._baseCardConfig!, entities: entitiesList }); this._element.setConfig({
...this._baseCardConfig!,
entities: entitiesList,
});
} }
element.isPanel = this.isPanel;
element.editMode = this._editMode;
element.hass = hass;
} }
// Attach element if it has never been attached. // Attach element if it has never been attached.
if (!this.lastChild) { if (!this.lastChild) {
this.appendChild(element); this.appendChild(this._element);
} }
this.style.display = "block"; this.style.display = "block";
} }
private haveEntitiesChanged(hass: HomeAssistant): boolean { private _haveEntitiesChanged(oldHass: HomeAssistant | null): boolean {
if (!this._hass) { if (!this.hass || !oldHass) {
return true; return true;
} }
@ -151,11 +152,12 @@ class EntityFilterCard extends HTMLElement implements LovelaceCard {
return true; return true;
} }
if (this.hass.localize !== oldHass.localize) {
return true;
}
for (const config of this._configEntities) { for (const config of this._configEntities) {
if ( if (this.hass.states[config.entity] !== oldHass.states[config.entity]) {
this._hass.states[config.entity] !== hass.states[config.entity] ||
this._hass.localize !== hass.localize
) {
return true; return true;
} }
} }
@ -163,13 +165,33 @@ class EntityFilterCard extends HTMLElement implements LovelaceCard {
return false; return false;
} }
private _cardElement(): LovelaceCard | undefined { private _createCardElement(cardConfig: LovelaceCardConfig) {
if (!this._element && this._config) { const element = createCardElement(cardConfig) as LovelaceCard;
const element = createCardElement(this._baseCardConfig!); if (this.hass) {
this._element = element; element.hass = this.hass;
} }
element.isPanel = this.isPanel;
element.editMode = this.editMode;
element.addEventListener(
"ll-rebuild",
(ev) => {
ev.stopPropagation();
this._rebuildCard(element, cardConfig);
},
{ once: true }
);
return element;
}
return this._element; private _rebuildCard(
cardElToReplace: LovelaceCard,
config: LovelaceCardConfig
): void {
const newCardEl = this._createCardElement(config);
if (cardElToReplace.parentElement) {
cardElToReplace.parentElement!.replaceChild(newCardEl, cardElToReplace);
}
this._element = newCardEl;
} }
} }
customElements.define("hui-entity-filter-card", EntityFilterCard); customElements.define("hui-entity-filter-card", EntityFilterCard);