jude/reminder-bot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Add loader

Browse Source
This commit is contained in:
jude 2024-02-24 17:47:00 +00:00
parent 79e6498245
commit 90550dc2c7
3 changed files with 131 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
reminder-dashboard/src/components/Guild/GuildReminders.tsx
View File

@ -4,6 +4,7 @@ import { fetchGuildChannels, fetchGuildReminders } from "../../api";
import { EditReminder } from "../Reminder/EditReminder"; import { EditReminder } from "../Reminder/EditReminder";
import { CreateReminder } from "../Reminder/CreateReminder"; import { CreateReminder } from "../Reminder/CreateReminder";
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { Loader } from "../Loader";
enum Sort { enum Sort {
Time = "time", Time = "time",
@ -14,7 +15,12 @@ enum Sort {
export const GuildReminders = () => { export const GuildReminders = () => {
const { guild } = useParams(); const { guild } = useParams();
const { isSuccess, isFetching, data: guildReminders } = useQuery(fetchGuildReminders(guild)); const {
isSuccess,
isFetching,
isFetched,
data: guildReminders,
} = useQuery(fetchGuildReminders(guild));
const { data: channels } = useQuery(fetchGuildChannels(guild)); const { data: channels } = useQuery(fetchGuildChannels(guild));
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
@ -23,108 +29,114 @@ export const GuildReminders = () => {
let prevReminder = null; let prevReminder = null;
return ( return (
<div style={{ margin: "0 12px 12px 12px" }}> <>
<strong>Create Reminder</strong> {!isFetched && <Loader />}
<div id={"reminderCreator"}> <div style={{ margin: "0 12px 12px 12px" }}>
<CreateReminder /> <strong>Create Reminder</strong>
</div> <div id={"reminderCreator"}>
<br></br> <CreateReminder />
<div class={"field"}> </div>
<div class={"columns is-mobile"}> <br></br>
<div class={"column"}> <div class={"field"}>
<strong>Reminders</strong> <div class={"columns is-mobile"}>
</div> <div class={"column"}>
<div class={"column is-narrow"}> <strong>Reminders</strong>
<div class="control has-icons-left"> </div>
<div class="select is-small"> <div class={"column is-narrow"}>
<select <div class="control has-icons-left">
id="orderBy" <div class="select is-small">
onInput={(ev) => { <select
setSort(ev.currentTarget.value as Sort); id="orderBy"
}} onInput={(ev) => {
> setSort(ev.currentTarget.value as Sort);
<option value={Sort.Time} selected={sort == Sort.Time}> }}
Time >
</option> <option value={Sort.Time} selected={sort == Sort.Time}>
<option value={Sort.Name} selected={sort == Sort.Name}> Time
Name </option>
</option> <option value={Sort.Name} selected={sort == Sort.Name}>
<option value={Sort.Channel} selected={sort == Sort.Channel}> Name
Channel </option>
</option> <option
</select> value={Sort.Channel}
</div> selected={sort == Sort.Channel}
<div class="icon is-small is-left"> >
<i class="fas fa-sort-amount-down"></i> Channel
</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-sort-amount-down"></i>
</div>
</div> </div>
</div> </div>
</div> <div class={"column is-narrow"}>
<div class={"column is-narrow"}> <div class="control has-icons-left">
<div class="control has-icons-left"> <div class="select is-small">
<div class="select is-small"> <select
<select id="expandAll"
id="expandAll" onInput={(ev) => {
onInput={(ev) => { if (ev.currentTarget.value === "expand") {
if (ev.currentTarget.value === "expand") { setCollapsed(false);
setCollapsed(false); } else if (ev.currentTarget.value === "collapse") {
} else if (ev.currentTarget.value === "collapse") { setCollapsed(true);
setCollapsed(true); }
} }}
}} >
> <option value="" selected></option>
<option value="" selected></option> <option value="expand">Expand All</option>
<option value="expand">Expand All</option> <option value="collapse">Collapse All</option>
<option value="collapse">Collapse All</option> </select>
</select> </div>
</div> <div class="icon is-small is-left">
<div class="icon is-small is-left"> <i class="fas fa-expand-arrows"></i>
<i class="fas fa-expand-arrows"></i> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div id={"guildReminders"} className={isFetching ? "loading" : ""}> <div id={"guildReminders"} className={isFetching ? "loading" : ""}>
{isSuccess && {isSuccess &&
guildReminders guildReminders
.sort((r1, r2) => { .sort((r1, r2) => {
if (sort === Sort.Time) { if (sort === Sort.Time) {
return r1.utc_time > r2.utc_time ? 1 : -1; return r1.utc_time > r2.utc_time ? 1 : -1;
} else if (sort === Sort.Name) { } else if (sort === Sort.Name) {
return r1.name > r2.name ? 1 : -1; return r1.name > r2.name ? 1 : -1;
} else { } else {
return r1.channel > r2.channel ? 1 : -1; return r1.channel > r2.channel ? 1 : -1;
} }
}) })
.map((reminder) => { .map((reminder) => {
let breaker = <></>; let breaker = <></>;
if (sort === Sort.Channel && channels) { if (sort === Sort.Channel && channels) {
if ( if (
prevReminder === null || prevReminder === null ||
prevReminder.channel !== reminder.channel prevReminder.channel !== reminder.channel
) { ) {
const channel = channels.find( const channel = channels.find(
(ch) => ch.id === reminder.channel, (ch) => ch.id === reminder.channel,
); );
breaker = <div class={"channel-tag"}>#{channel.name}</div>; breaker = <div class={"channel-tag"}>#{channel.name}</div>;
}
} }
}
prevReminder = reminder; prevReminder = reminder;
return ( return (
<> <>
{breaker} {breaker}
<EditReminder <EditReminder
key={reminder.uid} key={reminder.uid}
reminder={reminder} reminder={reminder}
globalCollapse={collapsed} globalCollapse={collapsed}
/> />
</> </>
); );
})} })}
</div>
</div> </div>
</div> </>
); );
}; };

8
reminder-dashboard/src/components/Loader/index.tsx Normal file
View File

@ -0,0 +1,8 @@
export const Loader = () => (
<div className={"load-screen"}>
<div>
<p>Loading...</p>
<i className={"fa fa-cog fa-spin"}></i>
</div>
</div>
);

18
web/static/css/style.css
View File

@ -714,6 +714,24 @@ li.highlight {
pointer-events: none; pointer-events: none;
} }
.load-screen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.8);
pointer-events: none;
z-index: 999;
font-size: 2rem;
font-weight: bolder;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
/* END */ /* END */
div.reminderError { div.reminderError {