From 05d7b98ba0cb57c871d88cbba0b039a440cf844e Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 14 Jul 2020 18:19:08 +0200
Subject: [PATCH] Add icon to scenes (#6379)

---
 src/data/scene.ts                             |   1 +
 src/panels/config/scene/ha-scene-dashboard.ts |   8 +
 src/panels/config/scene/ha-scene-editor.ts    | 279 ++++++++++--------
 src/translations/en.json                      |   1 +
 4 files changed, 165 insertions(+), 124 deletions(-)

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 {
               ></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"
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),
           })}"
         >
-          <ha-config-section .isWide=${this.isWide}>
-            ${!this.narrow ? html` <span slot="header">${name}</span> ` : ""}
-            <div slot="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}
-                  label=${this.hass.localize(
-                    "ui.panel.config.scene.editor.name"
-                  )}
-                ></paper-input>
-              </div>
-            </ha-card>
-          </ha-config-section>
-
-          <ha-config-section .isWide=${this.isWide}>
-            <div slot="header">
-              ${this.hass.localize(
-                "ui.panel.config.scene.editor.devices.header"
-              )}
-            </div>
-            <div slot="introduction">
-              ${this.hass.localize(
-                "ui.panel.config.scene.editor.devices.introduction"
-              )}
-            </div>
-
-            ${devices.map(
-              (device) =>
-                html`
-                  <ha-card>
-                    <div class="card-header">
-                      ${device.name}
-                      <ha-icon-button
-                        icon="hass:delete"
-                        title="${this.hass.localize(
-                          "ui.panel.config.scene.editor.devices.delete"
-                        )}"
-                        .device=${device.id}
-                        @click=${this._deleteDevice}
-                      ></ha-icon-button>
-                    </div>
-                    ${device.entities.map((entityId) => {
-                      const entityStateObj = this.hass.states[entityId];
-                      if (!entityStateObj) {
-                        return html``;
-                      }
-                      return html`
-                        <paper-icon-item
-                          .entityId=${entityId}
-                          @click=${this._showMoreInfo}
-                          class="device-entity"
-                        >
-                          <state-badge
-                            .stateObj=${entityStateObj}
-                            slot="item-icon"
-                          ></state-badge>
-                          <paper-item-body>
-                            ${computeStateName(entityStateObj)}
-                          </paper-item-body>
-                        </paper-icon-item>
-                      `;
-                    })}
-                  </ha-card>
-                `
-            )}
-
-            <ha-card
-              .header=${this.hass.localize(
-                "ui.panel.config.scene.editor.devices.add"
-              )}
-            >
-              <div class="card-content">
-                <ha-device-picker
-                  @value-changed=${this._devicePicked}
-                  .hass=${this.hass}
-                  .label=${this.hass.localize(
-                    "ui.panel.config.scene.editor.devices.add"
-                  )}
-                ></ha-device-picker>
-              </div>
-            </ha-card>
-          </ha-config-section>
-
-          ${this.showAdvanced
+          ${this._config
             ? html`
+                <ha-config-section .isWide=${this.isWide}>
+                  ${!this.narrow
+                    ? html` <span slot="header">${name}</span> `
+                    : ""}
+                  <div slot="introduction">
+                    ${this.hass.localize(
+                      "ui.panel.config.scene.editor.introduction"
+                    )}
+                  </div>
+                  <ha-card>
+                    <div class="card-content">
+                      <paper-input
+                        .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>
+
                 <ha-config-section .isWide=${this.isWide}>
                   <div slot="header">
                     ${this.hass.localize(
-                      "ui.panel.config.scene.editor.entities.header"
+                      "ui.panel.config.scene.editor.devices.header"
                     )}
                   </div>
                   <div slot="introduction">
                     ${this.hass.localize(
-                      "ui.panel.config.scene.editor.entities.introduction"
+                      "ui.panel.config.scene.editor.devices.introduction"
                     )}
                   </div>
-                  ${entities.length
-                    ? html`
-                        <ha-card
-                          class="entities"
-                          .header=${this.hass.localize(
-                            "ui.panel.config.scene.editor.entities.without_device"
-                          )}
-                        >
-                          ${entities.map((entityId) => {
+
+                  ${devices.map(
+                    (device) =>
+                      html`
+                        <ha-card>
+                          <div class="card-header">
+                            ${device.name}
+                            <ha-icon-button
+                              icon="hass:delete"
+                              title="${this.hass.localize(
+                                "ui.panel.config.scene.editor.devices.delete"
+                              )}"
+                              .device=${device.id}
+                              @click=${this._deleteDevice}
+                            ></ha-icon-button>
+                          </div>
+                          ${device.entities.map((entityId) => {
                             const entityStateObj = this.hass.states[entityId];
                             if (!entityStateObj) {
                               return html``;
@@ -336,41 +290,108 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
                                 <paper-item-body>
                                   ${computeStateName(entityStateObj)}
                                 </paper-item-body>
-                                <ha-icon-button
-                                  icon="hass:delete"
-                                  .entityId=${entityId}
-                                  .title="${this.hass.localize(
-                                    "ui.panel.config.scene.editor.entities.delete"
-                                  )}"
-                                  @click=${this._deleteEntity}
-                                ></ha-icon-button>
                               </paper-icon-item>
                             `;
                           })}
                         </ha-card>
                       `
-                    : ""}
+                  )}
 
                   <ha-card
-                    header=${this.hass.localize(
-                      "ui.panel.config.scene.editor.entities.add"
+                    .header=${this.hass.localize(
+                      "ui.panel.config.scene.editor.devices.add"
                     )}
                   >
                     <div class="card-content">
-                      ${this.hass.localize(
-                        "ui.panel.config.scene.editor.entities.device_entities"
-                      )}
-                      <ha-entity-picker
-                        @value-changed=${this._entityPicked}
-                        .excludeDomains=${SCENE_IGNORED_DOMAINS}
+                      <ha-device-picker
+                        @value-changed=${this._devicePicked}
                         .hass=${this.hass}
-                        label=${this.hass.localize(
-                          "ui.panel.config.scene.editor.entities.add"
+                        .label=${this.hass.localize(
+                          "ui.panel.config.scene.editor.devices.add"
                         )}
-                      ></ha-entity-picker>
+                      ></ha-device-picker>
                     </div>
                   </ha-card>
                 </ha-config-section>
+
+                ${this.showAdvanced
+                  ? html`
+                      <ha-config-section .isWide=${this.isWide}>
+                        <div slot="header">
+                          ${this.hass.localize(
+                            "ui.panel.config.scene.editor.entities.header"
+                          )}
+                        </div>
+                        <div slot="introduction">
+                          ${this.hass.localize(
+                            "ui.panel.config.scene.editor.entities.introduction"
+                          )}
+                        </div>
+                        ${entities.length
+                          ? html`
+                              <ha-card
+                                class="entities"
+                                .header=${this.hass.localize(
+                                  "ui.panel.config.scene.editor.entities.without_device"
+                                )}
+                              >
+                                ${entities.map((entityId) => {
+                                  const entityStateObj = this.hass.states[
+                                    entityId
+                                  ];
+                                  if (!entityStateObj) {
+                                    return html``;
+                                  }
+                                  return html`
+                                    <paper-icon-item
+                                      .entityId=${entityId}
+                                      @click=${this._showMoreInfo}
+                                      class="device-entity"
+                                    >
+                                      <state-badge
+                                        .stateObj=${entityStateObj}
+                                        slot="item-icon"
+                                      ></state-badge>
+                                      <paper-item-body>
+                                        ${computeStateName(entityStateObj)}
+                                      </paper-item-body>
+                                      <ha-icon-button
+                                        icon="hass:delete"
+                                        .entityId=${entityId}
+                                        .title="${this.hass.localize(
+                                          "ui.panel.config.scene.editor.entities.delete"
+                                        )}"
+                                        @click=${this._deleteEntity}
+                                      ></ha-icon-button>
+                                    </paper-icon-item>
+                                  `;
+                                })}
+                              </ha-card>
+                            `
+                          : ""}
+
+                        <ha-card
+                          header=${this.hass.localize(
+                            "ui.panel.config.scene.editor.entities.add"
+                          )}
+                        >
+                          <div class="card-content">
+                            ${this.hass.localize(
+                              "ui.panel.config.scene.editor.entities.device_entities"
+                            )}
+                            <ha-entity-picker
+                              @value-changed=${this._entityPicked}
+                              .excludeDomains=${SCENE_IGNORED_DOMAINS}
+                              .hass=${this.hass}
+                              label=${this.hass.localize(
+                                "ui.panel.config.scene.editor.entities.add"
+                              )}
+                            ></ha-entity-picker>
+                          </div>
+                        </ha-card>
+                      </ha-config-section>
+                    `
+                  : ""}
               `
             : ""}
         </div>
@@ -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;
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.",