Compare commits
16 Commits
8ba7a39ce5
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 5fe558ebd1 | |||
| 8b508b39c0 | |||
| 4dc821bf73 | |||
| 4fee936939 | |||
| 4c10682de8 | |||
| 85a9a872c9 | |||
| c8443340f4 | |||
| 76c8afd45f | |||
| 67ce9077b6 | |||
| 3d70be22e3 | |||
| 71e7857e9a | |||
| d068782596 | |||
| 5ee1fa60db | |||
| 4aa5b285ac | |||
| a90c0c9232 | |||
| 5dde422ee5 |
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/*
|
||||||
|
|||||||
@ -13,5 +13,7 @@ This also allows me to expand my frontend skills, which is relevant to part of m
|
|||||||
## Developing
|
## Developing
|
||||||
|
|
||||||
1. Download the parent repo: https://gitea.jellypro.xyz/jude/reminder-bot
|
1. Download the parent repo: https://gitea.jellypro.xyz/jude/reminder-bot
|
||||||
2. Initialise the submodules
|
2. Initialise the submodules: `git pull --recurse-submodules`
|
||||||
3. Run both `npm start` and `cargo run`
|
3. Run both `npm run dev` and `cargo run`
|
||||||
|
4. 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`
|
||||||
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",
|
||||||
|
|||||||
@ -3,12 +3,12 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"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
|
||||||
21
src/api.ts
21
src/api.ts
@ -89,7 +89,7 @@ export const fetchUserInfo = () => ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const patchUserInfo = () => ({
|
export const patchUserInfo = () => ({
|
||||||
mutationFn: (user: UserInfo) => axios.patch(`/dashboard/api/user`, user),
|
mutationFn: (timezone: string) => axios.patch(`/dashboard/api/user`, { timezone }),
|
||||||
});
|
});
|
||||||
|
|
||||||
export const fetchUserGuilds = () => ({
|
export const fetchUserGuilds = () => ({
|
||||||
@ -178,3 +178,22 @@ export const fetchGuildTemplates = (guild: string) => ({
|
|||||||
>,
|
>,
|
||||||
staleTime: OTHER_STALE_TIME,
|
staleTime: OTHER_STALE_TIME,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export const postGuildTemplate = (guild: string) => ({
|
||||||
|
mutationFn: (reminder: Reminder) =>
|
||||||
|
axios
|
||||||
|
.post(`/dashboard/api/guild/${guild}/templates`, {
|
||||||
|
...reminder,
|
||||||
|
utc_time: reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"),
|
||||||
|
})
|
||||||
|
.then((resp) => resp.data),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const deleteGuildTemplate = (guild: string) => ({
|
||||||
|
mutationFn: (template: Template) =>
|
||||||
|
axios.delete(`/dashboard/api/guild/${guild}/templates`, {
|
||||||
|
data: {
|
||||||
|
id: template.id,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|||||||
20
src/components/App/TimezoneProvider.tsx
Normal file
20
src/components/App/TimezoneProvider.tsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { createContext } from "preact";
|
||||||
|
import { useContext } from "preact/compat";
|
||||||
|
import { useState } from "preact/hooks";
|
||||||
|
import { DateTime } from "luxon";
|
||||||
|
|
||||||
|
type TTimezoneContext = [string, (tz: string) => void];
|
||||||
|
|
||||||
|
const TimezoneContext = createContext(["UTC", () => {}] as TTimezoneContext);
|
||||||
|
|
||||||
|
export const TimezoneProvider = ({ children }) => {
|
||||||
|
const [timezone, setTimezone] = useState(DateTime.now().zoneName);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TimezoneContext.Provider value={[timezone, setTimezone]}>
|
||||||
|
{children}
|
||||||
|
</TimezoneContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useTimezone = () => useContext(TimezoneContext);
|
||||||
@ -4,27 +4,30 @@ import { Route, Router, Switch } from "wouter";
|
|||||||
import { Welcome } from "../Welcome";
|
import { Welcome } from "../Welcome";
|
||||||
import { Guild } from "../Guild";
|
import { Guild } from "../Guild";
|
||||||
import { FlashProvider } from "./FlashProvider";
|
import { FlashProvider } from "./FlashProvider";
|
||||||
|
import { TimezoneProvider } from "./TimezoneProvider";
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FlashProvider>
|
<TimezoneProvider>
|
||||||
<QueryClientProvider client={queryClient}>
|
<FlashProvider>
|
||||||
<Router base={"/dashboard"}>
|
<QueryClientProvider client={queryClient}>
|
||||||
<div class="columns is-gapless dashboard-frame">
|
<Router base={"/dashboard"}>
|
||||||
<Sidebar />
|
<div class="columns is-gapless dashboard-frame">
|
||||||
<div class="column is-main-content">
|
<Sidebar />
|
||||||
<Switch>
|
<div class="column is-main-content">
|
||||||
<Route path={"/:guild/reminders"} component={Guild}></Route>
|
<Switch>
|
||||||
<Route>
|
<Route path={"/:guild/reminders"} component={Guild}></Route>
|
||||||
<Welcome />
|
<Route>
|
||||||
</Route>
|
<Welcome />
|
||||||
</Switch>
|
</Route>
|
||||||
|
</Switch>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Router>
|
||||||
</Router>
|
</QueryClientProvider>
|
||||||
</QueryClientProvider>
|
</FlashProvider>
|
||||||
</FlashProvider>
|
</TimezoneProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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,
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
46
src/components/Reminder/Attachment.tsx
Normal file
46
src/components/Reminder/Attachment.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { useReminder } from "./ReminderContext";
|
||||||
|
|
||||||
|
export const Attachment = () => {
|
||||||
|
const [{ attachment_name }, setReminder] = useReminder();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="file is-small is-boxed">
|
||||||
|
<label class="file-label">
|
||||||
|
<input
|
||||||
|
class="file-input"
|
||||||
|
type="file"
|
||||||
|
name="attachment"
|
||||||
|
onInput={async (ev) => {
|
||||||
|
const input = ev.currentTarget;
|
||||||
|
|
||||||
|
let file = input.files[0];
|
||||||
|
|
||||||
|
if (file.size >= 8 * 1024 * 1024) {
|
||||||
|
return { error: "File too large." };
|
||||||
|
}
|
||||||
|
|
||||||
|
let attachment: string = await new Promise((resolve) => {
|
||||||
|
let fileReader = new FileReader();
|
||||||
|
fileReader.onload = () => resolve(fileReader.result as string);
|
||||||
|
fileReader.readAsDataURL(file);
|
||||||
|
});
|
||||||
|
attachment = attachment.split(",")[1];
|
||||||
|
const attachment_name = file.name;
|
||||||
|
|
||||||
|
setReminder((reminder) => ({
|
||||||
|
...reminder,
|
||||||
|
attachment,
|
||||||
|
attachment_name,
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
></input>
|
||||||
|
<span class="file-cta">
|
||||||
|
<span class="file-label">{attachment_name || "Add Attachment"}</span>
|
||||||
|
<span class="file-icon">
|
||||||
|
<i class="fas fa-upload"></i>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import { LoadTemplate } from "../LoadTemplate";
|
import { LoadTemplate } from "../LoadTemplate";
|
||||||
import { useReminder } from "../ReminderContext";
|
import { useReminder } from "../ReminderContext";
|
||||||
import { useMutation, useQueryClient } from "react-query";
|
import { useMutation, useQueryClient } from "react-query";
|
||||||
import { postGuildReminder } from "../../../api";
|
import { postGuildReminder, postGuildTemplate } from "../../../api";
|
||||||
import { useParams } from "wouter";
|
import { useParams } from "wouter";
|
||||||
import { useState } from "preact/hooks";
|
import { useState } from "preact/hooks";
|
||||||
import { ICON_FLASH_TIME } from "../../../consts";
|
import { ICON_FLASH_TIME } from "../../../consts";
|
||||||
@ -12,6 +12,7 @@ export const CreateButtonRow = () => {
|
|||||||
const [reminder] = useReminder();
|
const [reminder] = useReminder();
|
||||||
|
|
||||||
const [recentlyCreated, setRecentlyCreated] = useState(false);
|
const [recentlyCreated, setRecentlyCreated] = useState(false);
|
||||||
|
const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false);
|
||||||
|
|
||||||
const flash = useFlash();
|
const flash = useFlash();
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
@ -39,6 +40,30 @@ export const CreateButtonRow = () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const templateMutation = useMutation({
|
||||||
|
...postGuildTemplate(guild),
|
||||||
|
onSuccess: (data) => {
|
||||||
|
if (data.error) {
|
||||||
|
flash({
|
||||||
|
message: data.error,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
flash({
|
||||||
|
message: "Template created",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
queryClient.invalidateQueries({
|
||||||
|
queryKey: ["GUILD_TEMPLATES", guild],
|
||||||
|
});
|
||||||
|
setTemplateRecentlyCreated(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setTemplateRecentlyCreated(false);
|
||||||
|
}, ICON_FLASH_TIME);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
<div class="button-row-reminder">
|
<div class="button-row-reminder">
|
||||||
@ -66,11 +91,26 @@ export const CreateButtonRow = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div class="button-row-template">
|
<div class="button-row-template">
|
||||||
<div>
|
<div>
|
||||||
<button class="button is-success is-outlined">
|
<button
|
||||||
|
class="button is-success is-outlined"
|
||||||
|
onClick={() => {
|
||||||
|
templateMutation.mutate(reminder);
|
||||||
|
}}
|
||||||
|
>
|
||||||
<span>Create Template</span>{" "}
|
<span>Create Template</span>{" "}
|
||||||
<span class="icon">
|
{templateMutation.isLoading ? (
|
||||||
<i class="fas fa-file-spreadsheet"></i>
|
<span class="icon">
|
||||||
</span>
|
<i class="fas fa-spin fa-cog"></i>
|
||||||
|
</span>
|
||||||
|
) : templateRecentlyCreated ? (
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-check"></i>
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-file-spreadsheet"></i>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -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"}>
|
||||||
|
|||||||
57
src/components/Reminder/Embed/Fields/Field.tsx
Normal file
57
src/components/Reminder/Embed/Fields/Field.tsx
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
export const Field = ({ title, value, inline, index, onUpdate }) => {
|
||||||
|
return (
|
||||||
|
<div data-inlined={inline ? "1" : "0"} class="embed-field-box" key={index}>
|
||||||
|
<label class="is-sr-only" for="embedFieldTitle">
|
||||||
|
Field Title
|
||||||
|
</label>
|
||||||
|
<div class="is-flex">
|
||||||
|
<textarea
|
||||||
|
class="discord-field-title field-input message-input autoresize"
|
||||||
|
placeholder="Field Title..."
|
||||||
|
rows={1}
|
||||||
|
maxlength={256}
|
||||||
|
name="embed_field_title[]"
|
||||||
|
value={title}
|
||||||
|
onInput={(ev) =>
|
||||||
|
onUpdate({
|
||||||
|
index,
|
||||||
|
title: ev.currentTarget.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{(value !== "" || title !== "") && (
|
||||||
|
<button
|
||||||
|
class="button is-small inline-btn"
|
||||||
|
onClick={() => {
|
||||||
|
onUpdate({
|
||||||
|
index,
|
||||||
|
inline: !inline,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span class="is-sr-only">Toggle field inline</span>
|
||||||
|
<i class="fas fa-arrows-h"></i>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label class="is-sr-only" for="embedFieldValue">
|
||||||
|
Field Value
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
class="discord-field-value field-input message-input autoresize "
|
||||||
|
placeholder="Field Value..."
|
||||||
|
maxlength={1024}
|
||||||
|
name="embed_field_value[]"
|
||||||
|
rows={1}
|
||||||
|
value={value}
|
||||||
|
onInput={(ev) =>
|
||||||
|
onUpdate({
|
||||||
|
index,
|
||||||
|
value: ev.currentTarget.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
37
src/components/Reminder/Embed/Fields/index.tsx
Normal file
37
src/components/Reminder/Embed/Fields/index.tsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { useReminder } from "../../ReminderContext";
|
||||||
|
import { Field } from "./Field";
|
||||||
|
|
||||||
|
export const Fields = () => {
|
||||||
|
const [{ embed_fields }, setReminder] = useReminder();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class={"embed-multifield-box"}>
|
||||||
|
{[...embed_fields, { value: "", title: "", inline: true }].map((field, index) => (
|
||||||
|
<Field
|
||||||
|
{...field}
|
||||||
|
index={index}
|
||||||
|
onUpdate={({ index, ...props }) => {
|
||||||
|
setReminder((reminder) => ({
|
||||||
|
...reminder,
|
||||||
|
embed_fields: [
|
||||||
|
...reminder.embed_fields,
|
||||||
|
{ value: "", title: "", inline: true },
|
||||||
|
]
|
||||||
|
.map((f, i) => {
|
||||||
|
if (i === index) {
|
||||||
|
return {
|
||||||
|
...f,
|
||||||
|
...props,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return f;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.filter((f) => f.value || f.title),
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
></Field>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -3,6 +3,7 @@ import { Title } from "./Title";
|
|||||||
import { Description } from "./Description";
|
import { Description } from "./Description";
|
||||||
import { Footer } from "./Footer";
|
import { Footer } from "./Footer";
|
||||||
import { Color } from "./Color";
|
import { Color } from "./Color";
|
||||||
|
import { Fields } from "./Fields";
|
||||||
import { Reminder } from "../../../api";
|
import { Reminder } from "../../../api";
|
||||||
import { ImagePicker } from "../ImagePicker";
|
import { ImagePicker } from "../ImagePicker";
|
||||||
import { useReminder } from "../ReminderContext";
|
import { useReminder } from "../ReminderContext";
|
||||||
@ -52,40 +53,10 @@ export const Embed = () => {
|
|||||||
embed_description: description,
|
embed_description: description,
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
></Description>
|
/>
|
||||||
<br></br>
|
<br />
|
||||||
|
|
||||||
<div class="embed-multifield-box">
|
<Fields />
|
||||||
<div data-inlined="1" class="embed-field-box">
|
|
||||||
<label class="is-sr-only" for="embedFieldTitle">
|
|
||||||
Field Title
|
|
||||||
</label>
|
|
||||||
<div class="is-flex">
|
|
||||||
<textarea
|
|
||||||
class="discord-field-title field-input message-input autoresize"
|
|
||||||
placeholder="Field Title..."
|
|
||||||
rows={1}
|
|
||||||
maxlength={256}
|
|
||||||
name="embed_field_title[]"
|
|
||||||
></textarea>
|
|
||||||
<button class="button is-small inline-btn">
|
|
||||||
<span class="is-sr-only">Toggle field inline</span>
|
|
||||||
<i class="fas fa-arrows-h"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label class="is-sr-only" for="embedFieldValue">
|
|
||||||
Field Value
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
class="discord-field-value field-input message-input autoresize "
|
|
||||||
placeholder="Field Value..."
|
|
||||||
maxlength={1024}
|
|
||||||
name="embed_field_value[]"
|
|
||||||
rows={1}
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="b">
|
<div class="b">
|
||||||
@ -95,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>
|
||||||
@ -106,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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { useEffect, useState } from "preact/hooks";
|
import { useCallback, useEffect, useState } from "preact/hooks";
|
||||||
import { useReminder } from "./ReminderContext";
|
import { useReminder } from "./ReminderContext";
|
||||||
|
|
||||||
function divmod(a: number, b: number) {
|
function divmod(a: number, b: number) {
|
||||||
@ -45,6 +45,10 @@ export const IntervalSelector = ({
|
|||||||
}
|
}
|
||||||
}, [seconds, minutes, hours, days, months]);
|
}, [seconds, minutes, hours, days, months]);
|
||||||
|
|
||||||
|
const placeholder = useCallback(() => {
|
||||||
|
return seconds || minutes || hours || days || months ? "0" : "";
|
||||||
|
}, [seconds, minutes, hours, days, months]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="control intervalSelector">
|
<div class="control intervalSelector">
|
||||||
<div class="input interval-group">
|
<div class="input interval-group">
|
||||||
@ -59,9 +63,12 @@ export const IntervalSelector = ({
|
|||||||
name="interval_months"
|
name="interval_months"
|
||||||
maxlength={2}
|
maxlength={2}
|
||||||
placeholder=""
|
placeholder=""
|
||||||
value={months || ""}
|
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>
|
||||||
@ -75,9 +82,12 @@ export const IntervalSelector = ({
|
|||||||
name="interval_days"
|
name="interval_days"
|
||||||
maxlength={4}
|
maxlength={4}
|
||||||
placeholder=""
|
placeholder=""
|
||||||
value={days || ""}
|
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>
|
||||||
@ -93,9 +103,12 @@ export const IntervalSelector = ({
|
|||||||
name="interval_hours"
|
name="interval_hours"
|
||||||
maxlength={2}
|
maxlength={2}
|
||||||
placeholder="HH"
|
placeholder="HH"
|
||||||
value={hours || ""}
|
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>
|
||||||
:
|
:
|
||||||
@ -109,9 +122,12 @@ export const IntervalSelector = ({
|
|||||||
name="interval_minutes"
|
name="interval_minutes"
|
||||||
maxlength={2}
|
maxlength={2}
|
||||||
placeholder="MM"
|
placeholder="MM"
|
||||||
value={minutes || ""}
|
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>
|
||||||
:
|
:
|
||||||
@ -125,9 +141,12 @@ export const IntervalSelector = ({
|
|||||||
name="interval_seconds"
|
name="interval_seconds"
|
||||||
maxlength={2}
|
maxlength={2}
|
||||||
placeholder="SS"
|
placeholder="SS"
|
||||||
value={seconds || ""}
|
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>
|
||||||
|
|||||||
@ -1,9 +1,11 @@
|
|||||||
import { useState } from "preact/hooks";
|
import { useState } from "preact/hooks";
|
||||||
import { Modal } from "../Modal";
|
import { Modal } from "../Modal";
|
||||||
import { useQuery } from "react-query";
|
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||||
import { fetchGuildTemplates } from "../../api";
|
import { deleteGuildTemplate, fetchGuildTemplates } from "../../api";
|
||||||
import { useParams } from "wouter";
|
import { useParams } from "wouter";
|
||||||
import { useReminder } from "./ReminderContext";
|
import { useReminder } from "./ReminderContext";
|
||||||
|
import { useFlash } from "../App/FlashContext";
|
||||||
|
import { ICON_FLASH_TIME } from "../../consts";
|
||||||
|
|
||||||
export const LoadTemplate = () => {
|
export const LoadTemplate = () => {
|
||||||
const [modalOpen, setModalOpen] = useState(false);
|
const [modalOpen, setModalOpen] = useState(false);
|
||||||
@ -26,9 +28,21 @@ export const LoadTemplate = () => {
|
|||||||
const LoadTemplateModal = ({ setModalOpen }) => {
|
const LoadTemplateModal = ({ setModalOpen }) => {
|
||||||
const { guild } = useParams();
|
const { guild } = useParams();
|
||||||
const [reminder, setReminder] = useReminder();
|
const [reminder, setReminder] = useReminder();
|
||||||
const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
|
|
||||||
|
|
||||||
const [selected, setSelected] = useState(null);
|
const [selected, setSelected] = useState(null);
|
||||||
|
const flash = useFlash();
|
||||||
|
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
|
||||||
|
const mutation = useMutation({
|
||||||
|
...deleteGuildTemplate(guild),
|
||||||
|
onSuccess: () => {
|
||||||
|
flash({ message: "Template deleted", type: "success" });
|
||||||
|
queryClient.invalidateQueries({
|
||||||
|
queryKey: ["GUILD_TEMPLATES", guild],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal setModalOpen={setModalOpen} title={"Load Template"}>
|
<Modal setModalOpen={setModalOpen} title={"Load Template"}>
|
||||||
@ -39,6 +53,7 @@ const LoadTemplateModal = ({ setModalOpen }) => {
|
|||||||
onChange={(ev) => {
|
onChange={(ev) => {
|
||||||
setSelected(ev.currentTarget.value);
|
setSelected(ev.currentTarget.value);
|
||||||
}}
|
}}
|
||||||
|
disabled={mutation.isLoading}
|
||||||
>
|
>
|
||||||
<option disabled={true} selected={true}>
|
<option disabled={true} selected={true}>
|
||||||
Choose template...
|
Choose template...
|
||||||
@ -58,17 +73,39 @@ const LoadTemplateModal = ({ setModalOpen }) => {
|
|||||||
<button
|
<button
|
||||||
class="button is-success close-modal"
|
class="button is-success close-modal"
|
||||||
id="load-template"
|
id="load-template"
|
||||||
|
style={{ margin: "2px" }}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
const template = templates.find(
|
||||||
|
(template) => template.id.toString() === selected,
|
||||||
|
);
|
||||||
|
|
||||||
setReminder((reminder) => ({
|
setReminder((reminder) => ({
|
||||||
...reminder,
|
...reminder,
|
||||||
// todo this probably needs to exclude some things
|
...template,
|
||||||
...templates.find((template) => template.id === selected),
|
// drop the template's ID
|
||||||
|
id: undefined,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
flash({ message: "Template loaded", type: "success" });
|
||||||
|
setModalOpen(false);
|
||||||
}}
|
}}
|
||||||
|
disabled={mutation.isLoading}
|
||||||
>
|
>
|
||||||
Load Template
|
Load Template
|
||||||
</button>
|
</button>
|
||||||
<button class="button is-danger" id="delete-template">
|
<button
|
||||||
|
class="button is-danger"
|
||||||
|
id="delete-template"
|
||||||
|
style={{ margin: "2px" }}
|
||||||
|
onClick={() => {
|
||||||
|
const template = templates.find(
|
||||||
|
(template) => template.id.toString() === selected,
|
||||||
|
);
|
||||||
|
|
||||||
|
mutation.mutate(template);
|
||||||
|
}}
|
||||||
|
disabled={mutation.isLoading}
|
||||||
|
>
|
||||||
Delete
|
Delete
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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) => ({
|
||||||
|
|||||||
@ -4,11 +4,16 @@ import { IntervalSelector } from "./IntervalSelector";
|
|||||||
import { useQuery } from "react-query";
|
import { useQuery } from "react-query";
|
||||||
import { fetchUserInfo } from "../../api";
|
import { fetchUserInfo } from "../../api";
|
||||||
import { useReminder } from "./ReminderContext";
|
import { useReminder } from "./ReminderContext";
|
||||||
|
import { Attachment } from "./Attachment";
|
||||||
|
import { TTS } from "./TTS";
|
||||||
|
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());
|
||||||
|
|
||||||
const [reminder, setReminder] = useReminder();
|
const [reminder, setReminder] = useReminder();
|
||||||
|
const [timezone] = useTimezone();
|
||||||
|
|
||||||
if (!userFetched) {
|
if (!userFetched) {
|
||||||
return <></>;
|
return <></>;
|
||||||
@ -37,19 +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.toLocal().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>
|
||||||
@ -96,16 +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"
|
setReminder((reminder) => ({
|
||||||
name="expiration"
|
...reminder,
|
||||||
value={
|
expires: time,
|
||||||
reminder.expires !== null &&
|
}));
|
||||||
reminder.expires.toFormat("yyyy-LL-dd'T'HH:mm:ss")
|
}}
|
||||||
}
|
/>
|
||||||
></input>
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -113,24 +113,10 @@ export const Settings = () => {
|
|||||||
|
|
||||||
<div class="columns is-mobile tts-row">
|
<div class="columns is-mobile tts-row">
|
||||||
<div class="column has-text-centered">
|
<div class="column has-text-centered">
|
||||||
<div class="is-boxed">
|
<TTS />
|
||||||
<label class="label">
|
|
||||||
Enable TTS <input type="checkbox" name="tts"></input>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="column has-text-centered">
|
<div class="column has-text-centered">
|
||||||
<div class="file is-small is-boxed">
|
<Attachment />
|
||||||
<label class="file-label">
|
|
||||||
<input class="file-input" type="file" name="attachment"></input>
|
|
||||||
<span class="file-cta">
|
|
||||||
<span class="file-label">Add Attachment</span>
|
|
||||||
<span class="file-icon">
|
|
||||||
<i class="fas fa-upload"></i>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
24
src/components/Reminder/TTS.tsx
Normal file
24
src/components/Reminder/TTS.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { useReminder } from "./ReminderContext";
|
||||||
|
|
||||||
|
export const TTS = () => {
|
||||||
|
const [{ tts }, setReminder] = useReminder();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="is-boxed">
|
||||||
|
<label class="label">
|
||||||
|
Enable TTS{" "}
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name="tts"
|
||||||
|
checked={tts}
|
||||||
|
onInput={(ev) => {
|
||||||
|
setReminder((reminder) => ({
|
||||||
|
...reminder,
|
||||||
|
tts: ev.currentTarget.checked,
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
></input>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
208
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">
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
import { DateTime } from "luxon";
|
import { DateTime, SystemZone } from "luxon";
|
||||||
import { useQuery } from "react-query";
|
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||||
import { fetchUserInfo } from "../../api";
|
import { fetchUserInfo, patchUserInfo } from "../../api";
|
||||||
import { Modal } from "../Modal";
|
import { Modal } from "../Modal";
|
||||||
import { useState } from "preact/hooks";
|
import { useState } from "preact/hooks";
|
||||||
|
import { useTimezone } from "../App/TimezoneProvider";
|
||||||
|
|
||||||
type DisplayProps = {
|
type DisplayProps = {
|
||||||
timezone: string;
|
timezone: string;
|
||||||
@ -51,20 +52,27 @@ export const TimezonePicker = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const TimezoneModal = ({ setModalOpen }) => {
|
const TimezoneModal = ({ setModalOpen }) => {
|
||||||
const browserTimezone = DateTime.now().zone.name;
|
const browserTimezone = DateTime.now().zoneName;
|
||||||
|
const [selectedZone, setSelectedZone] = useTimezone();
|
||||||
|
|
||||||
|
const queryClient = useQueryClient();
|
||||||
const { isLoading, isError, data } = useQuery(fetchUserInfo());
|
const { isLoading, isError, data } = useQuery(fetchUserInfo());
|
||||||
|
const userInfoMutation = useMutation({
|
||||||
|
...patchUserInfo(),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries(["USER_INFO"]);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal title={"Timezone"} setModalOpen={setModalOpen}>
|
<Modal title={"Timezone"} setModalOpen={setModalOpen}>
|
||||||
<p>
|
<p>
|
||||||
Your configured timezone is:{" "}
|
Your configured timezone is:{" "}
|
||||||
<TimezoneDisplay timezone={browserTimezone}></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:{" "}
|
||||||
@ -78,19 +86,46 @@ const TimezoneModal = ({ setModalOpen }) => {
|
|||||||
</p>
|
</p>
|
||||||
<br></br>
|
<br></br>
|
||||||
<div class="has-text-centered">
|
<div class="has-text-centered">
|
||||||
<button class="button is-success close-modal" id="set-browser-timezone">
|
<button
|
||||||
|
class="button is-success"
|
||||||
|
style={{
|
||||||
|
margin: "2px",
|
||||||
|
}}
|
||||||
|
id="set-browser-timezone"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedZone(browserTimezone);
|
||||||
|
}}
|
||||||
|
>
|
||||||
<span>Use Browser Timezone</span>{" "}
|
<span>Use Browser Timezone</span>{" "}
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<i class="fab fa-firefox-browser"></i>
|
<i class="fab fa-firefox-browser"></i>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="button is-link close-modal" id="set-bot-timezone">
|
<button
|
||||||
|
class="button is-success"
|
||||||
|
id="set-bot-timezone"
|
||||||
|
style={{
|
||||||
|
margin: "2px",
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedZone(data.timezone);
|
||||||
|
}}
|
||||||
|
>
|
||||||
<span>Use Bot Timezone</span>{" "}
|
<span>Use Bot Timezone</span>{" "}
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<i class="fab fa-discord"></i>
|
<i class="fab fa-discord"></i>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="button is-warning close-modal" id="update-bot-timezone">
|
<button
|
||||||
|
class="button is-warning"
|
||||||
|
id="update-bot-timezone"
|
||||||
|
style={{
|
||||||
|
margin: "2px",
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
userInfoMutation.mutate(browserTimezone);
|
||||||
|
}}
|
||||||
|
>
|
||||||
Set Bot Timezone
|
Set Bot Timezone
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user