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

Add dashboard to build

Browse Source
This commit is contained in:
jude
2024-02-24 16:10:25 +00:00
parent 53e13844f9
commit a8ef3d03f9
127 changed files with 75846 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
reminder-dashboard/src/components/App/FlashContext.tsx Normal file
View File

@ -0,0 +1,7 @@
import { createContext } from "preact";
import { useContext } from "preact/compat";
import { Message } from "./FlashProvider";
export const FlashContext = createContext(null as (message: Message) => void);
export const useFlash = () => useContext(FlashContext);

43
reminder-dashboard/src/components/App/FlashProvider.tsx Normal file
View File

@ -0,0 +1,43 @@
import { FlashContext } from "./FlashContext";
import { useState } from "preact/hooks";
import { MESSAGE_FLASH_TIME } from "../../consts";
export type Message = {
message: string;
type: "error" | "success";
};
export const FlashProvider = ({ children }) => {
const [messages, setMessages] = useState([] as Message[]);
return (
<FlashContext.Provider
value={(message: Message) => {
setMessages((messages: Message[]) => [...messages, message]);
setTimeout(() => {
setMessages((messages) => [...messages].splice(1));
}, MESSAGE_FLASH_TIME);
}}
>
<>
{children}
<div class="flash-container">
{messages.map((message) => {
const className = message.type === "error" ? "is-danger" : "is-success";
const icon =
message.type === "error" ? "fa-exclamation-circle" : "fa-check";
return (
<div class={`notification flash-message is-active ${className}`}>
<span class="icon">
<i class={`far ${icon}`}></i>
</span>{" "}
<span class="error-message">{message.message}</span>
</div>
);
})}
</div>
</>
</FlashContext.Provider>
);
};

20
reminder-dashboard/src/components/App/TimezoneProvider.tsx Normal file
View File

@ -0,0 +1,20 @@
import { createContext } from "preact";
import { useContext } from "preact/compat";
import { useState } from "preact/hooks";
import { DateTime } from "luxon";
type TTimezoneContext = [string, (tz: string) => void];
const TimezoneContext = createContext(["UTC", () => {}] as TTimezoneContext);
export const TimezoneProvider = ({ children }) => {
const [timezone, setTimezone] = useState(DateTime.now().zoneName);
return (
<TimezoneContext.Provider value={[timezone, setTimezone]}>
{children}
</TimezoneContext.Provider>
);
};
export const useTimezone = () => useContext(TimezoneContext);

33
reminder-dashboard/src/components/App/index.tsx Normal file
View File

@ -0,0 +1,33 @@
import { Sidebar } from "../Sidebar";
import { QueryClient, QueryClientProvider } from "react-query";
import { Route, Router, Switch } from "wouter";
import { Welcome } from "../Welcome";
import { Guild } from "../Guild";
import { FlashProvider } from "./FlashProvider";
import { TimezoneProvider } from "./TimezoneProvider";
export function App() {
const queryClient = new QueryClient();
return (
<TimezoneProvider>
<FlashProvider>
<QueryClientProvider client={queryClient}>
<Router base={"/dashboard"}>
<div class="columns is-gapless dashboard-frame">
<Sidebar />
<div class="column is-main-content">
<Switch>
<Route path={"/:guild/reminders"} component={Guild}></Route>
<Route>
<Welcome />
</Route>
</Switch>
</div>
</div>
</Router>
</QueryClientProvider>
</FlashProvider>
</TimezoneProvider>
);
}

25
reminder-dashboard/src/components/Guild/GuildError.tsx Normal file
View File

@ -0,0 +1,25 @@
export const GuildError = () => {
return (
<div class="hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">We couldn't get this server's data</p>
<p class="subtitle">
Please check Reminder Bot is in the server, and has correct permissions.
</p>
<a
class="button is-size-4 is-rounded is-success"
href="https://invite.reminder-bot.com"
>
<p class="is-size-4">
<span>Add to Server</span>{" "}
<span class="icon">
<i class="fas fa-chevron-right"></i>
</span>
</p>
</a>
</div>
</div>
</div>
);
};

130
reminder-dashboard/src/components/Guild/GuildReminders.tsx Normal file
View File

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

27
reminder-dashboard/src/components/Guild/index.tsx Normal file
View File

@ -0,0 +1,27 @@
import { useQuery } from "react-query";
import { fetchGuildInfo } from "../../api";
import { useParams } from "wouter";
import { GuildReminders } from "./GuildReminders";
import { GuildError } from "./GuildError";
import { createPortal } from "preact/compat";
import { Import } from "../Import";
export const Guild = () => {
const { guild } = useParams();
const { isSuccess, data: guildInfo } = useQuery(fetchGuildInfo(guild));
if (!isSuccess) {
return <></>;
} else if (guildInfo.error) {
return <GuildError />;
} else {
const importModal = createPortal(<Import />, document.getElementById("bottom-sidebar"));
return (
<>
{importModal}
<GuildReminders />
</>
);
}
};

144
reminder-dashboard/src/components/Import/index.tsx Normal file
View File

@ -0,0 +1,144 @@
import { Modal } from "../Modal";
import { useRef, useState } from "preact/hooks";
import { useParams } from "wouter";
import axios from "axios";
import { useFlash } from "../App/FlashContext";
export const Import = () => {
const [modalOpen, setModalOpen] = useState(false);
return (
<>
<a
class="show-modal"
data-modal="chooseTimezoneModal"
onClick={() => {
setModalOpen(true);
}}
>
<span class="icon">
<i class="fas fa-exchange"></i>
</span>{" "}
Import/Export
</a>
{modalOpen && <ImportModal setModalOpen={setModalOpen} />}
</>
);
};
const ImportModal = ({ setModalOpen }) => {
const { guild } = useParams();
const aRef = useRef<HTMLAnchorElement>();
const inputRef = useRef<HTMLInputElement>();
const flash = useFlash();
const [isImporting, setIsImporting] = useState(false);
return (
<Modal
setModalOpen={setModalOpen}
title={
<>
Import/Export Manager{" "}
<a href="/help/iemanager">
<span>
<i class="fa fa-question-circle"></i>
</span>
</a>
</>
}
>
<>
<div class="control">
<div class="field">
<label>
<input
type="radio"
class="default-width"
name="exportSelect"
value="reminders"
checked
/>
Reminders
</label>
</div>
</div>
<br />
<div class="has-text-centered">
<div style="color: red">
Please first read the <a href="/help/iemanager">support page</a>
</div>
<button
class="button is-success is-outlined"
style={{ margin: "2px" }}
id="import-data"
disabled={isImporting}
onClick={() => {
inputRef.current.click();
}}
>
Import Data
</button>
<button
class="button is-success"
style={{ margin: "2px" }}
id="export-data"
onClick={() =>
axios
.get(`/dashboard/api/guild/${guild}/export/reminders`)
.then(({ data, status }) => {
if (status === 200) {
aRef.current.href = `data:text/plain;charset=utf-8,${encodeURIComponent(
data.body,
)}`;
aRef.current.click();
} else {
flash({
message: `Unexpected status ${status}`,
type: "error",
});
}
})
}
>
Export Data
</button>
</div>
<a ref={aRef} id="downloader" download="export.csv" class="is-hidden" />
<input
ref={inputRef}
id="uploader"
type="file"
hidden
onChange={() => {
new Promise((resolve) => {
let fileReader = new FileReader();
fileReader.onload = (e) => resolve(fileReader.result);
fileReader.readAsDataURL(inputRef.current.files[0]);
}).then((dataUrl: string) => {
setIsImporting(true);
axios
.put(`/dashboard/api/guild/${guild}/export/reminders`, {
body: JSON.stringify({ body: dataUrl.split(",")[1] }),
})
.then(({ data }) => {
setIsImporting(false);
if (data.error) {
flash({ message: data.error, type: "error" });
} else {
flash({ message: data.message, type: "success" });
}
})
.then(() => {
delete inputRef.current.files[0];
});
});
}}
/>
</>
</Modal>
);
};

