setup: report panic errors to user

many issues occur with setup, all this does is tell the user something
bad happened and to check the logs. Might help with solving issues.
Also fixed some now invalid typescript.

Makefile

@@ -52,7 +52,7 @@ endif
 DEBUG ?= off
 ifeq ($(DEBUG), on)
 	SOURCEMAP := --sourcemap
-	TYPECHECK := tsc -noEmit --project ts/tsconfig.json
+	TYPECHECK := npx tsc -noEmit --project ts/tsconfig.json
 	# jank
 	COPYTS := rm -r $(DATA)/web/js/ts; cp -r tempts $(DATA)/web/js/ts
 	UNCSS := cp $(DATA)/web/css/bundle.css $(DATA)/bundle.css

lang/setup/en-us.json

@@ -16,11 +16,13 @@
         "emailSubject": "Email Subject",
         "URL": "URL",
         "apiKey": "API Key",
+        "error": "Error",
         "errorInvalidUserPass": "Invalid username/password.",
         "errorNotAdmin": "User is not allowed to manage server.",
         "errorUserDisabled": "User may be disabled.",
         "error404": "404, check the internal URL.",
-        "errorConnectionRefused": "Connection refused."
+        "errorConnectionRefused": "Connection refused.",
+        "errorUnknown": "Unknown error, check app logs."
     },
     "startPage": {
         "welcome": "Welcome!",

ts/modules/common.ts

@@ -5,7 +5,7 @@ export function toDateString(date: Date): string {
     const t12 = document.getElementById("lang-12h") as HTMLInputElement;
     const t24 = document.getElementById("lang-24h") as HTMLInputElement;
     let args1 = {};
-    let args2 = {
+    let args2: Intl.DateTimeFormatOptions = {
         hour: "2-digit",
         minute: "2-digit"
     };

ts/setup.ts

@@ -1,4 +1,4 @@
-import { _get, _post, toggleLoader } from "./modules/common.js";
+import { _get, _post, toggleLoader, notificationBox } from "./modules/common.js";
 import { lang, LangFile, loadLangSelector } from "./modules/lang.js";
 
 interface sWindow extends Window {
@@ -8,6 +8,10 @@ interface sWindow extends Window {
 declare var window: sWindow;
 window.URLBase = "";
 
+
+window.notifications = new notificationBox(document.getElementById('notification-box') as HTMLDivElement, 5);
+
+
 const get = (id: string): HTMLElement => document.getElementById(id);
 const text = (id: string, val: string) => { document.getElementById(id).textContent = val; };
 const html = (id: string, val: string) => { document.getElementById(id).innerHTML = val; };
@@ -341,6 +345,18 @@ const serialize = () => {
         if (req.readyState == 4) {
             toggleLoader(restartButton);
             if (req.status == 500) {
+                if (req.response == null) {
+                    const old = restartButton.textContent;
+                    restartButton.classList.add("~critical");
+                    restartButton.classList.remove("~urge");
+                    restartButton.textContent = window.lang.strings("errorUnknown");
+                    setTimeout(() => {
+                        restartButton.classList.add("~urge");
+                        restartButton.classList.remove("~critical");
+                        restartButton.textContent = old;
+                    }, 5000);
+                    return;
+                }
                 if (req.response["error"] as string) {
                     const old = restartButton.textContent;
                     restartButton.classList.add("~critical");
@@ -363,7 +379,11 @@ const serialize = () => {
                 window.location.href = host;
             };
         }
-    }, true, () => {});
+    }, true, (req: XMLHttpRequest) => {
+        if (req.status == 0) {
+            window.notifications.customError("connectionError", window.lang.strings("errorConnectionRefused"));
+        }
+    });
 }
 restartButton.onclick = serialize;
 
@@ -562,7 +582,11 @@ window.onpopstate = (event: PopStateEvent) => {
                     button.classList.remove("~positive");
                 }, 5000);
             }
-        }, true, () => {});
+        }, true, (req: XMLHttpRequest) => {
+            if (req.status == 0) {
+                window.notifications.customError("connectionError", window.lang.strings("errorConnectionRefused"));
+            }
+        });
     };
 })();