View Editor: Badge Preview

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

@@ -0,0 +1,95 @@
+import { HomeAssistant } from "../../../types";
+import { LovelaceBadgeConfig } from "../../../data/lovelace";
+import { ConfigError } from "./types";
+import { computeRTL } from "../../../common/util/compute_rtl";
+import { LovelaceBadge } from "../types";
+import { createBadgeElement } from "../create-element/create-badge-element";
+import { createErrorBadgeConfig } from "../badges/hui-error-badge";
+
+import "../../../components/entity/ha-state-label-badge";
+
+export class HuiBadgePreview extends HTMLElement {
+  private _hass?: HomeAssistant;
+  private _element?: LovelaceBadge;
+  private _config?: LovelaceBadgeConfig;
+
+  private get _error() {
+    return this._element?.tagName === "HUI-ERROR-CARD";
+  }
+
+  constructor() {
+    super();
+    this.addEventListener("ll-rebuild", () => {
+      this._cleanup();
+      if (this._config) {
+        this.config = this._config;
+      }
+    });
+  }
+
+  set hass(hass: HomeAssistant) {
+    if (!this._hass || this._hass.language !== hass.language) {
+      this.style.direction = computeRTL(hass) ? "rtl" : "ltr";
+    }
+
+    this._hass = hass;
+    if (this._element) {
+      this._element.hass = hass;
+    }
+  }
+
+  set error(error: ConfigError) {
+    this._createBadge(
+      createErrorBadgeConfig(`${error.type}: ${error.message}`)
+    );
+  }
+
+  set config(configValue: LovelaceBadgeConfig) {
+    const curConfig = this._config;
+    this._config = configValue;
+
+    if (!configValue) {
+      this._cleanup();
+      return;
+    }
+
+    if (!this._element) {
+      this._createBadge(configValue);
+      return;
+    }
+
+    // in case the element was an error element we always want to recreate it
+    if (!this._error && curConfig && configValue.type === curConfig.type) {
+      this._element.setConfig(configValue);
+    } else {
+      this._createBadge(configValue);
+    }
+  }
+
+  private _createBadge(configValue: LovelaceBadgeConfig): void {
+    this._cleanup();
+    this._element = createBadgeElement(configValue);
+
+    if (this._hass) {
+      this._element!.hass = this._hass;
+    }
+
+    this.appendChild(this._element!);
+  }
+
+  private _cleanup() {
+    if (!this._element) {
+      return;
+    }
+    this.removeChild(this._element);
+    this._element = undefined;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-badge-preview": HuiBadgePreview;
+  }
+}
+
+customElements.define("hui-badge-preview", HuiBadgePreview);

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

@@ -23,6 +23,7 @@ import { haStyleDialog } from "../../../../resources/styles";
 import "../../components/hui-entity-editor";
 import "./hui-view-editor";
 import "./hui-view-visibility-editor";
+import "../hui-badge-preview";
 import { HomeAssistant } from "../../../../types";
 import {
   LovelaceViewConfig,
@@ -123,6 +124,20 @@ export class HuiEditView extends LitElement {
         break;
       case "tab-badges":
         content = html`
+          ${this._badges?.length
+            ? html`
+                <div class="preview-badges">
+                  ${this._badges.map((badgeConfig) => {
+                    return html`
+                      <hui-badge-preview
+                        .hass=${this.hass}
+                        .config=${badgeConfig}
+                      ></hui-badge-preview>
+                    `;
+                  })}
+                </div>
+              `
+            : ""}
           <hui-entity-editor
             .hass=${this.hass}
             .entities="${this._badges}"
@@ -310,6 +325,7 @@ export class HuiEditView extends LitElement {
       return;
     }
     this._badges = processEditorEntities(ev.detail.entities);
+    this._resizeDialog();
   }
 
   private _isConfigChanged(): boolean {
@@ -372,8 +388,13 @@ export class HuiEditView extends LitElement {
           color: var(--error-color);
           border-bottom: 1px solid var(--error-color);
         }
-      </style>
-    `,
+        .preview-badges {
+          display: flex;
+          justify-content: center;
+          margin: 8px 16px;
+          flex-wrap: wrap;
+        }
+      `,
     ];
   }
 }