From 6c109c15ef6712f12a9becf3eb7b170beccf98cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Mon, 19 Aug 2019 23:17:49 +0200
Subject: [PATCH] Add buttons to move entities (#3499)

---
 .../lovelace/components/hui-entity-editor.ts  | 62 ++++++++++++++++---
 1 file changed, 55 insertions(+), 7 deletions(-)

diff --git a/src/panels/lovelace/components/hui-entity-editor.ts b/src/panels/lovelace/components/hui-entity-editor.ts
index b6320a3914..ae6ca4ef9e 100644
--- a/src/panels/lovelace/components/hui-entity-editor.ts
+++ b/src/panels/lovelace/components/hui-entity-editor.ts
@@ -7,6 +7,7 @@ import {
   css,
   CSSResult,
 } from "lit-element";
+import "@polymer/paper-icon-button/paper-icon-button";
 
 import { HomeAssistant } from "../../../types";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -31,13 +32,29 @@ export class HuiEntityEditor extends LitElement {
       <div class="entities">
         ${this.entities.map((entityConf, index) => {
           return html`
-            <ha-entity-picker
-              .hass="${this.hass}"
-              .value="${entityConf.entity}"
-              .index="${index}"
-              @change="${this._valueChanged}"
-              allow-custom-entity
-            ></ha-entity-picker>
+            <div class="entity">
+              <ha-entity-picker
+                .hass="${this.hass}"
+                .value="${entityConf.entity}"
+                .index="${index}"
+                @change="${this._valueChanged}"
+                allow-custom-entity
+              ></ha-entity-picker>
+              <paper-icon-button
+                title="Move entity down"
+                icon="hass:arrow-down"
+                .index="${index}"
+                @click="${this._entityDown}"
+                ?disabled="${index === this.entities!.length - 1}"
+              ></paper-icon-button>
+              <paper-icon-button
+                title="Move entity up"
+                icon="hass:arrow-up"
+                .index="${index}"
+                @click="${this._entityUp}"
+                ?disabled="${index === 0}"
+              ></paper-icon-button>
+            </div>
           `;
         })}
         <ha-entity-picker
@@ -60,6 +77,30 @@ export class HuiEntityEditor extends LitElement {
     fireEvent(this, "entities-changed", { entities: newConfigEntities });
   }
 
+  private _entityUp(ev: Event): void {
+    const target = ev.target! as EditorTarget;
+    const newEntities = this.entities!.concat();
+
+    [newEntities[target.index! - 1], newEntities[target.index!]] = [
+      newEntities[target.index!],
+      newEntities[target.index! - 1],
+    ];
+
+    fireEvent(this, "entities-changed", { entities: newEntities });
+  }
+
+  private _entityDown(ev: Event): void {
+    const target = ev.target! as EditorTarget;
+    const newEntities = this.entities!.concat();
+
+    [newEntities[target.index! + 1], newEntities[target.index!]] = [
+      newEntities[target.index!],
+      newEntities[target.index! + 1],
+    ];
+
+    fireEvent(this, "entities-changed", { entities: newEntities });
+  }
+
   private _valueChanged(ev: Event): void {
     const target = ev.target! as EditorTarget;
     const newConfigEntities = this.entities!.concat();
@@ -81,6 +122,13 @@ export class HuiEntityEditor extends LitElement {
       .entities {
         padding-left: 20px;
       }
+      .entity {
+        display: flex;
+        align-items: flex-end;
+      }
+      .entity ha-entity-picker {
+        flex-grow: 1;
+      }
     `;
   }
 }