Add filtering by devices/areas to scenes (#8747)

This commit is contained in:
Bram Kragten 2021-03-30 02:09:50 +02:00 committed by GitHub
parent e7315bb570
commit fed63f645d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 73 additions and 21 deletions

View File

@ -211,6 +211,7 @@ class HaAutomationPicker extends LitElement {
.hass=${this.hass} .hass=${this.hass}
.narrow=${this.narrow} .narrow=${this.narrow}
back-path="/config" back-path="/config"
id="entity_id"
.route=${this.route} .route=${this.route}
.tabs=${configSections.automation} .tabs=${configSections.automation}
.activeFilters=${this._activeFilters} .activeFilters=${this._activeFilters}

View File

@ -1,11 +1,19 @@
import "@material/mwc-icon-button"; import "@material/mwc-icon-button";
import { mdiHelpCircle, mdiPlus } from "@mdi/js"; import {
mdiHelpCircle,
mdiInformationOutline,
mdiPencil,
mdiPencilOff,
mdiPlay,
mdiPlus,
} from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip"; import "@polymer/paper-tooltip/paper-tooltip";
import { import {
css, css,
CSSResultArray, CSSResultArray,
customElement, customElement,
html, html,
internalProperty,
LitElement, LitElement,
property, property,
TemplateResult, TemplateResult,
@ -18,8 +26,8 @@ import { stateIcon } from "../../../common/entity/state_icon";
import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table"; import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
import "../../../components/ha-fab"; import "../../../components/ha-fab";
import "../../../components/ha-icon"; import "../../../components/ha-icon";
import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/ha-button-related-filter-menu";
import { forwardHaptic } from "../../../data/haptics"; import { forwardHaptic } from "../../../data/haptics";
import { activateScene, SceneEntity } from "../../../data/scene"; import { activateScene, SceneEntity } from "../../../data/scene";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
@ -42,15 +50,26 @@ class HaSceneDashboard extends LitElement {
@property() public scenes!: SceneEntity[]; @property() public scenes!: SceneEntity[];
private _scenes = memoizeOne((scenes: SceneEntity[]) => { @property() private _activeFilters?: string[];
return scenes.map((scene) => {
return { @internalProperty() private _filteredScenes?: string[] | null;
...scene,
name: computeStateName(scene), @internalProperty() private _filterValue?;
icon: stateIcon(scene),
}; private _scenes = memoizeOne(
}); (scenes: SceneEntity[], filteredScenes?: string[] | null) => {
}); return (filteredScenes
? scenes.filter((scene) => filteredScenes!.includes(scene.entity_id))
: scenes
).map((scene) => {
return {
...scene,
name: computeStateName(scene),
icon: stateIcon(scene),
};
});
}
);
private _columns = memoizeOne( private _columns = memoizeOne(
(_language): DataTableColumnContainer => { (_language): DataTableColumnContainer => {
@ -60,14 +79,15 @@ class HaSceneDashboard extends LitElement {
type: "icon-button", type: "icon-button",
template: (_toggle, scene) => template: (_toggle, scene) =>
html` html`
<ha-icon-button <mwc-icon-button
.scene=${scene} .scene=${scene}
icon="hass:play"
title="${this.hass.localize( title="${this.hass.localize(
"ui.panel.config.scene.picker.activate_scene" "ui.panel.config.scene.picker.activate_scene"
)}" )}"
@click=${(ev: Event) => this._activateScene(ev)} @click=${(ev: Event) => this._activateScene(ev)}
></ha-icon-button> >
<ha-svg-icon .path=${mdiPlay}></ha-svg-icon>
</mwc-icon-button>
`, `,
}, },
icon: { icon: {
@ -88,14 +108,15 @@ class HaSceneDashboard extends LitElement {
title: "", title: "",
type: "icon-button", type: "icon-button",
template: (_info, scene) => html` template: (_info, scene) => html`
<ha-icon-button <mwc-icon-button
.scene=${scene} .scene=${scene}
@click=${this._showInfo} @click=${this._showInfo}
icon="hass:information-outline"
title="${this.hass.localize( title="${this.hass.localize(
"ui.panel.config.scene.picker.show_info_scene" "ui.panel.config.scene.picker.show_info_scene"
)}" )}"
></ha-icon-button> >
<ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
</mwc-icon-button>
`, `,
}, },
edit: { edit: {
@ -109,13 +130,16 @@ class HaSceneDashboard extends LitElement {
: undefined : undefined
)} )}
> >
<ha-icon-button <mwc-icon-button
.icon=${scene.attributes.id ? "hass:pencil" : "hass:pencil-off"}
.disabled=${!scene.attributes.id} .disabled=${!scene.attributes.id}
title="${this.hass.localize( title="${this.hass.localize(
"ui.panel.config.scene.picker.edit_scene" "ui.panel.config.scene.picker.edit_scene"
)}" )}"
></ha-icon-button> >
<ha-svg-icon
.path=${scene.attributes.id ? mdiPencil : mdiPencilOff}
></ha-svg-icon>
</mwc-icon-button>
</a> </a>
${!scene.attributes.id ${!scene.attributes.id
? html` ? html`
@ -141,16 +165,27 @@ class HaSceneDashboard extends LitElement {
.route=${this.route} .route=${this.route}
.tabs=${configSections.automation} .tabs=${configSections.automation}
.columns=${this._columns(this.hass.language)} .columns=${this._columns(this.hass.language)}
.data=${this._scenes(this.scenes)}
id="entity_id" id="entity_id"
.data=${this._scenes(this.scenes, this._filteredScenes)}
.activeFilters=${this._activeFilters}
.noDataText=${this.hass.localize( .noDataText=${this.hass.localize(
"ui.panel.config.scene.picker.no_scenes" "ui.panel.config.scene.picker.no_scenes"
)} )}
@clear-filter=${this._clearFilter}
hasFab hasFab
> >
<mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}> <mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon> <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
<ha-button-related-filter-menu
slot="filter-menu"
corner="BOTTOM_START"
.narrow=${this.narrow}
.hass=${this.hass}
.value=${this._filterValue}
@related-changed=${this._relatedFilterChanged}
>
</ha-button-related-filter-menu>
<a href="/config/scene/edit/new" slot="fab"> <a href="/config/scene/edit/new" slot="fab">
<ha-fab <ha-fab
.label=${this.hass.localize( .label=${this.hass.localize(
@ -165,6 +200,22 @@ class HaSceneDashboard extends LitElement {
`; `;
} }
private _relatedFilterChanged(ev: CustomEvent) {
this._filterValue = ev.detail.value;
if (!this._filterValue) {
this._clearFilter();
return;
}
this._activeFilters = [ev.detail.filter];
this._filteredScenes = ev.detail.items.scene || null;
}
private _clearFilter() {
this._filteredScenes = undefined;
this._activeFilters = undefined;
this._filterValue = undefined;
}
private _showInfo(ev) { private _showInfo(ev) {
ev.stopPropagation(); ev.stopPropagation();
const entityId = ev.currentTarget.scene.entity_id; const entityId = ev.currentTarget.scene.entity_id;