Add icon to scenes (#6379)

src/data/scene.ts

@@ -40,6 +40,7 @@ export interface SceneEntity extends HassEntityBase {
 
 export interface SceneConfig {
   name: string;
+  icon?: string;
   entities: SceneEntities;
 }
 

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 {
               ></ha-icon-button>
             `,
         },
+        icon: {
+          title: "",
+          type: "icon",
+          template: (icon) => html` <ha-icon .icon=${icon}></ha-icon> `,
+        },
         name: {
           title: this.hass.localize(
             "ui.panel.config.scene.picker.headers.name"

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,20 +211,36 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
             rtl: computeRTL(this.hass),
           })}"
         >
+          ${this._config
+            ? html`
                 <ha-config-section .isWide=${this.isWide}>
-            ${!this.narrow ? html` <span slot="header">${name}</span> ` : ""}
+                  ${!this.narrow
+                    ? html` <span slot="header">${name}</span> `
+                    : ""}
                   <div slot="introduction">
-              ${this.hass.localize("ui.panel.config.scene.editor.introduction")}
+                    ${this.hass.localize(
+                      "ui.panel.config.scene.editor.introduction"
+                    )}
                   </div>
                   <ha-card>
                     <div class="card-content">
                       <paper-input
-                  .value=${this._scene ? computeStateName(this._scene) : ""}
-                  @value-changed=${this._nameChanged}
+                        .value=${this._config.name}
+                        .name=${"name"}
+                        @value-changed=${this._valueChanged}
                         label=${this.hass.localize(
                           "ui.panel.config.scene.editor.name"
                         )}
                       ></paper-input>
+                      <ha-icon-input
+                        .label=${this.hass.localize(
+                          "ui.panel.config.scene.editor.icon"
+                        )}
+                        .name=${"icon"}
+                        .value=${this._config.icon}
+                        @value-changed=${this._valueChanged}
+                      >
+                      </ha-icon-input>
                     </div>
                   </ha-card>
                 </ha-config-section>
@@ -319,7 +336,9 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
                                 )}
                               >
                                 ${entities.map((entityId) => {
-                            const entityStateObj = this.hass.states[entityId];
+                                  const entityStateObj = this.hass.states[
+                                    entityId
+                                  ];
                                   if (!entityStateObj) {
                                     return html``;
                                   }
@@ -373,6 +392,8 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
                       </ha-config-section>
                     `
                   : ""}
+              `
+            : ""}
         </div>
         <mwc-fab
           ?is-wide=${this.isWide}
@@ -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<void> {
     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;

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.",