From 1e6bbc7bbc032596801db524247e4a3e177a192e Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Mon, 4 Jan 2021 21:43:31 +0000
Subject: [PATCH] add url handling for /accounts and /settings

when switching tabs, the url path changes. Accessing these urls directly
will load the corresponding tab.
---
 html/admin.html    | 12 ++++++------
 main.go            |  3 +++
 ts/admin.ts        | 42 ++++++++++++++++++++++++++++++++++++------
 ts/modules/tabs.ts | 16 +++++++++++-----
 ts/typings/d.ts    |  3 ++-
 5 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/html/admin.html b/html/admin.html
index ac082db..d86e90b 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -182,9 +182,9 @@
             <div class="mb-1">
                 <header class="flex flex-wrap items-center justify-between">
                     <div class="text-neutral-700">
-                        <span id="invitesTab-button" class="tab-button portal ~urge active">Invites</span>
-                        <span id="accountsTab-button" class="tab-button portal">Accounts</span>
-                        <span id="settingsTab-button" class="tab-button portal">Settings</span>
+                        <span id="button-tab-invites" class="tab-button portal">Invites</span>
+                        <span id="button-tab-accounts" class="tab-button portal">Accounts</span>
+                        <span id="button-tab-settings" class="tab-button portal">Settings</span>
                     </div>
                 </header>
             </div>
@@ -194,7 +194,7 @@
                     <span id="button-theme" class="button ~neutral !normal mb-1">Theme</span>
                 </div>
             </div>
-            <div id="invitesTab">
+            <div id="tab-invites">
                 <div class="card ~neutral !low invites mb-1">
                     <span class="heading">Invites</span>
                     <div id="invites"></div>
@@ -251,7 +251,7 @@
                     </div>
                 </div>
             </div>
-            <div id="accountsTab" class="unfocused">
+            <div id="tab-accounts" class="unfocused">
                 <div class="card ~neutral !low accounts mb-1">
                     <span class="heading">Accounts</span>
                     <div class="fr">
@@ -274,7 +274,7 @@
                     </div>
                 </div>
             </div>
-            <div id="settingsTab" class="unfocused">
+            <div id="tab-settings" class="unfocused">
                 <div class="card ~neutral !low settings overflow">
                     <span class="heading">Settings</span>
                     <div class="fr">
