Add edit/add/delete view

src/data/lovelace.ts

@@ -12,6 +12,7 @@ export interface LovelaceViewConfig {
   cards?: LovelaceCardConfig[];
   id?: string;
   icon?: string;
+  theme?: string;
 }
 
 export interface LovelaceCardConfig {
@@ -84,3 +85,36 @@ export const addCard = (
     card_config: config,
     format,
   });
+
+export const updateViewConfig = (
+  hass: HomeAssistant,
+  viewId: string,
+  config: LovelaceViewConfig | string,
+  format: "json" | "yaml"
+): Promise<void> =>
+  hass.callWS({
+    type: "lovelace/config/view/update",
+    view_id: viewId,
+    view_config: config,
+    format,
+  });
+
+export const deleteView = (
+  hass: HomeAssistant,
+  viewId: string
+): Promise<void> =>
+  hass.callWS({
+    type: "lovelace/config/view/delete",
+    view_id: viewId,
+  });
+
+export const addView = (
+  hass: HomeAssistant,
+  config: LovelaceViewConfig | string,
+  format: "json" | "yaml"
+): Promise<void> =>
+  hass.callWS({
+    type: "lovelace/config/view/add",
+    view_config: config,
+    format,
+  });

src/panels/lovelace/editor/delete-view.ts

@@ -0,0 +1,18 @@
+import { deleteView } from "../../../data/lovelace";
+import { HomeAssistant } from "../../../types";
+
+export async function confDeleteView(
+  hass: HomeAssistant,
+  viewId: string,
+  reloadLovelace: () => void
+): Promise<void> {
+  if (!confirm("Are you sure you want to delete this view?")) {
+    return;
+  }
+  try {
+    await deleteView(hass, viewId);
+    reloadLovelace();
+  } catch (err) {
+    alert(`Deleting failed: ${err.message}`);
+  }
+}

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

@@ -0,0 +1,111 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import { HomeAssistant } from "../../../types";
+import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
+import { LovelaceViewConfig } from "../../../data/lovelace";
+import "./hui-edit-view";
+import "./hui-migrate-config";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "reload-lovelace": undefined;
+    "show-edit-view": EditViewDialogParams;
+  }
+  // for add event listener
+  interface HTMLElementEventMap {
+    "reload-lovelace": HASSDomEvent<undefined>;
+  }
+}
+
+let registeredDialog = false;
+const dialogShowEvent = "show-edit-view";
+const dialogTag = "hui-dialog-edit-view";
+
+export interface EditViewDialogParams {
+  viewConfig?: LovelaceViewConfig;
+  add?: boolean;
+  reloadLovelace: () => void;
+}
+
+const registerEditViewDialog = (element: HTMLElement) =>
+  fireEvent(element, "register-dialog", {
+    dialogShowEvent,
+    dialogTag,
+    dialogImport: () => import("./hui-dialog-edit-view"),
+  });
+
+export const showEditViewDialog = (
+  element: HTMLElement,
+  editViewDialogParams: EditViewDialogParams
+) => {
+  if (!registeredDialog) {
+    registeredDialog = true;
+    registerEditViewDialog(element);
+  }
+  fireEvent(element, dialogShowEvent, editViewDialogParams);
+};
+
+export class HuiDialogEditView extends LitElement {
+  protected hass?: HomeAssistant;
+  private _params?: EditViewDialogParams;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _params: {},
+    };
+  }
+
+  public async showDialog(params: EditViewDialogParams): Promise<void> {
+    this._params = params;
+    await this.updateComplete;
+    (this.shadowRoot!.children[0] as any).showDialog();
+  }
+
+  protected render(): TemplateResult {
+    if (!this._params) {
+      return html``;
+    }
+    if (
+      !this._params.add &&
+      this._params.viewConfig &&
+      !this._params.viewConfig.id
+    ) {
+      return html`
+        <hui-migrate-config
+          .hass="${this.hass}"
+          @reload-lovelace="${this._params.reloadLovelace}"
+        ></hui-migrate-config>
+      `;
+    }
+    return html`
+      <hui-edit-view
+        .hass="${this.hass}"
+        .viewConfig="${this._params.viewConfig}"
+        .add="${this._params.add}"
+        @reload-lovelace="${this._params.reloadLovelace}"
+        @cancel-edit-view="${this._cancel}"
+      >
+      </hui-edit-view>
+    `;
+  }
+
+  private _cancel() {
+    this._params = {
+      add: undefined,
+      reloadLovelace: () => {
+        return;
+      },
+    };
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-dialog-edit-view": HuiDialogEditView;
+  }
+}
+
+customElements.define(dialogTag, HuiDialogEditView);

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

@@ -14,7 +14,6 @@ import "@polymer/paper-dialog/paper-dialog";
 // tslint:disable-next-line
 import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-button/paper-button";
-import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import { HomeAssistant } from "../../../types";
 import {
@@ -108,7 +107,7 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
     this._dialog.open();
   }
 
-  protected async updated(changedProperties: PropertyValues): Promise<void> {
+  protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     if (
       !changedProperties.has("cardConfig") &&
@@ -331,6 +330,7 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
           this._configValue!.format
         );
       }
+      fireEvent(this, "reload-lovelace");
       this._closeDialog();
       this._saveDone();
     } catch (err) {