61
reminder-dashboard/src/components/Modal/index.tsx Normal file
View File

@ -0,0 +1,61 @@
import { JSX } from "preact";
import { createPortal } from "preact/compat";
type Props = {
setModalOpen: (open: boolean) => never;
title: string | JSX.Element;
onSubmitText?: string;
onSubmit?: () => void;
children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);
};
export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }: Props) => {
const body = document.querySelector("body");
return createPortal(
<div class="modal is-active">
<div
class="modal-background"
onClick={() => {
setModalOpen(false);
}}
></div>
<div class="modal-card">
<header class="modal-card-head">
<label class="modal-card-title">{title}</label>
<button
class="delete close-modal"
aria-label="close"
onClick={() => {
setModalOpen(false);
}}
></button>
</header>
<section class="modal-card-body">{children}</section>
{onSubmit && (
<footer class="modal-card-foot">
<button class="button is-success" onInput={onSubmit}>
{onSubmitText || "Save"}
</button>
<button
class="button close-modal"
onClick={() => {
setModalOpen(false);
}}
>
Cancel
</button>
</footer>
)}
</div>
<button
class="modal-close is-large close-modal"
aria-label="close"
onClick={() => {
setModalOpen(false);
}}
></button>
</div>,
body,
);
};

46
reminder-dashboard/src/components/Reminder/Attachment.tsx Normal file
View File

@ -0,0 +1,46 @@
import { useReminder } from "./ReminderContext";
export const Attachment = () => {
const [{ attachment_name }, setReminder] = useReminder();
return (
<div class="file is-small is-boxed">
<label class="file-label">
<input
class="file-input"
type="file"
name="attachment"
onInput={async (ev) => {
const input = ev.currentTarget;
let file = input.files[0];
if (file.size >= 8 * 1024 * 1024) {
return { error: "File too large." };
}
let attachment: string = await new Promise((resolve) => {
let fileReader = new FileReader();
fileReader.onload = () => resolve(fileReader.result as string);
fileReader.readAsDataURL(file);
});
attachment = attachment.split(",")[1];
const attachment_name = file.name;
setReminder((reminder) => ({
...reminder,
attachment,
attachment_name,
}));
}}
></input>
<span class="file-cta">
<span class="file-label">{attachment_name || "Add Attachment"}</span>
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
</span>
</label>
</div>
);
};

122
reminder-dashboard/src/components/Reminder/ButtonRow/CreateButtonRow.tsx Normal file
View File

@ -0,0 +1,122 @@
import { LoadTemplate } from "../LoadTemplate";
import { useReminder } from "../ReminderContext";
import { useMutation, useQueryClient } from "react-query";
import { postGuildReminder, postGuildTemplate } from "../../../api";
import { useParams } from "wouter";
import { useState } from "preact/hooks";
import { ICON_FLASH_TIME } from "../../../consts";
import { useFlash } from "../../App/FlashContext";
export const CreateButtonRow = () => {
const { guild } = useParams();
const [reminder] = useReminder();
const [recentlyCreated, setRecentlyCreated] = useState(false);
const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false);
const flash = useFlash();
const queryClient = useQueryClient();
const mutation = useMutation({
...postGuildReminder(guild),
onSuccess: (data) => {
if (data.error) {
flash({
message: data.error,
type: "error",
});
} else {
flash({
message: "Reminder created",
type: "success",
});
queryClient.invalidateQueries({
queryKey: ["GUILD_REMINDERS", guild],
});
setRecentlyCreated(true);
setTimeout(() => {
setRecentlyCreated(false);
}, ICON_FLASH_TIME);
}
},
});
const templateMutation = useMutation({
...postGuildTemplate(guild),
onSuccess: (data) => {
if (data.error) {
flash({
message: data.error,
type: "error",
});
} else {
flash({
message: "Template created",
type: "success",
});
queryClient.invalidateQueries({
queryKey: ["GUILD_TEMPLATES", guild],
});
setTemplateRecentlyCreated(true);
setTimeout(() => {
setTemplateRecentlyCreated(false);
}, ICON_FLASH_TIME);
}
},
});
return (
<div class="button-row">
<div class="button-row-reminder">
<button
class="button is-success"
onClick={() => {
mutation.mutate(reminder);
}}
>
<span>Create Reminder</span>{" "}
{mutation.isLoading ? (
<span class="icon">
<i class="fas fa-spin fa-cog"></i>
</span>
) : recentlyCreated ? (
<span class="icon">
<i class="fas fa-check"></i>
</span>
) : (
<span class="icon">
<i class="fas fa-sparkles"></i>
</span>
)}
</button>
</div>
<div class="button-row-template">
<div>
<button
class="button is-success is-outlined"
onClick={() => {
templateMutation.mutate(reminder);
}}
>
<span>Create Template</span>{" "}
{templateMutation.isLoading ? (
<span class="icon">
<i class="fas fa-spin fa-cog"></i>
</span>
) : templateRecentlyCreated ? (
<span class="icon">
<i class="fas fa-check"></i>
</span>
) : (
<span class="icon">
<i class="fas fa-file-spreadsheet"></i>
</span>
)}
</button>
</div>
<div>
<LoadTemplate />
</div>
</div>
</div>
);
};

74
reminder-dashboard/src/components/Reminder/ButtonRow/DeleteButton.tsx Normal file
View File

@ -0,0 +1,74 @@
import { useState } from "preact/hooks";
import { Modal } from "../../Modal";
import { useMutation, useQueryClient } from "react-query";
import { useReminder } from "../ReminderContext";
import { deleteGuildReminder } from "../../../api";
import { useParams } from "wouter";
import { useFlash } from "../../App/FlashContext";
export const DeleteButton = () => {
const [modalOpen, setModalOpen] = useState(false);
return (
<>
<button
class="button is-danger delete-reminder"
onClick={() => {
setModalOpen(true);
}}
>
Delete
</button>
{modalOpen && <DeleteModal setModalOpen={setModalOpen}></DeleteModal>}
</>
);
};
const DeleteModal = ({ setModalOpen }) => {
const [reminder] = useReminder();
const { guild } = useParams();
const flash = useFlash();
const queryClient = useQueryClient();
const mutation = useMutation({
...deleteGuildReminder(guild),
onSuccess: () => {
flash({
message: "Reminder deleted",
type: "success",
});
queryClient.invalidateQueries({
queryKey: ["GUILD_REMINDERS", guild],
});
setModalOpen(false);
},
});
return (
<Modal setModalOpen={setModalOpen} title={"Delete Reminder"}>
<>
<p>This reminder will be permanently deleted. Are you sure?</p>
<br></br>
<div class="has-text-centered">
<button
class="button is-danger"
onClick={() => {
mutation.mutate(reminder);
}}
disabled={mutation.isLoading}
>
Delete
</button>
<button
class="button is-light close-modal"
onClick={() => {
setModalOpen(false);
}}
>
Cancel
</button>
</div>
</>
</Modal>
);
};

