diff --git a/web/src/lib.rs b/web/src/lib.rs index 7e9fb03..ab77794 100644 --- a/web/src/lib.rs +++ b/web/src/lib.rs @@ -150,7 +150,8 @@ pub async fn initialize( .mount( "/dashboard", routes![ - routes::dashboard::dashboard, + routes::dashboard::dashboard_1, + routes::dashboard::dashboard_2, routes::dashboard::dashboard_home, routes::dashboard::user::get_user_info, routes::dashboard::user::update_user_info, diff --git a/web/src/routes/dashboard/mod.rs b/web/src/routes/dashboard/mod.rs index 37f2f89..c56089a 100644 --- a/web/src/routes/dashboard/mod.rs +++ b/web/src/routes/dashboard/mod.rs @@ -676,7 +676,17 @@ pub async fn dashboard_home(cookies: &CookieJar<'_>) -> Result")] -pub async fn dashboard(cookies: &CookieJar<'_>) -> Result { +pub async fn dashboard_1(cookies: &CookieJar<'_>) -> Result { + if cookies.get_private("userid").is_some() { + let map: HashMap<&str, String> = HashMap::new(); + Ok(Template::render("dashboard", &map)) + } else { + Err(Redirect::to("/login/discord")) + } +} + +#[get("/<_>/<_>")] +pub async fn dashboard_2(cookies: &CookieJar<'_>) -> Result { if cookies.get_private("userid").is_some() { let map: HashMap<&str, String> = HashMap::new(); Ok(Template::render("dashboard", &map)) diff --git a/web/static/css/style.css b/web/static/css/style.css index 6d4ea76..fb42aa9 100644 --- a/web/static/css/style.css +++ b/web/static/css/style.css @@ -291,10 +291,19 @@ div.dashboard-sidebar:not(.mobile-sidebar) { flex-direction: column; } +ul.guildList { + flex-grow: 1; + flex-shrink: 1; + overflow: scroll; +} + div.dashboard-sidebar:not(.mobile-sidebar) .aside-footer { - position: fixed; - bottom: 0; - width: 226px; + flex-shrink: 0; + flex-grow: 0; +} + +div.dashboard-sidebar svg { + flex-shrink: 0; } div.mobile-sidebar { @@ -716,6 +725,18 @@ a.switch-pane { text-overflow: ellipsis; } +.guild-submenu { + display: none; +} + +.guild-submenu li { + font-size: 0.8rem; +} + +a.switch-pane.is-active ~ .guild-submenu { + display: block; +} + .feedback { background-color: #5865F2; } diff --git a/web/static/js/main.js b/web/static/js/main.js index 2199295..cd164c7 100644 --- a/web/static/js/main.js +++ b/web/static/js/main.js @@ -34,13 +34,11 @@ let globalPatreon = false; let guildPatreon = false; function guildId() { - return document.querySelector(".guildList a.is-active").dataset["guild"]; + return document.querySelector("li > a.is-active").parentElement.dataset["guild"]; } -function loadErrors() { - return fetch(`/dashboard/api/guild/${guildId()}/errors`).then((response) => - response.json() - ); +function guildName() { + return guildNames[guildId()]; } function colorToInt(r, g, b) { @@ -456,21 +454,19 @@ document.addEventListener("guildSwitched", async (e) => { .querySelectorAll(".patreon-only") .forEach((el) => el.classList.add("is-locked")); - let $anchor = document.querySelector( - `.switch-pane[data-guild="${e.detail.guild_id}"]` - ); + let $li = document.querySelector(`li[data-guild="${e.detail.guild_id}"]`); - let hasError = false; - - if ($anchor === null) { + if ($li === null) { switch_pane("user-error"); - hasError = true; return; } - switch_pane($anchor.dataset["pane"]); + switch_pane(e.detail.pane); reset_guild_pane(); - $anchor.classList.add("is-active"); + $li.querySelector("li > a").classList.add("is-active"); + $li.querySelectorAll(`*[data-pane="${e.detail.pane}"]`).forEach((el) => { + el.classList.add("is-active"); + }); if (globalPatreon || (await fetch_patreon(e.detail.guild_id))) { document @@ -478,18 +474,26 @@ document.addEventListener("guildSwitched", async (e) => { .forEach((el) => el.classList.remove("is-locked")); } - hasError = await fetch_channels(e.detail.guild_id); + const event = new CustomEvent("paneLoad", { + detail: { + guild_id: e.detail.guild_id, + pane: e.detail.pane, + }, + }); + document.dispatchEvent(event); +}); + +document.addEventListener("paneLoad", async (ev) => { + const hasError = await fetch_channels(ev.detail.guild_id); if (!hasError) { - fetch_roles(e.detail.guild_id); - fetch_templates(e.detail.guild_id); - fetch_reminders(e.detail.guild_id); - loadErrors().then((res) => { - console.log(res); - }); + fetch_roles(ev.detail.guild_id); + fetch_templates(ev.detail.guild_id); + fetch_reminders(ev.detail.guild_id); document.querySelectorAll("p.pageTitle").forEach((el) => { - el.textContent = `${e.detail.guild_name} Reminders`; + el.textContent = `${guildName()} Reminders`; }); + document.querySelectorAll("select.channel-selector").forEach((el) => { el.addEventListener("change", (e) => { update_select(e.target); @@ -694,21 +698,37 @@ document.addEventListener("DOMContentLoaded", async () => { "%guildname%", guild.name ); - $anchor.dataset["guild"] = guild.id; $anchor.dataset["name"] = guild.name; - $anchor.href = `/dashboard/${guild.id}?name=${guild.name}`; + $anchor.href = `/dashboard/${guild.id}/reminders`; - $anchor.addEventListener("click", async (e) => { - e.preventDefault(); - window.history.pushState({}, "", `/dashboard/${guild.id}`); - const event = new CustomEvent("guildSwitched", { - detail: { - guild_name: guild.name, - guild_id: guild.id, - }, + const $li = $anchor.parentElement; + $li.dataset["guild"] = guild.id; + + $li.querySelectorAll("a").forEach((el) => { + el.addEventListener("click", (e) => { + const pane = el.dataset["pane"]; + const slug = el.dataset["slug"]; + + if (pane !== undefined && slug !== undefined) { + e.preventDefault(); + + switch_pane(pane); + + window.history.pushState( + {}, + "", + `/dashboard/${guild.id}/${slug}` + ); + const event = new CustomEvent("guildSwitched", { + detail: { + guild_id: guild.id, + pane, + }, + }); + + document.dispatchEvent(event); + } }); - - document.dispatchEvent(event); }); element.append($clone); @@ -724,6 +744,7 @@ document.addEventListener("DOMContentLoaded", async () => { detail: { guild_name: name, guild_id: id, + pane: "guild", }, }); diff --git a/web/static/js/reminder_errors.js b/web/static/js/reminder_errors.js new file mode 100644 index 0000000..ff12367 --- /dev/null +++ b/web/static/js/reminder_errors.js @@ -0,0 +1,16 @@ +function loadErrors() { + return fetch(`/dashboard/api/guild/${guildId()}/errors`).then((response) => + response.json() + ); +} + +document.addEventListener("paneLoad", (ev) => { + if (ev.detail.pane !== "reminder-errors") { + return; + } + + // Load errors + loadErrors().then((res) => {}); + + $loader.classList.add("is-hidden"); +}); diff --git a/web/templates/dashboard.html.tera b/web/templates/dashboard.html.tera index 4731427..18585c8 100644 --- a/web/templates/dashboard.html.tera +++ b/web/templates/dashboard.html.tera @@ -375,9 +375,19 @@