Add error pane

This commit is contained in:
jude 2023-08-27 17:41:23 +01:00
parent adf29dca5d
commit b6b5e6d2b2
6 changed files with 119 additions and 40 deletions

View File

@ -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,

View File

@ -676,7 +676,17 @@ pub async fn dashboard_home(cookies: &CookieJar<'_>) -> Result<Template, Redirec
}
#[get("/<_>")]
pub async fn dashboard(cookies: &CookieJar<'_>) -> Result<Template, Redirect> {
pub async fn dashboard_1(cookies: &CookieJar<'_>) -> Result<Template, Redirect> {
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<Template, Redirect> {
if cookies.get_private("userid").is_some() {
let map: HashMap<&str, String> = HashMap::new();
Ok(Template::render("dashboard", &map))

View File

@ -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;
}

View File

@ -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);
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);
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(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) => {
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();
window.history.pushState({}, "", `/dashboard/${guild.id}`);
switch_pane(pane);
window.history.pushState(
{},
"",
`/dashboard/${guild.id}/${slug}`
);
const event = new CustomEvent("guildSwitched", {
detail: {
guild_name: guild.name,
guild_id: guild.id,
pane,
},
});
document.dispatchEvent(event);
}
});
});
element.append($clone);
@ -724,6 +744,7 @@ document.addEventListener("DOMContentLoaded", async () => {
detail: {
guild_name: name,
guild_id: id,
pane: "guild",
},
});

View File

@ -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");
});

View File

@ -375,9 +375,19 @@
<template id="guildListEntry">
<li>
<a class="switch-pane" data-pane="guild">
<a class="switch-pane" data-pane="guild" data-slug="reminders">
<span class="icon"><i class="fas fa-map-pin"></i></span> <span class="guild-name">%guildname%</span>
</a>
<ul class="guild-submenu">
<li>
<a class="switch-pane" data-pane="guild" data-slug="reminders">
<span class="icon"><i class="fas fa-calendar-alt"></i></span> Reminders
</a>
<a class="switch-pane" data-pane="reminder-errors" data-slug="errors">
<span class="icon"><i class="fas fa-exclamation-triangle"></i></span> Errors
</a>
</li>
</ul>
</li>
</template>