88
reminder-dashboard/src/components/Reminder/ButtonRow/EditButtonRow.tsx Normal file
View File

@ -0,0 +1,88 @@
import { useRef, useState } from "preact/hooks";
import { useMutation, useQueryClient } from "react-query";
import { patchGuildReminder } from "../../../api";
import { useParams } from "wouter";
import { ICON_FLASH_TIME } from "../../../consts";
import { DeleteButton } from "./DeleteButton";
import { useReminder } from "../ReminderContext";
import { useFlash } from "../../App/FlashContext";
export const EditButtonRow = () => {
const { guild } = useParams();
const [reminder, setReminder] = useReminder();
const [recentlySaved, setRecentlySaved] = useState(false);
const queryClient = useQueryClient();
const iconFlashTimeout = useRef(0);
const flash = useFlash();
const mutation = useMutation({
...patchGuildReminder(guild),
onSuccess: (response) => {
queryClient.invalidateQueries({
queryKey: ["GUILD_REMINDERS", guild],
});
if (iconFlashTimeout.current !== null) {
clearTimeout(iconFlashTimeout.current);
}
if (response.data.errors.length > 0) {
setRecentlySaved(false);
for (const error of response.data.errors) {
flash({ message: error, type: "error" });
}
} else {
setRecentlySaved(true);
iconFlashTimeout.current = setTimeout(() => {
setRecentlySaved(false);
}, ICON_FLASH_TIME);
setReminder(response.data.reminder);
}
},
});
return (
<div class="button-row-edit">
<button
class="button is-success save-btn"
onClick={() => {
mutation.mutate(reminder);
}}
disabled={mutation.isLoading}
>
<span>Save</span>{" "}
{mutation.isLoading ? (
<span class="icon">
<i class="fas fa-spin fa-cog"></i>
</span>
) : recentlySaved ? (
<span class="icon">
<i class="fas fa-check"></i>
</span>
) : (
<span class="icon">
<i class="fas fa-save"></i>
</span>
)}
</button>
<button
class="button is-warning"
onClick={() => {
mutation.mutate({
...reminder,
enabled: !reminder.enabled,
});
}}
disabled={mutation.isLoading}
>
{reminder.enabled ? "Disable" : "Enable"}
</button>
<DeleteButton />
</div>
);
};

32
reminder-dashboard/src/components/Reminder/ChannelSelector.tsx Normal file
View File

@ -0,0 +1,32 @@
import { useQuery } from "react-query";
import { useParams } from "wouter";
import { fetchGuildChannels } from "../../api";
export const ChannelSelector = ({ channel, setChannel }) => {
const { guild } = useParams();
const { isSuccess, data } = useQuery(fetchGuildChannels(guild));
return (
<div class="control has-icons-left">
<div class="select">
<select
name="channel"
class="channel-selector"
onInput={(ev) => {
setChannel(ev.currentTarget.value);
}}
>
{isSuccess &&
data.map((c) => (
<option value={c.id} selected={c.id === channel}>
{c.name}
</option>
))}
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-hashtag"></i>
</div>
</div>
);
};

25
reminder-dashboard/src/components/Reminder/Content.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useReminder } from "./ReminderContext";
export const Content = () => {
const [reminder, setReminder] = useReminder();
return (
<>
<label class="is-sr-only">Content</label>
<textarea
class="message-input autoresize discord-content"
placeholder="Content..."
maxlength={2000}
name="content"
rows={1}
value={reminder.content}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
content: ev.currentTarget.value,
}));
}}
></textarea>
</>
);
};

74
reminder-dashboard/src/components/Reminder/CreateReminder.tsx Normal file
View File

@ -0,0 +1,74 @@
import { useState } from "preact/hooks";
import { fetchGuildChannels, Reminder } from "../../api";
import { DateTime } from "luxon";
import { CreateButtonRow } from "./ButtonRow/CreateButtonRow";
import { TopBar } from "./TopBar";
import { Message } from "./Message";
import { Settings } from "./Settings";
import { ReminderContext } from "./ReminderContext";
import { useQuery } from "react-query";
import { useParams } from "wouter";
function defaultReminder(): Reminder {
return {
attachment: null,
attachment_name: null,
avatar: null,
channel: null,
content: "",
embed_author: "",
embed_author_url: null,
embed_color: 0,
embed_description: "",
embed_fields: [],
embed_footer: "",
embed_footer_url: null,
embed_image_url: null,
embed_thumbnail_url: null,
embed_title: "",
enabled: true,
expires: null,
interval_days: null,
interval_months: null,
interval_seconds: null,
name: "",
restartable: false,
tts: false,
uid: "",
username: "",
utc_time: DateTime.now(),
};
}
export const CreateReminder = () => {
const { guild } = useParams();
const [reminder, setReminder] = useState(defaultReminder());
const [collapsed, setCollapsed] = useState(false);
const { isSuccess, data: guildChannels } = useQuery(fetchGuildChannels(guild));
if (isSuccess && reminder.channel === null) {
setReminder((reminder) => ({
...reminder,
channel: reminder.channel || guildChannels[0].id,
}));
}
return (
<ReminderContext.Provider value={[reminder, setReminder]}>
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
<TopBar
toggleCollapsed={() => {
setCollapsed(!collapsed);
}}
/>
<div class="columns reminder-settings">
<Message />
<Settings />
</div>
<CreateButtonRow />
</div>
</ReminderContext.Provider>
);
};

45
reminder-dashboard/src/components/Reminder/EditReminder.tsx Normal file
View File

@ -0,0 +1,45 @@
import { Reminder } from "../../api";
import { useEffect, useState } from "preact/hooks";
import { EditButtonRow } from "./ButtonRow/EditButtonRow";
import { Message } from "./Message";
import { Settings } from "./Settings";
import { ReminderContext } from "./ReminderContext";
import { TopBar } from "./TopBar";
type Props = {
reminder: Reminder;
globalCollapse: boolean;
};
export const EditReminder = ({ reminder: initialReminder, globalCollapse }: Props) => {
const [propReminder, setPropReminder] = useState(initialReminder);
const [reminder, setReminder] = useState(initialReminder);
const [collapsed, setCollapsed] = useState(false);
useEffect(() => {
setCollapsed(globalCollapse);
}, [globalCollapse]);
// Reminder updated from web response
if (propReminder !== initialReminder) {
setReminder(initialReminder);
setPropReminder(initialReminder);
}
return (
<ReminderContext.Provider value={[reminder, setReminder]}>
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
<TopBar
toggleCollapsed={() => {
setCollapsed(!collapsed);
}}
/>
<div class="columns reminder-settings">
<Message />
<Settings />
</div>
<EditButtonRow />
</div>
</ReminderContext.Provider>
);
};

50
reminder-dashboard/src/components/Reminder/Embed/Author.tsx Normal file
View File

