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/components/hui-card-options.ts

@@ -3,6 +3,7 @@ import "@polymer/paper-button/paper-button";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { showEditCardDialog } from "../editor/hui-dialog-edit-card";
 
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { confDeleteCard } from "../editor/delete-card";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
@@ -19,7 +20,7 @@ declare global {
   }
 }
 
-export class HuiCardOptions extends LitElement {
+export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
   public cardConfig?: LovelaceCardConfig;
   protected hass?: HomeAssistant;
 
@@ -50,8 +51,14 @@ export class HuiCardOptions extends LitElement {
       <slot></slot>
       <div>
         <paper-button class="warning" @click="${this._deleteCard}"
-          >DELETE</paper-button
-        ><paper-button @click="${this._editCard}">EDIT</paper-button>
+          >${
+            this.localize("ui.panel.lovelace.editor.edit_card.delete")
+          }</paper-button
+        ><paper-button @click="${this._editCard}"
+          >${
+            this.localize("ui.panel.lovelace.editor.edit_card.edit")
+          }</paper-button
+        >
       </div>
     `;
   }

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

@@ -10,7 +10,7 @@ export async function confDeleteCard(
     return;
   }
   try {
-    await deleteCard(hass, cardId);
+    await deleteCard(hass, String(cardId));
     reloadLovelace();
   } catch (err) {
     alert(`Deleting failed: ${err.message}`);

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, String(viewId));
+    reloadLovelace();
+  } catch (err) {
+    alert(`Deleting failed: ${err.message}`);
+  }
+}

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

@@ -7,6 +7,8 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import { getCardElementTag } from "../common/get-card-element-tag";
 import { CardPickTarget } from "./types";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+
 import { uid } from "../../../common/util/uid";
 
 declare global {
@@ -44,13 +46,13 @@ const cards = [
   { name: "Weather Forecast", type: "weather-forecast" },
 ];
 
-export class HuiCardPicker extends LitElement {
+export class HuiCardPicker extends hassLocalizeLitMixin(LitElement) {
   protected hass?: HomeAssistant;
 
   protected render(): TemplateResult {
     return html`
       ${this.renderStyle()}
-      <h3>Pick the card you want to add:</h3>
+      <h3>${this.localize("ui.panel.lovelace.editor.edit_card.pick_card")}</h3>
       <div class="cards-container">
         ${
           cards.map((card) => {

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

@@ -0,0 +1,101 @@
+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}"
+        .reloadLovelace="${this._params.reloadLovelace}"
+      >
+      </hui-edit-view>
+    `;
+  }
+}
+
+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") &&
@@ -170,7 +169,7 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
     return html`
       ${this.renderStyle()}
       <paper-dialog with-backdrop>
-        <h2>${this.localize("ui.panel.lovelace.editor.edit.header")}</h2>
+        <h2>${this.localize("ui.panel.lovelace.editor.edit_card.header")}</h2>
         <paper-spinner
           ?active="${this._loading}"
           alt="Loading"
@@ -200,7 +199,7 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
                     @click="${this._toggleEditor}"
                     >${
                       this.localize(
-                        "ui.panel.lovelace.editor.edit.toggle_editor"
+                        "ui.panel.lovelace.editor.edit_card.toggle_editor"
                       )
                     }</paper-button
                   >
@@ -216,9 +215,7 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
                       ?active="${this._saving}"
                       alt="Saving"
                     ></paper-spinner>
-                    ${
-                      this.localize("ui.panel.lovelace.editor.edit.save")
-                    }</paper-button
+                    ${this.localize("ui.common.save")}</paper-button
                   >
                 </div>
               `
@@ -331,6 +328,7 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
           this._configValue!.format
         );
       }
+      fireEvent(this, "reload-lovelace");
       this._closeDialog();
       this._saveDone();
     } catch (err) {