Differentiate between assigned and targeting scene/automations/script (#10781)

This commit is contained in:
Bram Kragten 2021-12-03 17:21:26 +01:00 committed by GitHub
parent a54a2a54f8
commit db4aa05bf4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 191 additions and 117 deletions

View File

@ -35,6 +35,10 @@ import {
loadAreaRegistryDetailDialog, loadAreaRegistryDetailDialog,
showAreaRegistryDetailDialog, showAreaRegistryDetailDialog,
} from "./show-dialog-area-registry-detail"; } 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") @customElement("ha-config-area-page")
class HaConfigAreaPage extends LitElement { class HaConfigAreaPage extends LitElement {
@ -131,6 +135,16 @@ class HaConfigAreaPage extends LitElement {
this.entities 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` return html`
<hass-tabs-subpage <hass-tabs-subpage
.hass=${this.hass} .hass=${this.hass}
@ -221,19 +235,22 @@ class HaConfigAreaPage extends LitElement {
)} )}
> >
${entities.length ${entities.length
? entities.map( ? entities.map((entity) =>
(entity) => ["scene", "script", "automation"].includes(
html` computeDomain(entity.entity_id)
<paper-item )
@click=${this._openEntity} ? ""
.entity=${entity} : html`
> <paper-item
<paper-item-body> @click=${this._openEntity}
${computeEntityRegistryName(this.hass, entity)} .entity=${entity}
</paper-item-body> >
<ha-icon-next></ha-icon-next> <paper-item-body>
</paper-item> ${computeEntityRegistryName(this.hass, entity)}
` </paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
`
) )
: html` : html`
<paper-item class="no-link" <paper-item class="no-link"
@ -251,48 +268,44 @@ class HaConfigAreaPage extends LitElement {
.header=${this.hass.localize( .header=${this.hass.localize(
"ui.panel.config.devices.automation.automations" "ui.panel.config.devices.automation.automations"
)} )}
>${this._related?.automation?.length >
? this._related.automation.map((automation) => { ${automationEntities.length
const entityState = this.hass.states[automation]; ? html`<h3>Assigned to this area:</h3>
return entityState ${automationEntities.map((entity) => {
? html` const entityState = this.hass.states[
<div> entity.entity_id
<a ] as AutomationEntity | undefined;
href=${ifDefined( return entityState
entityState.attributes.id ? this._renderAutomation(entityState)
? `/config/automation/edit/${entityState.attributes.id}` : "";
: undefined })}`
)} : ""}
> ${this._related?.automation?.filter(
<paper-item (entityId) =>
.disabled=${!entityState.attributes.id} !automationEntities.find(
> (entity) => entity.entity_id === entityId
<paper-item-body> )
${computeStateName(entityState)} ).length
</paper-item-body> ? html`<h3>Targeting this area:</h3>
<ha-icon-next></ha-icon-next> ${this._related.automation.map((scene) => {
</paper-item> const entityState = this.hass.states[scene] as
</a> | AutomationEntity
${!entityState.attributes.id | undefined;
? html` return entityState
<paper-tooltip animation-delay="0"> ? this._renderAutomation(entityState)
${this.hass.localize( : "";
"ui.panel.config.devices.cant_edit" })}`
)} : ""}
</paper-tooltip> ${!automationEntities.length &&
` !this._related?.automation?.length
: ""} ? html`
</div>
`
: "";
})
: html`
<paper-item class="no-link" <paper-item class="no-link"
>${this.hass.localize( >${this.hass.localize(
"ui.panel.config.devices.automation.no_automations" "ui.panel.config.devices.automation.no_automations"
)}</paper-item )}</paper-item
> >
`} `
: ""}
</ha-card> </ha-card>
` `
: ""} : ""}
@ -304,48 +317,40 @@ class HaConfigAreaPage extends LitElement {
.header=${this.hass.localize( .header=${this.hass.localize(
"ui.panel.config.devices.scene.scenes" "ui.panel.config.devices.scene.scenes"
)} )}
>${this._related?.scene?.length >
? this._related.scene.map((scene) => { ${sceneEntities.length
const entityState = this.hass.states[scene]; ? html`<h3>Assigned to this area:</h3>
return entityState ${sceneEntities.map((entity) => {
? html` const entityState =
<div> this.hass.states[entity.entity_id];
<a return entityState
href=${ifDefined( ? this._renderScene(entityState)
entityState.attributes.id : "";
? `/config/scene/edit/${entityState.attributes.id}` })}`
: undefined : ""}
)} ${this._related?.scene?.filter(
> (entityId) =>
<paper-item !sceneEntities.find(
.disabled=${!entityState.attributes.id} (entity) => entity.entity_id === entityId
> )
<paper-item-body> ).length
${computeStateName(entityState)} ? html`<h3>Targeting this area:</h3>
</paper-item-body> ${this._related.scene.map((scene) => {
<ha-icon-next></ha-icon-next> const entityState = this.hass.states[scene];
</paper-item> return entityState
</a> ? this._renderScene(entityState)
${!entityState.attributes.id : "";
? html` })}`
<paper-tooltip animation-delay="0"> : ""}
${this.hass.localize( ${!sceneEntities.length && !this._related?.scene?.length
"ui.panel.config.devices.cant_edit" ? html`
)}
</paper-tooltip>
`
: ""}
</div>
`
: "";
})
: html`
<paper-item class="no-link" <paper-item class="no-link"
>${this.hass.localize( >${this.hass.localize(
"ui.panel.config.devices.scene.no_scenes" "ui.panel.config.devices.scene.no_scenes"
)}</paper-item )}</paper-item
> >
`} `
: ""}
</ha-card> </ha-card>
` `
: ""} : ""}
@ -355,31 +360,43 @@ class HaConfigAreaPage extends LitElement {
.header=${this.hass.localize( .header=${this.hass.localize(
"ui.panel.config.devices.script.scripts" "ui.panel.config.devices.script.scripts"
)} )}
>${this._related?.script?.length >
? this._related.script.map((script) => { ${scriptEntities.length
const entityState = this.hass.states[script]; ? html`<h3>Assigned to this area:</h3>
return entityState ${scriptEntities.map((entity) => {
? html` const entityState = this.hass.states[
<a entity.entity_id
href=${`/config/script/edit/${entityState.entity_id}`} ] as ScriptEntity | undefined;
> return entityState
<paper-item> ? this._renderScript(entityState)
<paper-item-body> : "";
${computeStateName(entityState)} })}`
</paper-item-body> : ""}
<ha-icon-next></ha-icon-next> ${this._related?.script?.filter(
</paper-item> (entityId) =>
</a> !scriptEntities.find(
` (entity) => entity.entity_id === entityId
: ""; )
}) ).length
: html` ? html`<h3>Targeting this area:</h3>
<paper-item class="no-link"> ${this._related.script.map((scene) => {
${this.hass.localize( const entityState = this.hass.states[scene] as
| ScriptEntity
| undefined;
return entityState
? this._renderScript(entityState)
: "";
})}`
: ""}
${!scriptEntities.length && !this._related?.script?.length
? html`
<paper-item class="no-link"
>${this.hass.localize(
"ui.panel.config.devices.script.no_scripts" "ui.panel.config.devices.script.no_scripts"
)}</paper-item )}</paper-item
> >
`} `
: ""}
</ha-card> </ha-card>
` `
: ""} : ""}
@ -389,6 +406,63 @@ class HaConfigAreaPage extends LitElement {
`; `;
} }
private _renderScene(entityState: SceneEntity) {
return html`<div>
<a
href=${ifDefined(
entityState.attributes.id
? `/config/scene/edit/${entityState.attributes.id}`
: undefined
)}
>
<paper-item .disabled=${!entityState.attributes.id}>
<paper-item-body> ${computeStateName(entityState)} </paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</a>
${!entityState.attributes.id
? html`
<paper-tooltip animation-delay="0">
${this.hass.localize("ui.panel.config.devices.cant_edit")}
</paper-tooltip>
`
: ""}
</div>`;
}
private _renderAutomation(entityState: AutomationEntity) {
return html`<div>
<a
href=${ifDefined(
entityState.attributes.id
? `/config/automation/edit/${entityState.attributes.id}`
: undefined
)}
>
<paper-item .disabled=${!entityState.attributes.id}>
<paper-item-body> ${computeStateName(entityState)} </paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</a>
${!entityState.attributes.id
? html`
<paper-tooltip animation-delay="0">
${this.hass.localize("ui.panel.config.devices.cant_edit")}
</paper-tooltip>
`
: ""}
</div>`;
}
private _renderScript(entityState: ScriptEntity) {
return html`<a href=${`/config/script/edit/${entityState.entity_id}`}>
<paper-item>
<paper-item-body> ${computeStateName(entityState)} </paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</a>`;
}
private async _findRelated() { private async _findRelated() {
this._related = await findRelated(this.hass, "area", this.areaId); this._related = await findRelated(this.hass, "area", this.areaId);
} }
@ -457,6 +531,13 @@ class HaConfigAreaPage extends LitElement {
align-items: center; align-items: center;
} }
h3 {
margin: 0;
padding: 0 16px;
font-weight: 500;
color: var(--secondary-text-color);
}
img { img {
border-radius: var(--ha-card-border-radius, 4px); border-radius: var(--ha-card-border-radius, 4px);
width: 100%; width: 100%;

View File

@ -50,11 +50,8 @@ export class HaConfigAreasDashboard extends LitElement {
let noServicesInArea = 0; let noServicesInArea = 0;
let noEntitiesInArea = 0; let noEntitiesInArea = 0;
const devicesInArea = new Set();
for (const device of devices) { for (const device of devices) {
if (device.area_id === area.area_id) { if (device.area_id === area.area_id) {
devicesInArea.add(device.id);
if (device.entry_type === "service") { if (device.entry_type === "service") {
noServicesInArea++; noServicesInArea++;
} else { } else {
@ -64,11 +61,7 @@ export class HaConfigAreasDashboard extends LitElement {
} }
for (const entity of entities) { for (const entity of entities) {
if ( if (entity.area_id === area.area_id) {
entity.area_id
? entity.area_id === area.area_id
: devicesInArea.has(entity.device_id)
) {
noEntitiesInArea++; noEntitiesInArea++;
} }
} }