@ -0,0 +1,50 @@
import { ImagePicker } from "../ImagePicker";
import { Reminder } from "../../../api";
type Props = {
name: string;
icon: string;
setReminder: (r: (reminder: Reminder) => Reminder) => void;
};
export const Author = ({ name, icon, setReminder }: Props) => {
return (
<div class="embed-author-box">
<div class="a">
<p class="image is-24x24 customizable">
<ImagePicker
class="is-rounded embed_author_url"
url={icon}
alt="Image for embed author"
setImage={(url) => {
setReminder((reminder) => ({
...reminder,
embed_author_url: url,
}));
}}
></ImagePicker>
</p>
</div>
<div class="b">
<label class="is-sr-only" for="embedAuthor">
Embed Author
</label>
<textarea
class="discord-embed-author message-input autoresize"
placeholder="Embed Author..."
rows={1}
maxlength={256}
name="embed_author"
value={name}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
embed_author: ev.currentTarget.value,
}));
}}
></textarea>
</div>
</div>
);
};

68
reminder-dashboard/src/components/Reminder/Embed/Color.tsx Normal file
View File

@ -0,0 +1,68 @@
import { useState } from "preact/hooks";
import { HexColorPicker } from "react-colorful";
import { Modal } from "../../Modal";
import { Reminder } from "../../../api";
type Props = {
color: string;
setReminder: (r: (reminder: Reminder) => Reminder) => void;
};
function colorToInt(hex: string) {
return parseInt(hex.substring(1), 16);
}
export const Color = ({ color, setReminder }: Props) => {
const [modalOpen, setModalOpen] = useState(false);
return (
<>
{modalOpen && (
<ColorModal
color={color}
setModalOpen={setModalOpen}
setReminder={setReminder}
></ColorModal>
)}
<button
class="change-color button is-rounded is-small"
onClick={() => {
setModalOpen(true);
}}
>
<span class="is-sr-only">Choose embed color</span>
<i class="fas fa-eye-dropper"></i>
</button>
</>
);
};
const ColorModal = ({ setModalOpen, color, setReminder }) => {
return (
<Modal setModalOpen={setModalOpen} title={"Select Color"}>
<div class="colorpicker-container">
<HexColorPicker
color={color}
onInput={(color) => {
setReminder((reminder) => ({
...reminder,
embed_color: colorToInt(color),
}));
}}
></HexColorPicker>
</div>
<br></br>
<input
class="input"
id="colorInput"
value={color}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
embed_color: colorToInt(ev.currentTarget.value),
}));
}}
></input>
</Modal>
);
};

18
reminder-dashboard/src/components/Reminder/Embed/Description.tsx Normal file
View File

@ -0,0 +1,18 @@
export const Description = ({ description, onInput }) => (
<>
<label class="is-sr-only" for="embedDescription">
Embed Description
</label>
<textarea
class="discord-description message-input autoresize "
placeholder="Embed Description..."
maxlength={4096}
name="embed_description"
rows={1}
value={description}
onInput={(ev) => {
onInput(ev.currentTarget.value);
}}
></textarea>
</>
);

57
reminder-dashboard/src/components/Reminder/Embed/Fields/Field.tsx Normal file
View File

@ -0,0 +1,57 @@
export const Field = ({ title, value, inline, index, onUpdate }) => {
return (
<div data-inlined={inline ? "1" : "0"} class="embed-field-box" key={index}>
<label class="is-sr-only" for="embedFieldTitle">
Field Title
</label>
<div class="is-flex">
<textarea
class="discord-field-title field-input message-input autoresize"
placeholder="Field Title..."
rows={1}
maxlength={256}
name="embed_field_title[]"
value={title}
onInput={(ev) =>
onUpdate({
index,
title: ev.currentTarget.value,
})
}
/>
{(value !== "" || title !== "") && (
<button
class="button is-small inline-btn"
onClick={() => {
onUpdate({
index,
inline: !inline,
});
}}
>
<span class="is-sr-only">Toggle field inline</span>
<i class="fas fa-arrows-h"></i>
</button>
)}
</div>
<label class="is-sr-only" for="embedFieldValue">
Field Value
</label>
<textarea
class="discord-field-value field-input message-input autoresize "
placeholder="Field Value..."
maxlength={1024}
name="embed_field_value[]"
rows={1}
value={value}
onInput={(ev) =>
onUpdate({
index,
value: ev.currentTarget.value,
})
}
></textarea>
</div>
);
};

37
reminder-dashboard/src/components/Reminder/Embed/Fields/index.tsx Normal file
View File

@ -0,0 +1,37 @@
import { useReminder } from "../../ReminderContext";
import { Field } from "./Field";
export const Fields = () => {
const [{ embed_fields }, setReminder] = useReminder();
return (
<div class={"embed-multifield-box"}>
{[...embed_fields, { value: "", title: "", inline: true }].map((field, index) => (
<Field
{...field}
index={index}
onUpdate={({ index, ...props }) => {
setReminder((reminder) => ({
...reminder,
embed_fields: [
...reminder.embed_fields,
{ value: "", title: "", inline: true },
]
.map((f, i) => {
if (i === index) {
return {
...f,
...props,
};
} else {
return f;
}
})
.filter((f) => f.value || f.title),
}));
}}
></Field>
))}
</div>
);
};

43
reminder-dashboard/src/components/Reminder/Embed/Footer.tsx Normal file
View File

@ -0,0 +1,43 @@
import { Reminder } from "../../../api";
import { ImagePicker } from "../ImagePicker";
type Props = {
footer: string;
icon: string;
setReminder: (r: (reminder: Reminder) => Reminder) => void;
};
export const Footer = ({ footer, icon, setReminder }: Props) => (
<div class="embed-footer-box">
<p class="image is-20x20 customizable">
<ImagePicker
class="is-rounded embed_footer_url"
url={icon}
alt="Footer profile-like image"
setImage={(url: string) => {
setReminder((reminder) => ({
...reminder,
embed_footer_url: url,
}));
}}
></ImagePicker>
</p>
<label class="is-sr-only" for="embedFooter">
Embed Footer text
</label>
<textarea
class="discord-embed-footer message-input autoresize "
placeholder="Embed Footer..."
maxlength={2048}
name="embed_footer"
rows={1}
value={footer}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
embed_footer: ev.currentTarget.value,
}));
}}
></textarea>
</div>
);

18
reminder-dashboard/src/components/Reminder/Embed/Title.tsx Normal file
View File

@ -0,0 +1,18 @@
export const Title = ({ title, onInput }) => (
<>
<label class="is-sr-only" for="embedTitle">
Embed Title
</label>
<textarea
class="discord-title message-input autoresize"
placeholder="Embed Title..."
maxlength={256}
rows={1}
name="embed_title"
value={title}
onInput={(ev) => {
onInput(ev.currentTarget.value);
}}
></textarea>
</>
);

90
reminder-dashboard/src/components/Reminder/Embed/index.tsx Normal file
View File

