js/index-1.ts: seamless autorefresh support

This patch adds seamless autorefresh. Every 60 seconds, the client will re-fetch the statistics data. Because the table is built in the background, it won't be modified until it's completely ready - all the browser has to do, essentially, is re-parse the HTML once it's pushed from generate_table into the DOM, a relatively fast operation compared to the other JS operations which have to happen for the table to be recreated.

Signed-off-by: Amy Parker <amy@amyip.net>

js/index-1.ts

@@ -33,8 +33,10 @@ let listOfServers: Array<string>;
 let serverInfoList: Array<ServerInfo> = [];
 
 async function serverListInitialization() {
-    const r = await fetch("/api/v1/servers");
-    listOfServers = await r.json();
+    if (typeof listOfServers === "undefined") {
+        const r = await fetch("/api/v1/servers");
+        listOfServers = await r.json();
+    }
     for (const srv of listOfServers) {
         const sr = await fetch("/api/v1/uptime/" + srv);
         serverInfoList.push(await sr.json());
@@ -207,4 +209,15 @@ function detectViewportChange(): void {
     }
 }
 
-window.onresize = detectViewportChange;
+window.onresize = detectViewportChange;
+
+// We could just refresh the page, which would reload everything.
+// However, it's much more efficient to just re-request the API data
+function refreshOnInterval(): void {
+    // This is perfectly valid code, but ts doesn't like the type issues
+    // Thus, we must:
+    // @ts-ignore
+    serverListInitialization();
+}
+
+setInterval(refreshOnInterval, 60000);