Add card functionality

src/data/lovelace.ts

@@ -71,3 +71,16 @@ export const deleteCard = (
     type: "lovelace/config/card/delete",
     card_id: cardId,
   });
+
+export const addCard = (
+  hass: HomeAssistant,
+  viewId: string,
+  config: LovelaceCardConfig | string,
+  configFormat: "json" | "yaml"
+): Promise<void> =>
+  hass.callWS({
+    type: "lovelace/config/card/add",
+    view_id: viewId,
+    card_config: config,
+    format: configFormat,
+  });

src/panels/lovelace/cards/hui-entities-card.ts

@@ -43,6 +43,11 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
     await import("../editor/config-elements/hui-entities-card-editor");
     return document.createElement("hui-entities-card-editor");
   }
+
+  public static getStubConfig(hass: HomeAssistant): LovelaceCardConfig {
+    return { type: "entities", entities: [] };
+  }
+
   protected _hass?: HomeAssistant;
   protected _config?: Config;
   protected _configEntities?: ConfigEntity[];

src/panels/lovelace/cards/hui-glance-card.ts

@@ -47,6 +47,9 @@ export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement)
     await import("../editor/config-elements/hui-glance-card-editor");
     return document.createElement("hui-glance-card-editor");
   }
+  public static getStubConfig(hass: HomeAssistant): LovelaceCardConfig {
+    return { type: "glance", entities: [] };
+  }
 
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/common/get-element-tag.ts

@@ -0,0 +1,7 @@
+const CUSTOM_TYPE_PREFIX = "custom:";
+
+export function getElementTag(type: string): string {
+  return type.startsWith(CUSTOM_TYPE_PREFIX)
+    ? type.substr(CUSTOM_TYPE_PREFIX.length)
+    : `hui-${type}-card`;
+}

src/panels/lovelace/components/hui-card-options.ts

@@ -1,10 +1,7 @@
 import "@polymer/paper-button/paper-button";
 import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
 import { fireEvent } from "../../../common/dom/fire_event";
-import {
-  showEditCardDialog,
-  registerEditCardDialog,
-} from "../editor/hui-dialog-edit-card";
+import { showEditCardDialog } from "../editor/hui-dialog-edit-card";
 
 import { confDeleteCard } from "../editor/delete-card";
 import { HomeAssistant } from "../../../types";
@@ -14,14 +11,13 @@ declare global {
   // for fire event
   interface HASSDomEvents {
     "show-edit-card": {
-      cardConfig: LovelaceCardConfig;
+      cardConfig?: LovelaceCardConfig;
+      viewId?: string | number;
       reloadLovelace: () => void;
     };
   }
 }
 