@ -0,0 +1,90 @@
import { Author } from "./Author";
import { Title } from "./Title";
import { Description } from "./Description";
import { Footer } from "./Footer";
import { Color } from "./Color";
import { Fields } from "./Fields";
import { Reminder } from "../../../api";
import { ImagePicker } from "../ImagePicker";
import { useReminder } from "../ReminderContext";
function intToColor(num: number) {
return `#${num.toString(16).padStart(6, "0")}`;
}
const DEFAULT_COLOR = 9418359;
export const Embed = () => {
const [reminder, setReminder] = useReminder();
return (
<div
class="discord-embed"
style={{
borderLeftColor: intToColor(reminder.embed_color || DEFAULT_COLOR),
}}
>
<div class="embed-body">
<Color
color={intToColor(reminder.embed_color || DEFAULT_COLOR)}
setReminder={setReminder}
></Color>
<div class="a">
<Author
name={reminder.embed_author}
icon={reminder.embed_author_url}
setReminder={setReminder}
></Author>
<Title
title={reminder.embed_title}
onInput={(title: string) =>
setReminder((reminder: Reminder) => ({
...reminder,
embed_title: title,
}))
}
></Title>
<br></br>
<Description
description={reminder.embed_description}
onInput={(description: string) =>
setReminder((reminder: Reminder) => ({
...reminder,
embed_description: description,
}))
}
/>
<br />
<Fields />
</div>
<div class="b">
<p class="image thumbnail customizable">
<ImagePicker
class="embed_thumbnail_url"
url={reminder.embed_thumbnail_url}
alt="Square thumbnail embedded image"
setImage={() => {}}
/>
</p>
</div>
</div>
<p class="image is-400x300 customizable">
<ImagePicker
class="embed_image_url"
url={reminder.embed_image_url}
alt="Large embedded image"
setImage={() => {}}
/>
</p>
<Footer
footer={reminder.embed_footer}
icon={reminder.embed_footer_url}
setReminder={setReminder}
/>
</div>
);
};

49
reminder-dashboard/src/components/Reminder/ImagePicker.tsx Normal file
View File

@ -0,0 +1,49 @@
import { Modal } from "../Modal";
import { useState } from "preact/hooks";
export const ImagePicker = ({ alt, url, setImage, ...props }) => {
const [modalOpen, setModalOpen] = useState(false);
return (
<>
<a
onClick={() => {
setModalOpen(true);
}}
role={"button"}
>
<img {...props} src={url || "/static/img/bg.webp"} alt={alt}></img>
</a>
{modalOpen && (
<ImagePickerModal
setModalOpen={setModalOpen}
setImage={setImage}
></ImagePickerModal>
)}
</>
);
};
const ImagePickerModal = ({ setModalOpen, setImage }) => {
const [value, setValue] = useState("");
return (
<Modal
setModalOpen={setModalOpen}
title={"Enter Image URL"}
onSubmit={() => {
setImage(value);
}}
onSubmitText={"Save"}
>
<input
class="input"
id="urlInput"
placeholder="Image URL..."
onInput={(ev) => {
setValue(ev.currentTarget.value);
}}
></input>
</Modal>
);
};

173
reminder-dashboard/src/components/Reminder/IntervalSelector.tsx Normal file
View File

@ -0,0 +1,173 @@
import { useCallback, useEffect, useState } from "preact/hooks";
import { useReminder } from "./ReminderContext";
function divmod(a: number, b: number) {
return [Math.floor(a / b), a % b];
}
function secondsToHMS(seconds: number) {
let hours: number, minutes: number;
[minutes, seconds] = divmod(seconds, 60);
[hours, minutes] = divmod(minutes, 60);
return [hours, minutes, seconds];
}
export const IntervalSelector = ({
months: monthsProp,
days: daysProp,
seconds: secondsProp,
setInterval,
clearInterval,
}) => {
const [months, setMonths] = useState(monthsProp);
const [days, setDays] = useState(daysProp);
let [_hours, _minutes, _seconds] = [0, 0, 0];
if (secondsProp !== null) {
[_hours, _minutes, _seconds] = secondsToHMS(secondsProp);
}
const [seconds, setSeconds] = useState(_seconds);
const [minutes, setMinutes] = useState(_minutes);
const [hours, setHours] = useState(_hours);
useEffect(() => {
if (seconds || minutes || hours || days || months) {
setInterval({
seconds: (seconds || 0) + (minutes || 0) * 60 + (hours || 0) * 3600,
days: days || 0,
months: months || 0,
});
} else {
clearInterval();
}
}, [seconds, minutes, hours, days, months]);
const placeholder = useCallback(() => {
return seconds || minutes || hours || days || months ? "0" : "";
}, [seconds, minutes, hours, days, months]);
return (
<div class="control intervalSelector">
<div class="input interval-group">
<div class="interval-group-left">
<span class="no-break">
<label>
<span class="is-sr-only">Interval months</span>
<input
class="w2"
type="text"
pattern="\d*"
name="interval_months"
maxlength={2}
placeholder=""
value={months || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setMonths(parseInt(ev.currentTarget.value));
}
}}
></input>{" "}
<span class="half-rem"></span> months, <span class="half-rem"></span>
</label>
<label>
<span class="is-sr-only">Interval days</span>
<input
class="w3"
type="text"
pattern="\d*"
name="interval_days"
maxlength={4}
placeholder=""
value={days || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setDays(parseInt(ev.currentTarget.value));
}
}}
></input>{" "}
<span class="half-rem"></span> days, <span class="half-rem"></span>
</label>
</span>
<span class="no-break">
<label>
<span class="is-sr-only">Interval hours</span>
<input
class="w2"
type="text"
pattern="\d*"
name="interval_hours"
maxlength={2}
placeholder="HH"
value={hours || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setHours(parseInt(ev.currentTarget.value));
}
}}
></input>
:
</label>
<label>
<span class="is-sr-only">Interval minutes</span>
<input
class="w2"
type="text"
pattern="\d*"
name="interval_minutes"
maxlength={2}
placeholder="MM"
value={minutes || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setMinutes(parseInt(ev.currentTarget.value));
}
}}
></input>
:
</label>
<label>
<span class="is-sr-only">Interval seconds</span>
<input
class="w2"
type="text"
pattern="\d*"
name="interval_seconds"
maxlength={2}
placeholder="SS"
value={seconds || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setSeconds(parseInt(ev.currentTarget.value));
}
}}
></input>
</label>
</span>
</div>
<button
class="clear"
onClick={() => {
setMonths(0);
setDays(0);
setSeconds(0);
setMinutes(0);
setHours(0);
}}
>
<span class="is-sr-only">Clear interval</span>
<span class="icon">
<i class="fas fa-trash"></i>
</span>
</button>
</div>
</div>
);
};

114
reminder-dashboard/src/components/Reminder/LoadTemplate.tsx Normal file
View File

