diff --git a/src/panels/lovelace/cards/hui-empty-state-card.ts b/src/panels/lovelace/cards/hui-empty-state-card.ts new file mode 100644 index 0000000000..aedc6773da --- /dev/null +++ b/src/panels/lovelace/cards/hui-empty-state-card.ts @@ -0,0 +1,89 @@ +import { + html, + LitElement, + PropertyDeclarations, + TemplateResult, + CSSResult, + css, +} from "lit-element"; + +import "@polymer/paper-card/paper-card"; + +import { LovelaceCard } from "../types"; +import { LovelaceCardConfig } from "../../../data/lovelace"; +import { HomeAssistant } from "../../../types"; + +export interface Config extends LovelaceCardConfig { + content: string; + title?: string; +} + +export class HuiEmptyStateCard extends LitElement implements LovelaceCard { + public hass?: HomeAssistant; + + public getCardSize(): number { + return 2; + } + + public setConfig(_config: Config): void { + // tslint:disable-next-line + } + + static get properties(): PropertyDeclarations { + return { + hass: {}, + }; + } + + protected render(): TemplateResult | void { + if (!this.hass) { + return html``; + } + + return html` + +
+ ${this.hass.localize( + "ui.panel.lovelace.cards.empty_state.no_devices" + )} +
+
+ + + ${this.hass.localize( + "ui.panel.lovelace.cards.empty_state.go_to_integrations_page" + )} + + +
+
+ `; + } + + static get styles(): CSSResult { + return css` + .content { + margin-top: -1em; + padding: 16px; + } + + paper-button { + margin-left: -8px; + font-weight: 500; + color: var(--primary-color); + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-empty-state-card": HuiEmptyStateCard; + } +} + +customElements.define("hui-empty-state-card", HuiEmptyStateCard); diff --git a/src/panels/lovelace/common/generate-lovelace-config.ts b/src/panels/lovelace/common/generate-lovelace-config.ts index 72a2ccced5..1065772b36 100644 --- a/src/panels/lovelace/common/generate-lovelace-config.ts +++ b/src/panels/lovelace/common/generate-lovelace-config.ts @@ -282,6 +282,14 @@ export const generateLovelaceConfig = ( }); } + // User has no entities + if (views.length === 1 && views[0].cards!.length === 0) { + import("../cards/hui-empty-state-card"); + views[0].cards!.push({ + type: "custom:hui-empty-state-card", + }); + } + return { title, views, diff --git a/src/translations/en.json b/src/translations/en.json index e68170bbd9..c9a7cb4a8a 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -807,6 +807,11 @@ }, "lovelace": { "cards": { + "empty_state": { + "title": "Welcome Home", + "no_devices": "This page allows you to control your devices, however it looks like you have no devices set up yet. Head to the integrations page to get started.", + "go_to_integrations_page": "Go to the integrations page." + }, "shopping-list": { "checked_items": "Checked items", "clear_items": "Clear checked items",