diff --git a/src/data/scene.ts b/src/data/scene.ts
index c0245a4f24..6b029412c4 100644
--- a/src/data/scene.ts
+++ b/src/data/scene.ts
@@ -40,6 +40,7 @@ export interface SceneEntity extends HassEntityBase {
export interface SceneConfig {
name: string;
+ icon?: string;
entities: SceneEntities;
}
diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts
index 1205108a92..51a2badf61 100644
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/src/panels/config/scene/ha-scene-dashboard.ts
@@ -24,8 +24,10 @@ import { haStyle } from "../../../resources/styles";
import { HomeAssistant, Route } from "../../../types";
import { showToast } from "../../../util/toast";
import { configSections } from "../ha-panel-config";
+import "../../../components/ha-icon";
import "../../../components/ha-svg-icon";
import { mdiPlus } from "@mdi/js";
+import { stateIcon } from "../../../common/entity/state_icon";
@customElement("ha-scene-dashboard")
class HaSceneDashboard extends LitElement {
@@ -44,6 +46,7 @@ class HaSceneDashboard extends LitElement {
return {
...scene,
name: computeStateName(scene),
+ icon: stateIcon(scene),
};
});
});
@@ -66,6 +69,11 @@ class HaSceneDashboard extends LitElement {
>
`,
},
+ icon: {
+ title: "",
+ type: "icon",
+ template: (icon) => html` `,
+ },
name: {
title: this.hass.localize(
"ui.panel.config.scene.picker.headers.name"
diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts
index 08f00562ef..89a46b3f20 100644
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@@ -23,6 +23,7 @@ import { computeRTL } from "../../../common/util/compute_rtl";
import "../../../components/device/ha-device-picker";
import "../../../components/entity/ha-entities-picker";
import "../../../components/ha-card";
+import "../../../components/ha-icon-input";
import "@material/mwc-fab";
import {
computeDeviceName,
@@ -87,7 +88,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
@property() private _errors?: string;
- @property() private _config!: SceneConfig;
+ @property() private _config?: SceneConfig;
@property() private _entities: string[] = [];
@@ -210,115 +211,68 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
rtl: computeRTL(this.hass),
})}"
>
-
- ${!this.narrow ? html` ${name} ` : ""}
-
- ${this.hass.localize("ui.panel.config.scene.editor.introduction")}
-
-
-
-
-
-
-
-
- ${this.hass.localize(
- "ui.panel.config.scene.editor.devices.header"
- )}
-
-
- ${this.hass.localize(
- "ui.panel.config.scene.editor.devices.introduction"
- )}
-
-
- ${devices.map(
- (device) =>
- html`
-
-
- ${device.entities.map((entityId) => {
- const entityStateObj = this.hass.states[entityId];
- if (!entityStateObj) {
- return html``;
- }
- return html`
-
-
-
- ${computeStateName(entityStateObj)}
-
-
- `;
- })}
-
- `
- )}
-
-
-
-
-
-
-
-
- ${this.showAdvanced
+ ${this._config
? html`
+
+ ${!this.narrow
+ ? html` ${name} `
+ : ""}
+
+ ${this.hass.localize(
+ "ui.panel.config.scene.editor.introduction"
+ )}
+
+
+
+
+
+
${this.hass.localize(
- "ui.panel.config.scene.editor.entities.header"
+ "ui.panel.config.scene.editor.devices.header"
)}
${this.hass.localize(
- "ui.panel.config.scene.editor.entities.introduction"
+ "ui.panel.config.scene.editor.devices.introduction"
)}
- ${entities.length
- ? html`
-
- ${entities.map((entityId) => {
+
+ ${devices.map(
+ (device) =>
+ html`
+
+
+ ${device.entities.map((entityId) => {
const entityStateObj = this.hass.states[entityId];
if (!entityStateObj) {
return html``;
@@ -336,41 +290,108 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
${computeStateName(entityStateObj)}
-
`;
})}
`
- : ""}
+ )}
- ${this.hass.localize(
- "ui.panel.config.scene.editor.entities.device_entities"
- )}
-
+ >
+
+ ${this.showAdvanced
+ ? html`
+
+
+ ${this.hass.localize(
+ "ui.panel.config.scene.editor.entities.header"
+ )}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.scene.editor.entities.introduction"
+ )}
+
+ ${entities.length
+ ? html`
+
+ ${entities.map((entityId) => {
+ const entityStateObj = this.hass.states[
+ entityId
+ ];
+ if (!entityStateObj) {
+ return html``;
+ }
+ return html`
+
+
+
+ ${computeStateName(entityStateObj)}
+
+
+
+ `;
+ })}
+
+ `
+ : ""}
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.scene.editor.entities.device_entities"
+ )}
+
+
+
+
+ `
+ : ""}
`
: ""}
@@ -587,11 +608,21 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
this._dirty = true;
}
- private _nameChanged(ev: CustomEvent) {
- if (!this._config || this._config.name === ev.detail.value) {
+ private _valueChanged(ev: CustomEvent) {
+ ev.stopPropagation();
+ const target = ev.target as any;
+ const name = target.name;
+ if (!name) {
return;
}
- this._config.name = ev.detail.value;
+ let newVal = ev.detail.value;
+ if (target.type === "number") {
+ newVal = Number(newVal);
+ }
+ if ((this._config![name] || "") === newVal) {
+ return;
+ }
+ this._config = { ...this._config!, [name]: newVal };
this._dirty = true;
}
@@ -671,7 +702,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
private async _saveScene(): Promise {
const id = !this.sceneId ? "" + Date.now() : this.sceneId!;
- this._config = { ...this._config, entities: this._calculateStates() };
+ this._config = { ...this._config!, entities: this._calculateStates() };
try {
await saveScene(this.hass, id, this._config);
this._dirty = false;
diff --git a/src/translations/en.json b/src/translations/en.json
index ea27d153e6..c6fb6c4a17 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1130,6 +1130,7 @@
"save": "Save",
"unsaved_confirm": "You have unsaved changes. Are you sure you want to leave?",
"name": "Name",
+ "icon": "Icon",
"devices": {
"header": "Devices",
"introduction": "Add the devices that you want to be included in your scene. Set all the devices to the state you want for this scene.",