+
+ ${entities.length
+ ? html`
+
+ `
+ : html`
+
+ No entities in this section, it will not be displayed.
+
+ `}
+
+ `;
+ })}
+ `;
+ }
+
const value = this._config.areas_display;
return html`
@@ -35,13 +97,25 @@ export class HuiAreasDashboardStrategyEditor
.label=${this.hass.localize(
"ui.panel.lovelace.editor.strategy.areas.areas_display"
)}
- @value-changed=${this._areaDisplayChanged}
+ @value-changed=${this._areasDisplayChanged}
expanded
+ show-navigation-button
+ @item-display-navigate-clicked=${this._handleAreaNavigate}
>
`;
}
- private _areaDisplayChanged(ev: CustomEvent): void {
+ private _back(): void {
+ if (this._area) {
+ this._area = undefined;
+ }
+ }
+
+ private _handleAreaNavigate(ev: CustomEvent): void {
+ this._area = ev.detail.value;
+ }
+
+ private _areasDisplayChanged(ev: CustomEvent): void {
const value = ev.detail.value as AreasDisplayValue;
const newConfig: AreasDashboardStrategyConfig = {
...this._config!,
@@ -50,6 +124,45 @@ export class HuiAreasDashboardStrategyEditor
fireEvent(this, "config-changed", { config: newConfig });
}
+
+ private _entitiesDisplayChanged(ev: CustomEvent): void {
+ const value = ev.detail.value as AreasDisplayValue;
+
+ const { group, area } = ev.currentTarget as unknown as {
+ group: AreaStrategyGroup;
+ area: string;
+ };
+
+ const newConfig: AreasDashboardStrategyConfig = {
+ ...this._config!,
+ areas_options: {
+ ...this._config!.areas_options,
+ [area]: {
+ ...this._config!.areas_options?.[area],
+ groups_options: {
+ ...this._config!.areas_options?.[area]?.groups_options,
+ [group]: value,
+ },
+ },
+ },
+ };
+
+ fireEvent(this, "config-changed", { config: newConfig });
+ }
+
+ static get styles() {
+ return [
+ css`
+ .toolbar {
+ display: flex;
+ align-items: center;
+ }
+ ha-expansion-panel {
+ margin-bottom: 8px;
+ }
+ `,
+ ];
+ }
}
declare global {
diff --git a/src/panels/lovelace/strategies/areas/helpers/area-strategy-helper.ts b/src/panels/lovelace/strategies/areas/helpers/area-strategy-helper.ts
new file mode 100644
index 0000000000..ad560773c6
--- /dev/null
+++ b/src/panels/lovelace/strategies/areas/helpers/area-strategy-helper.ts
@@ -0,0 +1,149 @@
+import type { EntityFilterFunc } from "../../../../../common/entity/entity_filter";
+import { generateEntityFilter } from "../../../../../common/entity/entity_filter";
+import { orderCompare } from "../../../../../common/string/compare";
+import type { HomeAssistant } from "../../../../../types";
+
+export const AREA_STRATEGY_GROUPS = [
+ "lights",
+ "climate",
+ "media_players",
+ "security",
+] as const;
+
+export const AREA_STRATEGY_GROUP_ICONS = {
+ lights: "mdi:lightbulb",
+ climate: "mdi:home-thermometer",
+ media_players: "mdi:multimedia",
+ security: "mdi:security",
+};
+
+// Todo be replace by translation when validated
+export const AREA_STRATEGY_GROUP_LABELS = {
+ lights: "Lights",
+ climate: "Climate",
+ media_players: "Entertainment",
+ security: "Security",
+};
+
+export type AreaStrategyGroup = (typeof AREA_STRATEGY_GROUPS)[number];
+
+type AreaEntitiesByGroup = Record