dashboard refactoring, auto update home and workers

Author: Arkanic

server/dashboard/index.ts

@@ -6,6 +6,4 @@ console.log("dashboard");
 window.addEventListener("load", async () => {
     console.log("loaded");
     startNavListener();
-
-    await home();
 });

server/dashboard/static/index.html

@@ -16,9 +16,13 @@
         <div class="content" id="content">
             <div class="subcontent" id="box-home">
                 <div id="projects-list"></div>
+                <h6 id="projects-update-text">~</h6>
+                <input type="button" id="projects-update-button" value="Update"/>
             </div>
             <div class="subcontent hidden" id="box-workers">
                 <div id="workers-list"></div>
+                <h6 id="workers-update-text">~</h6>
+                <input type="button" id="workers-update-button" value="Update"/>
             </div>
             <div class="subcontent hidden" id="box-upload">
                 <form ref="uploadform" id="uploadform" method="post" action="#" enctype="multipart/form-data">

server/dashboard/ts/dom.ts

@@ -7,30 +7,17 @@ import settings from "./settings";
  * Start up the navbar handler so that clicking the buttons changes what "page" you are on
  */
 export async function startNavListener() {
+    await home();
+    await workers();
+    await upload();
+    await settings();
+
     let boxes = ["home", "workers", "upload", "settings"];
     for(let box of boxes) {
         let button = document.getElementById(`nav-${box}`)!;
         button.addEventListener("click", async e => {
             if(button.classList.contains("active")) return; // if we are already on this page, ignore
 
-            switch(box) {
-                case "home":
-                    await home();
-                    break;
-                case "workers":
-                    await workers();
-                    break;
-                case "upload":
-                    await upload();
-                    break;
-                case "settings":
-                    await settings();
-                    break;
-                default:
-                    await (async () => {})();
-                    break;
-            }
-
             // hide all the other boxes
             for(let otherBox of boxes.filter(b => b != box)) {
                 document.getElementById(`box-${otherBox}`)?.classList.add("hidden");

server/dashboard/ts/home.ts

@@ -1,10 +1,23 @@
 import axios from "axios";
 import {apiurl, networkOptions} from "./networking";
+import {autoUpdate} from "./util/autoupdate";
 import * as types from "./types/api";
 
+const UPDATE_RATE = 30; // ten seconds
+
 let projectsList = document.getElementById("projects-list")!;
+let projectsUpdateText = document.getElementById("projects-update-text")! as HTMLHeadingElement;
+let projectsUpdateButton = document.getElementById("projects-update-button")! as HTMLInputElement;
 
 export default async function home() {
+    await homeTask();
+
+    autoUpdate(projectsUpdateText, projectsUpdateButton, UPDATE_RATE, async () => {
+        await homeTask();
+    });
+}
+
+async function homeTask() {
     projectsList.innerHTML = "";
 
     let projects:types.ProjectsIndexResponse = (await axios.post(`${apiurl()}/api/projectsindex`, {unfinishedonly: false}, networkOptions())).data;
@@ -80,7 +93,7 @@ export default async function home() {
 
             await axios.post(`${apiurl()}/api/deleteproject`, {projectid: project.id}, networkOptions());
 
-            home();
+            await homeTask();
         });
         section.appendChild(deleteButton);
 

server/dashboard/ts/util/autoupdate.ts

@@ -0,0 +1,28 @@
+/**
+ * Automatically update (via an external function) a thing every x seconds
+ * Uses provided element to display how long, and a button to update now
+ * 
+ * @param text Text element to display "Updating in 3s" etc
+ * @param updateButton Button to update now
+ * @param cooldownTime Time between update (in seconds)
+ * @param doTask Task to do, async allowed
+ */
+export function autoUpdate(text:HTMLElement, updateButton:HTMLInputElement, cooldownTime:number, doTask:() => Promise<void>) {
+    let countdown = cooldownTime;
+    setInterval(async () => {
+        text.innerHTML = `Updating in ${Math.max(countdown, 0)}s`;
+
+        countdown -= 1;
+        if(countdown !== -1) return;
+
+        text.innerHTML = "Updating...";
+        await doTask();
+        countdown = cooldownTime;
+    }, 1000);
+
+    updateButton.addEventListener("click", async () => {
+        text.innerHTML = "Updating...";
+        await doTask();
+        countdown = cooldownTime;
+    });
+}

server/dashboard/ts/workers.ts

@@ -1,11 +1,23 @@
 import axios from "axios";
+import {autoUpdate} from "./util/autoupdate";
 import {apiurl, networkOptions} from "./networking";
 import * as types from "./types/api";
 
+const UPDATE_RATE = 10;
+
 let workersList = document.getElementById("workers-list")!;
+let workersUpdateText = document.getElementById("workers-update-text")! as HTMLElement;
+let workersUpdateButton = document.getElementById("workers-update-button")! as HTMLInputElement;
 
 export default async function workers() {
-    workersList.innerHTML = "";
+    await workersTask();
+
+    autoUpdate(workersUpdateText, workersUpdateButton, UPDATE_RATE, async () => {
+        await workersTask();
+    });
+}
+
+async function workersTask() {
 
     let workers:types.OnlineWorkersResponse = (await axios.post(`${apiurl()}/api/onlineworkers`, {}, networkOptions())).data;
     if(!workers.success) {
@@ -16,6 +28,9 @@ export default async function workers() {
         return;
     }
 
+
+    workersList.innerHTML = "";
+
     for(let i = 0; i < workers.workers.length; i++) {
         let worker = workers.workers[i];