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

Working on user preferences for dashboards

Browse Source
This commit is contained in:
jude 2024-07-04 20:52:36 +01:00
parent 218be2f0b1
commit f26682e6de
13 changed files with 132 additions and 780 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
migrations/20240630150936_dashboard_preferences.sql Normal file
View File

@ -0,0 +1,10 @@
ALTER TABLE users ADD COLUMN `reset_inputs_on_create` BOOLEAN NOT NULL DEFAULT 0;
ALTER TABLE users ADD COLUMN `use_browser_timezone` BOOLEAN NOT NULL DEFAULT 1;
ALTER TABLE users ADD COLUMN `dashboard_color_scheme` ENUM('system', 'light', 'dark') NOT NULL DEFAULT 'system';
ALTER TABLE users DROP COLUMN `language`;
ALTER TABLE users DROP COLUMN `patreon`;
ALTER TABLE users DROP COLUMN `name`;
ALTER TABLE users DROP PRIMARY KEY, ADD PRIMARY KEY (`user`);
ALTER TABLE users RENAME COLUMN `user` TO `id`;

1
reminder-dashboard/src/api.ts
View File

@ -4,6 +4,7 @@ type UserInfo = {
name: string; name: string;
patreon: boolean; patreon: boolean;
timezone: string | null; timezone: string | null;
reset_inputs_on_create: boolean;
}; };
export type GuildInfo = { export type GuildInfo = {

7
reminder-dashboard/src/components/App/index.tsx
View File

@ -12,12 +12,17 @@ import { GuildTodos } from "../Guild/GuildTodos";
export function App() { export function App() {
const queryClient = new QueryClient(); const queryClient = new QueryClient();
let scheme = "light";
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
scheme = "dark";
}
return ( return (
<TimezoneProvider> <TimezoneProvider>
<FlashProvider> <FlashProvider>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<Router base={"/dashboard"}> <Router base={"/dashboard"}>
<div class="columns is-gapless dashboard-frame"> <div class={`columns is-gapless dashboard-frame scheme-${scheme}`}>
<Sidebar /> <Sidebar />
<div class="column is-main-content"> <div class="column is-main-content">
<div style={{ margin: "0 12px 12px 12px" }}> <div style={{ margin: "0 12px 12px 12px" }}>

16
reminder-dashboard/src/components/Reminder/ButtonRow/CreateButtonRow.tsx
View File

@ -1,21 +1,28 @@
import { LoadTemplate } from "../LoadTemplate"; import { LoadTemplate } from "../LoadTemplate";
import { useReminder } from "../ReminderContext"; import { useReminder } from "../ReminderContext";
import { useMutation, useQueryClient } from "react-query"; import { useMutation, useQuery, useQueryClient } from "react-query";
import { postGuildReminder, postGuildTemplate, postUserReminder } from "../../../api"; import {
fetchUserInfo,
postGuildReminder,
postGuildTemplate,
postUserReminder,
} from "../../../api";
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { ICON_FLASH_TIME } from "../../../consts"; import { ICON_FLASH_TIME } from "../../../consts";
import { useFlash } from "../../App/FlashContext"; import { useFlash } from "../../App/FlashContext";
import { useGuild } from "../../App/useGuild"; import { useGuild } from "../../App/useGuild";
import { defaultReminder } from "../CreateReminder";
export const CreateButtonRow = () => { export const CreateButtonRow = () => {
const guild = useGuild(); const guild = useGuild();
const [reminder] = useReminder(); const [reminder, setReminder] = useReminder();
const [recentlyCreated, setRecentlyCreated] = useState(false); const [recentlyCreated, setRecentlyCreated] = useState(false);
const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false); const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false);
const flash = useFlash(); const flash = useFlash();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { data: userInfo } = useQuery({ ...fetchUserInfo() });
const mutation = useMutation({ const mutation = useMutation({
...(guild ? postGuildReminder(guild) : postUserReminder()), ...(guild ? postGuildReminder(guild) : postUserReminder()),
onError: (error) => { onError: (error) => {
@ -44,6 +51,9 @@ export const CreateButtonRow = () => {
queryKey: ["USER_REMINDERS"], queryKey: ["USER_REMINDERS"],
}); });
} }
if (userInfo.reset_inputs_on_create) {
setReminder(() => defaultReminder());
}
setRecentlyCreated(true); setRecentlyCreated(true);
setTimeout(() => { setTimeout(() => {
setRecentlyCreated(false); setRecentlyCreated(false);

2
reminder-dashboard/src/components/Reminder/CreateReminder.tsx
View File

@ -11,7 +11,7 @@ import "./styles.scss";
import { useGuild } from "../App/useGuild"; import { useGuild } from "../App/useGuild";
import { DEFAULT_COLOR } from "./Embed"; import { DEFAULT_COLOR } from "./Embed";
function defaultReminder(): Reminder { export function defaultReminder(): Reminder {
return { return {
attachment: null, attachment: null,
attachment_name: null, attachment_name: null,

26
src/models/user_data.rs
View File

@ -6,9 +6,7 @@ use sqlx::MySqlPool;
use crate::consts::LOCAL_TIMEZONE; use crate::consts::LOCAL_TIMEZONE;
pub struct UserData { pub struct UserData {
pub id: u32, pub id: u64,
#[allow(dead_code)]
pub user: u64,
pub dm_channel: u32, pub dm_channel: u32,
pub timezone: String, pub timezone: String,
pub allowed_dm: bool, pub allowed_dm: bool,
@ -23,7 +21,9 @@ impl UserData {
match sqlx::query!( match sqlx::query!(
" "
SELECT IFNULL(timezone, 'UTC') AS timezone FROM users WHERE user = ? SELECT IFNULL(timezone, 'UTC') AS timezone
FROM users
WHERE id = ?
", ",
user_id user_id
) )
@ -48,7 +48,9 @@ impl UserData {
match sqlx::query_as_unchecked!( match sqlx::query_as_unchecked!(
Self, Self,
" "
SELECT id, user, dm_channel, IF(timezone IS NULL, ?, timezone) AS timezone, allowed_dm FROM users WHERE user = ? SELECT id, dm_channel, IF(timezone IS NULL, ?, timezone) AS timezone, allowed_dm
FROM users
WHERE id = ?
", ",
*LOCAL_TIMEZONE, *LOCAL_TIMEZONE,
user_id.get() user_id.get()
@ -64,7 +66,8 @@ SELECT id, user, dm_channel, IF(timezone IS NULL, ?, timezone) AS timezone, allo
sqlx::query!( sqlx::query!(
" "
INSERT IGNORE INTO channels (channel) VALUES (?) INSERT IGNORE INTO channels (channel)
VALUES (?)
", ",
dm_channel.id.get() dm_channel.id.get()
) )
@ -73,7 +76,8 @@ INSERT IGNORE INTO channels (channel) VALUES (?)
sqlx::query!( sqlx::query!(
" "
INSERT INTO users (name, user, dm_channel, timezone) VALUES ('', ?, (SELECT id FROM channels WHERE channel = ?), ?) INSERT INTO users (id, dm_channel, timezone)
VALUES (?, (SELECT id FROM channels WHERE channel = ?), ?)
", ",
user_id.get(), user_id.get(),
dm_channel.id.get(), dm_channel.id.get(),
@ -85,7 +89,9 @@ INSERT INTO users (name, user, dm_channel, timezone) VALUES ('', ?, (SELECT id F
Ok(sqlx::query_as_unchecked!( Ok(sqlx::query_as_unchecked!(
Self, Self,
" "
SELECT id, user, dm_channel, timezone, allowed_dm FROM users WHERE user = ? SELECT id, dm_channel, timezone, allowed_dm
FROM users
WHERE id = ?
", ",
user_id.get() user_id.get()
) )
@ -104,7 +110,9 @@ SELECT id, user, dm_channel, timezone, allowed_dm FROM users WHERE user = ?
pub async fn commit_changes(&self, pool: &MySqlPool) { pub async fn commit_changes(&self, pool: &MySqlPool) {
sqlx::query!( sqlx::query!(
" "
UPDATE users SET timezone = ?, allowed_dm = ? WHERE id = ? UPDATE users
SET timezone = ?, allowed_dm = ?
WHERE id = ?
", ",
self.timezone, self.timezone,
self.allowed_dm, self.allowed_dm,

96
src/web/routes/dashboard/api/user/mod.rs
View File

@ -21,16 +21,29 @@ use serenity::{
}; };
use sqlx::{MySql, Pool}; use sqlx::{MySql, Pool};
use crate::web::guards::transaction::Transaction;
#[derive(Serialize)]
struct UserPreferences {
timezone: String,
use_browser_timezone: bool,
dashboard_color_scheme: String,
reset_inputs_on_create: bool,
}
#[derive(Serialize)] #[derive(Serialize)]
struct UserInfo { struct UserInfo {
name: String, name: String,
patreon: bool, patreon: bool,
timezone: Option<String>, preferences: UserPreferences,
} }
#[derive(Deserialize)] #[derive(Deserialize)]
pub struct UpdateUser { pub struct UpdateUserPreferences {
timezone: String, timezone: Option<String>,
use_browser_timezone: Option<bool>,
dashboard_color_scheme: Option<String>,
reset_inputs_on_create: Option<bool>,
} }
#[get("/api/user")] #[get("/api/user")]
@ -39,7 +52,16 @@ pub async fn get_user_info(
ctx: &State<Context>, ctx: &State<Context>,
pool: &State<Pool<MySql>>, pool: &State<Pool<MySql>>,
) -> JsonValue { ) -> JsonValue {
offline!(json!(UserInfo { name: "Discord".to_string(), patreon: true, timezone: None })); offline!(json!(UserInfo {
name: "Discord".to_string(),
patreon: true,
preferences: UserPreferences {
timezone: "UTC".to_string(),
use_browser_timezone: false,
dashboard_color_scheme: "system".to_string(),
reset_inputs_on_create: false,
}
}));
if let Some(user_id) = if let Some(user_id) =
cookies.get_private("userid").map(|u| u.value().parse::<u64>().ok()).flatten() cookies.get_private("userid").map(|u| u.value().parse::<u64>().ok()).flatten()
@ -48,8 +70,16 @@ pub async fn get_user_info(
.member(&ctx.inner(), user_id) .member(&ctx.inner(), user_id)
.await; .await;
let timezone = sqlx::query!( let prefs = sqlx::query!(
"SELECT IFNULL(timezone, 'UTC') AS timezone FROM users WHERE user = ?", "
SELECT
IFNULL(timezone, 'UTC') AS timezone,
use_browser_timezone,
dashboard_color_scheme,
reset_inputs_on_create
FROM users
WHERE id = ?
",
user_id user_id
) )
.fetch_one(pool.inner()) .fetch_one(pool.inner())
@ -65,7 +95,12 @@ pub async fn get_user_info(
.roles .roles
.contains(&RoleId::new(env::var("PATREON_ROLE_ID").unwrap().parse().unwrap())) .contains(&RoleId::new(env::var("PATREON_ROLE_ID").unwrap().parse().unwrap()))
}), }),
timezone, preferences: UserPreferences {
timezone: prefs.timezone,
use_browser_timezone: prefs.use_browser_timezone,
dashboard_color_scheme: prefs.dashboard_color_scheme,
reset_inputs_on_create: prefs.reset_inputs_on_create,
},
}; };
json!(user_info) json!(user_info)
@ -74,28 +109,55 @@ pub async fn get_user_info(
} }
} }
#[patch("/api/user", data = "<user>")] #[patch("/api/user", data = "<preferences>")]
pub async fn update_user_info( pub async fn update_user_info(
cookies: &CookieJar<'_>, cookies: &CookieJar<'_>,
user: Json<UpdateUser>, preferences: Json<UpdateUserPreferences>,
pool: &State<Pool<MySql>>, mut transaction: Transaction<'_>,
) -> JsonValue { ) -> JsonValue {
if let Some(user_id) = if let Some(user_id) =
cookies.get_private("userid").map(|u| u.value().parse::<u64>().ok()).flatten() cookies.get_private("userid").map(|u| u.value().parse::<u64>().ok()).flatten()
{ {
if user.timezone.parse::<Tz>().is_ok() { if let Some(timezone) = &preferences.timezone {
if timezone.parse::<Tz>().is_ok() {
let _ = sqlx::query!( let _ = sqlx::query!(
"UPDATE users SET timezone = ? WHERE user = ?", "
user.timezone, UPDATE users
SET timezone = ?
WHERE id = ?
",
timezone,
user_id, user_id,
) )
.execute(pool.inner()) .execute(transaction.executor())
.await; .await;
json!({})
} else { } else {
json!({"error": "Timezone not recognized"}) return json!({"error": "Timezone not recognised"});
} }
}
if let Some(dashboard_color_scheme) = &preferences.dashboard_color_scheme {
if vec!["system", "light", "dark"].contains(dashboard_color_scheme) {
let _ = sqlx::query!(
"
UPDATE users
SET dashboard_color_scheme = ?
WHERE id = ?
",
dashboard_color_scheme,
user_id,
)
.execute(transaction.executor())
.await;
} else {
return json!({"error": "Color scheme not recognised"});
}
}
// todo handle other two options
transaction.commit().await;
json!({})
} else { } else {
json!({"error": "Not authorized"}) json!({"error": "Not authorized"})
} }

389
templates/dashboard.html.tera
View File

@ -1,389 +0,0 @@
<!DOCTYPE html>
<html lang="EN">
<head>
<script src="/static/js/reporter.js" type="application/javascript"></script>
<meta name="description" content="The most powerful Discord Reminders Bot">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="yandex-verification" content="bb77b8681eb64a90"/>
<meta name="google-site-verification" content="7h7UVTeEe0AOzHiH3cFtsqMULYGN-zCZdMT_YCkW1Ho"/>
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *; font-src fonts.gstatic.com 'self'"> -->
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180"
href="/static/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32"
href="/static/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16"
href="/static/favicon/favicon-16x16.png">
<link rel="manifest" href="/static/favicon/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>Reminder Bot | Dashboard</title>
<!-- styles -->
<link rel="stylesheet" href="/static/css/bulma.min.css">
<link rel="stylesheet" href="/static/css/fa.css">
<link rel="stylesheet" href="/static/css/font.css">
<link rel="stylesheet" href="/static/css/style.css?v{{ version }}">
<link rel="stylesheet" href="/static/css/dtsel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tributejs/5.1.3/tribute.css" integrity="sha512-GnwBnXd+ZGO9CdP343MUr0jCcJXCr++JVtQRnllexRW2IDq4Zvrh/McTQjooAKnSUbXZ7wamp7AQSweTnfMVoA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="/static/js/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tributejs/5.1.3/tribute.min.js" integrity="sha512-KJYWC7RKz/Abtsu1QXd7VJ1IJua7P7GTpl3IKUqfa21Otg2opvRYmkui/CXBC6qeDYCNlQZ7c+7JfDXnKdILUA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<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">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>
<div id="loader" class="is-hidden hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">
<i class="fas fa-cog fa-spin"></i>
</p>
<p class="subtitle">
<strong>Loading...</strong>
</p>
</div>
</div>
</div>
<!-- dead image used to check which other images are dead -->
<img src="" id="dead">
<div class="notification is-danger flash-message" id="errors">
<span class="icon"><i class="far fa-exclamation-circle"></i></span> <span class="error-message"></span>
</div>
<div class="notification is-success flash-message" id="success">
<span class="icon"><i class="far fa-check"></i></span> <span class="success-message"></span>
</div>
<div class="modal" id="addImageModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<label class="modal-card-title" for="urlInput">Enter Image URL</label>
<button class="delete close-modal" aria-label="close"></button>
</header>
<section class="modal-card-body">
<input class="input" id="urlInput" placeholder="Image URL...">
</section>
<footer class="modal-card-foot">
<button class="button is-success" id="setImgUrl">Save</button>
<button class="button close-modal">Cancel</button>
</footer>
</div>
<button class="modal-close is-large close-modal" aria-label="close"></button>
</div>
<div class="modal" id="pickColorModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<label class="modal-card-title" for="colorInput">Select Color</label>
<button class="delete close-modal" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="colorpicker-container">
<div id="colorpicker"></div>
</div>
<input class="input" id="colorInput">
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save</button>
<button class="button close-modal">Cancel</button>
</footer>
</div>
<button class="modal-close is-large close-modal" aria-label="close"></button>
</div>
<div class="modal" id="chooseTimezoneModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<label class="modal-card-title" for="urlInput">Update Timezone <a href="/help/timezone"><span><i class="fa fa-question-circle"></i></span></a></label>
<button class="delete close-modal" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p>
Your configured timezone is: <strong><span class="set-timezone">%browsertimezone%</span></strong> (<span class="set-time">HH:mm</span>)
<br>
<br>
Your browser timezone is: <strong><span class="browser-timezone">%browsertimezone%</span></strong> (<span class="browser-time">HH:mm</span>)
<br>
Your bot timezone is: <strong><span class="bot-timezone">%bottimezone%</span></strong> (<span class="bot-time">HH:mm</span>)
</p>
<br>
<div class="has-text-centered">
<button class="button is-success close-modal" id="set-browser-timezone">Use Browser Timezone</button>
<button class="button is-link close-modal" id="set-bot-timezone">Use Bot Timezone</button>
<button class="button is-warning close-modal" id="update-bot-timezone">Set Bot Timezone</button>
</div>
</section>
</div>
<button class="modal-close is-large close-modal" aria-label="close"></button>
</div>
<div class="modal" id="chooseTemplateModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<label class="modal-card-title" for="urlInput">Load Template</label>
<button class="delete close-modal" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="control has-icons-left">
<div class="select is-fullwidth">
<select id="templateSelect">
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-file-spreadsheet"></i>
</div>
</div>
<br>
<div class="has-text-centered">
<button class="button is-success close-modal" id="load-template">Load Template</button>
<button class="button is-danger" id="delete-template">Delete</button>
</div>
</section>
</div>
<button class="modal-close is-large close-modal" aria-label="close"></button>
</div>
<div class="modal" id="dataManagerModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<label class="modal-card-title" for="urlInput">Import/Export Manager <a href="/help/iemanager"><span><i class="fa fa-question-circle"></i></span></a></label>
<button class="delete close-modal" aria-label="close"></button>
</header>
<section class="modal-card-body">
<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" id="import-data">Import Data</button>
<button class="button is-success" id="export-data">Export Data</button>
</div>
<a id="downloader" download="export.csv" class="is-hidden"></a>
<input id="uploader" type="file" hidden></input>
</section>
</div>
<button class="modal-close is-large close-modal" aria-label="close"></button>
</div>
<div class="modal" id="deleteReminderModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<label class="modal-card-title">Delete Reminder</label>
<button class="delete close-modal" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p>
This reminder will be permanently deleted. Are you sure?
</p>
<br>
<div class="has-text-centered">
<button class="button is-danger" id="delete-reminder-confirm">Delete</button>
<button class="button is-light close-modal">Cancel</button>
</div>
</section>
</div>
<button class="modal-close is-large close-modal" aria-label="close"></button>
</div>
<div class="columns is-gapless dashboard-frame">
<div class="column is-2 is-sidebar-menu dashboard-sidebar is-hidden-touch">
<a href="/">
<div class="brand">
<img src="/static/img/logo_nobg.webp" alt="Reminder bot logo"
width="52px" height="52px"
class="dashboard-brand">
</div>
</a>
<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>
<aside class="menu">
<p class="menu-label">
Servers
</p>
<ul class="menu-list guildList">
</ul>
<div class="aside-footer">
<p class="menu-label">
Options
</p>
<ul class="menu-list">
<li>
<a class="show-modal" data-modal="dataManagerModal">
<span class="icon"><i class="fas fa-exchange"></i></span> Import/Export
</a>
<a class="show-modal" data-modal="chooseTimezoneModal">
<span class="icon"><i class="fas fa-map-marked"></i></span> Timezone
</a>
<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>
</div>
<div class="dashboard-sidebar mobile-sidebar is-hidden-desktop" id="mobileSidebar">
<a href="/">
<div class="brand">
<img src="/static/img/logo_nobg.webp" alt="Reminder bot logo"
class="dashboard-brand">
</div>
</a>
<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>
<aside class="menu">
<p class="menu-label">
Servers
</p>
<ul class="menu-list guildList">
</ul>
<div class="aside-footer">
<p class="menu-label">
Settings
</p>
<ul class="menu-list">
<li>
<a class="show-modal" data-modal="dataManagerModal">
<span class="icon"><i class="fas fa-exchange"></i></span> Import/Export
</a>
<a class="show-modal" data-modal="chooseTimezoneModal">
<span class="icon"><i class="fas fa-map-marked"></i></span> Timezone
</a>
<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>
</div>
<!-- main content -->
<div class="column is-main-content">
<p class="title pageTitle"></p>
<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>
<section id="reminders" class="is-hidden">
{% include "reminder_dashboard/reminder_dashboard" %}
</section>
<section id="reminder-errors" class="is-hidden">
{% include "reminder_dashboard/reminder_errors" %}
</section>
<section id="guild-error" class="is-hidden">
{% include "reminder_dashboard/guild_error" %}
</section>
<section id="user-error" class="is-hidden">
{% include "reminder_dashboard/user_error" %}
</section>
</div>
<!-- /main content -->
</div>
<template id="embedFieldTemplate">
<div data-inlined="1" class="embed-field-box">
<div class="is-flex">
<label>
<span class="is-sr-only">Field Title</span>
<textarea class="discord-field-title field-input message-input autoresize"
placeholder="Field Title..." rows="1"
maxlength="256" name="embed_field_title[]"></textarea>
</label>
<button class="button is-small inline-btn">
<span class="is-sr-only">Toggle field inline</span><i class="fas fa-arrows-h"></i>
</button>
</div>
<label>
<span class="is-sr-only">Field Value</span>
<textarea
class="discord-field-value field-input message-input autoresize"
placeholder="Field Value..."
maxlength="1024" name="embed_field_value[]"
rows="1"></textarea>
</label>
</div>
</template>
<template id="guildListEntry">
<li>
<a class="switch-pane" data-pane="guild">
<span class="icon"><i class="fas fa-map-pin"></i></span> <span class="guild-name">%guildname%</span>
</a>
</li>
</template>
<template id="guildReminder">
{% include "reminder_dashboard/guild_reminder" %}
</template>
<script src="/static/js/iro.js"></script>
<script src="/static/js/dtsel.js"></script>
<script src="/static/js/interval.js?v{{ version }}"></script>
<script src="/static/js/timezone.js?v{{ version }}" defer></script>
<script src="/static/js/main.js?v{{ version }}" defer></script>
</body>
</html>

17
templates/reminder_dashboard/guild_error.html.tera
View File

@ -1,17 +0,0 @@
<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>

269
templates/reminder_dashboard/guild_reminder.html.tera
View File

@ -1,269 +0,0 @@
<div class="reminderContent {% if creating %}creator{% endif %}">
<div class="columns is-mobile column reminder-topbar">
{% if not creating %}
<div class="invert-collapses channel-bar">
#channel
</div>
{% endif %}
<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">
</div>
</div>
</div>
<div class="hide-button-bar">
<button class="button hide-box">
<span class="is-sr-only">Hide reminder</span><i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<div class="columns reminder-settings">
<div class="column discord-frame">
<article class="media">
<figure class="media-left">
<p class="image is-32x32 customizable">
<a>
<img class="is-rounded avatar" src="/static/img/bg.webp" alt="Image for discord avatar">
</a>
</p>
</figure>
<div class="media-content">
<div class="content">
<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">
</div>
<label class="is-sr-only">Message</label>
<textarea class="message-input autoresize discord-content"
placeholder="Message Content..."
maxlength="2000" name="content" rows="1"></textarea>
<div class="discord-embed">
<div class="embed-body">
<button class="change-color button is-rounded is-small">
<span class="is-sr-only">Choose embed color</span><i class="fas fa-eye-dropper"></i>
</button>
<div class="a">
<div class="embed-author-box">
<div class="a">
<p class="image is-24x24 customizable">
<a>
<img class="is-rounded embed_author_url" src="/static/img/bg.webp" alt="Image for embed author">
</a>
</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"></textarea>
</div>
</div>
<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"></textarea>
<br>
<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"></textarea>
<br>
<div class="embed-multifield-box">
<div data-inlined="1" class="embed-field-box">
<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[]"></textarea>
<button class="button is-small inline-btn">
<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"></textarea>
</div>
</div>
</div>
<div class="b">
<p class="image thumbnail customizable">
<a>
<img class="embed_thumbnail_url" src="/static/img/bg.webp" alt="Square thumbnail embedded image">
</a>
</p>
</div>
</div>
<p class="image is-400x300 customizable">
<a>
<img class="embed_image_url" src="/static/img/bg.webp" alt="Large embedded image">
</a>
</p>
<div class="embed-footer-box">
<p class="image is-20x20 customizable">
<a>
<img class="is-rounded embed_footer_url" src="/static/img/bg.webp" alt="Footer profile-like image">
</a>
</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"></textarea>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="column settings">
<div class="field channel-field">
<div class="collapses">
<label class="label" for="channelOption">Channel*</label>
</div>
<div class="control has-icons-left">
<div class="select">
<select name="channel" class="channel-selector">
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-hashtag"></i>
</div>
</div>
</div>
<div class="field">
<div class="control">
<label class="label collapses">
Time*
<input class="input prefill-now" type="datetime-local" step="1" name="time">
</label>
</div>
</div>
<div class="collapses split-controls">
<div>
<div class="patreon-only">
<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>
<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=""> <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=""> <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">:
</label>
<label>
<span class="is-sr-only">Interval minutes</span>
<input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">:
</label>
<label>
<span class="is-sr-only">Interval seconds</span>
<input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS">
</label>
</span>
</div>
<button class="clear"><span class="is-sr-only">Clear interval</span><span class="icon"><i class="fas fa-trash"></i></span></button>
</div>
</div>
</div>
<div class="field">
<div class="control">
<label class="label">
Expiration
<input class="input" type="datetime-local" step="1" name="expiration">
</label>
</div>
</div>
</div>
<div class="columns is-mobile tts-row">
<div class="column has-text-centered">
<div class="is-boxed">
<label class="label">Enable TTS <input type="checkbox" name="tts"></label>
</div>
</div>
<div class="column has-text-centered">
<div class="file is-small is-boxed">
<label class="file-label">
<input class="file-input" type="file" name="attachment">
<span class="file-cta">
<span class="file-label">
Add Attachment
</span>
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% if creating %}
<div class="button-row">
<div class="button-row-reminder">
<button class="button is-success" id="createReminder">
<span>Create Reminder</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" id="createTemplate">
<span>Create Template</span> <span class="icon"><i class="fas fa-file-spreadsheet"></i></span>
</button>
</div>
<div>
<button class="button is-outlined show-modal is-pulled-right" data-modal="chooseTemplateModal">
Load Template
</button>
</div>
</div>
</div>
{% else %}
<div class="button-row-edit">
<button class="button is-success save-btn">
<span>Save</span> <span class="icon"><i class="fas fa-save"></i></span>
</button>
<button class="button is-warning disable-enable">
</button>
<button class="button is-danger delete-reminder">
Delete
</button>
</div>
{% endif %}
</div>

52
templates/reminder_dashboard/reminder_dashboard.html.tera
View File

@ -1,52 +0,0 @@
<div class="create-reminder">
<strong>Create Reminder</strong>
<div id="reminderCreator">
{% set creating = true %}
{% include "reminder_dashboard/guild_reminder" %}
{% set creating = false %}
</div>
<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">
<option value="time" selected>Time</option>
<option value="name">Name</option>
<option value="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">
<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">
</div>
</div>
<script src="/static/js/sort.js"></script>
<script src="/static/js/expand.js"></script>

5
templates/reminder_dashboard/reminder_errors.html.tera
View File

@ -1,5 +0,0 @@
<div>
</div>
<!--<script src="/static/js/reminder_errors.js"></script>-->

12
templates/reminder_dashboard/user_error.html.tera
View File

@ -1,12 +0,0 @@
<div class="hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">
You do not have permissions for this server
</p>
<p class="subtitle">
Ask an admin to grant you the "Manage Messages" permission.
</p>
</div>
</div>
</div>