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

Markdown Card: Fix not rendering on initial load (#5864)

Browse Source
This commit is contained in:
Zack Arnett 2020-05-14 12:13:06 -04:00 committed by GitHub
parent 4c43ae7b2f
commit 2aa1eb97fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 60 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/panels/lovelace/cards/hui-markdown-card.ts
View File

@ -14,9 +14,9 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-markdown"; import "../../../components/ha-markdown";
import { subscribeRenderTemplate } from "../../../data/ws-templates"; import { subscribeRenderTemplate } from "../../../data/ws-templates";
import { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import { LovelaceCard, LovelaceCardEditor } from "../types"; import type { LovelaceCard, LovelaceCardEditor } from "../types";
import { MarkdownCardConfig } from "./types"; import type { MarkdownCardConfig } from "./types";
@customElement("hui-markdown-card") @customElement("hui-markdown-card")
export class HuiMarkdownCard extends LitElement implements LovelaceCard { export class HuiMarkdownCard extends LitElement implements LovelaceCard {
@ -35,14 +35,14 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
}; };
} }
@property() public hass?: HomeAssistant;
@property() private _config?: MarkdownCardConfig; @property() private _config?: MarkdownCardConfig;
@property() private _content?: string = ""; @property() private _content = "";
@property() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>; @property() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
@property() private _hass?: HomeAssistant;
public getCardSize(): number { public getCardSize(): number {
return this._config === undefined return this._config === undefined
? 3 ? 3
@ -56,21 +56,19 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
throw new Error("Invalid Configuration: Content Required"); throw new Error("Invalid Configuration: Content Required");
} }
if (this._config?.content !== config.content) {
this._tryDisconnect();
}
this._config = config; this._config = config;
this._disconnect().then(() => { }
if (this._hass) {
this._connect(); public connectedCallback() {
} super.connectedCallback();
}); this._tryConnect();
} }
public disconnectedCallback() { public disconnectedCallback() {
this._disconnect(); this._tryDisconnect();
}
public set hass(hass) {
this._hass = hass;
this._connect();
} }
protected render(): TemplateResult { protected render(): TemplateResult {
@ -93,9 +91,12 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
protected updated(changedProps: PropertyValues): void { protected updated(changedProps: PropertyValues): void {
super.updated(changedProps); super.updated(changedProps);
if (!this._config || !this._hass) { if (!this._config || !this.hass) {
return; return;
} }
this._tryConnect();
const oldHass = changedProps.get("hass") as HomeAssistant | undefined; const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
const oldConfig = changedProps.get("_config") as const oldConfig = changedProps.get("_config") as
| MarkdownCardConfig | MarkdownCardConfig
@ -107,45 +108,53 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
oldHass.themes !== this.hass.themes || oldHass.themes !== this.hass.themes ||
oldConfig.theme !== this._config.theme oldConfig.theme !== this._config.theme
) { ) {
applyThemesOnElement(this, this._hass.themes, this._config.theme); applyThemesOnElement(this, this.hass.themes, this._config.theme);
} }
} }
private async _connect() { private async _tryConnect(): Promise<void> {
if (!this._unsubRenderTemplate && this._hass && this._config) { if (
this._unsubRenderTemplate = subscribeRenderTemplate( this._unsubRenderTemplate !== undefined ||
this._hass.connection, !this.hass ||
(result) => { !this._config
this._content = result; ) {
return;
}
this._unsubRenderTemplate = subscribeRenderTemplate(
this.hass.connection,
(result) => {
this._content = result;
},
{
template: this._config.content,
entity_ids: this._config.entity_id,
variables: {
config: this._config,
user: this.hass.user!.name,
}, },
{ }
template: this._config.content, );
entity_ids: this._config.entity_id, this._unsubRenderTemplate.catch(() => {
variables: { this._content = this._config!.content;
config: this._config, this._unsubRenderTemplate = undefined;
user: this._hass.user!.name, });
},
}
);
this._unsubRenderTemplate.catch(() => {
this._content = this._config!.content;
this._unsubRenderTemplate = undefined;
});
}
} }
private async _disconnect() { private async _tryDisconnect(): Promise<void> {
if (this._unsubRenderTemplate) { if (!this._unsubRenderTemplate) {
try { return;
const unsub = await this._unsubRenderTemplate; }
this._unsubRenderTemplate = undefined;
await unsub(); try {
} catch (e) { const unsub = await this._unsubRenderTemplate;
if (e.code === "not_found") { this._unsubRenderTemplate = undefined;
// If we get here, the connection was probably already closed. Ignore. unsub();
} else { } catch (e) {
throw e; if (e.code === "not_found") {
} // If we get here, the connection was probably already closed. Ignore.
} else {
throw e;
} }
} }
} }