Compare commits
11 Commits
d068782596
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 5fe558ebd1 | |||
| 8b508b39c0 | |||
| 4dc821bf73 | |||
| 4fee936939 | |||
| 4c10682de8 | |||
| 85a9a872c9 | |||
| c8443340f4 | |||
| 76c8afd45f | |||
| 67ce9077b6 | |||
| 3d70be22e3 | |||
| 71e7857e9a |
3
.gitignore
vendored
3
.gitignore
vendored
@ -22,3 +22,6 @@ dist-ssr
|
|||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
|
|
||||||
|
*.deb
|
||||||
|
reminder-dashboard/usr/share/reminder-dashboard/*
|
||||||
|
|||||||
27
index.html
27
index.html
@ -29,33 +29,6 @@
|
|||||||
<link rel="stylesheet" href="/static/css/dtsel.css">
|
<link rel="stylesheet" href="/static/css/dtsel.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav
|
|
||||||
class="navbar is-spaced is-size-4 is-hidden-desktop dashboard-navbar"
|
|
||||||
role="navigation"
|
|
||||||
aria-label="main navigation"
|
|
||||||
>
|
|
||||||
<div class="navbar-brand">
|
|
||||||
<a class="navbar-item" href="/">
|
|
||||||
<figure class="image">
|
|
||||||
<img width="28px" height="28px" src="/static/img/logo_nobg.webp" alt="Reminder Bot Logo">
|
|
||||||
</figure>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<p class="navbar-item pageTitle"></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
role="button"
|
|
||||||
class="dashboard-burger navbar-burger is-right"
|
|
||||||
aria-label="menu"
|
|
||||||
aria-expanded="false"
|
|
||||||
data-target="mobileSidebar"
|
|
||||||
>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/index.tsx"></script>
|
<script type="module" src="/src/index.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
101
package-lock.json
generated
101
package-lock.json
generated
@ -6,7 +6,6 @@
|
|||||||
"": {
|
"": {
|
||||||
"name": "example",
|
"name": "example",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"air-datepicker": "^3.4.0",
|
|
||||||
"axios": "^1.5.1",
|
"axios": "^1.5.1",
|
||||||
"bulma": "^0.9.4",
|
"bulma": "^0.9.4",
|
||||||
"luxon": "^3.4.3",
|
"luxon": "^3.4.3",
|
||||||
@ -22,6 +21,7 @@
|
|||||||
"eslint": "^8.50.0",
|
"eslint": "^8.50.0",
|
||||||
"eslint-config-preact": "^1.3.0",
|
"eslint-config-preact": "^1.3.0",
|
||||||
"prettier": "^3.0.3",
|
"prettier": "^3.0.3",
|
||||||
|
"react-datepicker": "^4.21.0",
|
||||||
"typescript": "^5.2.2",
|
"typescript": "^5.2.2",
|
||||||
"vite": "^4.3.2"
|
"vite": "^4.3.2"
|
||||||
}
|
}
|
||||||
@ -1047,6 +1047,16 @@
|
|||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@popperjs/core": {
|
||||||
|
"version": "2.11.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||||
|
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||||
|
"dev": true,
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/popperjs"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@preact/preset-vite": {
|
"node_modules/@preact/preset-vite": {
|
||||||
"version": "2.6.0",
|
"version": "2.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/@preact/preset-vite/-/preset-vite-2.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/@preact/preset-vite/-/preset-vite-2.6.0.tgz",
|
||||||
@ -1370,11 +1380,6 @@
|
|||||||
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/air-datepicker": {
|
|
||||||
"version": "3.4.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/air-datepicker/-/air-datepicker-3.4.0.tgz",
|
|
||||||
"integrity": "sha512-MFr+2QYdHgrbd6Ah32hxoSCsmNJdrhYSkhr6hhefLpJBtsvX7zdYSvizsCJg15B2000NrEXep8UCYOsWy39iiw=="
|
|
||||||
},
|
|
||||||
"node_modules/ajv": {
|
"node_modules/ajv": {
|
||||||
"version": "6.12.6",
|
"version": "6.12.6",
|
||||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||||
@ -1726,6 +1731,12 @@
|
|||||||
"node": ">=4"
|
"node": ">=4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/classnames": {
|
||||||
|
"version": "2.3.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
|
||||||
|
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"node_modules/color-convert": {
|
"node_modules/color-convert": {
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||||
@ -1777,6 +1788,22 @@
|
|||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/date-fns": {
|
||||||
|
"version": "2.30.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
|
||||||
|
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.21.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.11"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/date-fns"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/debug": {
|
"node_modules/debug": {
|
||||||
"version": "4.3.4",
|
"version": "4.3.4",
|
||||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||||
@ -3920,6 +3947,24 @@
|
|||||||
"react-dom": ">=16.8.0"
|
"react-dom": ">=16.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-datepicker": {
|
||||||
|
"version": "4.21.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.21.0.tgz",
|
||||||
|
"integrity": "sha512-z0DtuRrKMz9i7dcTusW29VacbM9pn08g1yw0cG+Y5GpodJDxSWv7zUMxl3IwKN9Ap/AMphiepvmT5P+iNCgEiA==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@popperjs/core": "^2.11.8",
|
||||||
|
"classnames": "^2.2.6",
|
||||||
|
"date-fns": "^2.30.0",
|
||||||
|
"prop-types": "^15.7.2",
|
||||||
|
"react-onclickoutside": "^6.13.0",
|
||||||
|
"react-popper": "^2.3.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.9.0 || ^17 || ^18",
|
||||||
|
"react-dom": "^16.9.0 || ^17 || ^18"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-dom": {
|
"node_modules/react-dom": {
|
||||||
"version": "18.2.0",
|
"version": "18.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||||
@ -3933,12 +3978,47 @@
|
|||||||
"react": "^18.2.0"
|
"react": "^18.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-fast-compare": {
|
||||||
|
"version": "3.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
|
||||||
|
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"node_modules/react-is": {
|
"node_modules/react-is": {
|
||||||
"version": "16.13.1",
|
"version": "16.13.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/react-onclickoutside": {
|
||||||
|
"version": "6.13.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
|
||||||
|
"integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
|
||||||
|
"dev": true,
|
||||||
|
"funding": {
|
||||||
|
"type": "individual",
|
||||||
|
"url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^15.5.x || ^16.x || ^17.x || ^18.x",
|
||||||
|
"react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-popper": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
|
||||||
|
"integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"react-fast-compare": "^3.0.1",
|
||||||
|
"warning": "^4.0.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@popperjs/core": "^2.0.0",
|
||||||
|
"react": "^16.8.0 || ^17 || ^18",
|
||||||
|
"react-dom": "^16.8.0 || ^17 || ^18"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-query": {
|
"node_modules/react-query": {
|
||||||
"version": "3.39.3",
|
"version": "3.39.3",
|
||||||
"resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
|
||||||
@ -4626,6 +4706,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/warning": {
|
||||||
|
"version": "4.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||||
|
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"loose-envify": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/which": {
|
"node_modules/which": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||||
|
|||||||
@ -5,10 +5,10 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite build --watch --mode development",
|
"dev": "vite build --watch --mode development",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"preview": "vite preview"
|
"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": {
|
"dependencies": {
|
||||||
"air-datepicker": "^3.4.0",
|
|
||||||
"axios": "^1.5.1",
|
"axios": "^1.5.1",
|
||||||
"bulma": "^0.9.4",
|
"bulma": "^0.9.4",
|
||||||
"luxon": "^3.4.3",
|
"luxon": "^3.4.3",
|
||||||
@ -24,6 +24,7 @@
|
|||||||
"eslint": "^8.50.0",
|
"eslint": "^8.50.0",
|
||||||
"eslint-config-preact": "^1.3.0",
|
"eslint-config-preact": "^1.3.0",
|
||||||
"prettier": "^3.0.3",
|
"prettier": "^3.0.3",
|
||||||
|
"react-datepicker": "^4.21.0",
|
||||||
"typescript": "^5.2.2",
|
"typescript": "^5.2.2",
|
||||||
"vite": "^4.3.2"
|
"vite": "^4.3.2"
|
||||||
}
|
}
|
||||||
|
|||||||
7
reminder-dashboard/DEBIAN/control
Normal file
7
reminder-dashboard/DEBIAN/control
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
Package: reminder-dashboard
|
||||||
|
Version: 1.0
|
||||||
|
Section: base
|
||||||
|
Priority: optional
|
||||||
|
Architecture: amd64
|
||||||
|
Maintainer: Jude Southworth <judesouthworth@pm.me>
|
||||||
|
Description: NPM managed dashboard
|
||||||
@ -1,14 +1,14 @@
|
|||||||
import { createContext } from "preact";
|
import { createContext } from "preact";
|
||||||
import { useContext } from "preact/compat";
|
import { useContext } from "preact/compat";
|
||||||
import { useState } from "preact/hooks";
|
import { useState } from "preact/hooks";
|
||||||
import { SystemZone } from "luxon";
|
import { DateTime } from "luxon";
|
||||||
|
|
||||||
type TTimezoneContext = [string, (tz: string) => void];
|
type TTimezoneContext = [string, (tz: string) => void];
|
||||||
|
|
||||||
const TimezoneContext = createContext(["UTC", () => {}] as TTimezoneContext);
|
const TimezoneContext = createContext(["UTC", () => {}] as TTimezoneContext);
|
||||||
|
|
||||||
export const TimezoneProvider = ({ children }) => {
|
export const TimezoneProvider = ({ children }) => {
|
||||||
const [timezone, setTimezone] = useState(SystemZone.name);
|
const [timezone, setTimezone] = useState(DateTime.now().zoneName);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TimezoneContext.Provider value={[timezone, setTimezone]}>
|
<TimezoneContext.Provider value={[timezone, setTimezone]}>
|
||||||
|
|||||||
@ -1,19 +1,32 @@
|
|||||||
import { useParams } from "wouter";
|
import { useParams } from "wouter";
|
||||||
import { useQuery } from "react-query";
|
import { useQuery } from "react-query";
|
||||||
import { fetchGuildReminders } from "../../api";
|
import { fetchGuildChannels, fetchGuildReminders } from "../../api";
|
||||||
import { EditReminder } from "../Reminder/EditReminder";
|
import { EditReminder } from "../Reminder/EditReminder";
|
||||||
import { CreateReminder } from "../Reminder/CreateReminder";
|
import { CreateReminder } from "../Reminder/CreateReminder";
|
||||||
|
import { useState } from "preact/hooks";
|
||||||
|
|
||||||
|
enum Sort {
|
||||||
|
Time = "time",
|
||||||
|
Name = "name",
|
||||||
|
Channel = "channel",
|
||||||
|
}
|
||||||
|
|
||||||
export const GuildReminders = () => {
|
export const GuildReminders = () => {
|
||||||
const { guild } = useParams();
|
const { guild } = useParams();
|
||||||
|
|
||||||
const { isSuccess, data: guildReminders } = useQuery(fetchGuildReminders(guild));
|
const { isSuccess, data: guildReminders } = useQuery(fetchGuildReminders(guild));
|
||||||
|
const { data: channels } = useQuery(fetchGuildChannels(guild));
|
||||||
|
|
||||||
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
|
const [sort, setSort] = useState(Sort.Time);
|
||||||
|
|
||||||
|
let prevReminder = null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ margin: "0 12px 12px 12px" }}>
|
<div style={{ margin: "0 12px 12px 12px" }}>
|
||||||
<strong>Create Reminder</strong>
|
<strong>Create Reminder</strong>
|
||||||
<div id={"reminderCreator"}>
|
<div id={"reminderCreator"}>
|
||||||
<CreateReminder></CreateReminder>
|
<CreateReminder />
|
||||||
</div>
|
</div>
|
||||||
<br></br>
|
<br></br>
|
||||||
<div class={"field"}>
|
<div class={"field"}>
|
||||||
@ -24,12 +37,21 @@ export const GuildReminders = () => {
|
|||||||
<div class={"column is-narrow"}>
|
<div class={"column is-narrow"}>
|
||||||
<div class="control has-icons-left">
|
<div class="control has-icons-left">
|
||||||
<div class="select is-small">
|
<div class="select is-small">
|
||||||
<select id="orderBy">
|
<select
|
||||||
<option value="time" selected>
|
id="orderBy"
|
||||||
|
onInput={(ev) => {
|
||||||
|
setSort(ev.currentTarget.value as Sort);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value={Sort.Time} selected={sort == Sort.Time}>
|
||||||
Time
|
Time
|
||||||
</option>
|
</option>
|
||||||
<option value="name">Name</option>
|
<option value={Sort.Name} selected={sort == Sort.Name}>
|
||||||
<option value="channel">Channel</option>
|
Name
|
||||||
|
</option>
|
||||||
|
<option value={Sort.Channel} selected={sort == Sort.Channel}>
|
||||||
|
Channel
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="icon is-small is-left">
|
<div class="icon is-small is-left">
|
||||||
@ -40,7 +62,16 @@ export const GuildReminders = () => {
|
|||||||
<div class={"column is-narrow"}>
|
<div class={"column is-narrow"}>
|
||||||
<div class="control has-icons-left">
|
<div class="control has-icons-left">
|
||||||
<div class="select is-small">
|
<div class="select is-small">
|
||||||
<select id="expandAll">
|
<select
|
||||||
|
id="expandAll"
|
||||||
|
onInput={(ev) => {
|
||||||
|
if (ev.currentTarget.value === "expand") {
|
||||||
|
setCollapsed(false);
|
||||||
|
} else if (ev.currentTarget.value === "collapse") {
|
||||||
|
setCollapsed(true);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
<option value="" selected></option>
|
<option value="" selected></option>
|
||||||
<option value="expand">Expand All</option>
|
<option value="expand">Expand All</option>
|
||||||
<option value="collapse">Collapse All</option>
|
<option value="collapse">Collapse All</option>
|
||||||
@ -56,9 +87,43 @@ export const GuildReminders = () => {
|
|||||||
|
|
||||||
<div id={"guildReminders"}>
|
<div id={"guildReminders"}>
|
||||||
{isSuccess &&
|
{isSuccess &&
|
||||||
guildReminders.map((reminder) => (
|
guildReminders
|
||||||
<EditReminder reminder={reminder}></EditReminder>
|
.sort((r1, r2) => {
|
||||||
))}
|
if (sort === Sort.Time) {
|
||||||
|
return r1.utc_time > r2.utc_time ? 1 : -1;
|
||||||
|
} else if (sort === Sort.Name) {
|
||||||
|
return r1.name > r2.name ? 1 : -1;
|
||||||
|
} else {
|
||||||
|
return r1.channel > r2.channel ? 1 : -1;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.map((reminder) => {
|
||||||
|
let breaker = <></>;
|
||||||
|
if (sort === Sort.Channel && channels) {
|
||||||
|
if (
|
||||||
|
prevReminder === null ||
|
||||||
|
prevReminder.channel !== reminder.channel
|
||||||
|
) {
|
||||||
|
const channel = channels.find(
|
||||||
|
(ch) => ch.id === reminder.channel,
|
||||||
|
);
|
||||||
|
breaker = <div class={"channel-tag"}>#{channel.name}</div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
prevReminder = reminder;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{breaker}
|
||||||
|
<EditReminder
|
||||||
|
key={reminder.uid}
|
||||||
|
reminder={reminder}
|
||||||
|
globalCollapse={collapsed}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -3,6 +3,8 @@ import { fetchGuildInfo } from "../../api";
|
|||||||
import { useParams } from "wouter";
|
import { useParams } from "wouter";
|
||||||
import { GuildReminders } from "./GuildReminders";
|
import { GuildReminders } from "./GuildReminders";
|
||||||
import { GuildError } from "./GuildError";
|
import { GuildError } from "./GuildError";
|
||||||
|
import { createPortal } from "preact/compat";
|
||||||
|
import { Import } from "../Import";
|
||||||
|
|
||||||
export const Guild = () => {
|
export const Guild = () => {
|
||||||
const { guild } = useParams();
|
const { guild } = useParams();
|
||||||
@ -13,6 +15,13 @@ export const Guild = () => {
|
|||||||
} else if (guildInfo.error) {
|
} else if (guildInfo.error) {
|
||||||
return <GuildError />;
|
return <GuildError />;
|
||||||
} else {
|
} else {
|
||||||
return <GuildReminders />;
|
const importModal = createPortal(<Import />, document.getElementById("bottom-sidebar"));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{importModal}
|
||||||
|
<GuildReminders />
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
144
src/components/Import/index.tsx
Normal file
144
src/components/Import/index.tsx
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
import { Modal } from "../Modal";
|
||||||
|
import { useRef, useState } from "preact/hooks";
|
||||||
|
import { useParams } from "wouter";
|
||||||
|
import axios from "axios";
|
||||||
|
import { useFlash } from "../App/FlashContext";
|
||||||
|
|
||||||
|
export const Import = () => {
|
||||||
|
const [modalOpen, setModalOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<a
|
||||||
|
class="show-modal"
|
||||||
|
data-modal="chooseTimezoneModal"
|
||||||
|
onClick={() => {
|
||||||
|
setModalOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-exchange"></i>
|
||||||
|
</span>{" "}
|
||||||
|
Import/Export
|
||||||
|
</a>
|
||||||
|
{modalOpen && <ImportModal setModalOpen={setModalOpen} />}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ImportModal = ({ setModalOpen }) => {
|
||||||
|
const { guild } = useParams();
|
||||||
|
|
||||||
|
const aRef = useRef<HTMLAnchorElement>();
|
||||||
|
const inputRef = useRef<HTMLInputElement>();
|
||||||
|
const flash = useFlash();
|
||||||
|
|
||||||
|
const [isImporting, setIsImporting] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
setModalOpen={setModalOpen}
|
||||||
|
title={
|
||||||
|
<>
|
||||||
|
Import/Export Manager{" "}
|
||||||
|
<a href="/help/iemanager">
|
||||||
|
<span>
|
||||||
|
<i class="fa fa-question-circle"></i>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<>
|
||||||
|
<div class="control">
|
||||||
|
<div class="field">
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
class="default-width"
|
||||||
|
name="exportSelect"
|
||||||
|
value="reminders"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
Reminders
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div class="has-text-centered">
|
||||||
|
<div style="color: red">
|
||||||
|
Please first read the <a href="/help/iemanager">support page</a>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="button is-success is-outlined"
|
||||||
|
style={{ margin: "2px" }}
|
||||||
|
id="import-data"
|
||||||
|
disabled={isImporting}
|
||||||
|
onClick={() => {
|
||||||
|
inputRef.current.click();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Import Data
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="button is-success"
|
||||||
|
style={{ margin: "2px" }}
|
||||||
|
id="export-data"
|
||||||
|
onClick={() =>
|
||||||
|
axios
|
||||||
|
.get(`/dashboard/api/guild/${guild}/export/reminders`)
|
||||||
|
.then(({ data, status }) => {
|
||||||
|
if (status === 200) {
|
||||||
|
aRef.current.href = `data:text/plain;charset=utf-8,${encodeURIComponent(
|
||||||
|
data.body,
|
||||||
|
)}`;
|
||||||
|
aRef.current.click();
|
||||||
|
} else {
|
||||||
|
flash({
|
||||||
|
message: `Unexpected status ${status}`,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Export Data
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<a ref={aRef} id="downloader" download="export.csv" class="is-hidden" />
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
id="uploader"
|
||||||
|
type="file"
|
||||||
|
hidden
|
||||||
|
onChange={() => {
|
||||||
|
new Promise((resolve) => {
|
||||||
|
let fileReader = new FileReader();
|
||||||
|
fileReader.onload = (e) => resolve(fileReader.result);
|
||||||
|
fileReader.readAsDataURL(inputRef.current.files[0]);
|
||||||
|
}).then((dataUrl: string) => {
|
||||||
|
setIsImporting(true);
|
||||||
|
|
||||||
|
axios
|
||||||
|
.put(`/dashboard/api/guild/${guild}/export/reminders`, {
|
||||||
|
body: JSON.stringify({ body: dataUrl.split(",")[1] }),
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
setIsImporting(false);
|
||||||
|
|
||||||
|
if (data.error) {
|
||||||
|
flash({ message: data.error, type: "error" });
|
||||||
|
} else {
|
||||||
|
flash({ message: data.message, type: "success" });
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
delete inputRef.current.files[0];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,15 +1,18 @@
|
|||||||
import { JSX } from "preact";
|
import { JSX } from "preact";
|
||||||
|
import { createPortal } from "preact/compat";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
setModalOpen: (open: boolean) => never;
|
setModalOpen: (open: boolean) => never;
|
||||||
title: string;
|
title: string | JSX.Element;
|
||||||
onSubmitText?: string;
|
onSubmitText?: string;
|
||||||
onSubmit?: () => void;
|
onSubmit?: () => void;
|
||||||
children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);
|
children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }: Props) => {
|
export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }: Props) => {
|
||||||
return (
|
const body = document.querySelector("body");
|
||||||
|
|
||||||
|
return createPortal(
|
||||||
<div class="modal is-active">
|
<div class="modal is-active">
|
||||||
<div
|
<div
|
||||||
class="modal-background"
|
class="modal-background"
|
||||||
@ -52,6 +55,7 @@ export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }:
|
|||||||
setModalOpen(false);
|
setModalOpen(false);
|
||||||
}}
|
}}
|
||||||
></button>
|
></button>
|
||||||
</div>
|
</div>,
|
||||||
|
body,
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,12 +1,39 @@
|
|||||||
import { useReminder } from "./ReminderContext";
|
import { useReminder } from "./ReminderContext";
|
||||||
|
|
||||||
export const Attachment = () => {
|
export const Attachment = () => {
|
||||||
const [{ attachment, attachment_name }, setReminder] = useReminder();
|
const [{ attachment_name }, setReminder] = useReminder();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="file is-small is-boxed">
|
<div class="file is-small is-boxed">
|
||||||
<label class="file-label">
|
<label class="file-label">
|
||||||
<input class="file-input" type="file" name="attachment"></input>
|
<input
|
||||||
|
class="file-input"
|
||||||
|
type="file"
|
||||||
|
name="attachment"
|
||||||
|
onInput={async (ev) => {
|
||||||
|
const input = ev.currentTarget;
|
||||||
|
|
||||||
|
let file = input.files[0];
|
||||||
|
|
||||||
|
if (file.size >= 8 * 1024 * 1024) {
|
||||||
|
return { error: "File too large." };
|
||||||
|
}
|
||||||
|
|
||||||
|
let attachment: string = await new Promise((resolve) => {
|
||||||
|
let fileReader = new FileReader();
|
||||||
|
fileReader.onload = () => resolve(fileReader.result as string);
|
||||||
|
fileReader.readAsDataURL(file);
|
||||||
|
});
|
||||||
|
attachment = attachment.split(",")[1];
|
||||||
|
const attachment_name = file.name;
|
||||||
|
|
||||||
|
setReminder((reminder) => ({
|
||||||
|
...reminder,
|
||||||
|
attachment,
|
||||||
|
attachment_name,
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
></input>
|
||||||
<span class="file-cta">
|
<span class="file-cta">
|
||||||
<span class="file-label">{attachment_name || "Add Attachment"}</span>
|
<span class="file-label">{attachment_name || "Add Attachment"}</span>
|
||||||
<span class="file-icon">
|
<span class="file-icon">
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { useState } from "preact/hooks";
|
import { useRef, useState } from "preact/hooks";
|
||||||
import { useMutation, useQueryClient } from "react-query";
|
import { useMutation, useQueryClient } from "react-query";
|
||||||
import { patchGuildReminder } from "../../../api";
|
import { patchGuildReminder } from "../../../api";
|
||||||
import { useParams } from "wouter";
|
import { useParams } from "wouter";
|
||||||
@ -9,21 +9,40 @@ import { useFlash } from "../../App/FlashContext";
|
|||||||
|
|
||||||
export const EditButtonRow = () => {
|
export const EditButtonRow = () => {
|
||||||
const { guild } = useParams();
|
const { guild } = useParams();
|
||||||
const [reminder] = useReminder();
|
const [reminder, setReminder] = useReminder();
|
||||||
|
|
||||||
const [recentlySaved, setRecentlySaved] = useState(false);
|
const [recentlySaved, setRecentlySaved] = useState(false);
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const iconFlashTimeout = useRef(0);
|
||||||
|
|
||||||
|
const flash = useFlash();
|
||||||
const mutation = useMutation({
|
const mutation = useMutation({
|
||||||
...patchGuildReminder(guild),
|
...patchGuildReminder(guild),
|
||||||
onSuccess: () => {
|
onSuccess: (response) => {
|
||||||
queryClient.invalidateQueries({
|
queryClient.invalidateQueries({
|
||||||
queryKey: ["GUILD_REMINDERS", guild],
|
queryKey: ["GUILD_REMINDERS", guild],
|
||||||
});
|
});
|
||||||
setRecentlySaved(true);
|
|
||||||
setTimeout(() => {
|
if (iconFlashTimeout.current !== null) {
|
||||||
|
clearTimeout(iconFlashTimeout.current);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (response.data.errors.length > 0) {
|
||||||
setRecentlySaved(false);
|
setRecentlySaved(false);
|
||||||
}, ICON_FLASH_TIME);
|
|
||||||
|
for (const error of response.data.errors) {
|
||||||
|
flash({ message: error, type: "error" });
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setRecentlySaved(true);
|
||||||
|
|
||||||
|
iconFlashTimeout.current = setTimeout(() => {
|
||||||
|
setRecentlySaved(false);
|
||||||
|
}, ICON_FLASH_TIME);
|
||||||
|
|
||||||
|
setReminder(response.data.reminder);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import { Reminder } from "../../api";
|
import { Reminder } from "../../api";
|
||||||
import { useState } from "preact/hooks";
|
import { useEffect, useState } from "preact/hooks";
|
||||||
import { EditButtonRow } from "./ButtonRow/EditButtonRow";
|
import { EditButtonRow } from "./ButtonRow/EditButtonRow";
|
||||||
import { Message } from "./Message";
|
import { Message } from "./Message";
|
||||||
import { Settings } from "./Settings";
|
import { Settings } from "./Settings";
|
||||||
@ -8,13 +8,24 @@ import { TopBar } from "./TopBar";
|
|||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
reminder: Reminder;
|
reminder: Reminder;
|
||||||
|
globalCollapse: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const EditReminder = ({ reminder: initialReminder }: Props) => {
|
export const EditReminder = ({ reminder: initialReminder, globalCollapse }: Props) => {
|
||||||
|
const [propReminder, setPropReminder] = useState(initialReminder);
|
||||||
const [reminder, setReminder] = useState(initialReminder);
|
const [reminder, setReminder] = useState(initialReminder);
|
||||||
|
|
||||||
const [collapsed, setCollapsed] = useState(false);
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setCollapsed(globalCollapse);
|
||||||
|
}, [globalCollapse]);
|
||||||
|
|
||||||
|
// Reminder updated from web response
|
||||||
|
if (propReminder !== initialReminder) {
|
||||||
|
setReminder(initialReminder);
|
||||||
|
setPropReminder(initialReminder);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ReminderContext.Provider value={[reminder, setReminder]}>
|
<ReminderContext.Provider value={[reminder, setReminder]}>
|
||||||
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
|
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
export const Field = ({ title, value, inlined, index, onUpdate }) => {
|
export const Field = ({ title, value, inline, index, onUpdate }) => {
|
||||||
return (
|
return (
|
||||||
<div data-inlined={inlined ? "1" : "0"} class="embed-field-box" key={index}>
|
<div data-inlined={inline ? "1" : "0"} class="embed-field-box" key={index}>
|
||||||
<label class="is-sr-only" for="embedFieldTitle">
|
<label class="is-sr-only" for="embedFieldTitle">
|
||||||
Field Title
|
Field Title
|
||||||
</label>
|
</label>
|
||||||
@ -18,19 +18,21 @@ export const Field = ({ title, value, inlined, index, onUpdate }) => {
|
|||||||
title: ev.currentTarget.value,
|
title: ev.currentTarget.value,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
></textarea>
|
/>
|
||||||
<button
|
{(value !== "" || title !== "") && (
|
||||||
class="button is-small inline-btn"
|
<button
|
||||||
onClick={() => {
|
class="button is-small inline-btn"
|
||||||
onUpdate({
|
onClick={() => {
|
||||||
index,
|
onUpdate({
|
||||||
inlined: !inlined,
|
index,
|
||||||
});
|
inline: !inline,
|
||||||
}}
|
});
|
||||||
>
|
}}
|
||||||
<span class="is-sr-only">Toggle field inline</span>
|
>
|
||||||
<i class="fas fa-arrows-h"></i>
|
<span class="is-sr-only">Toggle field inline</span>
|
||||||
</button>
|
<i class="fas fa-arrows-h"></i>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label class="is-sr-only" for="embedFieldValue">
|
<label class="is-sr-only" for="embedFieldValue">
|
||||||
|
|||||||
@ -6,7 +6,7 @@ export const Fields = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div class={"embed-multifield-box"}>
|
<div class={"embed-multifield-box"}>
|
||||||
{[...embed_fields, { value: "", title: "", inlined: true }].map((field, index) => (
|
{[...embed_fields, { value: "", title: "", inline: true }].map((field, index) => (
|
||||||
<Field
|
<Field
|
||||||
{...field}
|
{...field}
|
||||||
index={index}
|
index={index}
|
||||||
@ -15,7 +15,7 @@ export const Fields = () => {
|
|||||||
...reminder,
|
...reminder,
|
||||||
embed_fields: [
|
embed_fields: [
|
||||||
...reminder.embed_fields,
|
...reminder.embed_fields,
|
||||||
{ value: "", title: "", inlined: true },
|
{ value: "", title: "", inline: true },
|
||||||
]
|
]
|
||||||
.map((f, i) => {
|
.map((f, i) => {
|
||||||
if (i === index) {
|
if (i === index) {
|
||||||
|
|||||||
@ -53,8 +53,8 @@ export const Embed = () => {
|
|||||||
embed_description: description,
|
embed_description: description,
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
></Description>
|
/>
|
||||||
<br></br>
|
<br />
|
||||||
|
|
||||||
<Fields />
|
<Fields />
|
||||||
</div>
|
</div>
|
||||||
@ -66,7 +66,7 @@ export const Embed = () => {
|
|||||||
url={reminder.embed_thumbnail_url}
|
url={reminder.embed_thumbnail_url}
|
||||||
alt="Square thumbnail embedded image"
|
alt="Square thumbnail embedded image"
|
||||||
setImage={() => {}}
|
setImage={() => {}}
|
||||||
></ImagePicker>
|
/>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -77,14 +77,14 @@ export const Embed = () => {
|
|||||||
url={reminder.embed_image_url}
|
url={reminder.embed_image_url}
|
||||||
alt="Large embedded image"
|
alt="Large embedded image"
|
||||||
setImage={() => {}}
|
setImage={() => {}}
|
||||||
></ImagePicker>
|
/>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<Footer
|
<Footer
|
||||||
footer={reminder.embed_footer}
|
footer={reminder.embed_footer}
|
||||||
icon={reminder.embed_footer_url}
|
icon={reminder.embed_footer_url}
|
||||||
setReminder={setReminder}
|
setReminder={setReminder}
|
||||||
></Footer>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -65,7 +65,10 @@ export const IntervalSelector = ({
|
|||||||
placeholder=""
|
placeholder=""
|
||||||
value={months || placeholder()}
|
value={months || placeholder()}
|
||||||
onInput={(ev) => {
|
onInput={(ev) => {
|
||||||
setMonths(parseInt(ev.currentTarget.value));
|
const value = ev.currentTarget.value;
|
||||||
|
if (value && !isNaN(parseInt(value))) {
|
||||||
|
setMonths(parseInt(ev.currentTarget.value));
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
></input>{" "}
|
></input>{" "}
|
||||||
<span class="half-rem"></span> months, <span class="half-rem"></span>
|
<span class="half-rem"></span> months, <span class="half-rem"></span>
|
||||||
@ -81,7 +84,10 @@ export const IntervalSelector = ({
|
|||||||
placeholder=""
|
placeholder=""
|
||||||
value={days || placeholder()}
|
value={days || placeholder()}
|
||||||
onInput={(ev) => {
|
onInput={(ev) => {
|
||||||
setDays(parseInt(ev.currentTarget.value));
|
const value = ev.currentTarget.value;
|
||||||
|
if (value && !isNaN(parseInt(value))) {
|
||||||
|
setDays(parseInt(ev.currentTarget.value));
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
></input>{" "}
|
></input>{" "}
|
||||||
<span class="half-rem"></span> days, <span class="half-rem"></span>
|
<span class="half-rem"></span> days, <span class="half-rem"></span>
|
||||||
@ -99,7 +105,10 @@ export const IntervalSelector = ({
|
|||||||
placeholder="HH"
|
placeholder="HH"
|
||||||
value={hours || placeholder()}
|
value={hours || placeholder()}
|
||||||
onInput={(ev) => {
|
onInput={(ev) => {
|
||||||
setHours(parseInt(ev.currentTarget.value));
|
const value = ev.currentTarget.value;
|
||||||
|
if (value && !isNaN(parseInt(value))) {
|
||||||
|
setHours(parseInt(ev.currentTarget.value));
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
></input>
|
></input>
|
||||||
:
|
:
|
||||||
@ -115,7 +124,10 @@ export const IntervalSelector = ({
|
|||||||
placeholder="MM"
|
placeholder="MM"
|
||||||
value={minutes || placeholder()}
|
value={minutes || placeholder()}
|
||||||
onInput={(ev) => {
|
onInput={(ev) => {
|
||||||
setMinutes(parseInt(ev.currentTarget.value));
|
const value = ev.currentTarget.value;
|
||||||
|
if (value && !isNaN(parseInt(value))) {
|
||||||
|
setMinutes(parseInt(ev.currentTarget.value));
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
></input>
|
></input>
|
||||||
:
|
:
|
||||||
@ -131,7 +143,10 @@ export const IntervalSelector = ({
|
|||||||
placeholder="SS"
|
placeholder="SS"
|
||||||
value={seconds || placeholder()}
|
value={seconds || placeholder()}
|
||||||
onInput={(ev) => {
|
onInput={(ev) => {
|
||||||
setSeconds(parseInt(ev.currentTarget.value));
|
const value = ev.currentTarget.value;
|
||||||
|
if (value && !isNaN(parseInt(value))) {
|
||||||
|
setSeconds(parseInt(ev.currentTarget.value));
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
></input>
|
></input>
|
||||||
</label>
|
</label>
|
||||||
|
|||||||
@ -14,7 +14,7 @@ export const Message = () => {
|
|||||||
<p class="image is-32x32 customizable">
|
<p class="image is-32x32 customizable">
|
||||||
<ImagePicker
|
<ImagePicker
|
||||||
class="is-rounded avatar"
|
class="is-rounded avatar"
|
||||||
url={reminder.avatar}
|
url={reminder.avatar || "/static/img/icon.png"}
|
||||||
alt="Image for discord avatar"
|
alt="Image for discord avatar"
|
||||||
setImage={(url: string) => {
|
setImage={(url: string) => {
|
||||||
setReminder((reminder) => ({
|
setReminder((reminder) => ({
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import { useReminder } from "./ReminderContext";
|
|||||||
import { Attachment } from "./Attachment";
|
import { Attachment } from "./Attachment";
|
||||||
import { TTS } from "./TTS";
|
import { TTS } from "./TTS";
|
||||||
import { useTimezone } from "../App/TimezoneProvider";
|
import { useTimezone } from "../App/TimezoneProvider";
|
||||||
|
import { TimeInput } from "./TimeInput";
|
||||||
|
|
||||||
export const Settings = () => {
|
export const Settings = () => {
|
||||||
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
|
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
|
||||||
@ -41,21 +42,15 @@ export const Settings = () => {
|
|||||||
<div class="control">
|
<div class="control">
|
||||||
<label class="label collapses">
|
<label class="label collapses">
|
||||||
Time*
|
Time*
|
||||||
<input
|
<TimeInput
|
||||||
class="input"
|
defaultValue={reminder.utc_time}
|
||||||
type="datetime-local"
|
onInput={(time: DateTime) => {
|
||||||
step="1"
|
|
||||||
name="time"
|
|
||||||
value={reminder.utc_time
|
|
||||||
.setZone(timezone)
|
|
||||||
.toFormat("yyyy-LL-dd'T'HH:mm:ss")}
|
|
||||||
onInput={(ev) => {
|
|
||||||
setReminder((reminder) => ({
|
setReminder((reminder) => ({
|
||||||
...reminder,
|
...reminder,
|
||||||
utc_time: DateTime.fromISO(ev.currentTarget.value).toUTC(),
|
utc_time: time,
|
||||||
}));
|
}));
|
||||||
}}
|
}}
|
||||||
></input>
|
/>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -102,28 +97,15 @@ export const Settings = () => {
|
|||||||
<div class="control">
|
<div class="control">
|
||||||
<label class="label">
|
<label class="label">
|
||||||
Expiration
|
Expiration
|
||||||
<input
|
<TimeInput
|
||||||
class="input"
|
defaultValue={reminder.expires}
|
||||||
type="datetime-local"
|
onInput={(time: DateTime) => {
|
||||||
step="1"
|
|
||||||
name="expiration"
|
|
||||||
value={
|
|
||||||
reminder.expires !== null &&
|
|
||||||
reminder.expires
|
|
||||||
.setZone(timezone)
|
|
||||||
.toFormat("yyyy-LL-dd'T'HH:mm:ss")
|
|
||||||
}
|
|
||||||
onInput={(ev) => {
|
|
||||||
setReminder((reminder) => ({
|
setReminder((reminder) => ({
|
||||||
...reminder,
|
...reminder,
|
||||||
expires: ev.currentTarget.value
|
expires: time,
|
||||||
? DateTime.fromISO(
|
|
||||||
ev.currentTarget.value,
|
|
||||||
).toUTC()
|
|
||||||
: null,
|
|
||||||
}));
|
}));
|
||||||
}}
|
}}
|
||||||
></input>
|
/>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
208
src/components/Reminder/TimeInput.tsx
Normal file
208
src/components/Reminder/TimeInput.tsx
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
import { useEffect, useRef, useState } from "preact/hooks";
|
||||||
|
import { DateTime } from "luxon";
|
||||||
|
import { useFlash } from "../App/FlashContext";
|
||||||
|
|
||||||
|
export const TimeInput = ({ defaultValue, onInput }) => {
|
||||||
|
const ref = useRef(null);
|
||||||
|
|
||||||
|
const [time, setTime] = useState(defaultValue);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
onInput(time);
|
||||||
|
}, [time]);
|
||||||
|
|
||||||
|
const flash = useFlash();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
class={"input"}
|
||||||
|
onPaste={(ev) => {
|
||||||
|
ev.preventDefault();
|
||||||
|
const pasteValue = ev.clipboardData.getData("text/plain");
|
||||||
|
let dt = DateTime.fromISO(pasteValue);
|
||||||
|
|
||||||
|
if (dt.isValid) {
|
||||||
|
setTime(dt);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt = DateTime.fromSQL(pasteValue);
|
||||||
|
|
||||||
|
if (dt.isValid) {
|
||||||
|
setTime(dt);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
flash({
|
||||||
|
message: `Couldn't parse your clipboard data as a valid date-time`,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ flexGrow: "1" }}>
|
||||||
|
<label>
|
||||||
|
<span class="is-sr-only">Years input</span>
|
||||||
|
<input
|
||||||
|
style={{
|
||||||
|
borderStyle: "none",
|
||||||
|
fontFamily: "monospace",
|
||||||
|
width: "calc(4ch + 4px)",
|
||||||
|
fontSize: "1rem",
|
||||||
|
}}
|
||||||
|
type="text"
|
||||||
|
pattern="\d*"
|
||||||
|
maxlength={4}
|
||||||
|
placeholder="YYYY"
|
||||||
|
value={time?.year.toLocaleString("en-US", {
|
||||||
|
minimumIntegerDigits: 4,
|
||||||
|
useGrouping: false,
|
||||||
|
})}
|
||||||
|
onBlur={(ev) => {
|
||||||
|
setTime(time.set({ year: ev.currentTarget.value }));
|
||||||
|
}}
|
||||||
|
></input>{" "}
|
||||||
|
</label>
|
||||||
|
-
|
||||||
|
<label>
|
||||||
|
<span class="is-sr-only">Months input</span>
|
||||||
|
<input
|
||||||
|
style={{
|
||||||
|
borderStyle: "none",
|
||||||
|
fontFamily: "monospace",
|
||||||
|
width: "calc(2ch + 4px)",
|
||||||
|
fontSize: "1rem",
|
||||||
|
}}
|
||||||
|
type="text"
|
||||||
|
pattern="\d*"
|
||||||
|
maxlength={2}
|
||||||
|
placeholder="MM"
|
||||||
|
value={time?.month.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
|
||||||
|
onBlur={(ev) => {
|
||||||
|
setTime(time.set({ month: ev.currentTarget.value }));
|
||||||
|
}}
|
||||||
|
></input>{" "}
|
||||||
|
</label>
|
||||||
|
-
|
||||||
|
<label>
|
||||||
|
<span class="is-sr-only">Days input</span>
|
||||||
|
<input
|
||||||
|
style={{
|
||||||
|
borderStyle: "none",
|
||||||
|
fontFamily: "monospace",
|
||||||
|
width: "calc(2ch + 4px)",
|
||||||
|
fontSize: "1rem",
|
||||||
|
}}
|
||||||
|
type="text"
|
||||||
|
pattern="\d*"
|
||||||
|
maxlength={2}
|
||||||
|
placeholder="DD"
|
||||||
|
value={time?.day.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
|
||||||
|
onBlur={(ev) => {
|
||||||
|
setTime(time.set({ day: ev.currentTarget.value }));
|
||||||
|
}}
|
||||||
|
></input>{" "}
|
||||||
|
</label>
|
||||||
|
<label style={{ marginLeft: "8px" }}>
|
||||||
|
<span class="is-sr-only">Hours input</span>
|
||||||
|
<input
|
||||||
|
style={{
|
||||||
|
borderStyle: "none",
|
||||||
|
fontFamily: "monospace",
|
||||||
|
width: "calc(2ch + 4px)",
|
||||||
|
fontSize: "1rem",
|
||||||
|
}}
|
||||||
|
type="text"
|
||||||
|
pattern="\d*"
|
||||||
|
maxlength={2}
|
||||||
|
placeholder="hh"
|
||||||
|
value={time?.hour.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
|
||||||
|
onBlur={(ev) => {
|
||||||
|
setTime(time.set({ hour: ev.currentTarget.value }));
|
||||||
|
}}
|
||||||
|
></input>{" "}
|
||||||
|
</label>
|
||||||
|
:
|
||||||
|
<label>
|
||||||
|
<span class="is-sr-only">Minutes input</span>
|
||||||
|
<input
|
||||||
|
style={{
|
||||||
|
borderStyle: "none",
|
||||||
|
fontFamily: "monospace",
|
||||||
|
width: "calc(2ch + 4px)",
|
||||||
|
fontSize: "1rem",
|
||||||
|
}}
|
||||||
|
type="text"
|
||||||
|
pattern="\d*"
|
||||||
|
maxlength={2}
|
||||||
|
placeholder="mm"
|
||||||
|
value={time?.minute.toLocaleString("en-US", {
|
||||||
|
minimumIntegerDigits: 2,
|
||||||
|
})}
|
||||||
|
onBlur={(ev) => {
|
||||||
|
setTime(time.set({ minute: ev.currentTarget.value }));
|
||||||
|
}}
|
||||||
|
></input>{" "}
|
||||||
|
</label>
|
||||||
|
:
|
||||||
|
<label>
|
||||||
|
<span class="is-sr-only">Seconds input</span>
|
||||||
|
<input
|
||||||
|
style={{
|
||||||
|
borderStyle: "none",
|
||||||
|
fontFamily: "monospace",
|
||||||
|
width: "calc(2ch + 4px)",
|
||||||
|
fontSize: "1rem",
|
||||||
|
}}
|
||||||
|
type="text"
|
||||||
|
pattern="\d*"
|
||||||
|
maxlength={2}
|
||||||
|
placeholder="ss"
|
||||||
|
value={time?.second.toLocaleString("en-US", {
|
||||||
|
minimumIntegerDigits: 2,
|
||||||
|
})}
|
||||||
|
onBlur={(ev) => {
|
||||||
|
setTime(time.set({ second: ev.currentTarget.value }));
|
||||||
|
}}
|
||||||
|
></input>{" "}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
style={{
|
||||||
|
background: "none",
|
||||||
|
border: "none",
|
||||||
|
padding: "1px",
|
||||||
|
marginRight: "-3px",
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
ref.current.showPicker();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span class="is-sr-only">Show time picker</span>
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-calendar"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
left: 0,
|
||||||
|
visibility: "hidden",
|
||||||
|
}}
|
||||||
|
class={"input"}
|
||||||
|
type="datetime-local"
|
||||||
|
step="1"
|
||||||
|
value={
|
||||||
|
time
|
||||||
|
? time.toFormat("yyyy-LL-dd'T'HH:mm:ss")
|
||||||
|
: DateTime.now().toFormat("yyyy-LL-dd'T'HH:mm:ss")
|
||||||
|
}
|
||||||
|
ref={ref}
|
||||||
|
onInput={(ev) => {
|
||||||
|
setTime(DateTime.fromISO(ev.currentTarget.value));
|
||||||
|
}}
|
||||||
|
></input>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -11,8 +11,8 @@ export const Username = () => {
|
|||||||
placeholder="Username Override"
|
placeholder="Username Override"
|
||||||
maxlength={32}
|
maxlength={32}
|
||||||
name="username"
|
name="username"
|
||||||
value={reminder.username}
|
value={reminder.username || "Reminder"}
|
||||||
onInput={(ev) => {
|
onBlur={(ev) => {
|
||||||
setReminder((reminder) => ({
|
setReminder((reminder) => ({
|
||||||
...reminder,
|
...reminder,
|
||||||
username: ev.currentTarget.value,
|
username: ev.currentTarget.value,
|
||||||
|
|||||||
@ -1,7 +1,54 @@
|
|||||||
|
import { useState } from "preact/hooks";
|
||||||
|
|
||||||
export const MobileSidebar = ({ children }) => {
|
export const MobileSidebar = ({ children }) => {
|
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="dashboard-sidebar mobile-sidebar is-hidden-desktop" id="mobileSidebar">
|
<>
|
||||||
{children}
|
<nav
|
||||||
</div>
|
class="navbar is-spaced is-size-4 is-hidden-desktop dashboard-navbar"
|
||||||
|
role="navigation"
|
||||||
|
aria-label="main navigation"
|
||||||
|
>
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<a class="navbar-item" href="/">
|
||||||
|
<figure class="image">
|
||||||
|
<img
|
||||||
|
width="28px"
|
||||||
|
height="28px"
|
||||||
|
src="/static/img/logo_nobg.webp"
|
||||||
|
alt="Reminder Bot Logo"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<p class="navbar-item pageTitle"></p>
|
||||||
|
|
||||||
|
<a
|
||||||
|
role="button"
|
||||||
|
class="dashboard-burger navbar-burger is-right"
|
||||||
|
aria-label="menu"
|
||||||
|
aria-expanded="false"
|
||||||
|
data-target="mobileSidebar"
|
||||||
|
onClick={() => {
|
||||||
|
setSidebarOpen(!sidebarOpen);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div
|
||||||
|
class="dashboard-sidebar mobile-sidebar is-hidden-desktop"
|
||||||
|
id="mobileSidebar"
|
||||||
|
style={{
|
||||||
|
display: sidebarOpen ? "block" : "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -5,7 +5,6 @@ import { Brand } from "./Brand";
|
|||||||
import { Wave } from "./Wave";
|
import { Wave } from "./Wave";
|
||||||
import { GuildEntry } from "./GuildEntry";
|
import { GuildEntry } from "./GuildEntry";
|
||||||
import { fetchUserGuilds, GuildInfo } from "../../api";
|
import { fetchUserGuilds, GuildInfo } from "../../api";
|
||||||
import { useState } from "preact/hooks";
|
|
||||||
import { TimezonePicker } from "../TimezonePicker";
|
import { TimezonePicker } from "../TimezonePicker";
|
||||||
|
|
||||||
type ContentProps = {
|
type ContentProps = {
|
||||||
@ -18,9 +17,9 @@ const SidebarContent = ({ guilds }: ContentProps) => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<Brand></Brand>
|
<Brand />
|
||||||
</a>
|
</a>
|
||||||
<Wave></Wave>
|
<Wave />
|
||||||
<aside class="menu">
|
<aside class="menu">
|
||||||
<p class="menu-label">Servers</p>
|
<p class="menu-label">Servers</p>
|
||||||
<ul class="menu-list guildList">{guildEntries}</ul>
|
<ul class="menu-list guildList">{guildEntries}</ul>
|
||||||
@ -28,12 +27,7 @@ const SidebarContent = ({ guilds }: ContentProps) => {
|
|||||||
<p class="menu-label">Options</p>
|
<p class="menu-label">Options</p>
|
||||||
<ul class="menu-list">
|
<ul class="menu-list">
|
||||||
<li>
|
<li>
|
||||||
<a class="show-modal" data-modal="dataManagerModal">
|
<div id="bottom-sidebar"></div>
|
||||||
<span class="icon">
|
|
||||||
<i class="fas fa-exchange"></i>
|
|
||||||
</span>{" "}
|
|
||||||
Import/Export
|
|
||||||
</a>
|
|
||||||
<TimezonePicker />
|
<TimezonePicker />
|
||||||
<a href="/login/discord/logout">
|
<a href="/login/discord/logout">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
|
|||||||
@ -52,7 +52,7 @@ export const TimezonePicker = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const TimezoneModal = ({ setModalOpen }) => {
|
const TimezoneModal = ({ setModalOpen }) => {
|
||||||
const browserTimezone = SystemZone.name;
|
const browserTimezone = DateTime.now().zoneName;
|
||||||
const [selectedZone, setSelectedZone] = useTimezone();
|
const [selectedZone, setSelectedZone] = useTimezone();
|
||||||
|
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
@ -69,11 +69,10 @@ const TimezoneModal = ({ setModalOpen }) => {
|
|||||||
<p>
|
<p>
|
||||||
Your configured timezone is:{" "}
|
Your configured timezone is:{" "}
|
||||||
<TimezoneDisplay timezone={selectedZone}></TimezoneDisplay>
|
<TimezoneDisplay timezone={selectedZone}></TimezoneDisplay>
|
||||||
<br></br>
|
<br />
|
||||||
<br></br>
|
|
||||||
Your browser timezone is:{" "}
|
Your browser timezone is:{" "}
|
||||||
<TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
|
<TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
|
||||||
<br></br>
|
<br />
|
||||||
{!isError && (
|
{!isError && (
|
||||||
<>
|
<>
|
||||||
Your bot timezone is:{" "}
|
Your bot timezone is:{" "}
|
||||||
@ -89,6 +88,9 @@ const TimezoneModal = ({ setModalOpen }) => {
|
|||||||
<div class="has-text-centered">
|
<div class="has-text-centered">
|
||||||
<button
|
<button
|
||||||
class="button is-success"
|
class="button is-success"
|
||||||
|
style={{
|
||||||
|
margin: "2px",
|
||||||
|
}}
|
||||||
id="set-browser-timezone"
|
id="set-browser-timezone"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedZone(browserTimezone);
|
setSelectedZone(browserTimezone);
|
||||||
@ -102,6 +104,9 @@ const TimezoneModal = ({ setModalOpen }) => {
|
|||||||
<button
|
<button
|
||||||
class="button is-success"
|
class="button is-success"
|
||||||
id="set-bot-timezone"
|
id="set-bot-timezone"
|
||||||
|
style={{
|
||||||
|
margin: "2px",
|
||||||
|
}}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedZone(data.timezone);
|
setSelectedZone(data.timezone);
|
||||||
}}
|
}}
|
||||||
@ -114,6 +119,9 @@ const TimezoneModal = ({ setModalOpen }) => {
|
|||||||
<button
|
<button
|
||||||
class="button is-warning"
|
class="button is-warning"
|
||||||
id="update-bot-timezone"
|
id="update-bot-timezone"
|
||||||
|
style={{
|
||||||
|
margin: "2px",
|
||||||
|
}}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
userInfoMutation.mutate(browserTimezone);
|
userInfoMutation.mutate(browserTimezone);
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user