@ -0,0 +1,114 @@
import { useState } from "preact/hooks";
import { Modal } from "../Modal";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { deleteGuildTemplate, fetchGuildTemplates } from "../../api";
import { useParams } from "wouter";
import { useReminder } from "./ReminderContext";
import { useFlash } from "../App/FlashContext";
import { ICON_FLASH_TIME } from "../../consts";
export const LoadTemplate = () => {
const [modalOpen, setModalOpen] = useState(false);
return (
<div>
<button
class="button is-outlined show-modal is-pulled-right"
onClick={() => {
setModalOpen(true);
}}
>
Load Template
</button>
{modalOpen && <LoadTemplateModal setModalOpen={setModalOpen}></LoadTemplateModal>}
</div>
);
};
const LoadTemplateModal = ({ setModalOpen }) => {
const { guild } = useParams();
const [reminder, setReminder] = useReminder();
const [selected, setSelected] = useState(null);
const flash = useFlash();
const queryClient = useQueryClient();
const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
const mutation = useMutation({
...deleteGuildTemplate(guild),
onSuccess: () => {
flash({ message: "Template deleted", type: "success" });
queryClient.invalidateQueries({
queryKey: ["GUILD_TEMPLATES", guild],
});
},
});
return (
<Modal setModalOpen={setModalOpen} title={"Load Template"}>
<div class="control has-icons-left">
<div class="select is-fullwidth">
<select
id="templateSelect"
onChange={(ev) => {
setSelected(ev.currentTarget.value);
}}
disabled={mutation.isLoading}
>
<option disabled={true} selected={true}>
Choose template...
</option>
{isSuccess &&
templates.map((template) => (
<option value={template.id}>{template.name}</option>
))}
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-file-spreadsheet"></i>
</div>
</div>
<br></br>
<div class="has-text-centered">
<button
class="button is-success close-modal"
id="load-template"
style={{ margin: "2px" }}
onClick={() => {
const template = templates.find(
(template) => template.id.toString() === selected,
);
setReminder((reminder) => ({
...reminder,
...template,
// drop the template's ID
id: undefined,
}));
flash({ message: "Template loaded", type: "success" });
setModalOpen(false);
}}
disabled={mutation.isLoading}
>
Load Template
</button>
<button
class="button is-danger"
id="delete-template"
style={{ margin: "2px" }}
onClick={() => {
const template = templates.find(
(template) => template.id.toString() === selected,
);
mutation.mutate(template);
}}
disabled={mutation.isLoading}
>
Delete
</button>
</div>
</Modal>
);
};

38
reminder-dashboard/src/components/Reminder/Message.tsx Normal file
View File

@ -0,0 +1,38 @@
import { ImagePicker } from "./ImagePicker";
import { Username } from "./Username";
import { Content } from "./Content";
import { Embed } from "./Embed";
import { useReminder } from "./ReminderContext";
export const Message = () => {
const [reminder, setReminder] = useReminder();
return (
<div class="column discord-frame">
<article class="media">
<figure class="media-left">
<p class="image is-32x32 customizable">
<ImagePicker
class="is-rounded avatar"
url={reminder.avatar || "/static/img/icon.png"}
alt="Image for discord avatar"
setImage={(url: string) => {
setReminder((reminder) => ({
...reminder,
avatar: url,
}));
}}
></ImagePicker>
</p>
</figure>
<div class="media-content">
<div class="content">
<Username />
<Content />
<Embed />
</div>
</div>
</article>
</div>
);
};

29
reminder-dashboard/src/components/Reminder/Name.tsx Normal file
View File

@ -0,0 +1,29 @@
import { useReminder } from "./ReminderContext";
export const Name = () => {
const [reminder, setReminder] = useReminder();
return (
<div class="name-bar">
<div class="field">
<div class="control">
<label class="label sr-only">Reminder Name</label>
<input
class="input"
type="text"
name="name"
placeholder="Reminder Name"
maxlength={100}
value={reminder.name}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
name: ev.currentTarget.value,
}));
}}
></input>
</div>
</div>
</div>
);
};

9
reminder-dashboard/src/components/Reminder/ReminderContext.tsx Normal file
View File

@ -0,0 +1,9 @@
import { createContext } from "preact";
import { useContext } from "preact/compat";
import { Reminder } from "../../api";
export const ReminderContext = createContext<
[Reminder, (r: (reminder: Reminder) => Reminder) => void]
>([null, () => {}]);
export const useReminder = () => useContext(ReminderContext);

126
reminder-dashboard/src/components/Reminder/Settings.tsx Normal file
View File

@ -0,0 +1,126 @@
import { ChannelSelector } from "./ChannelSelector";
import { DateTime } from "luxon";
import { IntervalSelector } from "./IntervalSelector";
import { useQuery } from "react-query";
import { fetchUserInfo } from "../../api";
import { useReminder } from "./ReminderContext";
import { Attachment } from "./Attachment";
import { TTS } from "./TTS";
import { useTimezone } from "../App/TimezoneProvider";
import { TimeInput } from "./TimeInput";
export const Settings = () => {
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
const [reminder, setReminder] = useReminder();
const [timezone] = useTimezone();
if (!userFetched) {
return <></>;
}
return (
<div class="column settings">
<div class="field channel-field">
<div class="collapses">
<label class="label" for="channelOption">
Channel*
</label>
</div>
<ChannelSelector
channel={reminder.channel}
setChannel={(channel: string) => {
setReminder((reminder) => ({
...reminder,
channel: channel,
}));
}}
/>
</div>
<div class="field">
<div class="control">
<label class="label collapses">
Time*
<TimeInput
defaultValue={reminder.utc_time}
onInput={(time: DateTime) => {
setReminder((reminder) => ({
...reminder,
utc_time: time,
}));
}}
/>
</label>
</div>
</div>
<div class="collapses split-controls">
<div>
<div class={userInfo.patreon ? "patreon-only" : "patreon-only is-locked"}>
<div class="patreon-invert foreground">
Intervals available on <a href="https://patreon.com/jellywx">Patreon</a>{" "}
or{" "}
<a href="https://gitea.jellypro.xyz/jude/reminder-bot">self-hosting</a>
</div>
<div class="field">
<label class="label">
Interval{" "}
<a class="foreground" href="/help/intervals">
<i class="fas fa-question-circle"></i>
</a>
</label>
<IntervalSelector
months={reminder.interval_months}
days={reminder.interval_days}
seconds={reminder.interval_seconds}
setInterval={({ seconds, days, months }) => {
setReminder((reminder) => ({
...reminder,
interval_months: months,
interval_days: days,
interval_seconds: seconds,
}));
}}
clearInterval={() => {
setReminder((reminder) => ({
...reminder,
interval_months: null,
interval_days: null,
interval_seconds: null,
}));
}}
></IntervalSelector>
</div>
<div class="field">
<div class="control">
<label class="label">
Expiration
<TimeInput
defaultValue={reminder.expires}
onInput={(time: DateTime) => {
setReminder((reminder) => ({
...reminder,
expires: time,
}));
}}
/>
</label>
</div>
</div>
</div>
<div class="columns is-mobile tts-row">
<div class="column has-text-centered">
<TTS />
</div>
<div class="column has-text-centered">
<Attachment />
</div>
</div>
</div>
</div>
</div>
);
};

24
reminder-dashboard/src/components/Reminder/TTS.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useReminder } from "./ReminderContext";
export const TTS = () => {
const [{ tts }, setReminder] = useReminder();
return (
<div class="is-boxed">
<label class="label">
Enable TTS{" "}
<input
type="checkbox"
name="tts"
checked={tts}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
tts: ev.currentTarget.checked,
}));
}}
></input>
</label>
</div>
);
};

208
reminder-dashboard/src/components/Reminder/TimeInput.tsx Normal file
View File

