jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 02:06:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/panels/config/automation/ha-automation-picker.ts
View File

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

93
src/panels/config/scene/ha-scene-dashboard.ts
View File

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