-let registeredDialog = false;
-
 export class HuiCardOptions extends LitElement {
   public cardConfig?: LovelaceCardConfig;
   protected hass?: HomeAssistant;
@@ -30,14 +26,6 @@ export class HuiCardOptions extends LitElement {
     return { hass: {} };
   }
 
-  public connectedCallback() {
-    super.connectedCallback();
-    if (!registeredDialog) {
-      registeredDialog = true;
-      registerEditCardDialog(this);
-    }
-  }
-
   protected render() {
     return html`
       <style>

src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts

@@ -21,6 +21,7 @@ import "../../components/hui-theme-select-editor";
 import "../../components/hui-entity-editor";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon";
+import { LovelaceCardConfig } from "../../../../data/lovelace";
 
 const entitiesConfigStruct = struct.union([
   {
@@ -42,10 +43,6 @@ const cardConfigStruct = struct({
 
 export class HuiEntitiesCardEditor extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
-  private _config?: Config;
-  private _configEntities?: ConfigEntity[];
-
   static get properties(): PropertyDeclarations {
     return { hass: {}, _config: {}, _configEntities: {} };
   }
@@ -58,6 +55,10 @@ export class HuiEntitiesCardEditor extends hassLocalizeLitMixin(LitElement)
     return this._config!.theme || "Backend-selected";
   }
 
+  public hass?: HomeAssistant;
+  private _config?: Config;
+  private _configEntities?: ConfigEntity[];
+
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
 

src/panels/lovelace/editor/hui-card-picker.ts

@@ -0,0 +1,82 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-button/paper-button";
+
+import { HomeAssistant } from "../../../types";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { LovelaceCardConfig } from "../../../data/lovelace";
+import { getElementTag } from "../common/get-element-tag";
+import { CardPickTarget } from "./types";
+
+const cards = [
+  { name: "Alarm panel", type: "alarm-panel" },
+  { name: "Entities", type: "entities" },
+  { name: "Glance", type: "glance" },
+];
+
+function s4() {
+  return Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+}
+
+function uid() {
+  return s4() + s4() + s4() + s4() + s4();
+}
+export class HuiCardPicker extends LitElement {
+  protected hass?: HomeAssistant;
+
+  protected render(): TemplateResult {
+    return html`
+      ${this.renderStyle()}
+      ${
+        cards.map((card) => {
+          return html`
+            <paper-button
+              elevated
+              @click="${this._cardPicked}"
+              .type="${card.type}"
+              >${card.name}</paper-button
+            >
+          `;
+        })
+      }
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+        }
+        paper-button {
+        }
+      </style>
+    `;
+  }
+
+  private _cardPicked(ev: Event): void {
+    const type = (ev.currentTarget! as CardPickTarget).type;
+    const tag = getElementTag(type);
+
+    const elClass = customElements.get(tag);
+    let config: LovelaceCardConfig = { type, id: uid() };
+
+    try {
+      const cardConfig = elClass.getStubConfig(this.hass);
+      config = { ...config, ...cardConfig };
+    } finally {
+      fireEvent(this, "card-picked", {
+        config,
+      });
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-card-picker": HuiCardPicker;
+  }
+}
+
+customElements.define("hui-card-picker", HuiCardPicker);

src/panels/lovelace/editor/hui-card-preview.ts

@@ -6,8 +6,7 @@ import { HomeAssistant } from "../../../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import { LovelaceCard } from "../types";
 import { ConfigError } from "./types";
-
-const CUSTOM_TYPE_PREFIX = "custom:";
+import { getElementTag } from "../common/get-element-tag";
 
 export class HuiCardPreview extends HTMLElement {
   private _hass?: HomeAssistant;
@@ -39,9 +38,7 @@ export class HuiCardPreview extends HTMLElement {
       return;
     }
 
-    const tag = configValue.type.startsWith(CUSTOM_TYPE_PREFIX)
-      ? configValue.type.substr(CUSTOM_TYPE_PREFIX.length)
-      : `hui-${configValue.type}-card`;
+    const tag = getElementTag(configValue.type);
 
     if (tag.toUpperCase() === this._element.tagName) {
       this._element.setConfig(configValue);

src/panels/lovelace/editor/hui-dialog-edit-card.ts

@@ -23,7 +23,8 @@ const dialogShowEvent = "show-edit-card";
 const dialogTag = "hui-dialog-edit-card";
 
 export interface EditCardDialogParams {
-  cardConfig: LovelaceCardConfig;
+  cardConfig?: LovelaceCardConfig;
+  viewId?: string | number;
   reloadLovelace: () => void;
 }
 
@@ -60,7 +61,10 @@ export class HuiDialogEditCard extends LitElement {
     if (!this._params) {
       return html``;
     }
-    if (!this._params.cardConfig.id) {
+    if (
+      (this._params.cardConfig && !this._params.cardConfig.id) ||
+      (!this._params.cardConfig && !this._params.viewId)
+    ) {
       return html`
         <hui-migrate-config
           .hass="${this.hass}"
@@ -70,6 +74,7 @@ export class HuiDialogEditCard extends LitElement {
     }
     return html`
       <hui-edit-card
+        .viewId="${this._params.viewId}"
         .cardConfig="${this._params.cardConfig}"
         .hass="${this.hass}"
         @reload-lovelace="${this._params.reloadLovelace}"