@ -0,0 +1,208 @@
import { useEffect, useRef, useState } from "preact/hooks";
import { DateTime } from "luxon";
import { useFlash } from "../App/FlashContext";
export const TimeInput = ({ defaultValue, onInput }) => {
const ref = useRef(null);
const [time, setTime] = useState(defaultValue);
useEffect(() => {
onInput(time);
}, [time]);
const flash = useFlash();
return (
<>
<div
class={"input"}
onPaste={(ev) => {
ev.preventDefault();
const pasteValue = ev.clipboardData.getData("text/plain");
let dt = DateTime.fromISO(pasteValue);
if (dt.isValid) {
setTime(dt);
return;
}
dt = DateTime.fromSQL(pasteValue);
if (dt.isValid) {
setTime(dt);
return;
}
flash({
message: `Couldn't parse your clipboard data as a valid date-time`,
type: "error",
});
}}
>
<div style={{ flexGrow: "1" }}>
<label>
<span class="is-sr-only">Years input</span>
<input
style={{
borderStyle: "none",
fontFamily: "monospace",
width: "calc(4ch + 4px)",
fontSize: "1rem",
}}
type="text"
pattern="\d*"
maxlength={4}
placeholder="YYYY"
value={time?.year.toLocaleString("en-US", {
minimumIntegerDigits: 4,
useGrouping: false,
})}
onBlur={(ev) => {
setTime(time.set({ year: ev.currentTarget.value }));
}}
></input>{" "}
</label>
-
<label>
<span class="is-sr-only">Months input</span>
<input
style={{
borderStyle: "none",
fontFamily: "monospace",
width: "calc(2ch + 4px)",
fontSize: "1rem",
}}
type="text"
pattern="\d*"
maxlength={2}
placeholder="MM"
value={time?.month.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
onBlur={(ev) => {
setTime(time.set({ month: ev.currentTarget.value }));
}}
></input>{" "}
</label>
-
<label>
<span class="is-sr-only">Days input</span>
<input
style={{
borderStyle: "none",
fontFamily: "monospace",
width: "calc(2ch + 4px)",
fontSize: "1rem",
}}
type="text"
pattern="\d*"
maxlength={2}
placeholder="DD"
value={time?.day.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
onBlur={(ev) => {
setTime(time.set({ day: ev.currentTarget.value }));
}}
></input>{" "}
</label>
<label style={{ marginLeft: "8px" }}>
<span class="is-sr-only">Hours input</span>
<input
style={{
borderStyle: "none",
fontFamily: "monospace",
width: "calc(2ch + 4px)",
fontSize: "1rem",
}}
type="text"
pattern="\d*"
maxlength={2}
placeholder="hh"
value={time?.hour.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
onBlur={(ev) => {
setTime(time.set({ hour: ev.currentTarget.value }));
}}
></input>{" "}
</label>
:
<label>
<span class="is-sr-only">Minutes input</span>
<input
style={{
borderStyle: "none",
fontFamily: "monospace",
width: "calc(2ch + 4px)",
fontSize: "1rem",
}}
type="text"
pattern="\d*"
maxlength={2}
placeholder="mm"
value={time?.minute.toLocaleString("en-US", {
minimumIntegerDigits: 2,
})}
onBlur={(ev) => {
setTime(time.set({ minute: ev.currentTarget.value }));
}}
></input>{" "}
</label>
:
<label>
<span class="is-sr-only">Seconds input</span>
<input
style={{
borderStyle: "none",
fontFamily: "monospace",
width: "calc(2ch + 4px)",
fontSize: "1rem",
}}
type="text"
pattern="\d*"
maxlength={2}
placeholder="ss"
value={time?.second.toLocaleString("en-US", {
minimumIntegerDigits: 2,
})}
onBlur={(ev) => {
setTime(time.set({ second: ev.currentTarget.value }));
}}
></input>{" "}
</label>
</div>
<button
style={{
background: "none",
border: "none",
padding: "1px",
marginRight: "-3px",
}}
onClick={() => {
ref.current.showPicker();
}}
>
<span class="is-sr-only">Show time picker</span>
<span class="icon">
<i class="fas fa-calendar"></i>
</span>
</button>
</div>
<input
style={{
position: "absolute",
left: 0,
visibility: "hidden",
}}
class={"input"}
type="datetime-local"
step="1"
value={
time
? time.toFormat("yyyy-LL-dd'T'HH:mm:ss")
: DateTime.now().toFormat("yyyy-LL-dd'T'HH:mm:ss")
}
ref={ref}
onInput={(ev) => {
setTime(DateTime.fromISO(ev.currentTarget.value));
}}
></input>
</>
);
};

30
reminder-dashboard/src/components/Reminder/TopBar.tsx Normal file
View File

@ -0,0 +1,30 @@
import { useReminder } from "./ReminderContext";
import { Name } from "./Name";
import { fetchGuildChannels, Reminder } from "../../api";
import { useQuery } from "react-query";
import { useParams } from "wouter";
export const TopBar = ({ toggleCollapsed }) => {
const { guild } = useParams();
const [reminder] = useReminder();
const { isSuccess, data: guildChannels } = useQuery(fetchGuildChannels(guild));
const channelName = (reminder: Reminder) => {
const channel = guildChannels.find((c) => c.id === reminder.channel);
return channel === undefined ? "" : channel.name;
};
return (
<div class="columns is-mobile column reminder-topbar">
{isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
<Name />
<div class="hide-button-bar">
<button class="button hide-box" onClick={toggleCollapsed}>
<span class="is-sr-only">Hide reminder</span>
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
);
};

24
reminder-dashboard/src/components/Reminder/Username.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useReminder } from "./ReminderContext";
export const Username = () => {
const [reminder, setReminder] = useReminder();
return (
<div class="discord-message-header">
<label class="is-sr-only">Username Override</label>
<input
class="discord-username message-input"
placeholder="Username Override"
maxlength={32}
name="username"
value={reminder.username || "Reminder"}
onBlur={(ev) => {
setReminder((reminder) => ({
...reminder,
username: ev.currentTarget.value,
}));
}}
></input>
</div>
);
};

11
reminder-dashboard/src/components/Sidebar/Brand.tsx Normal file
View File

@ -0,0 +1,11 @@
export const Brand = () => (
<div class="brand">
<img
src="/static/img/logo_nobg.webp"
alt="Reminder bot logo"
width="52px"
height="52px"
class="dashboard-brand"
></img>
</div>
);

5
reminder-dashboard/src/components/Sidebar/DesktopSidebar.tsx Normal file
View File

@ -0,0 +1,5 @@
export const DesktopSidebar = ({ children }) => {
return (
<div class="column is-2 is-sidebar-menu dashboard-sidebar is-hidden-touch">{children}</div>
);
};

32
reminder-dashboard/src/components/Sidebar/GuildEntry.tsx Normal file
View File

@ -0,0 +1,32 @@
import { GuildInfo } from "../../api";
import { Link, useLocation } from "wouter";
type Props = {
guild: GuildInfo;
};
export const GuildEntry = ({ guild }: Props) => {
const [loc] = useLocation();
const currentId = loc.match(/^\/(?<id>\d+)/);
return (
<li>
<Link
class={
currentId !== null && guild.id === currentId.groups.id
? "is-active switch-pane"
: "switch-pane"
}
data-pane="guild"
data-guild={guild.id}
data-name={guild.name}
href={`/${guild.id}/reminders`}
>
<span class="icon">
<i class="fas fa-map-pin"></i>
</span>{" "}
<span class="guild-name">{guild.name}</span>
</Link>
</li>
);
};

54
reminder-dashboard/src/components/Sidebar/MobileSidebar.tsx Normal file
View File

@ -0,0 +1,54 @@
import { useState } from "preact/hooks";
export const MobileSidebar = ({ children }) => {
const [sidebarOpen, setSidebarOpen] = useState(false);
return (
<>
<nav
class="navbar is-spaced is-size-4 is-hidden-desktop dashboard-navbar"
role="navigation"
aria-label="main navigation"
>
<div class="navbar-brand">
<a class="navbar-item" href="/">
<figure class="image">
<img
width="28px"
height="28px"
src="/static/img/logo_nobg.webp"
alt="Reminder Bot Logo"
/>
</figure>
</a>
<p class="navbar-item pageTitle"></p>
<a
role="button"
class="dashboard-burger navbar-burger is-right"
aria-label="menu"
aria-expanded="false"
data-target="mobileSidebar"
onClick={() => {
setSidebarOpen(!sidebarOpen);
}}
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>
<div
class="dashboard-sidebar mobile-sidebar is-hidden-desktop"
id="mobileSidebar"
style={{
display: sidebarOpen ? "block" : "none",
}}
>
{children}
</div>
</>
);
};

11
reminder-dashboard/src/components/Sidebar/Wave.tsx Normal file
View File

@ -0,0 +1,11 @@
export const Wave = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 160">
<g transform="scale(1, 0.5)">
<path
fill="#8fb677"
fill-opacity="1"
d="M0,192L60,170.7C120,149,240,107,360,96C480,85,600,107,720,138.7C840,171,960,213,1080,197.3C1200,181,1320,107,1380,69.3L1440,32L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"
></path>
</g>
</svg>
);

66
reminder-dashboard/src/components/Sidebar/index.tsx Normal file
View File

@ -0,0 +1,66 @@
import { useQuery } from "react-query";
import { DesktopSidebar } from "./DesktopSidebar";
import { MobileSidebar } from "./MobileSidebar";
import { Brand } from "./Brand";
import { Wave } from "./Wave";
import { GuildEntry } from "./GuildEntry";
import { fetchUserGuilds, GuildInfo } from "../../api";
import { TimezonePicker } from "../TimezonePicker";
type ContentProps = {
guilds: GuildInfo[];
};
const SidebarContent = ({ guilds }: ContentProps) => {
const guildEntries = guilds.map((guild) => <GuildEntry guild={guild}></GuildEntry>);
return (
<>
<a href="/">
<Brand />
</a>
<Wave />
<aside class="menu">
<p class="menu-label">Servers</p>
<ul class="menu-list guildList">{guildEntries}</ul>
<div class="aside-footer">
<p class="menu-label">Options</p>
<ul class="menu-list">
<li>
<div id="bottom-sidebar"></div>
<TimezonePicker />
<a href="/login/discord/logout">
<span class="icon">
<i class="fas fa-sign-out"></i>
</span>{" "}
Log out
</a>
<a href="https://discord.jellywx.com" class="feedback">
<span class="icon">
<i class="fab fa-discord"></i>
</span>{" "}
Give feedback
</a>
</li>
</ul>
</div>
</aside>
</>
);
};
export const Sidebar = () => {
const { status, data } = useQuery(fetchUserGuilds());
let content = <SidebarContent guilds={[]}></SidebarContent>;
if (status === "success") {
content = <SidebarContent guilds={data}></SidebarContent>;
}
return (
<>
<DesktopSidebar>{content}</DesktopSidebar>
<MobileSidebar>{content}</MobileSidebar>
</>
);
};

134
reminder-dashboard/src/components/TimezonePicker/index.tsx Normal file
View File

@ -0,0 +1,134 @@
import { DateTime, SystemZone } from "luxon";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { fetchUserInfo, patchUserInfo } from "../../api";
import { Modal } from "../Modal";
import { useState } from "preact/hooks";
import { useTimezone } from "../App/TimezoneProvider";
type DisplayProps = {
timezone: string;
};
const TimezoneDisplay = ({ timezone }: DisplayProps) => {
const now = DateTime.now().setZone(timezone);
const hour = now.hour;
const minute = now.minute;
return (
<>
<strong>
<span class="set-timezone">{timezone}</span>
</strong>{" "}
(
<span class="set-time">
{hour}:{minute}
</span>
)
</>
);
};
export const TimezonePicker = () => {
const [modalOpen, setModalOpen] = useState(false);
return (
<>
<a
class="show-modal"
data-modal="chooseTimezoneModal"
onClick={() => {
setModalOpen(true);
}}
>
<span class="icon">
<i class="fas fa-map-marked"></i>
</span>{" "}
Timezone
</a>
{modalOpen && <TimezoneModal setModalOpen={setModalOpen} />}
</>
);
};
const TimezoneModal = ({ setModalOpen }) => {
const browserTimezone = DateTime.now().zoneName;
const [selectedZone, setSelectedZone] = useTimezone();
const queryClient = useQueryClient();
const { isLoading, isError, data } = useQuery(fetchUserInfo());
const userInfoMutation = useMutation({
...patchUserInfo(),
onSuccess: () => {
queryClient.invalidateQueries(["USER_INFO"]);
},
});
return (
<Modal title={"Timezone"} setModalOpen={setModalOpen}>
<p>
Your configured timezone is:{" "}
<TimezoneDisplay timezone={selectedZone}></TimezoneDisplay>
<br />
Your browser timezone is:{" "}
<TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
<br />
{!isError && (
<>
Your bot timezone is:{" "}
{isLoading ? (
<i className="fas fa-cog fa-spin"></i>
) : (
<TimezoneDisplay timezone={data.timezone || "UTC"}></TimezoneDisplay>
)}
</>
)}
</p>
<br></br>
<div class="has-text-centered">
<button
class="button is-success"
style={{
margin: "2px",
}}
id="set-browser-timezone"
onClick={() => {
setSelectedZone(browserTimezone);
}}
>
<span>Use Browser Timezone</span>{" "}
<span class="icon">
<i class="fab fa-firefox-browser"></i>
</span>
</button>
<button
class="button is-success"
id="set-bot-timezone"
style={{
margin: "2px",
}}
onClick={() => {
setSelectedZone(data.timezone);
}}
>
<span>Use Bot Timezone</span>{" "}
<span class="icon">
<i class="fab fa-discord"></i>
</span>
</button>
<button
class="button is-warning"
id="update-bot-timezone"
style={{
margin: "2px",
}}
onClick={() => {
userInfoMutation.mutate(browserTimezone);
}}
>
Set Bot Timezone
</button>
</div>
</Modal>
);
};

15
reminder-dashboard/src/components/Welcome/index.tsx Normal file
View File

@ -0,0 +1,15 @@
export const Welcome = () => (
<section id="welcome">
<div class="has-text-centered">
<p class="title">Welcome!</p>
<p class="subtitle is-hidden-touch">Select an option from the side to get started</p>
<p class="subtitle is-hidden-desktop">
Press the{" "}
<span class="icon">
<i class="fal fa-bars"></i>
</span>{" "}
to get started
</p>
</div>
</section>
);