From 14e35fe670e5d942b332880155a40a531a56207c Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Sat, 17 Dec 2022 16:34:40 -0800
Subject: [PATCH] handle update element in listener

---
 scripts/elements.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/scripts/elements.js b/scripts/elements.js
index 23f8573..5ad34d2 100644
--- a/scripts/elements.js
+++ b/scripts/elements.js
@@ -1,5 +1,7 @@
 import { request } from "./utils.js";
 
+const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay));
+
 class Instance extends HTMLElement {
 	constructor () {
 		super();
@@ -58,9 +60,21 @@ class Instance extends HTMLElement {
 
 		let powerButton = this.shadowElement.querySelector("#power-btn");
 		powerButton.src = data.status === "running" ? "images/actions/stop.svg" : "images/actions/start.svg";
-		powerButton.addEventListener("click", () => {
+		powerButton.addEventListener("click", async () => {
 			let targetAction = this.status === "running" ? "shutdown" : "start";
-			request(`/nodes/${this.node}/${this.type}/${this.vmid}/status/${targetAction}`, "POST", {node: this.node, vmid: this.vmid});
+			let targetStatus = this.status === "running" ? "stopped" : "running";
+			await request(`/nodes/${this.node}/${this.type}/${this.vmid}/status/${targetAction}`, "POST", {node: this.node, vmid: this.vmid});
+			while (true) {
+				let data = await request(`/nodes/${this.node}/${this.type}/${this.vmid}/status/current`);
+				console.log(data);
+				if(data.data.status === targetStatus) {
+					break;
+				}
+				waitFor(1000);
+			}
+			this.status = targetStatus;
+			let typeImg = this.shadowElement.querySelector("#instance-type");
+			typeImg.src = `images/instances/${this.type}/${this.status}.svg`;
 		});
 	
 		let configButton = this.shadowElement.querySelector("#configure-btn");