mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-09-16 17:30:11 +00:00
add url handling for /accounts and /settings
when switching tabs, the url path changes. Accessing these urls directly will load the corresponding tab.
This commit is contained in:
parent
0a426519f8
commit
1e6bbc7bbc
GPG Key ID:
BBC65952848FB1A2
@ -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">
|
||||
|
||||
3
main.go
3
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)
|
||||
|
||||
42
ts/admin.ts
42
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); }
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user