Fix color picker not working

Make sidebar work better

.gitignore

@@ -1,7 +1,30 @@
-/target
+target
 .env
 /venv
 .cargo
-assets
-out.json
-/.idea
+.idea
+web/static/index.html
+web/static/assets
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Cargo.toml

@@ -1,20 +1,22 @@
 [package]
-name = "reminder_rs"
-version = "1.6.5"
-authors = ["jellywx <judesouthworth@pm.me>"]
-edition = "2018"
+name = "reminder-rs"
+version = "1.7.0-rc5"
+authors = ["Jude Southworth <judesouthworth@pm.me>"]
+edition = "2021"
+license = "AGPL-3.0 only"
+description = "Reminder Bot for Discord, now in Rust"
 
 [dependencies]
-poise = "0.3"
+poise = "0.6.1"
 dotenv = "0.15"
 tokio = { version = "1", features = ["process", "full"] }
 reqwest = "0.11"
-lazy-regex = "2.3.0"
-regex = "1.6"
+lazy-regex = "3.1"
+regex = "1.10"
 log = "0.4"
-env_logger = "0.9"
+env_logger = "0.11"
 chrono = "0.4"
-chrono-tz = { version = "0.6", features = ["serde"] }
+chrono-tz = { version = "0.8", features = ["serde"] }
 lazy_static = "1.4"
 num-integer = "0.1"
 serde = "1.0"
@@ -23,11 +25,48 @@ serde_repr = "0.1"
 rmp-serde = "1.1"
 rand = "0.8"
 levenshtein = "1.0"
-sqlx = { version = "0.6", features = ["runtime-tokio-rustls", "macros", "mysql", "bigdecimal", "chrono"]}
-base64 = "0.13"
+sqlx = { version = "0.7", features = ["runtime-tokio-rustls", "macros", "mysql", "bigdecimal", "chrono", "migrate"] }
+base64 = "0.21"
+secrecy = "0.8.0"
 
 [dependencies.postman]
 path = "postman"
 
 [dependencies.reminder_web]
 path = "web"
+
+[dependencies.extract_derive]
+path = "extract_derive"
+
+[dependencies.recordable_derive]
+path = "recordable_derive"
+
+[package.metadata.deb]
+depends = "$auto, python3-dateparser (>= 1.0.0)"
+suggests = "mysql-server-8.0, nginx"
+maintainer-scripts = "debian"
+assets = [
+    ["target/release/reminder-rs", "usr/bin/reminder-rs", "755"],
+    ["web/static/css/*", "lib/reminder-rs/static/css", "644"],
+    ["web/static/favicon/*", "lib/reminder-rs/static/favicon", "644"],
+    ["web/static/img/*", "lib/reminder-rs/static/img", "644"],
+    ["web/static/js/*", "lib/reminder-rs/static/js", "644"],
+    ["web/static/webfonts/*", "lib/reminder-rs/static/webfonts", "644"],
+    ["web/static/site.webmanifest", "lib/reminder-rs/static/site.webmanifest", "644"],
+    ["web/templates/**/*", "lib/reminder-rs/templates", "644"],
+    ["reminder-dashboard/dist/static/assets/*", "lib/reminder-rs/static/assets", "644"],
+    ["reminder-dashboard/dist/index.html", "lib/reminder-rs/static/index.html", "644"],
+    ["conf/default.env", "etc/reminder-rs/config.env", "600"],
+    ["conf/Rocket.toml", "etc/reminder-rs/Rocket.toml", "600"],
+    ["healthcheck", "lib/reminder-rs/healthcheck", "755"],
+    ["cron.d/reminder_health", "etc/cron.d/reminder_health", "644"],
+    # ["nginx/reminder-rs", "etc/nginx/sites-available/reminder-rs", "755"]
+]
+conf-files = [
+    "/etc/reminder-rs/config.env",
+    "/etc/reminder-rs/Rocket.toml",
+]
+
+[package.metadata.deb.systemd-units]
+unit-scripts = "systemd"
+start = false

Containerfile

@@ -0,0 +1,9 @@
+FROM ubuntu:20.04
+
+ENV RUSTUP_HOME=/usr/local/rustup \
+    CARGO_HOME=/usr/local/cargo \
+    PATH=/usr/local/cargo/bin:$PATH
+
+RUN apt update && DEBIAN_FRONTEND=noninteractive TZ=Etc/UTC apt install -y gcc gcc-multilib cmake pkg-config libssl-dev curl mysql-client-8.0
+RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y --no-modify-path --profile minimal --default-toolchain nightly
+RUN cargo install cargo-deb

README.md

@@ -7,25 +7,36 @@ reminders are paid on the hosted version of the bot. Keep reading if you want to
 
 You'll need rustc and cargo for compilation. To run, you'll need Python 3 still (due to no suitable replacement for dateparser in Rust)
 
-### Compiling
-Install build requirements: 
-`sudo apt install gcc gcc-multilib cmake libssl-dev build-essential`
+### Build APT package
 
-Install Rust from https://rustup.rs
+Recommended method.
 
-Reminder Bot can then be built by running `cargo build --release` in the top level directory. It is necessary to create a 
-folder called 'assets' containing an image file with its name specified in the environment as `WEBHOOK_AVATAR`, of 
-dimensions 128x128px to be used as the webhook avatar.
+By default, this builds targeting Ubuntu 20.04. Modify the Containerfile if you wish to target a different platform. These instructions are written using `podman`, but `docker` should work too.
 
-#### Compilation environment variables
-These environment variables must be provided when compiling the bot
-* `DATABASE_URL` - the URL of your MySQL database (`mysql://user[:password]@domain/database`)
-* `WEBHOOK_AVATAR` - accepts the name of an image file located in `$CARGO_MANIFEST_DIR/assets/` to be used as the avatar when creating webhooks. **IMPORTANT: image file must be 128x128 or smaller in size**
+1. Install container software: `sudo apt install podman`.
+2. Install database server: `sudo apt install mysql-server-8.0`. Create a database called `reminders`
+3. Install SQLx CLI: `cargo install sqlx-cli`
+4. From the source code directory, execute `sqlx migrate run`
+5. Build container image: `podman build -t reminder-rs .`
+6. Build with podman: `podman run --rm --network=host -v "$PWD":/mnt -w /mnt -e "DATABASE_URL=mysql://user@localhost/reminders" reminder-rs cargo deb` 
 
-### Setting up Python
-Reminder Bot by default looks for a venv within it's working directory to run Python out of. To set up a venv, install `python3-venv` and run `python3 -m venv venv`. Then, run `source venv/bin/activate` to activate the venv, and do `pip install dateparser` to install the required library
 
-### Environment Variables
+### Compiling for other target
+
+1. Install requirements: 
+`sudo apt install gcc gcc-multilib cmake libssl-dev build-essential python3-dateparser`
+2. Install rustup from https://rustup.rs
+3. Install the nightly toolchain: `rustup toolchain default nightly`
+4. Install database server: `sudo apt install mysql-server-8.0`. Create a database called `reminders`.
+5. Install `sqlx-cli`: `cargo install sqlx-cli`.
+6. Run migrations: `sqlx migrate run`.
+7. Set environment variables:
+   * `DATABASE_URL` - the URL of your MySQL database (`mysql://user[:password]@domain/database`)
+8. Build: `cargo build --release`
+
+
+### Configuring
+
 Reminder Bot reads a number of environment variables. Some are essential, and others have hardcoded fallbacks. Environment variables can be loaded from a .env file in the working directory.
 
 __Required Variables__
@@ -37,10 +48,5 @@ __Other Variables__
 * `LOCAL_TIMEZONE` - default `UTC`, necessary for calculations in the natural language processor
 * `SUBSCRIPTION_ROLES` - default `None`, accepts a list of Discord role IDs that are given to subscribed users
 * `CNC_GUILD` - default `None`, accepts a single Discord guild ID for the server that the subscription roles belong to
-* `PYTHON_LOCATION` - default `venv/bin/python3`. Can be changed if your Python executable is located somewhere else
+* `PYTHON_LOCATION` - default `/usr/bin/python3`. Can be changed if your Python executable is located somewhere else
 * `THEME_COLOR` - default `8fb677`. Specifies the hex value of the color to use on info message embeds 
-* `DM_ENABLED` - default `1`, if `1`, Reminder Bot will respond to direct messages
-
-### Todo List
-
-* Convert aliases to macros

Rocket.toml

@@ -1,6 +1,6 @@
 [default]
 address = "0.0.0.0"
-port = 5000
+port = 18920
 template_dir = "web/templates"
 limits = { json = "10MiB" }
 
@@ -11,18 +11,18 @@ secret_key = "tR8krio5FXTnnyIZNiJDXPondz0kI1v6X6BXZcBGIRY="
 certs = "web/private/rsa_sha256_cert.pem"
 key = "web/private/rsa_sha256_key.pem"
 
-[rsa_sha256.tls]
+[debug.rsa_sha256.tls]
 certs = "web/private/rsa_sha256_cert.pem"
 key = "web/private/rsa_sha256_key.pem"
 
-[ecdsa_nistp256_sha256.tls]
+[debug.ecdsa_nistp256_sha256.tls]
 certs = "web/private/ecdsa_nistp256_sha256_cert.pem"
 key = "web/private/ecdsa_nistp256_sha256_key_pkcs8.pem"
 
-[ecdsa_nistp384_sha384.tls]
+[debug.ecdsa_nistp384_sha384.tls]
 certs = "web/private/ecdsa_nistp384_sha384_cert.pem"
 key = "web/private/ecdsa_nistp384_sha384_key_pkcs8.pem"
 
-[ed25519.tls]
+[debug.ed25519.tls]
 certs = "web/private/ed25519_cert.pem"
 key = "eb/private/ed25519_key.pem"

build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    println!("cargo:rerun-if-changed=migrations");
+}

conf/Rocket.toml

@@ -0,0 +1,8 @@
+[default]
+address = "127.0.0.1"
+port = 18920
+template_dir = "/lib/reminder-rs/templates"
+limits = { json = "10MiB" }
+
+[release]
+# secret_key = ""

conf/default.env

@@ -0,0 +1,19 @@
+DATABASE_URL=
+
+DISCORD_TOKEN=
+PATREON_GUILD_ID=
+PATREON_ROLE_ID=
+
+LOCAL_TIMEZONE=
+MIN_INTERVAL=
+PYTHON_LOCATION=/usr/bin/python3
+DONTRUN=
+SECRET_KEY=
+
+REMIND_INTERVAL=
+OAUTH2_DISCORD_CALLBACK=
+OAUTH2_CLIENT_ID=
+OAUTH2_CLIENT_SECRET=
+
+REPORT_EMAIL=
+LOG_TO_DATABASE=1

cron.d/reminder_health

@@ -0,0 +1 @@
+*/10 * * * * reminder /lib/reminder-rs/healthcheck

debian/postinst

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+set -e
+
+id -u reminder &>/dev/null || useradd -r -M reminder
+
+chown -R reminder /etc/reminder-rs
+
+#DEBHELPER#

debian/postrm

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+set -e
+
+id -u reminder &>/dev/null || userdel reminder
+
+#DEBHELPER#

extract_derive/Cargo.lock

@@ -0,0 +1,46 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 3
+
+[[package]]
+name = "extract_macro"
+version = "0.1.0"
+dependencies = [
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.78"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e2422ad645d89c99f8f3e6b88a9fdeca7fabeac836b1002371c4367c8f984aae"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.35"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "291ec9ab5efd934aaf503a6466c5d5251535d108ee747472c3977cc5acc868ef"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "syn"
+version = "2.0.49"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "915aea9e586f80826ee59f8453c1101f9d1c4b3964cd2460185ee8e299ada496"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3354b9ac3fae1ff6755cb6db53683adb661634f67557942dea4facebec0fee4b"

extract_derive/Cargo.toml

@@ -0,0 +1,11 @@
+[package]
+name = "extract_derive"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+proc-macro = true
+
+[dependencies]
+quote = "1.0.35"
+syn = { version = "2.0.49", features = ["full"] }

extract_derive/src/lib.rs

@@ -0,0 +1,53 @@
+use proc_macro::TokenStream;
+use syn::{spanned::Spanned, Data, Fields};
+
+#[proc_macro_derive(Extract)]
+pub fn extract(input: TokenStream) -> TokenStream {
+    let ast = syn::parse_macro_input!(input);
+
+    impl_extract(&ast)
+}
+
+fn impl_extract(ast: &syn::DeriveInput) -> TokenStream {
+    let name = &ast.ident;
+
+    match &ast.data {
+        // Dispatch over struct: extract args directly from context
+        Data::Struct(st) => match &st.fields {
+            Fields::Named(fields) => {
+                let extracted = fields.named.iter().map(|field| {
+                    let ident = &field.ident;
+                    let ty = &field.ty;
+
+                    quote::quote_spanned! {field.span()=>
+                        #ident : crate::utils::extract_arg!(ctx, #ident, #ty)
+                    }
+                });
+
+                TokenStream::from(quote::quote! {
+                    impl Extract for #name {
+                        fn extract(ctx: crate::ApplicationContext) -> Self {
+                            Self {
+                                #(#extracted,)*
+                            }
+                        }
+                    }
+                })
+            }
+            Fields::Unit => TokenStream::from(quote::quote! {
+                impl Extract for #name {
+                    fn extract(ctx: crate::ApplicationContext) -> Self {
+                        Self {}
+                    }
+                }
+            }),
+            _ => {
+                panic!("Only named/unit structs can derive Extract");
+            }
+        },
+
+        _ => {
+            panic!("Only structs can derive Extract");
+        }
+    }
+}

healthcheck

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+export $(grep -v '^#' /etc/reminder-rs/config.env | xargs -d '\n')
+
+REGEX='mysql://([A-Za-z]+)@(.+)/(.+)'
+[[ $DATABASE_URL =~ $REGEX ]]
+
+VAR=$(mysql -u "${BASH_REMATCH[1]}" -h "${BASH_REMATCH[2]}" -N -D "${BASH_REMATCH[3]}" -e "SELECT COUNT(1) FROM reminders WHERE utc_time < NOW() - INTERVAL 10 MINUTE AND enabled = 1 AND status = 'pending'")
+
+if [ "$VAR" -gt 0 ]
+then
+  echo "This is to inform that there is a reminder backlog which must be resolved." | mail -s "Backlog: $VAR" "$REPORT_EMAIL"
+fi

migration/03-reminder_variable_intervals.sql

@@ -1,4 +0,0 @@
-USE reminders;
-
-ALTER TABLE reminders.reminders RENAME COLUMN `interval` TO `interval_seconds`;
-ALTER TABLE reminders.reminders ADD COLUMN `interval_months` INT UNSIGNED DEFAULT NULL;

migrations/20210603000000_initial.sql

@@ -1,10 +1,6 @@
-CREATE DATABASE IF NOT EXISTS reminders;
-
 SET FOREIGN_KEY_CHECKS=0;
 
