From b7906786bb943d838cee1c12cd597d9554008f32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20Bidoul?= <stephane.bidoul@gmail.com>
Date: Sun, 30 Jan 2022 14:09:09 +0100
Subject: [PATCH] Add clicked status (hourglass)

To give visual feedback of the action, until
the new status comes back via the event stream.
---
 .../webui-templates/runboat-build-element.js  | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/runboat/webui-templates/runboat-build-element.js b/src/runboat/webui-templates/runboat-build-element.js
index 214a188..d2580c6 100644
--- a/src/runboat/webui-templates/runboat-build-element.js
+++ b/src/runboat/webui-templates/runboat-build-element.js
@@ -76,24 +76,32 @@ class RunboatBuildElement extends LitElement {
                 }
             </p>
             <p>
-                <button @click="${this.startHandler}" ?disabled="${this.build.status != "stopped"}">start</button>
-                <button @click="${this.stopHandler}" ?disabled="${this.build.status != "started"}">stop</button>
-                <button @click="${this.resetHandler}">reset</button>
+                <button @click="${this.startHandler}" ?disabled="${this.build.status != "stopped" || this.build.status == RunboatBuildElement.clickedStatus}">start</button>
+                <button @click="${this.stopHandler}" ?disabled="${this.build.status != "started" || this.build.status == RunboatBuildElement.clickedStatus}">stop</button>
+                <button @click="${this.resetHandler}" ?disabled="${this.build.status == RunboatBuildElement.clickedStatus}">reset</button>
             </p>
         </div>
         `;
     }
 
     startHandler(e) {
-        fetch(`/api/v1/builds/${this.build.name}/start`, {method: 'POST'});
+        this.actionHandler("start");
     }
 
     stopHandler(e) {
-        fetch(`/api/v1/builds/${this.build.name}/stop`, {method: 'POST'});
+        this.actionHandler("stop");
     }
 
     resetHandler(e) {
-        fetch(`/api/v1/builds/${this.build.name}/reset`, {method: 'POST'});
+        this.actionHandler("reset");
+    }
+
+    static clickedStatus = "⏳";
+
+    actionHandler(action) {
+        this.build.status = RunboatBuildElement.clickedStatus;
+        this.requestUpdate();
+        fetch(`/api/v1/builds/${this.build.name}/${action}`, {method: 'POST'});
     }
 }