Add visibility editor

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

@@ -1,11 +1,17 @@
-import { customElement } from "lit/decorators";
+import { css, CSSResultGroup, html, nothing, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
 import { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
 import { getBadgeElementClass } from "../../create-element/create-badge-element";
 import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
 import { HuiElementEditor } from "../hui-element-editor";
+import "./hui-badge-visibility-editor";
+
+type Tab = "config" | "visibility";
 
 @customElement("hui-badge-element-editor")
 export class HuiBadgeElementEditor extends HuiElementEditor<LovelaceBadgeConfig> {
+  @state() private _curTab: Tab = "config";
+
   protected async getConfigElement(): Promise<LovelaceCardEditor | undefined> {
     const elClass = await getBadgeElementClass(this.configElementType!);
 
@@ -27,6 +33,73 @@ export class HuiBadgeElementEditor extends HuiElementEditor<LovelaceBadgeConfig>
 
     return undefined;
   }
+
+  private _handleTabSelected(ev: CustomEvent): void {
+    if (!ev.detail.value) {
+      return;
+    }
+    this._curTab = ev.detail.value.id;
+  }
+
+  private _configChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    this.value = ev.detail.value;
+  }
+
+  protected renderConfigElement(): TemplateResult {
+    const displayedTabs: Tab[] = ["config", "visibility"];
+
+    let content: TemplateResult<1> | typeof nothing = nothing;
+
+    switch (this._curTab) {
+      case "config":
+        content = html`${super.renderConfigElement()}`;
+        break;
+      case "visibility":
+        content = html`
+          <hui-badge-visibility-editor
+            .hass=${this.hass}
+            .config=${this.value}
+            @value-changed=${this._configChanged}
+          ></hui-badge-visibility-editor>
+        `;
+        break;
+    }
+    return html`
+      <paper-tabs
+        scrollable
+        hide-scroll-buttons
+        .selected=${displayedTabs.indexOf(this._curTab)}
+        @selected-item-changed=${this._handleTabSelected}
+      >
+        ${displayedTabs.map(
+          (tab, index) => html`
+            <paper-tab id=${tab} .dialogInitialFocus=${index === 0}>
+              ${this.hass.localize(
+                `ui.panel.lovelace.editor.edit_badge.tab_${tab}`
+              )}
+            </paper-tab>
+          `
+        )}
+      </paper-tabs>
+      ${content}
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      HuiElementEditor.styles,
+      css`
+        paper-tabs {
+          --paper-tabs-selection-bar-color: var(--primary-color);
+          color: var(--primary-text-color);
+          text-transform: uppercase;
+          margin-bottom: 16px;
+          border-bottom: 1px solid var(--divider-color);
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

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

@@ -0,0 +1,59 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-alert";
+import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
+import { HomeAssistant } from "../../../../types";
+import { Condition } from "../../common/validate-condition";
+import "../conditions/ha-card-conditions-editor";
+
+@customElement("hui-badge-visibility-editor")
+export class HuiCardVisibilityEditor extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public config!: LovelaceCardConfig;
+
+  render() {
+    const conditions = this.config.visibility ?? [];
+    return html`
+      <p class="intro">
+        ${this.hass.localize(
+          `ui.panel.lovelace.editor.edit_badge.visibility.explanation`
+        )}
+      </p>
+      <ha-card-conditions-editor
+        .hass=${this.hass}
+        .conditions=${conditions}
+        @value-changed=${this._valueChanged}
+      >
+      </ha-card-conditions-editor>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    const conditions = ev.detail.value as Condition[];
+    const newConfig: LovelaceCardConfig = {
+      ...this.config,
+      visibility: conditions,
+    };
+    if (newConfig.visibility?.length === 0) {
+      delete newConfig.visibility;
+    }
+    fireEvent(this, "value-changed", { value: newConfig });
+  }
+
+  static styles = css`
+    .intro {
+      margin: 0;
+      color: var(--secondary-text-color);
+      margin-bottom: 8px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-badge-visibility-editor": HuiCardVisibilityEditor;
+  }
+}

src/translations/en.json

@@ -5577,7 +5577,12 @@
             "delete": "[%key:ui::panel::lovelace::editor::edit_card::delete%]",
             "copy": "[%key:ui::panel::lovelace::editor::edit_card::copy%]",
             "cut": "[%key:ui::panel::lovelace::editor::edit_card::cut%]",
-            "duplicate": "[%key:ui::panel::lovelace::editor::edit_card::duplicate%]"
+            "duplicate": "[%key:ui::panel::lovelace::editor::edit_card::duplicate%]",
+            "tab_config": "Config",
+            "tab_visibility": "Visibility",
+            "visibility": {
+              "explanation": "The badge will be shown when ALL conditions below are fulfilled. If no conditions are set, the badge will always be shown."
+            }
           },
           "move_card": {
             "header": "Choose a view to move the card to",