Add sections dialog

src/panels/lovelace/card-features/hui-area-controls-card-feature.ts

@@ -5,11 +5,9 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../../common/array/ensure-array";
+import { computeAreaName } from "../../../common/entity/compute_area_name";
 import { generateEntityFilter } from "../../../common/entity/entity_filter";
-import {
+import { computeGroupEntitiesState } from "../../../common/entity/group_entities";
-  computeGroupEntitiesState,
-  toggleGroupEntities,
-} from "../../../common/entity/group_entities";
 import { stateActive } from "../../../common/entity/state_active";
 import { domainColorProperties } from "../../../common/entity/state_color";
 import "../../../components/ha-control-button";
@@ -17,10 +15,13 @@ import "../../../components/ha-control-button-group";
 import "../../../components/ha-domain-icon";
 import "../../../components/ha-svg-icon";
 import type { AreaRegistryEntry } from "../../../data/area_registry";
-import { forwardHaptic } from "../../../data/haptics";
+import { domainIcon } from "../../../data/icons";
+import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
 import { computeCssVariable } from "../../../resources/css-variables";
 import type { HomeAssistant } from "../../../types";
 import type { AreaCardFeatureContext } from "../cards/hui-area-card";
+import type { ButtonCardConfig, TileCardConfig } from "../cards/types";
+import { showDashboardDialog } from "../dialogs/show-dashboard-dialog";
 import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
 import { cardFeatureStyles } from "./common/card-feature-styles";
 import type {
@@ -160,9 +161,7 @@ class HuiAreaControlsCardFeature
     this._config = config;
   }
 
-  private _handleButtonTap(ev: MouseEvent) {
+  private async _handleButtonTap(ev: MouseEvent) {
-    ev.stopPropagation();
-
     if (!this.context?.area_id || !this.hass || !this._config) {
       return;
     }
@@ -182,8 +181,94 @@ class HuiAreaControlsCardFeature
       .map((entityId) => this.hass!.states[entityId] as HassEntity | undefined)
       .filter((v): v is HassEntity => Boolean(v));
 
-    forwardHaptic("light");
+    const controlButton = AREA_CONTROLS_BUTTONS[control];
-    toggleGroupEntities(this.hass, entities);
+    const onIcon =
+      controlButton.onIcon ||
+      (await domainIcon(
+        this.hass!,
+        controlButton.filter.domain,
+        controlButton.filter.device_class,
+        "off"
+      ));
+    const offIcon =
+      controlButton.offIcon ||
+      (await domainIcon(
+        this.hass!,
+        controlButton.filter.domain,
+        controlButton.filter.device_class,
+        "on"
+      ));
+
+    const sectionConfig: LovelaceSectionConfig = {
+      type: "grid",
+      cards: [
+        {
+          type: "heading",
+          heading: "Controls",
+          heading_style: "subtitle",
+        },
+        ...entities.map<TileCardConfig>((entity) => ({
+          type: "tile",
+          entity: entity.entity_id,
+          features_position: "inline",
+          features: [
+            {
+              type: "light-brightness",
+            },
+          ],
+        })),
+        {
+          type: "heading",
+          heading: "Actions",
+          heading_style: "subtitle",
+        },
+        {
+          type: "button",
+          icon: offIcon,
+          icon_height: "24px",
+          name: "Turn all off",
+          tap_action: {
+            action: "perform-action",
+            target: {
+              entity_id: entitiesIds,
+            },
+            perform_action: "light.turn_off",
+          },
+          grid_options: {
+            min_rows: 1,
+            rows: 1,
+            columns: 6,
+          },
+        } as ButtonCardConfig,
+        {
+          type: "button",
+          icon: onIcon,
+          icon_height: "24px",
+          name: "Turn all on",
+          tap_action: {
+            action: "perform-action",
+            target: {
+              entity_id: entitiesIds,
+            },
+            perform_action: "light.turn_on",
+          },
+          grid_options: {
+            min_rows: 1,
+            rows: 1,
+            columns: 6,
+          },
+        } as ButtonCardConfig,
+      ],
+    };
+
+    showDashboardDialog(this, {
+      sections: [sectionConfig],
+      title: computeAreaName(this._area!) || "",
+      subtitle: control,
+    });
+
+    // forwardHaptic("light");
+    // toggleGroupEntities(this.hass, entities);
   }
 
   private _controlEntities = memoizeOne(

src/panels/lovelace/dialogs/hui-dialog-dashboard.ts

@@ -0,0 +1,85 @@
+import { mdiClose } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-dialog";
+import "../../../components/ha-dialog-header";
+import "../../../components/ha-header-bar";
+import { haStyleDialog } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
+import "../sections/hui-section";
+import type { DashboardDialogParams } from "./show-dashboard-dialog";
+import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
+
+@customElement("hui-dialog-dashboard")
+class HuiDashboardDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: DashboardDialogParams;
+
+  public async showDialog(params: DashboardDialogParams): Promise<void> {
+    this._params = params;
+  }
+
+  public async closeDialog(): Promise<void> {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${this._params.title}
+        hideActions
+        flexContent
+      >
+        <ha-dialog-header slot="heading">
+          <ha-icon-button
+            slot="navigationIcon"
+            dialogAction="cancel"
+            .label=${this.hass.localize("ui.common.close")}
+            .path=${mdiClose}
+          ></ha-icon-button>
+          <span slot="title">${this._params.title}</span>
+          ${this._params.subtitle
+            ? html`<span slot="subtitle">${this._params.subtitle}</span>`
+            : nothing}
+        </ha-dialog-header>
+        <div class="content">
+          ${repeat(
+            this._params.sections,
+            (section) => section,
+            (section: LovelaceSectionConfig) => html`
+              <hui-section .config=${section} .hass=${this.hass}></hui-section>
+            `
+          )}
+        </div>
+      </ha-dialog>
+    `;
+  }
+
+  static styles = [
+    haStyleDialog,
+    css`
+      ha-dialog {
+        --dialog-content-padding: 0;
+      }
+      .content {
+        padding: 0 16px 16px 16px;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-dialog-dashboard": HuiDashboardDialog;
+  }
+}

src/panels/lovelace/dialogs/show-dashboard-dialog.ts

@@ -0,0 +1,19 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
+
+export interface DashboardDialogParams {
+  sections: LovelaceSectionConfig[];
+  title: string;
+  subtitle?: string;
+}
+
+export const showDashboardDialog = (
+  element: HTMLElement,
+  dialogParams: DashboardDialogParams
+) => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "hui-dialog-dashboard",
+    dialogImport: () => import("./hui-dialog-dashboard"),
+    dialogParams: dialogParams,
+  });
+};