From db4aa05bf4a314e858aa9a80980e1f86552299f3 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Fri, 3 Dec 2021 17:21:26 +0100 Subject: [PATCH] Differentiate between assigned and targeting scene/automations/script (#10781) --- .../config/areas/ha-config-area-page.ts | 299 +++++++++++------- .../config/areas/ha-config-areas-dashboard.ts | 9 +- 2 files changed, 191 insertions(+), 117 deletions(-) diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts index a1a46886db..d81440ccc9 100644 --- a/src/panels/config/areas/ha-config-area-page.ts +++ b/src/panels/config/areas/ha-config-area-page.ts @@ -35,6 +35,10 @@ import { loadAreaRegistryDetailDialog, showAreaRegistryDetailDialog, } from "./show-dialog-area-registry-detail"; +import { computeDomain } from "../../../common/entity/compute_domain"; +import { SceneEntity } from "../../../data/scene"; +import { ScriptEntity } from "../../../data/script"; +import { AutomationEntity } from "../../../data/automation"; @customElement("ha-config-area-page") class HaConfigAreaPage extends LitElement { @@ -131,6 +135,16 @@ class HaConfigAreaPage extends LitElement { this.entities ); + const sceneEntities = entities.filter( + (entity) => computeDomain(entity.entity_id) === "scene" + ); + const scriptEntities = entities.filter( + (entity) => computeDomain(entity.entity_id) === "script" + ); + const automationEntities = entities.filter( + (entity) => computeDomain(entity.entity_id) === "automation" + ); + return html` ${entities.length - ? entities.map( - (entity) => - html` - - - ${computeEntityRegistryName(this.hass, entity)} - - - - ` + ? entities.map((entity) => + ["scene", "script", "automation"].includes( + computeDomain(entity.entity_id) + ) + ? "" + : html` + + + ${computeEntityRegistryName(this.hass, entity)} + + + + ` ) : html` ${this._related?.automation?.length - ? this._related.automation.map((automation) => { - const entityState = this.hass.states[automation]; - return entityState - ? html` -
- - - - ${computeStateName(entityState)} - - - - - ${!entityState.attributes.id - ? html` - - ${this.hass.localize( - "ui.panel.config.devices.cant_edit" - )} - - ` - : ""} -
- ` - : ""; - }) - : html` + > + ${automationEntities.length + ? html`

Assigned to this area:

+ ${automationEntities.map((entity) => { + const entityState = this.hass.states[ + entity.entity_id + ] as AutomationEntity | undefined; + return entityState + ? this._renderAutomation(entityState) + : ""; + })}` + : ""} + ${this._related?.automation?.filter( + (entityId) => + !automationEntities.find( + (entity) => entity.entity_id === entityId + ) + ).length + ? html`

Targeting this area:

+ ${this._related.automation.map((scene) => { + const entityState = this.hass.states[scene] as + | AutomationEntity + | undefined; + return entityState + ? this._renderAutomation(entityState) + : ""; + })}` + : ""} + ${!automationEntities.length && + !this._related?.automation?.length + ? html` ${this.hass.localize( "ui.panel.config.devices.automation.no_automations" )} - `} + ` + : ""} ` : ""} @@ -304,48 +317,40 @@ class HaConfigAreaPage extends LitElement { .header=${this.hass.localize( "ui.panel.config.devices.scene.scenes" )} - >${this._related?.scene?.length - ? this._related.scene.map((scene) => { - const entityState = this.hass.states[scene]; - return entityState - ? html` -
- - - - ${computeStateName(entityState)} - - - - - ${!entityState.attributes.id - ? html` - - ${this.hass.localize( - "ui.panel.config.devices.cant_edit" - )} - - ` - : ""} -
- ` - : ""; - }) - : html` + > + ${sceneEntities.length + ? html`

Assigned to this area:

+ ${sceneEntities.map((entity) => { + const entityState = + this.hass.states[entity.entity_id]; + return entityState + ? this._renderScene(entityState) + : ""; + })}` + : ""} + ${this._related?.scene?.filter( + (entityId) => + !sceneEntities.find( + (entity) => entity.entity_id === entityId + ) + ).length + ? html`

Targeting this area:

+ ${this._related.scene.map((scene) => { + const entityState = this.hass.states[scene]; + return entityState + ? this._renderScene(entityState) + : ""; + })}` + : ""} + ${!sceneEntities.length && !this._related?.scene?.length + ? html` ${this.hass.localize( "ui.panel.config.devices.scene.no_scenes" )} - `} + ` + : ""} ` : ""} @@ -355,31 +360,43 @@ class HaConfigAreaPage extends LitElement { .header=${this.hass.localize( "ui.panel.config.devices.script.scripts" )} - >${this._related?.script?.length - ? this._related.script.map((script) => { - const entityState = this.hass.states[script]; - return entityState - ? html` - - - - ${computeStateName(entityState)} - - - - - ` - : ""; - }) - : html` - - ${this.hass.localize( + > + ${scriptEntities.length + ? html`

Assigned to this area:

+ ${scriptEntities.map((entity) => { + const entityState = this.hass.states[ + entity.entity_id + ] as ScriptEntity | undefined; + return entityState + ? this._renderScript(entityState) + : ""; + })}` + : ""} + ${this._related?.script?.filter( + (entityId) => + !scriptEntities.find( + (entity) => entity.entity_id === entityId + ) + ).length + ? html`

Targeting this area:

+ ${this._related.script.map((scene) => { + const entityState = this.hass.states[scene] as + | ScriptEntity + | undefined; + return entityState + ? this._renderScript(entityState) + : ""; + })}` + : ""} + ${!scriptEntities.length && !this._related?.script?.length + ? html` + ${this.hass.localize( "ui.panel.config.devices.script.no_scripts" )} - `} + ` + : ""} ` : ""} @@ -389,6 +406,63 @@ class HaConfigAreaPage extends LitElement { `; } + private _renderScene(entityState: SceneEntity) { + return html`
+ + + ${computeStateName(entityState)} + + + + ${!entityState.attributes.id + ? html` + + ${this.hass.localize("ui.panel.config.devices.cant_edit")} + + ` + : ""} +
`; + } + + private _renderAutomation(entityState: AutomationEntity) { + return html`
+ + + ${computeStateName(entityState)} + + + + ${!entityState.attributes.id + ? html` + + ${this.hass.localize("ui.panel.config.devices.cant_edit")} + + ` + : ""} +
`; + } + + private _renderScript(entityState: ScriptEntity) { + return html` + + ${computeStateName(entityState)} + + + `; + } + private async _findRelated() { this._related = await findRelated(this.hass, "area", this.areaId); } @@ -457,6 +531,13 @@ class HaConfigAreaPage extends LitElement { align-items: center; } + h3 { + margin: 0; + padding: 0 16px; + font-weight: 500; + color: var(--secondary-text-color); + } + img { border-radius: var(--ha-card-border-radius, 4px); width: 100%; diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts index 6f47226bf9..404639a6a6 100644 --- a/src/panels/config/areas/ha-config-areas-dashboard.ts +++ b/src/panels/config/areas/ha-config-areas-dashboard.ts @@ -50,11 +50,8 @@ export class HaConfigAreasDashboard extends LitElement { let noServicesInArea = 0; let noEntitiesInArea = 0; - const devicesInArea = new Set(); - for (const device of devices) { if (device.area_id === area.area_id) { - devicesInArea.add(device.id); if (device.entry_type === "service") { noServicesInArea++; } else { @@ -64,11 +61,7 @@ export class HaConfigAreasDashboard extends LitElement { } for (const entity of entities) { - if ( - entity.area_id - ? entity.area_id === area.area_id - : devicesInArea.has(entity.device_id) - ) { + if (entity.area_id === area.area_id) { noEntitiesInArea++; } }