diff --git a/main.go b/main.go
index 689dfcf..58bddea 100644
--- a/main.go
+++ b/main.go
@@ -560,6 +560,9 @@ func start(asDaemon, firstCall bool) {
 	}
 	if !firstRun {
 		router.GET("/", app.AdminPage)
+		router.GET("/accounts", app.AdminPage)
+		router.GET("/settings", app.AdminPage)
+
 		router.GET("/token/login", app.getTokenLogin)
 		router.GET("/token/refresh", app.getTokenRefresh)
 		router.POST("/newUser", app.NewUser)
diff --git a/ts/admin.ts b/ts/admin.ts
index ca2317b..f44a4a4 100644
--- a/ts/admin.ts
+++ b/ts/admin.ts
@@ -1,4 +1,4 @@
-import  { toggleTheme, loadTheme } from "./modules/theme.js";
+import { toggleTheme, loadTheme } from "./modules/theme.js";
 import { Modal } from "./modules/modal.js";
 import { Tabs } from "./modules/tabs.js";
 import { inviteList, createInvite } from "./modules/invites.js";
@@ -69,9 +69,29 @@ window.notifications = new notificationBox(document.getElementById('notification
 
 // load tabs
 window.tabs = new Tabs();
-window.tabs.addTab("invitesTab");
-window.tabs.addTab("accountsTab", null, accounts.reload);
-window.tabs.addTab("settingsTab", null, settings.reload);
+window.tabs.addTab("invites", null, window.invites.reload);
+window.tabs.addTab("accounts", null, accounts.reload);
+window.tabs.addTab("settings", null, settings.reload);
+
+for (let tab of ["invites", "accounts", "settings"]) {
+    if (window.location.pathname == "/" + tab) {
+        window.tabs.switch(tab, true);
+    }
+}
+
+if (window.location.pathname == "/") {
+    window.tabs.switch("invites", true);
+}
+
+document.addEventListener("tab-change", (event: CustomEvent) => {
+    let tab = "/" + event.detail;
+    if (tab == "/invites") {
+        if (window.location.pathname == "/") {
+            tab = "/";
+        } else { tab = "../"; }
+    }
+    window.history.replaceState("", "Admin - jfa-go", tab);
+});
 
 function login(username: string, password: string, run?: (state?: number) => void) {
     const req = new XMLHttpRequest();
@@ -106,9 +126,19 @@ function login(username: string, password: string, run?: (state?: number) => voi
                 const data = this.response;
                 window.token = data["token"];
                 window.modals.login.close();
-                window.invites.reload();
-                accounts.reload();
                 setInterval(() => { window.invites.reload(); accounts.reload(); }, 30*1000);
+                const currentTab = window.tabs.current;
+                switch (currentTab) {
+                    case "invites":
+                        window.invites.reload();
+                        break;
+                    case "accounts":
+                        accounts.reload();
+                        break;
+                    case "settings":
+                        settings.reload();
+                        break;
+                }
                 document.getElementById("logout-button").classList.remove("unfocused");
             }
             if (run) { run(+this.status); }
diff --git a/ts/modules/tabs.ts b/ts/modules/tabs.ts
index 09ae14b..465d670 100644
--- a/ts/modules/tabs.ts
+++ b/ts/modules/tabs.ts
@@ -1,4 +1,5 @@
 export class Tabs implements Tabs {
+    private _current: string = "";
     tabs: Array<Tab>;
    
     constructor() {
@@ -8,21 +9,26 @@ export class Tabs implements Tabs {
     addTab = (tabID: string, preFunc = () => void {}, postFunc = () => void {}) => {
         let tab = {} as Tab;
         tab.tabID = tabID;
-        tab.tabEl = document.getElementById(tabID) as HTMLDivElement;
-        tab.buttonEl = document.getElementById(tabID + "-button") as HTMLSpanElement;
+        tab.tabEl = document.getElementById("tab-" + tabID) as HTMLDivElement;
+        tab.buttonEl = document.getElementById("button-tab-" + tabID) as HTMLSpanElement;
         tab.buttonEl.onclick = () => { this.switch(tabID); };
         tab.preFunc = preFunc;
         tab.postFunc = postFunc;
         this.tabs.push(tab);
     }
 
-    switch = (tabID: string) => {
+    get current(): string { return this._current; }
+    set current(tabID: string) { this.switch(tabID); }
+
+    switch = (tabID: string, noRun: boolean = false) => {
+        this._current = tabID;
         for (let t of this.tabs) {
             if (t.tabID == tabID) {
                 t.buttonEl.classList.add("active", "~urge");
-                if (t.preFunc) { t.preFunc(); }
+                if (t.preFunc && !noRun) { t.preFunc(); }
                 t.tabEl.classList.remove("unfocused");
-                if (t.postFunc) { t.postFunc(); }
+                if (t.postFunc && !noRun) { t.postFunc(); }
+                document.dispatchEvent(new CustomEvent("tab-change", { detail: tabID }));
             } else {
                 t.buttonEl.classList.remove("active");
                 t.buttonEl.classList.remove("~urge");
diff --git a/ts/typings/d.ts b/ts/typings/d.ts
index 013ea9b..7c2b8c3 100644
--- a/ts/typings/d.ts
+++ b/ts/typings/d.ts
@@ -36,9 +36,10 @@ declare interface NotificationBox {
 }
 
 declare interface Tabs {
+    current: string;
     tabs: Array<Tab>;
     addTab: (tabID: string, preFunc?: () => void, postFunc?: () => void) => void;
-    switch: (tabID: string) => void;
+    switch: (tabID: string, noRun?: boolean) => void;
 }
 
 declare interface Tab {