-USE reminders;
-
-CREATE TABLE reminders.guilds (
+CREATE TABLE guilds (
     id INT UNSIGNED UNIQUE NOT NULL AUTO_INCREMENT,
     guild BIGINT UNSIGNED UNIQUE NOT NULL,
 
@@ -18,10 +14,10 @@ CREATE TABLE reminders.guilds (
     default_avatar VARCHAR(512) DEFAULT 'https://raw.githubusercontent.com/reminder-bot/logos/master/Remind_Me_Bot_Logo_PPic.jpg' NOT NULL,
 
     PRIMARY KEY (id),
-    FOREIGN KEY (default_channel_id) REFERENCES reminders.channels(id) ON DELETE SET NULL
+    FOREIGN KEY (default_channel_id) REFERENCES channels(id) ON DELETE SET NULL
 );
 
-CREATE TABLE reminders.channels (
+CREATE TABLE channels (
     id INT UNSIGNED UNIQUE NOT NULL AUTO_INCREMENT,
     channel BIGINT UNSIGNED UNIQUE NOT NULL,
 
@@ -39,10 +35,10 @@ CREATE TABLE reminders.channels (
     guild_id INT UNSIGNED,
 
     PRIMARY KEY (id),
-    FOREIGN KEY (guild_id) REFERENCES reminders.guilds(id) ON DELETE CASCADE
+    FOREIGN KEY (guild_id) REFERENCES guilds(id) ON DELETE CASCADE
 );
 
-CREATE TABLE reminders.users (
+CREATE TABLE users (
     id INT UNSIGNED AUTO_INCREMENT UNIQUE NOT NULL,
     user BIGINT UNSIGNED UNIQUE NOT NULL,
 
@@ -59,10 +55,10 @@ CREATE TABLE reminders.users (
     patreon BOOLEAN NOT NULL DEFAULT 0,
 
     PRIMARY KEY (id),
-    FOREIGN KEY (dm_channel) REFERENCES reminders.channels(id) ON DELETE RESTRICT
+    FOREIGN KEY (dm_channel) REFERENCES channels(id) ON DELETE RESTRICT
 );
 
-CREATE TABLE reminders.roles (
+CREATE TABLE roles (
     id INT UNSIGNED UNIQUE NOT NULL AUTO_INCREMENT,
     role BIGINT UNSIGNED UNIQUE NOT NULL,
 
@@ -71,10 +67,10 @@ CREATE TABLE reminders.roles (
     guild_id INT UNSIGNED NOT NULL,
 
     PRIMARY KEY (id),
-    FOREIGN KEY (guild_id) REFERENCES reminders.guilds(id) ON DELETE CASCADE
+    FOREIGN KEY (guild_id) REFERENCES guilds(id) ON DELETE CASCADE
 );
 
-CREATE TABLE reminders.embeds (
+CREATE TABLE embeds (
     id INT UNSIGNED AUTO_INCREMENT UNIQUE NOT NULL,
 
     title VARCHAR(256) NOT NULL DEFAULT '',
@@ -91,7 +87,7 @@ CREATE TABLE reminders.embeds (
     PRIMARY KEY (id)
 );
 
-CREATE TABLE reminders.embed_fields (
+CREATE TABLE embed_fields (
     id INT UNSIGNED AUTO_INCREMENT UNIQUE NOT NULL,
 
     title VARCHAR(256) NOT NULL DEFAULT '',
@@ -100,10 +96,10 @@ CREATE TABLE reminders.embed_fields (
     embed_id INT UNSIGNED NOT NULL,
 
     PRIMARY KEY (id),
-    FOREIGN KEY (embed_id) REFERENCES reminders.embeds(id) ON DELETE CASCADE
+    FOREIGN KEY (embed_id) REFERENCES embeds(id) ON DELETE CASCADE
 );
 
-CREATE TABLE reminders.messages (
+CREATE TABLE messages (
     id INT UNSIGNED AUTO_INCREMENT UNIQUE NOT NULL,
 
     content VARCHAR(2048) NOT NULL DEFAULT '',
@@ -114,10 +110,10 @@ CREATE TABLE reminders.messages (
     attachment_name VARCHAR(260),
 
     PRIMARY KEY (id),
-    FOREIGN KEY (embed_id) REFERENCES reminders.embeds(id) ON DELETE SET NULL
+    FOREIGN KEY (embed_id) REFERENCES embeds(id) ON DELETE SET NULL
 );
 
-CREATE TABLE reminders.reminders (
+CREATE TABLE reminders (
     id INT UNSIGNED AUTO_INCREMENT UNIQUE NOT NULL,
     uid VARCHAR(64) UNIQUE NOT NULL,
 
@@ -140,20 +136,20 @@ CREATE TABLE reminders.reminders (
     set_by INT UNSIGNED,
 
     PRIMARY KEY (id),
-    FOREIGN KEY (message_id) REFERENCES reminders.messages(id) ON DELETE RESTRICT,
-    FOREIGN KEY (channel_id) REFERENCES reminders.channels(id) ON DELETE CASCADE,
-    FOREIGN KEY (set_by) REFERENCES reminders.users(id) ON DELETE SET NULL
+    FOREIGN KEY (message_id) REFERENCES messages(id) ON DELETE RESTRICT,
+    FOREIGN KEY (channel_id) REFERENCES channels(id) ON DELETE CASCADE,
+    FOREIGN KEY (set_by) REFERENCES users(id) ON DELETE SET NULL
 );
 
-CREATE TRIGGER message_cleanup AFTER DELETE ON reminders.reminders
+CREATE TRIGGER message_cleanup AFTER DELETE ON reminders
 FOR EACH ROW
-    DELETE FROM reminders.messages WHERE id = OLD.message_id;
+    DELETE FROM messages WHERE id = OLD.message_id;
 
-CREATE TRIGGER embed_cleanup AFTER DELETE ON reminders.messages
+CREATE TRIGGER embed_cleanup AFTER DELETE ON messages
 FOR EACH ROW
-    DELETE FROM reminders.embeds WHERE id = OLD.embed_id;
+    DELETE FROM embeds WHERE id = OLD.embed_id;
 
-CREATE TABLE reminders.todos (
+CREATE TABLE todos (
     id INT UNSIGNED AUTO_INCREMENT UNIQUE NOT NULL,
     user_id INT UNSIGNED,
     guild_id INT UNSIGNED,
@@ -161,23 +157,23 @@ CREATE TABLE reminders.todos (
     value VARCHAR(2000) NOT NULL,
 
     PRIMARY KEY (id),
-    FOREIGN KEY (user_id) REFERENCES reminders.users(id) ON DELETE SET NULL,
-    FOREIGN KEY (guild_id) REFERENCES reminders.guilds(id) ON DELETE CASCADE,
-    FOREIGN KEY (channel_id) REFERENCES reminders.channels(id) ON DELETE SET NULL
+    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE SET NULL,
+    FOREIGN KEY (guild_id) REFERENCES guilds(id) ON DELETE CASCADE,
+    FOREIGN KEY (channel_id) REFERENCES channels(id) ON DELETE SET NULL
 );
 
-CREATE TABLE reminders.command_restrictions (
+CREATE TABLE command_restrictions (
     id INT UNSIGNED AUTO_INCREMENT UNIQUE NOT NULL,
 
     role_id INT UNSIGNED NOT NULL,
     command ENUM('todos', 'natural', 'remind', 'interval', 'timer', 'del', 'look', 'alias', 'countdown') NOT NULL,
 
     PRIMARY KEY (id),
-    FOREIGN KEY (role_id) REFERENCES reminders.roles(id) ON DELETE CASCADE,
+    FOREIGN KEY (role_id) REFERENCES roles(id) ON DELETE CASCADE,
     UNIQUE KEY (`role_id`, `command`)
 );
 
-CREATE TABLE reminders.timers (
+CREATE TABLE timers (
     id INT UNSIGNED AUTO_INCREMENT UNIQUE NOT NULL,
     start_time TIMESTAMP NOT NULL DEFAULT NOW(),
     name VARCHAR(32) NOT NULL,
@@ -186,7 +182,7 @@ CREATE TABLE reminders.timers (
     PRIMARY KEY (id)
 );
 
-CREATE TABLE reminders.events (
+CREATE TABLE events (
     id INT UNSIGNED AUTO_INCREMENT UNIQUE NOT NULL,
     `time` TIMESTAMP NOT NULL DEFAULT NOW(),
 
@@ -198,12 +194,12 @@ CREATE TABLE reminders.events (
     reminder_id INT UNSIGNED,
 
     PRIMARY KEY (id),
-    FOREIGN KEY (guild_id) REFERENCES reminders.guilds(id) ON DELETE CASCADE,
-    FOREIGN KEY (user_id) REFERENCES reminders.users(id) ON DELETE SET NULL,
-    FOREIGN KEY (reminder_id) REFERENCES reminders.reminders(id) ON DELETE SET NULL
+    FOREIGN KEY (guild_id) REFERENCES guilds(id) ON DELETE CASCADE,
+    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE SET NULL,
+    FOREIGN KEY (reminder_id) REFERENCES reminders(id) ON DELETE SET NULL
 );
 
-CREATE TABLE reminders.command_aliases (
+CREATE TABLE command_aliases (
     id INT UNSIGNED AUTO_INCREMENT UNIQUE NOT NULL,
 
     guild_id INT UNSIGNED NOT NULL,
@@ -212,22 +208,22 @@ CREATE TABLE reminders.command_aliases (
     command VARCHAR(2048) NOT NULL,
 
     PRIMARY KEY (id),
-    FOREIGN KEY (guild_id) REFERENCES reminders.guilds(id) ON DELETE CASCADE,
+    FOREIGN KEY (guild_id) REFERENCES guilds(id) ON DELETE CASCADE,
     UNIQUE KEY (`guild_id`, `name`)
 );
 
-CREATE TABLE reminders.guild_users (
+CREATE TABLE guild_users (
     guild INT UNSIGNED NOT NULL,
     user INT UNSIGNED NOT NULL,
 
     can_access BOOL NOT NULL DEFAULT 0,
 
-    FOREIGN KEY (guild) REFERENCES reminders.guilds(id) ON DELETE CASCADE,
-    FOREIGN KEY (user) REFERENCES reminders.users(id) ON DELETE CASCADE,
+    FOREIGN KEY (guild) REFERENCES guilds(id) ON DELETE CASCADE,
+    FOREIGN KEY (user) REFERENCES users(id) ON DELETE CASCADE,
     UNIQUE KEY (guild, user)
 );
 
-CREATE EVENT reminders.event_cleanup
+CREATE EVENT event_cleanup
 ON SCHEDULE AT CURRENT_TIMESTAMP + INTERVAL 1 DAY
 ON COMPLETION PRESERVE
-DO DELETE FROM reminders.events WHERE `time` < DATE_SUB(NOW(), INTERVAL 5 DAY);
+DO DELETE FROM events WHERE `time` < DATE_SUB(NOW(), INTERVAL 5 DAY);

migrations/20210623000000_reminder_message_embed.sql

@@ -1,5 +1,3 @@
-USE reminders;
-
 SET FOREIGN_KEY_CHECKS = 0;
 
 DROP TABLE IF EXISTS reminders_new;

migrations/20210922000000_macro.sql

@@ -1,5 +1,3 @@
-USE reminders;
-
 CREATE TABLE macro (
     id INT UNSIGNED AUTO_INCREMENT,
     guild_id INT UNSIGNED NOT NULL,

migrations/20220201000000_reminder_variable_intervals.sql

@@ -0,0 +1,2 @@
+ALTER TABLE reminders RENAME COLUMN `interval` TO `interval_seconds`;
+ALTER TABLE reminders ADD COLUMN `interval_months` INT UNSIGNED DEFAULT NULL;

migrations/20220211000000_reminder_templates.sql

@@ -1,5 +1,3 @@
-USE reminders;
-
 CREATE TABLE reminder_template (
     `id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
 

migrations/20221210000000_reminder_daily_intervals.sql

@@ -0,0 +1 @@
+ALTER TABLE reminders ADD COLUMN `interval_days` INT UNSIGNED DEFAULT NULL;

migrations/20230511125236_reminder_threads.sql

@@ -0,0 +1 @@
+ALTER TABLE reminders ADD COLUMN `thread_id` BIGINT DEFAULT NULL;

migrations/20230511180231_ephemeral_confirmations.sql

@@ -0,0 +1 @@
+ALTER TABLE guilds ADD COLUMN ephemeral_confirmations BOOL NOT NULL DEFAULT 0;

migrations/20230722130906_increase_reminder_name.sql

@@ -0,0 +1,2 @@
+ALTER TABLE reminders MODIFY `name` VARCHAR(100) NOT NULL DEFAULT 'Reminder';
+ALTER TABLE reminder_template MODIFY `name` VARCHAR(100) NOT NULL DEFAULT 'Reminder';

migrations/20230730134827_stats.sql

@@ -0,0 +1,9 @@
+CREATE TABLE stat (
+    `id` BIGINT NOT NULL AUTO_INCREMENT,
+    `utc_time` DATETIME NOT NULL DEFAULT NOW(),
+    `type` ENUM('reminder_sent', 'reminder_failed'),
+    `reminder_id` INT UNSIGNED,
+    `message` TEXT,
+
+    PRIMARY KEY (`id`)
+);

migrations/20230731170452_reminder_archive.sql

@@ -0,0 +1,2 @@
+ALTER TABLE reminders ADD COLUMN `status` ENUM ('pending', 'sent', 'failed', 'deleted') NOT NULL DEFAULT 'pending';
+ALTER TABLE reminders ADD COLUMN `status_message` TEXT;

migrations/20230923210620_reminder_template_intervals.sql

@@ -0,0 +1,3 @@
+ALTER TABLE `reminder_template` ADD COLUMN `interval_seconds` INT UNSIGNED;
+ALTER TABLE `reminder_template` ADD COLUMN `interval_days` INT UNSIGNED;
+ALTER TABLE `reminder_template` ADD COLUMN `interval_months` INT UNSIGNED;

migrations/20240210133900_macro_restructure.sql

@@ -0,0 +1,50 @@
+CREATE TABLE command_macro (
+    id INT UNSIGNED AUTO_INCREMENT,
+    guild_id INT UNSIGNED NOT NULL,
+
+    name VARCHAR(100) NOT NULL,
+    description VARCHAR(100),
+    commands JSON NOT NULL,
+
+    FOREIGN KEY (guild_id) REFERENCES guilds(id) ON DELETE CASCADE,
+    PRIMARY KEY (id)
+);
+
+# New JSON structure is {command_name: "Remind", "<option name>": "<option value>", ...}
+INSERT INTO command_macro (guild_id, description, name, commands)
+SELECT
+    guild_id,
+    description,
+    name,
+    (
+        SELECT JSON_ARRAYAGG(
+            (
+                SELECT JSON_OBJECTAGG(t2.name, t2.value)
+                FROM JSON_TABLE(
+                    JSON_ARRAY_APPEND(t1.options, '$', JSON_OBJECT('name', 'command_name', 'value', t1.command_name)),
+                    '$[*]' COLUMNS (
+                        name VARCHAR(64) PATH '$.name' ERROR ON ERROR,
+                        value TEXT PATH '$.value' ERROR ON ERROR
+                    )) AS t2
+            )
+        )
+        FROM macro m2
+        JOIN JSON_TABLE(
+            commands,
+            '$[*]' COLUMNS (
+                command_name VARCHAR(64) PATH '$.command_name' ERROR ON ERROR,
+                options JSON PATH '$.options' ERROR ON ERROR
+            )) AS t1
+        WHERE m1.id = m2.id
+    )
+FROM macro m1;
+
+# # Check which commands are used in macros
+# SELECT DISTINCT command_name
+# FROM macro m2
+# JOIN JSON_TABLE(
+#     commands,
+#     '$[*]' COLUMNS (
+#         command_name VARCHAR(64) PATH '$.command_name' ERROR ON ERROR,
+#         options JSON PATH '$.options' ERROR ON ERROR
+#     )) AS t1

nginx/reminder-rs

@@ -0,0 +1,41 @@
+server {
+        server_name www.reminder-bot.com;
+
+        return 301 $scheme://reminder-bot.com$request_uri;
+}
+
+server {
+        listen 80;
+        server_name reminder-bot.com;
+
+	    return 301 https://reminder-bot.com$request_uri;
+}
+
+server {
+        listen 443 ssl;
+        server_name reminder-bot.com;
+
+        ssl_certificate /etc/letsencrypt/live/reminder-bot.com/fullchain.pem;
+        ssl_certificate_key /etc/letsencrypt/live/reminder-bot.com/privkey.pem;
+
+        access_log /var/log/nginx/access.log;
+        error_log /var/log/nginx/error.log;
+
+        proxy_buffer_size 128k;
+        proxy_buffers 4 256k;
+        proxy_busy_buffers_size 256k;
+
+        location / {
+                proxy_pass http://localhost:18920;
+                proxy_redirect off;
+                proxy_set_header Host $host;
+                proxy_set_header X-Real-IP $remote_addr;
+                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+		        proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /static {
+                alias /var/www/reminder-rs/static;
+                expires 30d;
+        }
+}

postman/Cargo.toml

@@ -5,12 +5,12 @@ edition = "2021"
 
 [dependencies]
 tokio = { version = "1", features = ["process", "full"] }
-regex = "1.4"
+regex = "1.9"
 log = "0.4"
 chrono = "0.4"
-chrono-tz = { version = "0.5", features = ["serde"] }
+chrono-tz = { version = "0.8", features = ["serde"] }
 lazy_static = "1.4"
 num-integer = "0.1"
 serde = "1.0"
-sqlx = { version = "0.6", features = ["runtime-tokio-rustls", "macros", "mysql", "bigdecimal", "chrono", "json"]}
-serenity = { version = "0.11.1", default-features = false, features = ["builder", "cache", "client", "gateway", "http", "model", "utils", "rustls_backend"] }
+sqlx = { version = "0.7", features = ["runtime-tokio-rustls", "macros", "mysql", "bigdecimal", "chrono", "json"]}
+serenity = { version = "0.12", default-features = false, features = ["builder", "cache", "client", "gateway", "http", "model", "utils", "rustls_backend"] }

postman/src/sender.rs

@@ -1,4 +1,6 @@
-use chrono::Duration;
+use std::env;
+
+use chrono::{DateTime, Days, Duration, Months};
 use chrono_tz::Tz;
 use lazy_static::lazy_static;
 use log::{error, info, warn};
@@ -6,11 +8,12 @@ use num_integer::Integer;
 use regex::{Captures, Regex};
 use serde::Deserialize;
 use serenity::{
-    builder::CreateEmbed,
-    http::{CacheHttp, Http, HttpError, StatusCode},
+    all::{CreateAttachment, CreateEmbedFooter},
+    builder::{CreateEmbed, CreateEmbedAuthor, CreateMessage, ExecuteWebhook},
+    http::{CacheHttp, Http, HttpError},
     model::{
-        channel::{Channel, Embed as SerenityEmbed},
-        id::ChannelId,
+        channel::Channel,
+        id::{ChannelId, MessageId},
         webhook::Webhook,
     },
     Error, Result,
@@ -30,6 +33,7 @@ lazy_static! {
         Regex::new(r#"<<timefrom:(?P<time>\d+):(?P<format>.+)?>>"#).unwrap();
     pub static ref TIMENOW_REGEX: Regex =
         Regex::new(r#"<<timenow:(?P<timezone>(?:\w|/|_)+):(?P<format>.+)?>>"#).unwrap();
+    pub static ref LOG_TO_DATABASE: bool = env::var("LOG_TO_DATABASE").map_or(true, |v| v == "1");
 }
 
 fn fmt_displacement(format: &str, seconds: u64) -> String {
@@ -62,18 +66,23 @@ pub fn substitute(string: &str) -> String {
         let format = caps.name("format").map(|m| m.as_str());
 
         if let (Some(final_time), Some(format)) = (final_time, format) {
-            let dt = NaiveDateTime::from_timestamp(final_time, 0);
-            let now = Utc::now().naive_utc();
+            match NaiveDateTime::from_timestamp_opt(final_time, 0) {
+                Some(dt) => {
+                    let now = Utc::now().naive_utc();
 
-            let difference = {
-                if now < dt {
-                    dt - Utc::now().naive_utc()
-                } else {
-                    Utc::now().naive_utc() - dt
+                    let difference = {
+                        if now < dt {
+                            dt - Utc::now().naive_utc()
+                        } else {
+                            Utc::now().naive_utc() - dt
+                        }
+                    };
+
+                    fmt_displacement(format, difference.num_seconds() as u64)
                 }
-            };
 
-            fmt_displacement(format, difference.num_seconds() as u64)
+                None => String::new(),
+            }
         } else {
             String::new()
         }
@@ -146,7 +155,7 @@ impl Embed {
                 embed.description = substitute(&embed.description);
                 embed.footer = substitute(&embed.footer);
 
-                embed.fields.iter_mut().for_each(|mut field| {
+                embed.fields.iter_mut().for_each(|field| {
                     field.title = substitute(&field.title);
                     field.value = substitute(&field.value);
                 });
@@ -186,43 +195,36 @@ impl Embed {
 
 impl Into<CreateEmbed> for Embed {
     fn into(self) -> CreateEmbed {
-        let mut c = CreateEmbed::default();
+        let mut author = CreateEmbedAuthor::new(&self.author);
+        if let Some(author_icon) = &self.author_url {
+            author = author.icon_url(author_icon);
+        }
 
-        c.title(&self.title)
+        let mut footer = CreateEmbedFooter::new(&self.footer);
+        if let Some(footer_icon) = &self.footer_url {
+            footer = footer.icon_url(footer_icon);
+        }
+
+        let mut embed = CreateEmbed::default()
+            .title(&self.title)
             .description(&self.description)
             .color(self.color)
-            .author(|a| {
-                a.name(&self.author);
-
-                if let Some(author_icon) = &self.author_url {
-                    a.icon_url(author_icon);
-                }
-
-                a
-            })
-            .footer(|f| {
-                f.text(&self.footer);
-
-                if let Some(footer_icon) = &self.footer_url {
-                    f.icon_url(footer_icon);
-                }
-
-                f
-            });
+            .author(author)
+            .footer(footer);
 
         for field in &self.fields.0 {
-            c.field(&field.title, &field.value, field.inline);
+            embed = embed.field(&field.title, &field.value, field.inline);
         }
 
         if let Some(image_url) = &self.image_url {
-            c.image(image_url);
+            embed = embed.image(image_url);
         }
 
         if let Some(thumbnail_url) = &self.thumbnail_url {
-            c.thumbnail(thumbnail_url);
+            embed = embed.thumbnail(thumbnail_url);
         }
 
-        c
+        embed
     }
 }
 
@@ -243,11 +245,12 @@ pub struct Reminder {
     attachment: Option<Vec<u8>>,
     attachment_name: Option<String>,
 
-    utc_time: NaiveDateTime,
+    utc_time: DateTime<Utc>,
     timezone: String,
     restartable: bool,
-    expires: Option<NaiveDateTime>,
+    expires: Option<DateTime<Utc>>,
     interval_seconds: Option<u32>,
+    interval_days: Option<u32>,
     interval_months: Option<u32>,
 
     avatar: Option<String>,
@@ -281,6 +284,7 @@ SELECT
     reminders.`restartable` AS restartable,
     reminders.`expires` AS 'expires',
     reminders.`interval_seconds` AS 'interval_seconds',
+    reminders.`interval_days` AS 'interval_days',
     reminders.`interval_months` AS 'interval_months',
 
     reminders.`avatar` AS avatar,
@@ -292,16 +296,19 @@ INNER JOIN
 ON
     reminders.channel_id = channels.id
 WHERE
+    reminders.`status` = 'pending' AND
     reminders.`id` IN (
         SELECT
             MIN(id)
         FROM
             reminders
         WHERE
-            reminders.`utc_time` <= NOW()
-            AND (
+            reminders.`utc_time` <= NOW() AND
+            `status` = 'pending' AND
+            (
                 reminders.`interval_seconds` IS NOT NULL
                 OR reminders.`interval_months` IS NOT NULL
+                OR reminders.`interval_days` IS NOT NULL
                 OR reminders.enabled
             )
         GROUP BY channel_id
@@ -330,9 +337,7 @@ WHERE
 
     async fn reset_webhook(&self, pool: impl Executor<'_, Database = Database> + Copy) {
         let _ = sqlx::query!(
-            "
-UPDATE channels SET webhook_id = NULL, webhook_token = NULL WHERE channel = ?
-            ",
+            "UPDATE channels SET webhook_id = NULL, webhook_token = NULL WHERE channel = ?",
             self.channel_id
         )
         .execute(pool)
@@ -340,56 +345,71 @@ UPDATE channels SET webhook_id = NULL, webhook_token = NULL WHERE channel = ?
     }
 
     async fn refresh(&self, pool: impl Executor<'_, Database = Database> + Copy) {
-        if self.interval_seconds.is_some() || self.interval_months.is_some() {
-            let now = Utc::now().naive_local();
-            let mut updated_reminder_time = self.utc_time;
-
-            if let Some(interval) = self.interval_months {
-                match sqlx::query!(
-                    // use the second date_add to force return value to datetime
-                    "SELECT DATE_ADD(DATE_ADD(?, INTERVAL ? MONTH), INTERVAL 0 SECOND) AS new_time",
-                    updated_reminder_time,
-                    interval
-                )
-                .fetch_one(pool)
-                .await
-                {
-                    Ok(row) => match row.new_time {
-                        Some(datetime) => {
-                            updated_reminder_time = datetime;
-                        }
-                        None => {
-                            warn!("Could not update interval by months: got NULL");
-
-                            updated_reminder_time += Duration::days(30);
-                        }
-                    },
-
-                    Err(e) => {
-                        warn!("Could not update interval by months: {:?}", e);
-
-                        // naively fallback to adding 30 days
-                        updated_reminder_time += Duration::days(30);
-                    }
-                }
+        if self.interval_seconds.is_some()
+            || self.interval_months.is_some()
+            || self.interval_days.is_some()
+        {
+            // If all intervals are zero then dont care
+            if self.interval_seconds == Some(0)
+                && self.interval_days == Some(0)
+                && self.interval_months == Some(0)
+            {
+                self.set_sent(pool).await;
             }
 
-            if let Some(interval) = self.interval_seconds {
-                while updated_reminder_time < now {
+            let now = Utc::now();
+            let mut updated_reminder_time =
+                self.utc_time.with_timezone(&self.timezone.parse().unwrap_or(Tz::UTC));
+            let mut fail_count = 0;
+
+            while updated_reminder_time < now && fail_count < 4 {
+                if let Some(interval) = self.interval_months {
+                    if interval != 0 {
+                        updated_reminder_time = updated_reminder_time
+                            .checked_add_months(Months::new(interval))
+                            .unwrap_or_else(|| {
+                                warn!(
+                                    "{}: Could not add {} months to a reminder",
+                                    interval, self.id
+                                );
+                                fail_count += 1;
+
+                                updated_reminder_time
+                            });
+                    }
+                }
+
+                if let Some(interval) = self.interval_days {
+                    if interval != 0 {
+                        updated_reminder_time = updated_reminder_time
+                            .checked_add_days(Days::new(interval as u64))
+                            .unwrap_or_else(|| {
+                                warn!("{}: Could not add {} days to a reminder", self.id, interval);
+                                fail_count += 1;
+
+                                updated_reminder_time
+                            })
+                    }
+                }
+
+                if let Some(interval) = self.interval_seconds {
                     updated_reminder_time += Duration::seconds(interval as i64);
                 }
             }
 
-            if self.expires.map_or(false, |expires| {
-                NaiveDateTime::from_timestamp(updated_reminder_time.timestamp(), 0) > expires
-            }) {
-                self.force_delete(pool).await;
+            if fail_count >= 4 {
+                self.log_error(
+                    "Failed to update 4 times and so is being deleted",
+                    None::<&'static str>,
+                )
+                .await;
+                self.set_failed(pool, "Failed to update 4 times and so is being deleted").await;
+            } else if self.expires.map_or(false, |expires| updated_reminder_time > expires) {
+                self.set_sent(pool).await;
             } else {
                 sqlx::query!(
-                    "
-UPDATE reminders SET `utc_time` = ? WHERE `id` = ?
-                    ",
-                    updated_reminder_time,
+                    "UPDATE reminders SET `utc_time` = ? WHERE `id` = ?",
+                    updated_reminder_time.with_timezone(&Utc),
                     self.id
                 )
                 .execute(pool)
@@ -397,15 +417,41 @@ UPDATE reminders SET `utc_time` = ? WHERE `id` = ?
                 .expect(&format!("Could not update time on Reminder {}", self.id));
             }
         } else {
-            self.force_delete(pool).await;
+            self.set_sent(pool).await;
         }
     }
 
-    async fn force_delete(&self, pool: impl Executor<'_, Database = Database> + Copy) {
+    async fn log_error(&self, error: &'static str, debug_info: Option<impl std::fmt::Debug>) {
+        let message = match debug_info {
+            Some(info) => format!(
+                "{}
+{:?}",
+                error, info
+            ),
+
+            None => error.to_string(),
+        };
+
+        error!("[Reminder {}] {}", self.id, message);
+    }
+
+    async fn log_success(&self) {}
+
+    async fn set_sent(&self, pool: impl Executor<'_, Database = Database> + Copy) {
+        sqlx::query!("UPDATE reminders SET `status` = 'sent' WHERE `id` = ?", self.id)
+            .execute(pool)
+            .await
+            .expect(&format!("Could not delete Reminder {}", self.id));
+    }
+
+    async fn set_failed(
+        &self,
+        pool: impl Executor<'_, Database = Database> + Copy,
+        message: &'static str,
+    ) {
         sqlx::query!(
-            "
-DELETE FROM reminders WHERE `id` = ?
-            ",
+            "UPDATE reminders SET `status` = 'failed', `status_message` = ? WHERE `id` = ?",
+            message,
             self.id
         )
         .execute(pool)
@@ -413,8 +459,8 @@ DELETE FROM reminders WHERE `id` = ?
         .expect(&format!("Could not delete Reminder {}", self.id));
     }
 
-    async fn pin_message<M: Into<u64>>(&self, message_id: M, http: impl AsRef<Http>) {
-        let _ = http.as_ref().pin_message(self.channel_id, message_id.into(), None).await;
+    async fn pin_message<M: Into<MessageId>>(&self, message_id: M, http: impl AsRef<Http>) {
+        let _ = http.as_ref().pin_message(self.channel_id.into(), message_id.into(), None).await;
     }
 
     pub async fn send(
@@ -427,28 +473,24 @@ DELETE FROM reminders WHERE `id` = ?
             reminder: &Reminder,
             embed: Option<CreateEmbed>,
         ) -> Result<()> {
-            let channel = ChannelId(reminder.channel_id).to_channel(&cache_http).await;
+            let channel = ChannelId::new(reminder.channel_id).to_channel(&cache_http).await;
+
+            let mut message = CreateMessage::new().content(&reminder.content).tts(reminder.tts);
+
+            if let (Some(attachment), Some(name)) =
+                (&reminder.attachment, &reminder.attachment_name)
+            {
+                message =
+                    message.add_file(CreateAttachment::bytes(attachment as &[u8], name.as_str()));
+            }
+
+            if let Some(embed) = embed {
+                message = message.embed(embed);
+            }
 
             match channel {
                 Ok(Channel::Guild(channel)) => {
-                    match channel
-                        .send_message(&cache_http, |m| {
-                            m.content(&reminder.content).tts(reminder.tts);
-
-                            if let (Some(attachment), Some(name)) =
-                                (&reminder.attachment, &reminder.attachment_name)
-                            {
-                                m.add_file((attachment as &[u8], name.as_str()));
-                            }
-
-                            if let Some(embed) = embed {
-                                m.set_embed(embed);
-                            }
-
-                            m
-                        })
-                        .await
-                    {
+                    match channel.send_message(&cache_http, message).await {
                         Ok(m) => {
                             if reminder.pin {
                                 reminder.pin_message(m.id, cache_http.http()).await;
@@ -460,24 +502,7 @@ DELETE FROM reminders WHERE `id` = ?
                     }
                 }
                 Ok(Channel::Private(channel)) => {
-                    match channel
-                        .send_message(&cache_http.http(), |m| {
-                            m.content(&reminder.content).tts(reminder.tts);
-
-                            if let (Some(attachment), Some(name)) =
-                                (&reminder.attachment, &reminder.attachment_name)
-                            {
-                                m.add_file((attachment as &[u8], name.as_str()));
-                            }
-
-                            if let Some(embed) = embed {
-                                m.set_embed(embed);
-                            }
-
-                            m
-                        })
-                        .await
-                    {
+                    match channel.send_message(&cache_http.http(), message).await {
                         Ok(m) => {
                             if reminder.pin {
                                 reminder.pin_message(m.id, cache_http.http()).await;
@@ -499,33 +524,31 @@ DELETE FROM reminders WHERE `id` = ?
             webhook: Webhook,
             embed: Option<CreateEmbed>,
         ) -> Result<()> {
+            let mut builder = ExecuteWebhook::new().content(&reminder.content).tts(reminder.tts);
+
+            if let Some(username) = &reminder.username {
+                if !username.is_empty() {
+                    builder = builder.username(username);
+                }
+            }
+
+            if let Some(avatar) = &reminder.avatar {
+                builder = builder.avatar_url(avatar);
+            }
+
+            if let (Some(attachment), Some(name)) =
+                (&reminder.attachment, &reminder.attachment_name)
+            {
+                builder =
+                    builder.add_file(CreateAttachment::bytes(attachment as &[u8], name.as_str()));
+            }
+
+            if let Some(embed) = embed {
+                builder = builder.embeds(vec![embed]);
+            }
+
             match webhook
-                .execute(&cache_http.http(), reminder.pin || reminder.restartable, |w| {
-                    w.content(&reminder.content).tts(reminder.tts);
-
-                    if let Some(username) = &reminder.username {
-                        w.username(username);
-                    }
-
-                    if let Some(avatar) = &reminder.avatar {
-                        w.avatar_url(avatar);
-                    }
-
-                    if let (Some(attachment), Some(name)) =
-                        (&reminder.attachment, &reminder.attachment_name)
-                    {
-                        w.add_file((attachment as &[u8], name.as_str()));
-                    }
-
-                    if let Some(embed) = embed {
-                        w.embeds(vec![SerenityEmbed::fake(|c| {
-                            *c = embed;
-                            c
-                        })]);
-                    }
-
-                    w
-                })
+                .execute(&cache_http.http(), reminder.pin || reminder.restartable, builder)
                 .await
             {
                 Ok(m) => {
@@ -548,9 +571,7 @@ DELETE FROM reminders WHERE `id` = ?
                     .map_or(true, |inner| inner >= Utc::now().naive_local()))
         {
             let _ = sqlx::query!(
-                "
-UPDATE `channels` SET paused = 0, paused_until = NULL WHERE `channel` = ?
-                ",
+                "UPDATE `channels` SET paused = 0, paused_until = NULL WHERE `channel` = ?",
                 self.channel_id
             )
             .execute(pool)
@@ -561,13 +582,15 @@ UPDATE `channels` SET paused = 0, paused_until = NULL WHERE `channel` = ?
             let result = if let (Some(webhook_id), Some(webhook_token)) =
                 (self.webhook_id, &self.webhook_token)
             {
-                let webhook_res =
-                    cache_http.http().get_webhook_with_token(webhook_id, webhook_token).await;
+                let webhook_res = cache_http
+                    .http()
+                    .get_webhook_with_token(webhook_id.into(), webhook_token)
+                    .await;
 
                 if let Ok(webhook) = webhook_res {
                     send_to_webhook(cache_http, &self, webhook, embed).await
                 } else {
-                    warn!("Webhook vanished: {:?}", webhook_res);
+                    warn!("Webhook vanished for reminder {}: {:?}", self.id, webhook_res);
 
                     self.reset_webhook(pool).await;
                     send_to_channel(cache_http, &self, embed).await
@@ -577,24 +600,75 @@ UPDATE `channels` SET paused = 0, paused_until = NULL WHERE `channel` = ?
             };
 
             if let Err(e) = result {
-                error!("Error sending reminder {}: {:?}", self.id, e);
-
                 if let Error::Http(error) = e {
-                    if error.status_code() == Some(StatusCode::NOT_FOUND) {
-                        warn!("Seeing channel is deleted. Removing reminder");
-                        self.force_delete(pool).await;
-                    } else if let HttpError::UnsuccessfulRequest(error) = *error {
-                        if error.error.code == 50007 {
-                            warn!("User cannot receive DMs");
-                            self.force_delete(pool).await;
-                        } else {
-                            self.refresh(pool).await;
+                    if let HttpError::UnsuccessfulRequest(http_error) = error {
+                        match http_error.error.code {
+                            10003 => {
+                                self.log_error(
+                                    "Could not be sent as channel does not exist",
+                                    None::<&'static str>,
+                                )
+                                .await;
+                                self.set_failed(
+                                    pool,
+                                    "Could not be sent as channel does not exist",
+                                )
+                                .await;
+                            }
+                            10004 => {
+                                self.log_error(
+                                    "Could not be sent as guild does not exist",
+                                    None::<&'static str>,
+                                )
+                                .await;
+                                self.set_failed(pool, "Could not be sent as guild does not exist")
+                                    .await;
+                            }
+                            50001 => {
+                                self.log_error(
+                                    "Could not be sent as missing access",
+                                    None::<&'static str>,
+                                )
+                                .await;
+                                self.set_failed(pool, "Could not be sent as missing access").await;
+                            }
+                            50007 => {
+                                self.log_error(
+                                    "Could not be sent as user has DMs disabled",
+                                    None::<&'static str>,
+                                )
+                                .await;
+                                self.set_failed(pool, "Could not be sent as user has DMs disabled")
+                                    .await;
+                            }
+                            50013 => {
+                                self.log_error(
+                                    "Could not be sent as permissions are invalid",
+                                    None::<&'static str>,
+                                )
+                                .await;
+                                self.set_failed(
+                                    pool,
+                                    "Could not be sent as permissions are invalid",
+                                )
+                                .await;
+                            }
+                            _ => {
+                                self.log_error("HTTP error sending reminder", Some(http_error))
+                                    .await;
+                                self.refresh(pool).await;
+                            }
                         }
+                    } else {
+                        self.log_error("(Likely) a parsing error", Some(error)).await;
+                        self.refresh(pool).await;
                     }
                 } else {
+                    self.log_error("Non-HTTP error", Some(e)).await;
                     self.refresh(pool).await;
                 }
             } else {
+                self.log_success().await;
                 self.refresh(pool).await;
             }
         } else {

recordable_derive/Cargo.toml

@@ -0,0 +1,11 @@
+[package]
+name = "recordable_derive"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+proc-macro = true
+
+[dependencies]
+quote = "1.0.35"
+syn = { version = "2.0.49", features = ["full"] }

recordable_derive/src/lib.rs

@@ -0,0 +1,42 @@
+use proc_macro::TokenStream;
+use syn::{spanned::Spanned, Data};
+
+/// Macro to allow Recordable to be implemented on an enum by dispatching over each variant.
+#[proc_macro_derive(Recordable)]
+pub fn extract(input: TokenStream) -> TokenStream {
+    let ast = syn::parse_macro_input!(input);
+
+    impl_recordable(&ast)
+}
+
+fn impl_recordable(ast: &syn::DeriveInput) -> TokenStream {
+    let name = &ast.ident;
+
+    match &ast.data {
+        Data::Enum(en) => {
+            let extracted = en.variants.iter().map(|var| {
+                let ident = &var.ident;
+
+                quote::quote_spanned! {var.span()=>
+                    Self::#ident (opt) => opt.run(ctx).await?
+                }
+            });
+
+            TokenStream::from(quote::quote! {
+                impl Recordable for #name {
+                    async fn run(self, ctx: crate::Context<'_>) -> Result<(), crate::Error> {
+                        match self {
+                            #(#extracted,)*
+                        }
+
+                        Ok(())
+                    }
+                }
+            })
+        }
+
+        _ => {
+            panic!("Only enums can derive Recordable");
+        }
+    }
+}

reminder-dashboard/.prettierrc.toml

@@ -0,0 +1,2 @@
+printWidth = 100
+tabWidth = 4

reminder-dashboard/README.md

@@ -0,0 +1,19 @@
+# reminder-dashboard
+
+The re-re-rewrite of the dashboard.
+
+## Why
+
+The existing beta variant of the dashboard is written using vanilla JavaScript. This is fine,
+but annoying to update. This would've been okay if I was more dedicated to updating the vanilla
+JavaScript too, but I want to experiment with "new" things.
+
+This also allows me to expand my frontend skills, which is relevant to part of my job.
+
+## Developing
+
+1. Run both `npm run dev` and `cargo run`
+2. Symlink assets: assuming cloned
+   into `$HOME`, `ln -s $HOME/reminder-bot/reminder-dashboard/dist/index.html $HOME/reminder-bot/web/static/index.html`
+   and
+   `ln -s $HOME/reminder-bot/reminder-dashboard/dist/static/assets $HOME/reminder-bot/web/static/assets`

reminder-dashboard/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="EN">
+<head>
+	<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/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">
+	<link rel="stylesheet" href="/static/css/dtsel.css">
+</head>
+<body>
+	<div id="app"></div>
+	<script type="module" src="/src/index.tsx"></script>
+</body>
+</html>

reminder-dashboard/package.json

@@ -0,0 +1,33 @@
+{
+	"name": "example",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite build --watch --mode development",
+		"build": "vite build",
+		"preview": "vite preview",
+		"package": "mkdir -p reminder-dashboard/usr/share/reminder-dashboard && vite build --mode production --outDir reminder-dashboard/usr/share/reminder-dashboard && dpkg-deb --build reminder-dashboard"
+	},
+	"dependencies": {
+		"axios": "^1.5.1",
+		"bulma": "^0.9.4",
+		"luxon": "^3.4.3",
+		"preact": "^10.13.1",
+		"react-colorful": "^5.6.1",
+		"react-query": "^3.39.3",
+		"tributejs": "^5.1.3",
+		"use-debounce": "^10.0.0",
+		"wouter": "^3.0"
+	},
+	"devDependencies": {
+		"@preact/preset-vite": "^2.5.0",
+		"@types/luxon": "^3.3.2",
+		"eslint": "^8.50.0",
+		"eslint-config-preact": "^1.3.0",
+		"prettier": "^3.0.3",
+		"react-datepicker": "^4.21.0",
+		"sass": "^1.71.1",
+		"typescript": "^5.2.2",
+		"vite": "^5.1"
+	}
+}

reminder-dashboard/public/static/css/dtsel.css

@@ -0,0 +1,91 @@
+.date-selector-wrapper {
+    width: 200px;
+    padding: 3px;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px #5c5c5c;
+    position: absolute;
+    font-size: 12px;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    /* user-select: none; */
+}
+.cal-header, .cal-row {
+    display: flex;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+}
+.cal-cell, .cal-nav {
+    cursor: pointer;
+}
+.cal-day-names {
+    height: 25px;
+    line-height: 25px;
+}
+.cal-day-names .cal-cell {
+    cursor: default;
+    font-weight: bold;
+}
+.cal-cell-prev, .cal-cell-next {
+    color: #777;
+}
+.cal-months .cal-row, .cal-years .cal-row {
+    height: 60px;
+    line-height: 60px;
+}
+.cal-nav-prev, .cal-nav-next {
+    flex: 0.15;
+}
+.cal-nav-current {
+    flex: 0.75;
+    font-weight: bold;
+}
+.cal-months .cal-cell, .cal-years .cal-cell {
+    flex: 0.25;
+}
+.cal-days .cal-cell {
+    flex: 0.143;
+}
+.cal-value {
+    color: #fff;
+    background-color: #286090;
+}
+.cal-cell:hover, .cal-nav:hover {
+    background-color: #eee;
+}
+.cal-value:hover {
+    background-color: #204d74;
+}
+
+/* time footer */
+.cal-time {
+    display: flex;
+    justify-content: flex-start;
+    height: 27px;
+    line-height: 27px;
+}
+.cal-time-label, .cal-time-value {
+    flex: 0.12;
+    text-align: center;
+}
+.cal-time-slider {
+    flex: 0.77;
+    background-image: linear-gradient(to right, #d1d8dd, #d1d8dd);
+    background-repeat: no-repeat;
+    background-size: 100% 1px;
+    background-position: left 50%;
+    height: 100%;
+}
+.cal-time-slider input {
+    width: 100%;
+    -webkit-appearance: none;
+    background: 0 0;
+    cursor: pointer;
+    height: 100%;
+    outline: 0;
+    user-select: auto;
+}

reminder-dashboard/public/static/css/font.css

@@ -0,0 +1,63 @@
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZMkids18E.ttf) format('truetype');
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDc.ttf) format('truetype');
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 600;
+  src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZY4lCds18E.ttf) format('truetype');
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdr.ttf) format('truetype');
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7g.ttf) format('truetype');
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdr.ttf) format('truetype');
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdr.ttf) format('truetype');
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCs6KVjbNBYlgo6eA.ttf) format('truetype');
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCv6KVjbNBYlgoCxCvTtw.ttf) format('truetype');
+  font-display: swap;
+}

reminder-dashboard/public/static/css/style.css

@@ -0,0 +1,888 @@
+* {
+    font-family: "Ubuntu Bold", "Ubuntu", sans-serif;
+}
+
+button {
+    font-weight: 700;
+}
+
+/* override styles for when the div is collapsed */
+div.reminderContent.is-collapsed .column.discord-frame {
+    display: none;
+}
+
+div.reminderContent.is-collapsed .column.settings {
+    display: none;
+}
+
+div.reminderContent.is-collapsed .reminder-settings {
+    margin-bottom: 0;
+}
+
+div.reminderContent.is-collapsed .button-row {
+    display: none;
+}
+
+div.reminderContent.is-collapsed .button-row-edit {
+    display: none;
+}
+
+div.reminderContent.is-collapsed .reminder-topbar {
+    padding-bottom: 0;
+}
+
+div.reminderContent.is-collapsed .invert-collapses {
+    display: inline-flex;
+}
+
+div.reminderContent .invert-collapses {
+    display: none;
+}
+
+div.reminderContent.is-collapsed input[name="name"] {
+    display: inline-flex;
+    flex-grow: 1;
+    border: none;
+    background: none;
+    box-shadow: none;
+    opacity: 1;
+}
+
+div.reminderContent.is-collapsed .hide-box {
+    display: inline-flex;
+}
+
+div.reminderContent.is-collapsed .hide-box i {
+    transform: rotate(90deg);
+}
+/* END */
+
+/* dashboard styles */
+.hide-box {
+    border: none;
+    background: none;
+}
+
+.hide-box:focus {
+    outline: none;
+    box-shadow: none !important;
+}
+
+.channel-bar {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    font-weight: bold;
+}
+
+button.inline-btn {
+    height: 100%;
+    padding: 5px;
+}
+
+button.change-color {
+    position: absolute;
+    left: calc(-1rem - 40px);
+}
+
+button.disable-enable[data-action="enable"]:after {
+    content: "Enable";
+}
+
+button.disable-enable[data-action="disable"]:after {
+    content: "Disable";
+}
+
+.media-content {
+    overflow-x: visible;
+}
+
+div.discord-embed {
+    position: relative;
+}
+
+div.split-controls {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex-grow: 2;
+}
+
+.reminder-topbar > div {
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+.settings {
+    display: flex;
+    flex-direction: column;
+}
+
+.name-bar {
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+.hide-button-bar {
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.patreon-only {
+    padding-bottom: 16px;
+}
+
+.tts-row {
+    padding-bottom: 10px;
+}
+
+.reminder-topbar {
+    display: flex;
+    margin-bottom: 0 !important;
+}
+
+.reminder-settings {
+    margin-top: 0 !important;
+}
+
+.reminder-settings > .column {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 50%;
+}
+
+div.reminderContent {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding: 14px;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+}
+
+/* Interval inputs */
+div.interval-group {
+    height: unset !important;
+}
+
+div.interval-group .clear:focus {
+    outline: none;
+    box-shadow: none !important;
+}
+
+div.interval-group .no-break {
+    text-wrap: avoid;
+    white-space: nowrap;
+}
+
+div.interval-group .clear {
+    border: none;
+    background: none;
+    padding: 1px;
+    margin-right: -3px;
+}
+
+div.interval-group > .interval-group-left input {
+    -webkit-appearance: none;
+    border-style: none;
+    background-color: #eee;
+    font-size: 1rem;
+    font-family: monospace;
+}
+
+div.interval-group > .interval-group-left input.w2 {
+    width: 3ch;
+}
+
+div.interval-group > .interval-group-left input.w3 {
+    width: 3ch;
+}
+
+div.interval-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+/* !Interval inputs */
+
+.left-pad {
+    padding-left: 1rem;
+    padding-right: 0.2rem;
+}
+
+.notification {
+    padding-right: 1.5rem;
+}
+
+div.inset-content {
+    margin-left: 10%;
+    margin-right: 10%;
+}
+
+div.flash-message {
+    position: fixed;
+    width: calc(100% - 32px);
+    margin: 16px !important;
+    z-index: 99;
+    bottom: 0;
+    display: none;
+}
+
+div.flash-message.is-active {
+    display: block;
+}
+
+body {
+    min-height: 100vh;
+}
+
+span.spacer {
+    width: 10px;
+}
+
+nav .dashboard-button {
+    background: white ;
+}
+
+span.patreon-color {
+    color: #f96854;
+}
+
+p.pageTitle {
+    margin-left: 12px;
+}
+
+#welcome > div {
+    height: 100%;
+    padding-top: 30vh;
+}
+
+div#pageNavbar {
+    background-color: #363636;
+}
+
+div#pageNavbar a {
+    color: #fff;
+    text-align: center;
+}
+
+.navbar-burger {
+    flex-shrink: 0;
+}
+
+.navbar-item.pageTitle {
+    flex-shrink: 1;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.dashboard-burger, .dashboard-burger:active, .dashboard-burger.is-active {
+    background-color: #adc99c !important;
+    border-radius: 14px;
+    padding: 6px;
+    background-clip: content-box;
+}
+
+div#pageNavbar a:hover {
+    background-color: #4a4a4a;
+}
+
+img.rounded-corners {
+    border-radius: 12px;
+}
+
+div.brand {
+    text-align: center;
+    height: 52px;
+    background-color: #8fb677;
+}
+
+img.dashboard-brand {
+    text-align: center;
+    height: 100%;
+    width: auto;
+}
+
+div.dashboard-sidebar {
+    background-color: #363636;
+    width: 230px !important;
+    padding-right: 0;
+}
+
+ul.guildList {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: auto;
+}
+
+div.dashboard-sidebar:not(.mobile-sidebar) .aside-footer {
+    flex-shrink: 0;
+    flex-grow: 0;
+    position: fixed;
+    bottom: 0;
+    width: 226px;
+}
+
+div.dashboard-sidebar svg {
+    flex-shrink: 0;
+}
+
+div.mobile-sidebar {
+    z-index: 100;
+    min-height: 100vh;
+    position: absolute;
+    top: 0;
+    display: none;
+    flex-direction: column;
+}
+
+#expandAll {
+    width: 60px;
+}
+
+div.mobile-sidebar .aside-footer {
+    margin-top: auto;
+}
+
+div.mobile-sidebar.is-active {
+    display: flex;
+}
+
+aside.menu {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+div.dashboard-frame {
+    min-height: 100vh;
+    margin-bottom: 0 !important;
+}
+
+.embed-field-box[data-inlined="0"] .inline-btn > i {
+    transform: rotate(90deg);
+}
+
+.embed-field-box[data-inlined="0"] {
+    min-width: 100%;
+}
+
+.embed-field-box[data-inlined="1"] {
+    min-width: auto;
+}
+
+.menu a {
+    color: #fff;
+}
+
+.menu .menu-label {
+    color: #bbb;
+}
+
+.menu {
+    padding-left: 4px;
+}
+
+.dashboard-navbar {
+    background-color: #8fb677 !important;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+textarea.autoresize {
+    resize: none;
+}
+
+textarea, input {
+    width: 100%;
+}
+
+input.default-width {
+    width: initial;
+}
+
+.message-input:placeholder-shown {
+    font-style: italic;
+    background-color: #40444b;
+    color: #fff;
+}
+
+.message-input {
+    border: none;
+    background-color: rgba(0, 0, 0, 0);
+    color: #fff;
+}
+
+.time-input {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom-style: solid;
+    background-color: #40444b;
+    color: #fff;
+    width: 120px;
+    font-size: 0.875rem;
+}
+
+
+.message-input::placeholder {
+    color: #72767b;
+}
+
+.discord-title {
+    font-weight: bold;
+    font-size: 1rem;
+    margin: 4px 0 4px 0;
+}
+
+.discord-description {
+    font-size: 0.875rem;
+}
+
+.discord-username {
+    font-size: 1rem;
+    font-weight: bold;
+    margin-bottom: 4px;
+    width: initial;
+}
+
+.discord-message-header {
+    white-space: nowrap;
+    margin-bottom: 8px;
+}
+
+.discord-content {
+    margin-bottom: 8px;
+}
+
+.customizable img {
+    background-color: #72767b;
+    border-radius: 8px;
+}
+
+.customizable.is-20x20 img {
+    width: 20px;
+    height: 20px;
+}
+
+.customizable.is-24x24 img {
+    width: 24px;
+    height: 24px;
+}
+
+.customizable.is-400x300 img {
+    margin-top: 10px;
+    width: 100%;
+    height: 100px;
+}
+
+.customizable.is-32x32 img {
+    width: 32px;
+    height: 32px;
+}
+
+.customizable.thumbnail img {
+    width: 100px;
+    height: 100px;
+}
+
+.customizable input.imageInput {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 36px;
+    width: 400px;
+}
+
+.customizable.thumbnail input.imageInput {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: -400px;
+    width: 400px;
+}
+
+.customizable input.is-active {
+    display: block !important;
+}
+
+.discord-frame {
+    color: #fff;
+    padding: 10px;
+    border-radius: 8px;
+    background-color: #36393f;
+}
+
+.discord-embed {
+    padding: 8px 16px 16px 12px;
+    margin: 0 20px 4px 0;
+    border-radius: 4px;
+    border-left: 4px solid #fff;
+    background-color: #2f3136;
+}
+
+.embed-author-box {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.embed-author-box > .a {
+    flex: initial;
+}
+
+.embed-author-box > .b {
+    flex: auto;
+}
+
+.embed-footer-box {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.embed-author-box .image {
+    margin: 0 8px 0 0 !important;
+}
+
+.embed-footer-box .image {
+    margin: 0 8px 0 0 !important;
+}
+
+.discord-embed-author {
+    display: inline-block;
+    font-size: 0.875rem;
+    font-weight: bold;
+}
+
+.discord-embed-footer {
+    font-size: 0.75rem;
+}
+
+.embed-body {
+    display: flex;
+}
+
+.embed-body > .a {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    margin-right: 4px;
+}
+
+.embed-body input, .embed-body textarea {
+    min-width: 0;
+}
+
+.embed-body > .b {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: auto;
+}
+
+.discord-field-title, .discord-field-value {
+    max-width: 120px;
+}
+
+.discord-field-title {
+    font-weight: bold;
+}
+
+.embed-field-box {
+    margin: 12px 8px 0 0;
+    max-width: 120px;
+    flex: initial;
+}
+
+.field-input {
+    font-size: 0.875rem;
+    width: 120px;
+}
+
+.embed-multifield-box {
+    display: flex;
+    max-width: 100%;
+    flex-wrap: wrap;
+}
+
+.channel-select {
+    font-size: 1.125rem;
+    margin-bottom: 4px;
+    margin-left: 48px;
+    display: inline-flex;
+    font-weight: bold;
+    color: #6e89da;
+    width: auto;
+    border-radius: 2px;
+    border-bottom: 1px solid #fff;
+}
+
+.channel-selector {
+    width: 100%;
+}
+
+.select {
+    width: 100%;
+}
+
+li.highlight {
+    margin-bottom: 0 !important;
+}
+
+.button-row {
+    display: flex;
+}
+
+.button-row .button-row-reminder {
+    flex-grow: 0;
+    padding: 2px;
+}
+
+.button-row-template {
+    display: flex;
+    flex-grow: 1;
+    justify-content: space-between;
+}
+
+.button-row .button-row-template > div {
+    padding: 2px;
+}
+
+@media only screen and (max-width: 1023px) {
+    p.title.pageTitle {
+        display: none;
+    }
+
+    .dashboard-frame {
+        margin-top: 4rem !important;
+    }
+
+    .customizable.thumbnail img {
+        width: 60px;
+        height: 60px;
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .button-row {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .button-row .button-row-reminder {
+        width: 100%;
+    }
+
+    .button-row .button-row-template > div {
+        flex-basis: 0;
+        flex-grow: 1;
+    }
+
+    .button-row button {
+        width: 100%;
+    }
+
+    .reminder-settings {
+        margin-bottom: 0 !important;
+    }
+
+    .tts-row {
+        padding-bottom: 0;
+    }
+}
+
+/* loader */
+#loader {
+    position: fixed;
+    top: 0;
+    background-color: rgba(255, 255, 255, 0.8);
+    width: 100vw;
+    z-index: 999;
+}
+
+#loader .title {
+    font-size: 6rem;
+}
+
+/* END */
+
+div.reminderError {
+    margin: 10px;
+    padding: 14px;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+}
+
+div.reminderError .errorHead {
+    display: flex;
+    flex-direction: row;
+}
+
+div.reminderError .errorIcon {
+    padding: 8px;
+    border-radius: 4px;
+    margin-right: 12px;
+}
+
+div.reminderError .errorIcon .fas {
+    display: none
+}
+
+div.reminderError[data-case="deleted"] .errorIcon {
+    background-color: #e7e5e4;
+}
+
+div.reminderError[data-case="failed"] .errorIcon {
+    background-color: #fecaca;
+}
+
+div.reminderError[data-case="sent"] .errorIcon {
+    background-color: #d9f99d;
+}
+
+div.reminderError[data-case="deleted"] .errorIcon .fas.fa-trash {
+    display: block;
+}
+
+div.reminderError[data-case="failed"] .errorIcon .fas.fa-exclamation-triangle {
+    display: block;
+}
+
+div.reminderError[data-case="sent"] .errorIcon .fas.fa-check {
+    display: block;
+}
+
+div.reminderError .errorHead .reminderName {
+    font-size: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: rgb(54, 54, 54);
+    flex-grow: 1;
+}
+
+div.reminderError .errorHead .reminderTime {
+    font-size: 1rem;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 1;
+    justify-content: center;
+    color: rgb(54, 54, 54);
+    background-color: #ffffff;
+    padding: 8px;
+    border-radius: 4px;
+    border-color: #e5e5e5;
+    border-width: 1px;
+    border-style: solid;
+}
+
+div.reminderError .reminderMessage {
+    font-size: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: rgb(54, 54, 54);
+    flex-grow: 1;
+    font-style: italic;
+}
+
+/* other stuff */
+
+.half-rem {
+    width: 0.5rem;
+}
+
+.pad-left {
+    width: 12px;
+}
+
+#dead {
+    display: none;
+}
+
+.colorpicker-container {
+    display: flex;
+    justify-content: center;
+}
+
+.create-reminder {
+    margin: 0 12px 12px 12px;
+}
+
+.button.is-success:not(.is-outlined) {
+    color: white;
+}
+
+.button.is-outlined.is-success {
+    background-color: white;
+}
+
+a.switch-pane {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.guild-submenu {
+    display: none;
+}
+
+.guild-submenu li {
+    font-size: 0.8rem;
+}
+
+a.switch-pane.is-active ~ .guild-submenu {
+    display: block;
+}
+
+.feedback {
+    background-color: #5865F2;
+}
+
+.is-locked {
+    pointer-events: none;
+}
+
+.is-locked > :not(.patreon-invert) {
+    opacity: 0.4;
+}
+
+.is-locked .patreon-invert {
+    display: block;
+}
+
+.patreon-invert {
+    display: none;
+}
+
+.is-locked .foreground {
+    pointer-events: auto;
+}
+
+.is-locked .field:last-of-type {
+    display: none;
+}
+
+.stat-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.stat-box {
+    flex-grow: 1;
+    border-radius: 6px;
+    background-color: #fcfcfc;
+    border-color: #efefef;
+    border-style: solid;
+    border-width: 1px;
+    margin: 4px;
+    padding: 4px;
+}
+
+.figure {
+    text-align: center;
+}
+
+.figure-num {
+    font-size: 2rem;
+}

reminder-dashboard/public/static/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

reminder-dashboard/public/static/js/admin.js

@@ -0,0 +1,131 @@
+document.addEventListener("DOMContentLoaded", () => {
+    fetch("/admin/data")
+        .then((resp) => resp.json())
+        .then((data) => {
+            document.querySelector("#backlog").textContent = data.backlog;
+            document.querySelector("#reminders").textContent = data.count.reminders;
+            document.querySelector("#intervals").textContent = data.count.intervals;
+
+            let historySent = data.historyLong.sent.reduce(
+                (iv, frame) => iv + frame.count,
+                0
+            );
+            let historyFailed = data.historyLong.failed.reduce(
+                (iv, frame) => iv + frame.count,
+                0
+            );
+            let rate = historyFailed / (historySent + historyFailed);
+            let formatted = Math.round(rate * 10000) / 100;
+
+            document.querySelector("#historySent").textContent = historySent;
+            document.querySelector("#historyFailed").textContent = historyFailed;
+            document.querySelector("#failRate").textContent = `${formatted}%`;
+
+            new Chart(document.getElementById("schedule"), {
+                type: "bar",
+                data: {
+                    labels: [
+                        ...data.scheduleShort.once,
+                        ...data.scheduleShort.interval,
+                    ].map((row) => luxon.DateTime.fromISO(row.time_key)),
+                    datasets: [
+                        {
+                            label: "Reminders",
+                            data: data.scheduleShort.once.map((row) => row.count),
+                        },
+                        {
+                            label: "Intervals",
+                            data: data.scheduleShort.interval.map((row) => row.count),
+                        },
+                    ],
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            stacked: true,
+                            type: "time",
+                            time: {
+                                unit: "minute",
+                            },
+                        },
+                        y: {
+                            stacked: true,
+                        },
+                    },
+                },
+            });
+
+            new Chart(document.getElementById("scheduleLong"), {
+                type: "bar",
+                data: {
+                    labels: [
+                        ...data.scheduleLong.once,
+                        ...data.scheduleLong.interval,
+                    ].map((row) => luxon.DateTime.fromISO(row.time_key)),
+                    datasets: [
+                        {
+                            label: "Reminders",
+                            data: data.scheduleLong.once.map((row) => row.count),
+                        },
+                        {
+                            label: "Intervals",
+                            data: data.scheduleLong.interval.map((row) => row.count),
+                        },
+                    ],
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            stacked: true,
+                            type: "time",
+                            time: {
+                                unit: "day",
+                            },
+                        },
+                        y: {
+                            stacked: true,
+                        },
+                    },
+                },
+            });
+
+            new Chart(document.getElementById("historyLong"), {
+                type: "bar",
+                data: {
+                    labels: [...data.historyLong.sent, ...data.historyLong.failed].map(
+                        (row) => luxon.DateTime.fromISO(row.time_key)
+                    ),
+                    datasets: [
+                        {
+                            label: "Success",
+                            data: data.historyLong.sent.map((row) => row.count),
+                        },
+                        {
+                            label: "Fail",
+                            data: data.historyLong.failed.map((row) => row.count),
+                        },
+                    ],
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            stacked: true,
+                            type: "time",
+                            time: {
+                                unit: "day",
+                            },
+                        },
+                        y: {
+                            stacked: true,
+                        },
+                    },
+                },
+            });
+        });
+});

reminder-dashboard/public/static/js/chartjs-adapter-luxon.js

@@ -0,0 +1,7 @@
+/*!
+ * chartjs-adapter-luxon v1.3.1
+ * https://www.chartjs.org
+ * (c) 2023 chartjs-adapter-luxon Contributors
+ * Released under the MIT license
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("chart.js"),require("luxon")):"function"==typeof define&&define.amd?define(["chart.js","luxon"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Chart,e.luxon)}(this,(function(e,t){"use strict";const n={datetime:t.DateTime.DATETIME_MED_WITH_SECONDS,millisecond:"h:mm:ss.SSS a",second:t.DateTime.TIME_WITH_SECONDS,minute:t.DateTime.TIME_SIMPLE,hour:{hour:"numeric"},day:{day:"numeric",month:"short"},week:"DD",month:{month:"short",year:"numeric"},quarter:"'Q'q - yyyy",year:{year:"numeric"}};e._adapters._date.override({_id:"luxon",_create:function(e){return t.DateTime.fromMillis(e,this.options)},init(e){this.options.locale||(this.options.locale=e.locale)},formats:function(){return n},parse:function(e,n){const i=this.options,r=typeof e;return null===e||"undefined"===r?null:("number"===r?e=this._create(e):"string"===r?e="string"==typeof n?t.DateTime.fromFormat(e,n,i):t.DateTime.fromISO(e,i):e instanceof Date?e=t.DateTime.fromJSDate(e,i):"object"!==r||e instanceof t.DateTime||(e=t.DateTime.fromObject(e,i)),e.isValid?e.valueOf():null)},format:function(e,t){const n=this._create(e);return"string"==typeof t?n.toFormat(t):n.toLocaleString(t)},add:function(e,t,n){const i={};return i[n]=t,this._create(e).plus(i).valueOf()},diff:function(e,t,n){return this._create(e).diff(this._create(t)).as(n).valueOf()},startOf:function(e,t,n){if("isoWeek"===t){n=Math.trunc(Math.min(Math.max(0,n),6));const t=this._create(e);return t.minus({days:(t.weekday-n+7)%7}).startOf("day").valueOf()}return t?this._create(e).startOf(t).valueOf():e},endOf:function(e,t){return this._create(e).endOf(t).valueOf()}})}));

reminder-dashboard/public/static/js/dtsel.js

@@ -0,0 +1,931 @@
+(function () {
+    "use strict";
+
+    var BODYTYPES = ["DAYS", "MONTHS", "YEARS"];
+    var MONTHS = [
+        "January", "February", "March", "April", "May", "June",
+        "July", "August", "September", "October", "November", "December"
+    ];
+    var WEEKDAYS = [
+        "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
+    ];
+
+    /** @typedef {Object.<string, Function[]>} Handlers */
+    /** @typedef {function(String, Function): null} AddHandler */
+    /** @typedef {("DAYS"|"MONTHS"|"YEARS")} BodyType */
+    /** @typedef {string|number} StringNum */
+    /** @typedef {Object.<string, StringNum>} StringNumObj */
+
+    /**
+     * The local state
+     * @typedef {Object} InstanceState
+     * @property {Date} value
+     * @property {Number} year
+     * @property {Number} month
+     * @property {Number} day
+     * @property {Number} time
+     * @property {Number} hours
+     * @property {Number} minutes
+     * @property {Number} seconds
+     * @property {BodyType} bodyType
+     * @property {Boolean} visible
+     * @property {Number} cancelBlur
+     */
+
+    /** 
+     * @typedef {Object} Config
+     * @property {String} dateFormat
+     * @property {String} timeFormat
+     * @property {Boolean} showDate
+     * @property {Boolean} showTime
+     * @property {Number} paddingX
+     * @property {Number} paddingY
+     * @property {BodyType} defaultView
+     * @property {"TOP"|"BOTTOM"} direction
+    */
+
+    /**
+     * @class
+     * @param {HTMLElement} elem 
+     * @param {Config} config 
+     */
+    function DTS(elem, config) {
+        var config = config || {};
+
+        /** @type {Config} */
+        var defaultConfig = {
+            defaultView: BODYTYPES[0],
+            dateFormat: "yyyy-mm-dd",
+            timeFormat: "HH:MM:SS",
+            showDate: true,
+            showTime: false,
+            paddingX: 5,
+            paddingY: 5,
+            direction: 'TOP'
+        }
+
+        if (!elem) {
+            throw TypeError("input element or selector required for contructor");
+        }
+        if (Object.getPrototypeOf(elem) === String.prototype) {
+            var _elem = document.querySelectorAll(elem);
+            if (!_elem[0]){
+                throw Error('"' + elem + '" not found.');
+            }
+            elem = _elem[0];
+        }
+        this.config = setDefaults(config, defaultConfig);
+        this.dateFormat = this.config.dateFormat;
+        this.timeFormat = this.config.timeFormat;
+        this.dateFormatRegEx = new RegExp("yyyy|yy|mm|dd", "gi");
+        this.timeFormatRegEx = new RegExp("hh|mm|ss|a", "gi");
+        this.inputElem = elem;
+        this.dtbox = null;
+        this.setup();
+    }
+    DTS.prototype.setup = function () {
+        var handler = this.inputElemHandler.bind(this);
+        this.inputElem.addEventListener("focus", handler, false)
+        this.inputElem.addEventListener("blur", handler, false);
+    }
+    DTS.prototype.inputElemHandler = function (e) {
+        if (e.type == "focus") {
+            if (!this.dtbox) {
+                this.dtbox = new DTBox(e.target, this);
+            }
+            this.dtbox.visible = true;
+        } else if (e.type == "blur" && this.dtbox && this.dtbox.visible) {
+            var self = this;
+            setTimeout(function () {
+                if (self.dtbox.cancelBlur > 0) {
+                    self.dtbox.cancelBlur -= 1;
+                 } else {
+                    self.dtbox.visible = false;
+                    self.inputElem.blur();
+                 }
+            }, 100);
+        }
+    }
+    /**
+     * @class
+     * @param {HTMLElement} elem 
+     * @param {DTS} settings 
+     */
+    function DTBox(elem, settings) {
+        /** @type {DTBox} */
+        var self = this;
+
+        /** @type {Handlers} */
+        var handlers = {};
+
+        /** @type {InstanceState} */
+        var localState = {};
+
+        /**
+         * @param {String} key 
+         * @param {*} default_val 
+         */
+        function getterSetter(key, default_val) {
+            return {
+                get: function () {
+                    var val = localState[key];
+                    return val === undefined ? default_val : val;
+                },
+                set: function (val) {
+                    var prevState = self.state;
+                    var _handlers = handlers[key] || [];
+                    localState[key] = val;
+                    for (var i = 0; i < _handlers.length; i++) {
+                        _handlers[i].bind(self)(localState, prevState);
+                    }
+                },
+            };
+        };
+
+        /** @type {AddHandler} */
+        function addHandler(key, handlerFn) {
+            if (!key || !handlerFn) {
+                return false;
+            }
+            if (!handlers[key]) {
+                handlers[key] = [];
+            }
+            handlers[key].push(handlerFn);
+        }
+
+        Object.defineProperties(this, {
+            visible: getterSetter("visible", false),
+            bodyType: getterSetter("bodyType", settings.config.defaultView),
+            value: getterSetter("value"),
+            year: getterSetter("year", 0),
+            month: getterSetter("month", 0),
+            day: getterSetter("day", 0),
+            hours: getterSetter("hours", 0),
+            minutes: getterSetter("minutes", 0),
+            seconds: getterSetter("seconds", 0),
+            cancelBlur: getterSetter("cancelBlur", 0),
+            addHandler: {value: addHandler},
+            month_long: {
+                get: function () {
+                    return MONTHS[self.month];
+                },
+            },
+            month_short: {
+                get: function () {
+                    return self.month_long.slice(0, 3);
+                },
+            },
+            state: {
+                get: function () {
+                    return Object.assign({}, localState);
+                },
+            },
+            time: {
+                get: function() {
+                    var hours = self.hours * 60 * 60 * 1000;
+                    var minutes = self.minutes * 60 * 1000;
+                    var seconds = self.seconds * 1000;
+                    return  hours + minutes + seconds;
+                }
+            },
+        });
+        this.el = {};
+        this.settings = settings;
+        this.elem = elem;
+        this.setup();
+    }
+    DTBox.prototype.setup = function () {
+        Object.defineProperties(this.el, {
+            wrapper: { value: null, configurable: true },
+            header: { value: null, configurable: true },
+            body: { value: null, configurable: true },
+            footer: { value: null, configurable: true }
+        });
+        this.setupWrapper();
+        if (this.settings.config.showDate) {
+            this.setupHeader();
+            this.setupBody();
+        }
+        if (this.settings.config.showTime) {
+            this.setupFooter();
+        }
+
+        var self = this;
+        this.addHandler("visible", function (state, prevState) {
+            if (state.visible && !prevState.visible){
+                document.body.appendChild(this.el.wrapper);
+
+                var parts = self.elem.value.split(/\s*,\s*/);
+                var startDate = undefined;
+                var startTime = 0;
+                if (self.settings.config.showDate) {
+                    startDate = parseDate(parts[0], self.settings);
+                }
+                if (self.settings.config.showTime) {
+                    startTime = parseTime(parts[parts.length-1], self.settings);
+                    startTime = startTime || 0;
+                }
+                if (!(startDate && startDate.getTime())) {
+                    startDate = new Date();
+                    startDate = new Date(
+                        startDate.getFullYear(),
+                        startDate.getMonth(),
+                        startDate.getDate()
+                    );
+                }
+                var value = new Date(startDate.getTime() + startTime);
+                self.value = value;
+                self.year = value.getFullYear();
+                self.month = value.getMonth();
+                self.day = value.getDate();
+                self.hours = value.getHours();
+                self.minutes = value.getMinutes();
+                self.seconds = value.getSeconds();
+
+                if (self.settings.config.showDate) {
+                    self.setHeaderContent();
+                    self.setBodyContent();
+                }
+                if (self.settings.config.showTime) {
+                    self.setFooterContent();
+                }
+            } else if (!state.visible && prevState.visible) {
+                document.body.removeChild(this.el.wrapper);
+            }
+        });
+    }
+    DTBox.prototype.setupWrapper = function () {
+        if (!this.el.wrapper) {
+            var el = document.createElement("div");
+            el.classList.add("date-selector-wrapper");
+            Object.defineProperty(this.el, "wrapper", { value: el });
+        }
+        var self = this;
+        var htmlRoot = document.getElementsByTagName('html')[0];
+        function setPosition(e){
+            var minTopSpace = 300;
+            var box = getOffset(self.elem);
+            var config = self.settings.config;
+            var paddingY = config.paddingY || 5;
+            var paddingX = config.paddingX || 5;
+            var top = box.top + self.elem.offsetHeight + paddingY;
+            var left = box.left + paddingX;
+            var bottom = htmlRoot.clientHeight - box.top + paddingY;
+
+            self.el.wrapper.style.left = `${left}px`;
+            if (box.top > minTopSpace && config.direction != 'BOTTOM') {
+                self.el.wrapper.style.bottom = `${bottom}px`;
+                self.el.wrapper.style.top = '';
+            } else {
+                self.el.wrapper.style.top = `${top}px`;
+                self.el.wrapper.style.bottom = ''; 
+            }
+        }
+
+        function handler(e) {
+            self.cancelBlur += 1;
+            setTimeout(function(){
+                self.elem.focus();
+            }, 50);
+        }
+        setPosition();
+        this.setPosition = setPosition;
+        this.el.wrapper.addEventListener("mousedown", handler, false);
+        this.el.wrapper.addEventListener("touchstart", handler, false);
+        window.addEventListener('resize', this.setPosition);
+    }
+    DTBox.prototype.setupHeader = function () {
+        if (!this.el.header) {
+            var row = document.createElement("div");
+            var classes = ["cal-nav-prev", "cal-nav-current", "cal-nav-next"];
+            row.classList.add("cal-header");
+            for (var i = 0; i < 3; i++) {
+                var cell = document.createElement("div");
+                cell.classList.add("cal-nav", classes[i]);
+                cell.onclick = this.onHeaderChange.bind(this);
+                row.appendChild(cell);
+            }
+            row.children[0].innerHTML = "&lt;";
+            row.children[2].innerHTML = "&gt;";
+            Object.defineProperty(this.el, "header", { value: row });
+            tryAppendChild(row, this.el.wrapper);
+        }
+        this.setHeaderContent();
+    }
+    DTBox.prototype.setHeaderContent = function () {
+        var content = this.year;
+        if ("DAYS" == this.bodyType) {
+            content = this.month_long + " " + content;
+        } else if ("YEARS" == this.bodyType) {
+            var start = this.year + 10 - (this.year % 10);
+            content = start - 10 + "-" + (start - 1);
+        }
+        this.el.header.children[1].innerText = content;
+    }
+    DTBox.prototype.setupBody = function () {
+        if (!this.el.body) {
+            var el = document.createElement("div");
+            el.classList.add("cal-body");
+            Object.defineProperty(this.el, "body", { value: el });
+            tryAppendChild(el, this.el.wrapper);
+        }
+        var toAppend = null;
+        function makeGrid(rows, cols, className, firstRowClass, clickHandler) {
+            var grid = document.createElement("div");
+            grid.classList.add(className);
+            for (var i = 1; i < rows + 1; i++) {
+                var row = document.createElement("div");
+                row.classList.add("cal-row", "cal-row-" + i);
+                if (i == 1 && firstRowClass) {
+                    row.classList.add(firstRowClass);
+                }
+                for (var j = 1; j < cols + 1; j++) {
+                    var col = document.createElement("div");
+                    col.classList.add("cal-cell", "cal-col-" + j);
+                    col.onclick = clickHandler;
+                    row.appendChild(col);
+                }
+                grid.appendChild(row);
+            }
+            return grid;
+        }
+        if ("DAYS" == this.bodyType) {
+            toAppend = this.el.body.calDays;
+            if (!toAppend) {
+                toAppend = makeGrid(7, 7, "cal-days", "cal-day-names", this.onDateSelected.bind(this));
+                for (var i = 0; i < 7; i++) {
+                    var cell = toAppend.children[0].children[i];
+                    cell.innerText = WEEKDAYS[i].slice(0, 2);
+                    cell.onclick = null;
+                }
+                this.el.body.calDays = toAppend;
+            }
+        } else if ("MONTHS" == this.bodyType) {
+            toAppend = this.el.body.calMonths;
+            if (!toAppend) {
+                toAppend = makeGrid(3, 4, "cal-months", null, this.onMonthSelected.bind(this));
+                for (var i = 0; i < 3; i++) {
+                    for (var j = 0; j < 4; j++) {
+                        var monthShort = MONTHS[4 * i + j].slice(0, 3);
+                        toAppend.children[i].children[j].innerText = monthShort;
+                    }
+                }
+                this.el.body.calMonths = toAppend;
+            }
+        } else if ("YEARS" == this.bodyType) {
+            toAppend = this.el.body.calYears;
+            if (!toAppend) {
+                toAppend = makeGrid(3, 4, "cal-years", null, this.onYearSelected.bind(this));
+                this.el.body.calYears = toAppend;
+            }
+        }
+        empty(this.el.body);
+        tryAppendChild(toAppend, this.el.body);
+        this.setBodyContent();
+    }
+    DTBox.prototype.setBodyContent = function () {
+        var grid = this.el.body.children[0];
+        var classes = ["cal-cell-prev", "cal-cell-next", "cal-value"];
+        if ("DAYS" == this.bodyType) {
+            var oneDayMilliSecs = 24 * 60 * 60 * 1000;
+            var start = new Date(this.year, this.month, 1);
+            var adjusted = new Date(start.getTime() - oneDayMilliSecs * start.getDay());
+
+            grid.children[6].style.display = "";
+            for (var i = 1; i < 7; i++) {
+                for (var j = 0; j < 7; j++) {
+                    var cell = grid.children[i].children[j];
+                    var month = adjusted.getMonth();
+                    var date = adjusted.getDate();
+                    
+                    cell.innerText = date;
+                    cell.classList.remove(classes[0], classes[1], classes[2]);
+                    if (month != this.month) {
+                        if (i == 6 && j == 0) {
+                            grid.children[6].style.display = "none";
+                            break;
+                        }
+                        cell.classList.add(month < this.month ? classes[0] : classes[1]);
+                    } else if (isEqualDate(adjusted, this.value)){
+                        cell.classList.add(classes[2]);
+                    }
+                    adjusted = new Date(adjusted.getTime() + oneDayMilliSecs);
+                }
+            }
+        } else if ("YEARS" == this.bodyType) {
+            var year = this.year - (this.year % 10) - 1;
+            for (i = 0; i < 3; i++) {
+                for (j = 0; j < 4; j++) {
+                    grid.children[i].children[j].innerText = year;
+                    year += 1;
+                }
+            }
+            grid.children[0].children[0].classList.add(classes[0]);
+            grid.children[2].children[3].classList.add(classes[1]);
+        }
+    }
+
+    /** @param {Event} e */
+    DTBox.prototype.onTimeChange = function(e) {
+        e.stopPropagation();
+        if (e.type == 'mousedown') {
+            this.cancelBlur += 1;
+            return;
+        }
+        
+        var el = e.target;
+        this[el.name] = parseInt(el.value) || 0;
+        this.setupFooter();
+        if (e.type == 'change') {
+            var self = this;
+            setTimeout(function(){
+                self.elem.focus();
+            }, 50);
+        }
+        this.setInputValue();
+    }
+
+    DTBox.prototype.setupFooter = function() {
+        if (!this.el.footer) {
+            var footer = document.createElement("div");
+            var handler = this.onTimeChange.bind(this);
+            var self = this;
+            
+            function makeRow(label, name, range, changeHandler) {
+                var row = document.createElement("div");
+                row.classList.add('cal-time');
+
+                var labelCol = row.appendChild(document.createElement("div"));
+                labelCol.classList.add('cal-time-label');
+                labelCol.innerText = label;
+
+                var valueCol = row.appendChild(document.createElement("div"));
+                valueCol.classList.add('cal-time-value');
+                valueCol.innerText = '00';
+
+                var inputCol = row.appendChild(document.createElement("div"));
+                var slider = inputCol.appendChild(document.createElement("input"));
+                Object.assign(slider, {step:1, min:0, max:range, name:name, type:'range'});
+                Object.defineProperty(footer, name, {value: slider});
+                inputCol.classList.add('cal-time-slider');
+                slider.onchange = changeHandler;
+                slider.oninput = changeHandler;
+                slider.onmousedown = changeHandler;
+                self[name] = self[name] || parseInt(slider.value) || 0;
+                footer.appendChild(row)
+            }
+            makeRow('HH:', 'hours', 23, handler);
+            makeRow('MM:', 'minutes', 59, handler);
+            makeRow('SS:', 'seconds', 59, handler);
+
+            footer.classList.add("cal-footer");
+            Object.defineProperty(this.el, "footer", { value: footer });
+            tryAppendChild(footer, this.el.wrapper);
+        }
+        this.setFooterContent();
+    }
+
+    DTBox.prototype.setFooterContent = function() {
+        if (this.el.footer) {
+            var footer = this.el.footer;
+            footer.hours.value = this.hours;
+            footer.children[0].children[1].innerText = padded(this.hours, 2);
+            footer.minutes.value = this.minutes;
+            footer.children[1].children[1].innerText = padded(this.minutes, 2);
+            footer.seconds.value = this.seconds;
+            footer.children[2].children[1].innerText = padded(this.seconds, 2);
+        }
+    }
+
+    DTBox.prototype.setInputValue = function() {
+        var date = new Date(this.year, this.month, this.day);
+        var strings = [];
+        if (this.settings.config.showDate) {
+            strings.push(renderDate(date, this.settings));
+        }
+        if (this.settings.config.showTime) {
+            var joined = new Date(date.getTime() + this.time);
+            strings.push(renderTime(joined, this.settings));
+        }
+        this.elem.value = strings.join(', ');
+    }
+
+    DTBox.prototype.onDateSelected = function (e) {
+        var row = e.target.parentNode;
+        var date = parseInt(e.target.innerText);
+        if (!(row.nextSibling && row.nextSibling.nextSibling) && date < 8) {
+            this.month += 1;
+        } else if (!(row.previousSibling && row.previousSibling.previousSibling) && date > 7) {
+            this.month -= 1;
+        }
+        this.day = parseInt(e.target.innerText);
+        this.value = new Date(this.year, this.month, this.day);
+        this.setInputValue();
+        this.setHeaderContent();
+        this.setBodyContent();
+    }
+
+    /** @param {Event} e */
+    DTBox.prototype.onMonthSelected = function (e) {
+        var col = 0;
+        var row = 2;
+        var cell = e.target;
+        if (cell.parentNode.nextSibling){
+            row = cell.parentNode.previousSibling ? 1: 0;
+        }
+        if (cell.previousSibling) {
+            col = 3;
+            if (cell.nextSibling) {
+                col = cell.previousSibling.previousSibling ? 2 : 1;
+            }
+        }
+        this.month = 4 * row + col;
+        this.bodyType = "DAYS";
+        this.setHeaderContent();
+        this.setupBody();
+    }
+
+    /** @param {Event} e */
+    DTBox.prototype.onYearSelected = function (e) {
+        this.year = parseInt(e.target.innerText);
+        this.bodyType = "MONTHS";
+        this.setHeaderContent();
+        this.setupBody();
+    }
+
+    /** @param {Event} e */
+    DTBox.prototype.onHeaderChange = function (e) {
+        var cell = e.target;
+        if (cell.previousSibling && cell.nextSibling) {
+            var idx = BODYTYPES.indexOf(this.bodyType);
+            if (idx < 0 || !BODYTYPES[idx + 1]) {
+                return;
+            }
+            this.bodyType = BODYTYPES[idx + 1];
+            this.setupBody();
+        } else {
+            var sign = cell.previousSibling ? 1 : -1;
+            switch (this.bodyType) {
+                case "DAYS":
+                    this.month += sign * 1;
+                    break;
+                case "MONTHS":
+                    this.year += sign * 1;
+                    break;
+                case "YEARS":
+                    this.year += sign * 10;
+            }
+            if (this.month > 11 || this.month < 0) {
+                this.year += Math.floor(this.month / 11);
+                this.month = this.month > 11 ? 0 : 11;
+            }
+        }
+        this.setHeaderContent();
+        this.setBodyContent();
+    }
+
+
+    /**
+     * @param {HTMLElement} elem 
+     * @returns {{left:number, top:number}}
+     */
+    function getOffset(elem) {
+        var box = elem.getBoundingClientRect();
+        var left = window.pageXOffset !== undefined ? window.pageXOffset : 
+            (document.documentElement || document.body.parentNode || document.body).scrollLeft;
+        var top = window.pageYOffset !== undefined ? window.pageYOffset : 
+            (document.documentElement || document.body.parentNode || document.body).scrollTop;
+        return { left: box.left + left, top: box.top + top };
+    }
+    function empty(e) {
+        for (; e.children.length; ) e.removeChild(e.children[0]);
+    }
+    function tryAppendChild(newChild, refNode) {
+        try {
+            refNode.appendChild(newChild);
+            return newChild;
+        } catch (e) {
+            console.trace(e);
+        }
+    }
+
+    /** @class */
+    function hookFuncs() {
+        /** @type {Handlers} */
+        this._funcs = {};
+    }
+    /**
+     * @param {string} key 
+     * @param {Function} func 
+     */
+    hookFuncs.prototype.add = function(key, func){
+        if (!this._funcs[key]){
+            this._funcs[key] = [];
+        }
+        this._funcs[key].push(func)
+    }
+    /**
+     * @param {String} key 
+     * @returns {Function[]} handlers
+     */
+    hookFuncs.prototype.get = function(key){
+        return this._funcs[key] ? this._funcs[key] : [];
+    }
+
+    /**
+     * @param {Array.<string>} arr 
+     * @param {String} string 
+     * @returns {Array.<string>} sorted string
+     */
+    function sortByStringIndex(arr, string) {
+        return arr.sort(function(a, b){
+            var h = string.indexOf(a);
+            var l = string.indexOf(b);
+            var rank = 0;
+            if (h < l) {
+                rank = -1;
+            } else if (l < h) {
+                rank = 1;
+            } else if (a.length > b.length) {
+                rank = -1;
+            } else if (b.length > a.length) {
+                rank = 1;
+            }
+            return rank;
+        });
+    }
+
+    /**
+     * Remove keys from array that are not in format
+     * @param {string[]} keys 
+     * @param {string} format 
+     * @returns {string[]} new filtered array
+     */
+    function filterFormatKeys(keys, format) {
+        var out = [];
+        var formatIdx = 0;
+        for (var i = 0; i<keys.length; i++) {
+            var key = keys[i];
+            if (format.slice(formatIdx).indexOf(key) > -1) {
+                formatIdx += key.length;
+                out.push(key);
+            }
+        }
+        return out;
+    }
+
+    /**
+     * @template {StringNumObj} FormatObj
+     * @param {string} value 
+     * @param {string} format 
+     * @param {FormatObj} formatObj 
+     * @param {function(Object.<string, hookFuncs>): null} setHooks 
+     * @returns {FormatObj} formatObj
+     */
+    function parseData(value, format, formatObj, setHooks) {
+        var hooks = {
+            canSkip: new hookFuncs(),
+            updateValue: new hookFuncs(),
+        }
+        var keys = sortByStringIndex(Object.keys(formatObj), format);
+        var filterdKeys = filterFormatKeys(keys, format);
+        var vstart = 0; // value start
+        if (setHooks) {
+            setHooks(hooks);
+        }
+
+        for (var i = 0; i < keys.length; i++) {
+            var key = keys[i];
+            var fstart = format.indexOf(key);
+            var _vstart = vstart; // next value start
+            var val = null;
+            var canSkip = false;
+            var funcs = hooks.canSkip.get(key);
+
+            vstart = vstart || fstart;
+
+            for (var j = 0; j < funcs.length; j++) {
+                if (funcs[j](formatObj)){
+                    canSkip = true;
+                    break;
+                }
+            }
+            if (fstart > -1 && !canSkip) {
+                var sep = null;
+                var stop = vstart + key.length;
+                var fnext = -1;
+                var nextKeyIdx = i + 1;
+                _vstart += key.length; // set next value start if current key is found
+
+                // get next format token used to determine separator
+                while (fnext == -1 && nextKeyIdx < keys.length){
+                    var nextKey = keys[nextKeyIdx];
+                    nextKeyIdx += 1;
+                    if (filterdKeys.indexOf(nextKey) === -1) {
+                        continue;
+                    }
+                    fnext = nextKey ? format.indexOf(nextKey) : -1; // next format start
+                }
+                if (fnext > -1){
+                    sep = format.slice(stop, fnext);
+                    if (sep) {
+                        var _stop = value.slice(vstart).indexOf(sep);
+                        if (_stop && _stop > -1){
+                            stop = _stop + vstart;
+                            _vstart = stop + sep.length;
+                        }
+                    }
+                }
+                val = parseInt(value.slice(vstart, stop));
+
+                var funcs = hooks.updateValue.get(key);
+                for (var k = 0; k < funcs.length; k++) {
+                    val = funcs[k](val, formatObj, vstart, stop);
+                }
+            }
+            formatObj[key] = { index: vstart, value: val };
+            vstart = _vstart; // set next value start
+        }
+        return formatObj;
+    }
+
+    /**
+     * @param {String} value 
+     * @param {DTS} settings 
+     * @returns {Date} date object
+     */
+    function parseDate(value, settings) {
+        /** @type {{yyyy:number=, yy:number=, mm:number=, dd:number=}} */
+        var formatObj = {yyyy:null, yy:null, mm:null, dd:null};
+        var format = ((settings.dateFormat) || '').toLowerCase();
+        if (!format) {
+            throw new TypeError('dateFormat not found (' + settings.dateFormat + ')');
+        }
+        var formatObj = parseData(value, format, formatObj, function(hooks){
+            hooks.canSkip.add("yy", function(data){
+                return data["yyyy"].value;
+            });
+            hooks.updateValue.add("yy", function(val){
+                return 100 * Math.floor(new Date().getFullYear() / 100) + val;
+            });
+        });
+        var year = formatObj["yyyy"].value || formatObj["yy"].value;
+        var month = formatObj["mm"].value - 1;
+        var date = formatObj["dd"].value;
+        var result = new Date(year, month, date);
+        return result;
+    }
+
+    /**
+     * @param {String} value 
+     * @param {DTS} settings 
+     * @returns {Number} time in milliseconds <= (24 * 60 * 60 * 1000) - 1
+     */
+    function parseTime(value, settings) {
+        var format = ((settings.timeFormat) || '').toLowerCase();
+        if (!format) {
+            throw new TypeError('timeFormat not found (' + settings.timeFormat + ')');
+        }
+
+        /** @type {{hh:number=, mm:number=, ss:number=, a:string=}} */
+        var formatObj = {hh:null, mm:null, ss:null, a:null};
+        var formatObj = parseData(value, format, formatObj, function(hooks){
+            hooks.updateValue.add("a", function(val, data, start, stop){
+                return value.slice(start, start + 2);
+            });
+        });
+        var hours = formatObj["hh"].value;
+        var minutes = formatObj["mm"].value;
+        var seconds = formatObj["ss"].value;
+        var am_pm = formatObj["a"].value;
+        var am_pm_lower = am_pm ? am_pm.toLowerCase() : am_pm;
+        if (am_pm && ["am", "pm"].indexOf(am_pm_lower) > -1){
+            if (am_pm_lower == 'am' && hours == 12){
+                hours = 0;
+            } else if (am_pm_lower == 'pm') {
+                hours += 12;
+            }
+        }
+        var time = hours * 60 * 60 * 1000 + minutes * 60 * 1000 + seconds * 1000;
+        return time;
+    }
+
+    /**
+     * @param {Date} value 
+     * @param {DTS} settings 
+     * @returns {String} date string
+     */
+    function renderDate(value, settings) {
+        var format = settings.dateFormat.toLowerCase();
+        var date = value.getDate();
+        var month = value.getMonth() + 1;
+        var year = value.getFullYear();
+        var yearShort = year % 100;
+        var formatObj = {
+            dd: date < 10 ? "0" + date : date,
+            mm: month < 10 ? "0" + month : month,
+            yyyy: year,
+            yy: yearShort < 10 ? "0" + yearShort : yearShort
+        };
+        var str = format.replace(settings.dateFormatRegEx, function (found) {
+            return formatObj[found];
+        });
+        return str;
+    }
+
+    /**
+     * @param {Date} value 
+     * @param {DTS} settings 
+     * @returns {String} date string
+     */
+    function renderTime(value, settings) {
+        var Format = settings.timeFormat;
+        var format = Format.toLowerCase();
+        var hours = value.getHours();
+        var minutes = value.getMinutes();
+        var seconds = value.getSeconds();
+        var am_pm = null;
+        var hh_am_pm = null;
+        if (format.indexOf('a') > -1) {
+            am_pm = hours >= 12 ? 'pm' : 'am';
+            am_pm = Format.indexOf('A') > -1 ? am_pm.toUpperCase() : am_pm;
+            hh_am_pm = hours == 0 ? '12' : (hours > 12 ? hours%12 : hours);
+        }
+        var formatObj = {
+            hh: am_pm ? hh_am_pm : (hours < 10 ? "0" + hours : hours),
+            mm: minutes < 10 ? "0" + minutes : minutes,
+            ss: seconds < 10 ? "0" + seconds : seconds,
+            a: am_pm,
+        };
+        var str = format.replace(settings.timeFormatRegEx, function (found) {
+            return formatObj[found];
+        });
+        return str;
+    }
+
+    /**
+     * checks if two dates are equal
+     * @param {Date} date1 
+     * @param {Date} date2 
+     * @returns {Boolean} true or false
+     */
+    function isEqualDate(date1, date2) {
+        if (!(date1 && date2)) return false;
+        return (date1.getFullYear() == date2.getFullYear() && 
+                date1.getMonth() == date2.getMonth() && 
+                date1.getDate() == date2.getDate());
+    }
+
+    /**
+     * @param {Number} val 
+     * @param {Number} pad 
+     * @param {*} default_val 
+     * @returns {String} padded string
+     */
+    function padded(val, pad, default_val) {
+        var default_val = default_val || 0;
+        var valStr = '' + (parseInt(val) || default_val);
+        var diff = Math.max(pad, valStr.length) - valStr.length;
+        return ('' + default_val).repeat(diff) + valStr;
+    }
+
+    /**
+     * @template X
+     * @template Y
+     * @param {X} obj 
+     * @param {Y} objDefaults 
+     * @returns {X|Y} merged object
+     */
+    function setDefaults(obj, objDefaults) {
+        var keys = Object.keys(objDefaults);
+        for (var i=0; i<keys.length; i++) {
+            var key = keys[i];
+            if (!Object.prototype.hasOwnProperty.call(obj, key)) {
+                obj[key] = objDefaults[key];
+            }
+        }
+        return obj;
+    }
+
+
+    window.dtsel = Object.create({},{
+        DTS: { value: DTS },
+        DTObj: { value: DTBox },
+        fn: {
+            value: Object.defineProperties({}, {
+                empty: { value: empty },
+                appendAfter: {
+                    value: function (newElem, refNode) {
+                        refNode.parentNode.insertBefore(newElem, refNode.nextSibling);
+                    },
+                },
+                getOffset: { value: getOffset },
+                parseDate: { value: parseDate },
+                renderDate: { value: renderDate },
+                parseTime: {value: parseTime},
+                renderTime: {value: renderTime},
+                setDefaults: {value: setDefaults},
+            }),
+        },
+    });
+})();

reminder-dashboard/public/static/js/expand.js

@@ -0,0 +1,23 @@
+function collapse_all() {
+    document.querySelectorAll("div.reminderContent:not(.creator)").forEach((el) => {
+        el.classList.add("is-collapsed");
+    });
+}
+
+function expand_all() {
+    document.querySelectorAll("div.reminderContent:not(.creator)").forEach((el) => {
+        el.classList.remove("is-collapsed");
+    });
+}
+
+const expandAll = document.querySelector("#expandAll");
+
+expandAll.addEventListener("change", (ev) => {
+    if (ev.target.value === "expand") {
+        expand_all();
+    } else if (ev.target.value === "collapse") {
+        collapse_all();
+    }
+
+    ev.target.value = "";
+});

reminder-dashboard/public/static/js/interval.js

@@ -0,0 +1,94 @@
+function get_interval(element) {
+    let months = element.querySelector('input[name="interval_months"]').value;
+    let days = element.querySelector('input[name="interval_days"]').value;
+    let hours = element.querySelector('input[name="interval_hours"]').value;
+    let minutes = element.querySelector('input[name="interval_minutes"]').value;
+    let seconds = element.querySelector('input[name="interval_seconds"]').value;
+
+    return {
+        months: parseInt(months) || null,
+        days: parseInt(days) || null,
+        seconds:
+            (parseInt(hours) || 0) * 3600 +
+                (parseInt(minutes) || 0) * 60 +
+                (parseInt(seconds) || 0) || null,
+    };
+}
+
+function update_interval(element) {
+    let months = element.querySelector('input[name="interval_months"]');
+    let days = element.querySelector('input[name="interval_days"]');
+    let hours = element.querySelector('input[name="interval_hours"]');
+    let minutes = element.querySelector('input[name="interval_minutes"]');
+    let seconds = element.querySelector('input[name="interval_seconds"]');
+
+    let interval = get_interval(element);
+
+    if (interval.months === null && interval.days === null && interval.seconds === null) {
+        months.value = "";
+        days.value = "";
+        hours.value = "";
+        minutes.value = "";
+        seconds.value = "";
+    } else {
+        months.value = months.value.padStart(1, "0");
+        days.value = days.value.padStart(1, "0");
+        hours.value = hours.value.padStart(2, "0");
+        minutes.value = minutes.value.padStart(2, "0");
+        seconds.value = seconds.value.padStart(2, "0");
+
+        if (seconds.value >= 60) {
+            let quotient = Math.floor(seconds.value / 60);
+            let remainder = seconds.value % 60;
+
+            seconds.value = String(remainder).padStart(2, "0");
+            minutes.value = String(Number(minutes.value) + Number(quotient)).padStart(
+                2,
+                "0"
+            );
+        }
+        if (minutes.value >= 60) {
+            let quotient = Math.floor(minutes.value / 60);
+            let remainder = minutes.value % 60;
+
+            minutes.value = String(remainder).padStart(2, "0");
+            hours.value = String(Number(hours.value) + Number(quotient)).padStart(2, "0");
+        }
+    }
+}
+
+const $intervalGroup = document.querySelector(".interval-group");
+
+document.querySelector(".interval-group").addEventListener(
+    "blur",
+    (ev) => {
+        if (ev.target.nodeName !== "BUTTON") update_interval($intervalGroup);
+    },
+    true
+);
+
+$intervalGroup.querySelector("button.clear").addEventListener("click", () => {
+    $intervalGroup.querySelectorAll("input").forEach((el) => {
+        el.value = "";
+    });
+});
+
+document.addEventListener("remindersLoaded", (event) => {
+    for (reminder of event.detail) {
+        let $intervalGroup = reminder.node.querySelector(".interval-group");
+
+        $intervalGroup.addEventListener(
+            "blur",
+            (ev) => {
+                if (ev.target.nodeName !== "BUTTON") update_interval($intervalGroup);
+            },
+            true
+        );
+
+        $intervalGroup.querySelector("button.clear").addEventListener("click", () => {
+            $intervalGroup.querySelectorAll("input").forEach((el) => {
+                el.value = "";
+            });
+        });
+    }
+});

reminder-dashboard/public/static/js/js.cookie.min.js

@@ -0,0 +1,2 @@
+/*! js-cookie v3.0.0-rc.0 | MIT */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,function(){var r=e.Cookies,n=e.Cookies=t();n.noConflict=function(){return e.Cookies=r,n}}())}(this,function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)e[n]=r[n]}return e}var t={read:function(e){return e.replace(/%3B/g,";")},write:function(e){return e.replace(/;/g,"%3B")}};return function r(n,i){function o(r,o,u){if("undefined"!=typeof document){"number"==typeof(u=e({},i,u)).expires&&(u.expires=new Date(Date.now()+864e5*u.expires)),u.expires&&(u.expires=u.expires.toUTCString()),r=t.write(r).replace(/=/g,"%3D"),o=n.write(String(o),r);var c="";for(var f in u)u[f]&&(c+="; "+f,!0!==u[f]&&(c+="="+u[f].split(";")[0]));return document.cookie=r+"="+o+c}}return Object.create({set:o,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var r=document.cookie?document.cookie.split("; "):[],i={},o=0;o<r.length;o++){var u=r[o].split("="),c=u.slice(1).join("="),f=t.read(u[0]).replace(/%3D/g,"=");if(i[f]=n.read(c,f),e===f)break}return e?i[e]:i}},remove:function(t,r){o(t,"",e({},r,{expires:-1}))},withAttributes:function(t){return r(this.converter,e({},this.attributes,t))},withConverter:function(t){return r(e({},this.converter,t),this.attributes)}},{attributes:{value:Object.freeze(i)},converter:{value:Object.freeze(n)}})}(t,{path:"/"})});

reminder-dashboard/public/static/js/reporter.js

@@ -0,0 +1,16 @@
+const REPORTER_ID = crypto.randomUUID();
+
+window.addEventListener("error", async (ev) => {
+    await fetch("/report", {
+        method: "POST",
+        body: JSON.stringify({
+            reporterId: REPORTER_ID,
+            url: window.location.href,
+            relativeTimestamp: ev.timeStamp,
+            errorMessage: ev.message,
+            errorLine: ev.lineno,
+            errorFile: ev.filename,
+            errorType: ev.type,
+        }),
+    });
+});

reminder-dashboard/public/static/js/sort.js

@@ -0,0 +1,70 @@
+let guildReminders = document.querySelector("#guildReminders");
+
+function sort_by(cond) {
+    if (cond === "channel") {
+        [...guildReminders.children]
+            .sort((a, b) => {
+                let channel1 = a.querySelector("select.channel-selector").value;
+                let channel2 = b.querySelector("select.channel-selector").value;
+
+                return channel1 > channel2 ? 1 : -1;
+            })
+            .forEach((node) => guildReminders.appendChild(node));
+
+        // go through and add channel categories
+        let currentChannelGroup = null;
+        for (let child of guildReminders.querySelectorAll("div.reminderContent")) {
+            let thisChannelGroup = child.querySelector("select.channel-selector").value;
+
+            if (currentChannelGroup !== thisChannelGroup) {
+                let newNode = document.createElement("div");
+                newNode.textContent =
+                    "#" + channels.find((a) => a.id === thisChannelGroup).name;
+                newNode.classList.add("channel-tag");
+
+                guildReminders.insertBefore(newNode, child);
+
+                currentChannelGroup = thisChannelGroup;
+            }
+        }
+    } else {
+        // remove any channel tags if previous ordering was by channel
+        guildReminders.querySelectorAll("div.channel-tag").forEach((el) => {
+            el.remove();
+        });
+
+        if (cond === "time") {
+            [...guildReminders.children]
+                .sort((a, b) => {
+                    let time1 = luxon.DateTime.fromISO(
+                        a.querySelector('input[name="time"]').value
+                    );
+                    let time2 = luxon.DateTime.fromISO(
+                        b.querySelector('input[name="time"]').value
+                    );
+
+                    return time1 > time2 ? 1 : -1;
+                })
+                .forEach((node) => guildReminders.appendChild(node));
+        } else {
+            [...guildReminders.children]
+                .sort((a, b) => {
+                    let name1 = a.querySelector('input[name="name"]').value;
+                    let name2 = b.querySelector('input[name="name"]').value;
+
+                    return name1 > name2 ? 1 : -1;
+                })
+                .forEach((node) => guildReminders.appendChild(node));
+        }
+    }
+}
+
+const selector = document.querySelector("#orderBy");
+
+selector.addEventListener("change", () => {
+    sort_by(selector.value);
+});
+
+document.addEventListener("remindersLoaded", () => {
+    sort_by(selector.value);
+});

reminder-dashboard/public/static/js/timezone.js

@@ -0,0 +1,57 @@
+let timezone = luxon.DateTime.now().zone.name;
+const browserTimezone = luxon.DateTime.now().zone.name;
+let botTimezone = "UTC";
+
+function update_times() {
+    document.querySelectorAll("span.set-timezone").forEach((element) => {
+        element.textContent = timezone;
+    });
+    document.querySelectorAll("span.set-time").forEach((element) => {
+        element.textContent = luxon.DateTime.now().setZone(timezone).toFormat("HH:mm");
+    });
+    document.querySelectorAll("span.browser-timezone").forEach((element) => {
+        element.textContent = browserTimezone;
+    });
+    document.querySelectorAll("span.browser-time").forEach((element) => {
+        element.textContent = luxon.DateTime.now().toFormat("HH:mm");
+    });
+    document.querySelectorAll("span.bot-timezone").forEach((element) => {
+        element.textContent = botTimezone;
+    });
+    document.querySelectorAll("span.bot-time").forEach((element) => {
+        element.textContent = luxon.DateTime.now().setZone(botTimezone).toFormat("HH:mm");
+    });
+}
+
+window.setInterval(() => {
+    update_times();
+}, 30000);
+
+document.getElementById("set-bot-timezone").addEventListener("click", () => {
+    timezone = botTimezone;
+    update_times();
+});
+document.getElementById("set-browser-timezone").addEventListener("click", () => {
+    timezone = browserTimezone;
+    update_times();
+});
+document.getElementById("update-bot-timezone").addEventListener("click", () => {
+    timezone = browserTimezone;
+    fetch("/dashboard/api/user", {
+        method: "PATCH",
+        headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ timezone: timezone }),
+    })
+        .then((response) => response.json())
+        .then((data) => {
+            if (data.error) {
+                show_error(data.error);
+            } else {
+                botTimezone = browserTimezone;
+                update_times();
+            }
+        });
+});

reminder-dashboard/public/static/site.webmanifest

@@ -1,14 +1,15 @@
 {
-    "name": "",
-    "short_name": "",
+    "name": "Reminder Bot Dashboard",
+    "short_name": "Reminders",
+    "start_url": "/dashboard",
     "icons": [
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "/static/favicon/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-512x512.png",
+            "src": "/static/favicon/android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }