mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-13 12:26:35 +00:00
Migrate scene config to data table (#5351)
* Migrate scene config to data table * Remove unused styles * Update ha-scene-dashboard.ts * Lint + help * Update ha-scene-dashboard.ts
This commit is contained in:
Bram Kragten
GitHub
parent
fca286d6c0
commit
6e4c707f9e
@ -1,30 +1,28 @@
|
||||
import {
|
||||
LitElement,
|
||||
TemplateResult,
|
||||
html,
|
||||
CSSResultArray,
|
||||
css,
|
||||
property,
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
import "@polymer/paper-icon-button/paper-icon-button";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import "../../../layouts/hass-tabs-subpage";
|
||||
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-fab";
|
||||
|
||||
import "../ha-config-section";
|
||||
|
||||
import {
|
||||
css,
|
||||
CSSResultArray,
|
||||
customElement,
|
||||
html,
|
||||
LitElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
import { computeRTL } from "../../../common/util/compute_rtl";
|
||||
import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
|
||||
import "../../../components/ha-fab";
|
||||
import { forwardHaptic } from "../../../data/haptics";
|
||||
import { activateScene, SceneEntity } from "../../../data/scene";
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
import "../../../layouts/hass-tabs-subpage-data-table";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../types";
|
||||
import { SceneEntity, activateScene } from "../../../data/scene";
|
||||
import { showToast } from "../../../util/toast";
|
||||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
import { forwardHaptic } from "../../../data/haptics";
|
||||
import { configSections } from "../ha-panel-config";
|
||||
|
||||
@customElement("ha-scene-dashboard")
|
||||
@ -35,108 +33,131 @@ class HaSceneDashboard extends LitElement {
|
||||
@property() public route!: Route;
|
||||
@property() public scenes!: SceneEntity[];
|
||||
|
||||
private _scenes = memoizeOne((scenes: SceneEntity[]) => {
|
||||
return scenes.map((scene) => {
|
||||
return {
|
||||
...scene,
|
||||
name: computeStateName(scene),
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
private _columns = memoizeOne(
|
||||
(_language): DataTableColumnContainer => {
|
||||
return {
|
||||
activate: {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
template: (_toggle, scene) =>
|
||||
html`
|
||||
<paper-icon-button
|
||||
.scene=${scene}
|
||||
icon="hass:play"
|
||||
title="${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.activate_scene"
|
||||
)}"
|
||||
@click=${(ev: Event) => this._activateScene(ev)}
|
||||
></paper-icon-button>
|
||||
`,
|
||||
},
|
||||
name: {
|
||||
title: this.hass.localize(
|
||||
"ui.panel.config.scene.picker.headers.name"
|
||||
),
|
||||
sortable: true,
|
||||
filterable: true,
|
||||
direction: "asc",
|
||||
grows: true,
|
||||
},
|
||||
info: {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
template: (_info, scene) => html`
|
||||
<paper-icon-button
|
||||
.scene=${scene}
|
||||
@click=${this._showInfo}
|
||||
icon="hass:information-outline"
|
||||
title="${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.show_info_scene"
|
||||
)}"
|
||||
></paper-icon-button>
|
||||
`,
|
||||
},
|
||||
edit: {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
template: (_info, scene: any) => html`
|
||||
<a
|
||||
href=${ifDefined(
|
||||
scene.attributes.id
|
||||
? `/config/scene/edit/${scene.attributes.id}`
|
||||
: undefined
|
||||
)}
|
||||
>
|
||||
<paper-icon-button
|
||||
.icon=${scene.attributes.id ? "hass:pencil" : "hass:pencil-off"}
|
||||
.disabled=${!scene.attributes.id}
|
||||
title="${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.edit_scene"
|
||||
)}"
|
||||
></paper-icon-button>
|
||||
</a>
|
||||
${!scene.attributes.id
|
||||
? html`
|
||||
<paper-tooltip position="left">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.only_editable"
|
||||
)}
|
||||
</paper-tooltip>
|
||||
`
|
||||
: ""}
|
||||
`,
|
||||
},
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<hass-tabs-subpage
|
||||
<hass-tabs-subpage-data-table
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
back-path="/config"
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.automation}
|
||||
.columns=${this._columns(this.hass.language)}
|
||||
.data=${this._scenes(this.scenes)}
|
||||
id="entity_id"
|
||||
.noDataText=${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.no_scenes"
|
||||
)}
|
||||
>
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<div slot="header">
|
||||
${this.hass.localize("ui.panel.config.scene.picker.header")}
|
||||
</div>
|
||||
<div slot="introduction">
|
||||
${this.hass.localize("ui.panel.config.scene.picker.introduction")}
|
||||
<p>
|
||||
<a
|
||||
href="https://home-assistant.io/docs/scene/editor/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
${this.hass.localize("ui.panel.config.scene.picker.learn_more")}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ha-card
|
||||
.heading=${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.pick_scene"
|
||||
)}
|
||||
>
|
||||
${this.scenes.length === 0
|
||||
? html`
|
||||
<div class="card-content">
|
||||
<p>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.no_scenes"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
: this.scenes.map(
|
||||
(scene) => html`
|
||||
<div class="scene">
|
||||
<paper-icon-button
|
||||
.scene=${scene}
|
||||
icon="hass:play"
|
||||
title="${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.activate_scene"
|
||||
)}"
|
||||
@click=${this._activateScene}
|
||||
></paper-icon-button>
|
||||
<paper-item-body two-line>
|
||||
<div>${computeStateName(scene)}</div>
|
||||
</paper-item-body>
|
||||
<div class="actions">
|
||||
<a
|
||||
href=${ifDefined(
|
||||
scene.attributes.id
|
||||
? `/config/scene/edit/${scene.attributes.id}`
|
||||
: undefined
|
||||
)}
|
||||
>
|
||||
<paper-icon-button
|
||||
title="${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.edit_scene"
|
||||
)}"
|
||||
icon="hass:pencil"
|
||||
.disabled=${!scene.attributes.id}
|
||||
></paper-icon-button>
|
||||
${!scene.attributes.id
|
||||
? html`
|
||||
<paper-tooltip position="left">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.only_editable"
|
||||
)}
|
||||
</paper-tooltip>
|
||||
`
|
||||
: ""}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</ha-card>
|
||||
</ha-config-section>
|
||||
<a href="/config/scene/edit/new">
|
||||
<ha-fab
|
||||
?is-wide=${this.isWide}
|
||||
?narrow=${this.narrow}
|
||||
icon="hass:plus"
|
||||
title=${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.add_scene"
|
||||
)}
|
||||
?rtl=${computeRTL(this.hass)}
|
||||
></ha-fab>
|
||||
</a>
|
||||
</hass-tabs-subpage>
|
||||
<paper-icon-button
|
||||
slot="toolbar-icon"
|
||||
icon="hass:help-circle"
|
||||
@click=${this._showHelp}
|
||||
></paper-icon-button>
|
||||
</hass-tabs-subpage-data-table>
|
||||
<a href="/config/scene/edit/new">
|
||||
<ha-fab
|
||||
?is-wide=${this.isWide}
|
||||
?narrow=${this.narrow}
|
||||
icon="hass:plus"
|
||||
title=${this.hass.localize("ui.panel.config.scene.picker.add_scene")}
|
||||
?rtl=${computeRTL(this.hass)}
|
||||
></ha-fab>
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
|
||||
private _showInfo(ev) {
|
||||
ev.stopPropagation();
|
||||
const entityId = ev.currentTarget.scene.entity_id;
|
||||
fireEvent(this, "hass-more-info", { entityId });
|
||||
}
|
||||
|
||||
private async _activateScene(ev) {
|
||||
ev.stopPropagation();
|
||||
const scene = ev.target.scene as SceneEntity;
|
||||
await activateScene(this.hass, scene.entity_id);
|
||||
showToast(this, {
|
||||
@ -149,38 +170,28 @@ class HaSceneDashboard extends LitElement {
|
||||
forwardHaptic("light");
|
||||
}
|
||||
|
||||
private _showHelp() {
|
||||
showAlertDialog(this, {
|
||||
title: this.hass.localize("ui.panel.config.scene.picker.header"),
|
||||
text: html`
|
||||
${this.hass.localize("ui.panel.config.scene.picker.introduction")}
|
||||
<p>
|
||||
<a
|
||||
href="https://home-assistant.io/docs/scene/editor/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
${this.hass.localize("ui.panel.config.scene.picker.learn_more")}
|
||||
</a>
|
||||
</p>
|
||||
`,
|
||||
});
|
||||
}
|
||||
|
||||
static get styles(): CSSResultArray {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ha-card {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.scene {
|
||||
display: flex;
|
||||
flex-direction: horizontal;
|
||||
align-items: center;
|
||||
padding: 0 8px 0 16px;
|
||||
}
|
||||
|
||||
.scene > *:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.scene a[href] {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
ha-fab {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
|
||||
@ -1260,7 +1260,10 @@
|
||||
"edit_scene": "Edit scene",
|
||||
"show_info_scene": "Show info about scene",
|
||||
"delete_scene": "Delete scene",
|
||||
"delete_confirm": "Are you sure you want to delete this scene?"
|
||||
"delete_confirm": "Are you sure you want to delete this scene?",
|
||||
"headers": {
|
||||
"name": "Name"
|
||||
}
|
||||
},
|
||||
"editor": {
|
||||
"introduction": "Use scenes to bring your home alive.",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user