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
|
||||
*.sln
|
||||
*.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
|
||||
|
||||
1. Download the parent repo: https://gitea.jellypro.xyz/jude/reminder-bot
|
||||
2. Initialise the submodules
|
||||
3. Run both `npm start` and `cargo run`
|
||||
2. Initialise the submodules: `git pull --recurse-submodules`
|
||||
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">
|
||||
</head>
|
||||
<body>
|
||||
<nav
|
||||
class="navbar is-spaced is-size-4 is-hidden-desktop dashboard-navbar"
|
||||
role="navigation"
|
||||
aria-label="main navigation"
|
||||
>
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<figure class="image">
|
||||
<img width="28px" height="28px" src="/static/img/logo_nobg.webp" alt="Reminder Bot Logo">
|
||||
</figure>
|
||||
</a>
|
||||
|
||||
<p class="navbar-item pageTitle"></p>
|
||||
|
||||
<a
|
||||
role="button"
|
||||
class="dashboard-burger navbar-burger is-right"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="mobileSidebar"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
|
||||
101
package-lock.json
generated
101
package-lock.json
generated
@ -6,7 +6,6 @@
|
||||
"": {
|
||||
"name": "example",
|
||||
"dependencies": {
|
||||
"air-datepicker": "^3.4.0",
|
||||
"axios": "^1.5.1",
|
||||
"bulma": "^0.9.4",
|
||||
"luxon": "^3.4.3",
|
||||
@ -22,6 +21,7 @@
|
||||
"eslint": "^8.50.0",
|
||||
"eslint-config-preact": "^1.3.0",
|
||||
"prettier": "^3.0.3",
|
||||
"react-datepicker": "^4.21.0",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^4.3.2"
|
||||
}
|
||||
@ -1047,6 +1047,16 @@
|
||||
"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": {
|
||||
"version": "2.6.0",
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"version": "6.12.6",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||
@ -1726,6 +1731,12 @@
|
||||
"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": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
@ -1777,6 +1788,22 @@
|
||||
"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": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||
@ -3920,6 +3947,24 @@
|
||||
"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": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
@ -3933,12 +3978,47 @@
|
||||
"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": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"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": {
|
||||
"version": "3.39.3",
|
||||
"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": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "vite build --watch --mode development",
|
||||
"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": {
|
||||
"air-datepicker": "^3.4.0",
|
||||
"axios": "^1.5.1",
|
||||
"bulma": "^0.9.4",
|
||||
"luxon": "^3.4.3",
|
||||
@ -24,6 +24,7 @@
|
||||
"eslint": "^8.50.0",
|
||||
"eslint-config-preact": "^1.3.0",
|
||||
"prettier": "^3.0.3",
|
||||
"react-datepicker": "^4.21.0",
|
||||
"typescript": "^5.2.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 = () => ({
|
||||
mutationFn: (user: UserInfo) => axios.patch(`/dashboard/api/user`, user),
|
||||
mutationFn: (timezone: string) => axios.patch(`/dashboard/api/user`, { timezone }),
|
||||
});
|
||||
|
||||
export const fetchUserGuilds = () => ({
|
||||
@ -178,3 +178,22 @@ export const fetchGuildTemplates = (guild: string) => ({
|
||||
>,
|
||||
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,11 +4,13 @@ import { Route, Router, Switch } from "wouter";
|
||||
import { Welcome } from "../Welcome";
|
||||
import { Guild } from "../Guild";
|
||||
import { FlashProvider } from "./FlashProvider";
|
||||
import { TimezoneProvider } from "./TimezoneProvider";
|
||||
|
||||
export function App() {
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
return (
|
||||
<TimezoneProvider>
|
||||
<FlashProvider>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Router base={"/dashboard"}>
|
||||
@ -26,5 +28,6 @@ export function App() {
|
||||
</Router>
|
||||
</QueryClientProvider>
|
||||
</FlashProvider>
|
||||
</TimezoneProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,19 +1,32 @@
|
||||
import { useParams } from "wouter";
|
||||
import { useQuery } from "react-query";
|
||||
import { fetchGuildReminders } from "../../api";
|
||||
import { fetchGuildChannels, fetchGuildReminders } from "../../api";
|
||||
import { EditReminder } from "../Reminder/EditReminder";
|
||||
import { CreateReminder } from "../Reminder/CreateReminder";
|
||||
import { useState } from "preact/hooks";
|
||||
|
||||
enum Sort {
|
||||
Time = "time",
|
||||
Name = "name",
|
||||
Channel = "channel",
|
||||
}
|
||||
|
||||
export const GuildReminders = () => {
|
||||
const { guild } = useParams();
|
||||
|
||||
const { isSuccess, data: guildReminders } = useQuery(fetchGuildReminders(guild));
|
||||
const { data: channels } = useQuery(fetchGuildChannels(guild));
|
||||
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [sort, setSort] = useState(Sort.Time);
|
||||
|
||||
let prevReminder = null;
|
||||
|
||||
return (
|
||||
<div style={{ margin: "0 12px 12px 12px" }}>
|
||||
<strong>Create Reminder</strong>
|
||||
<div id={"reminderCreator"}>
|
||||
<CreateReminder></CreateReminder>
|
||||
<CreateReminder />
|
||||
</div>
|
||||
<br></br>
|
||||
<div class={"field"}>
|
||||
@ -24,12 +37,21 @@ export const GuildReminders = () => {
|
||||
<div class={"column is-narrow"}>
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-small">
|
||||
<select id="orderBy">
|
||||
<option value="time" selected>
|
||||
<select
|
||||
id="orderBy"
|
||||
onInput={(ev) => {
|
||||
setSort(ev.currentTarget.value as Sort);
|
||||
}}
|
||||
>
|
||||
<option value={Sort.Time} selected={sort == Sort.Time}>
|
||||
Time
|
||||
</option>
|
||||
<option value="name">Name</option>
|
||||
<option value="channel">Channel</option>
|
||||
<option value={Sort.Name} selected={sort == Sort.Name}>
|
||||
Name
|
||||
</option>
|
||||
<option value={Sort.Channel} selected={sort == Sort.Channel}>
|
||||
Channel
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="icon is-small is-left">
|
||||
@ -40,7 +62,16 @@ export const GuildReminders = () => {
|
||||
<div class={"column is-narrow"}>
|
||||
<div class="control has-icons-left">
|
||||
<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="expand">Expand All</option>
|
||||
<option value="collapse">Collapse All</option>
|
||||
@ -56,9 +87,43 @@ export const GuildReminders = () => {
|
||||
|
||||
<div id={"guildReminders"}>
|
||||
{isSuccess &&
|
||||
guildReminders.map((reminder) => (
|
||||
<EditReminder reminder={reminder}></EditReminder>
|
||||
))}
|
||||
guildReminders
|
||||
.sort((r1, r2) => {
|
||||
if (sort === Sort.Time) {
|
||||
return r1.utc_time > r2.utc_time ? 1 : -1;
|
||||
} else if (sort === Sort.Name) {
|
||||
return r1.name > r2.name ? 1 : -1;
|
||||
} else {
|
||||
return r1.channel > r2.channel ? 1 : -1;
|
||||
}
|
||||
})
|
||||
.map((reminder) => {
|
||||
let breaker = <></>;
|
||||
if (sort === Sort.Channel && channels) {
|
||||
if (
|
||||
prevReminder === null ||
|
||||
prevReminder.channel !== reminder.channel
|
||||
) {
|
||||
const channel = channels.find(
|
||||
(ch) => ch.id === reminder.channel,
|
||||
);
|
||||
breaker = <div class={"channel-tag"}>#{channel.name}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
prevReminder = reminder;
|
||||
|
||||
return (
|
||||
<>
|
||||
{breaker}
|
||||
<EditReminder
|
||||
key={reminder.uid}
|
||||
reminder={reminder}
|
||||
globalCollapse={collapsed}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -3,6 +3,8 @@ import { fetchGuildInfo } from "../../api";
|
||||
import { useParams } from "wouter";
|
||||
import { GuildReminders } from "./GuildReminders";
|
||||
import { GuildError } from "./GuildError";
|
||||
import { createPortal } from "preact/compat";
|
||||
import { Import } from "../Import";
|
||||
|
||||
export const Guild = () => {
|
||||
const { guild } = useParams();
|
||||
@ -13,6 +15,13 @@ export const Guild = () => {
|
||||
} else if (guildInfo.error) {
|
||||
return <GuildError />;
|
||||
} 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 { createPortal } from "preact/compat";
|
||||
|
||||
type Props = {
|
||||
setModalOpen: (open: boolean) => never;
|
||||
title: string;
|
||||
title: string | JSX.Element;
|
||||
onSubmitText?: string;
|
||||
onSubmit?: () => void;
|
||||
children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);
|
||||
};
|
||||
|
||||
export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }: Props) => {
|
||||
return (
|
||||
const body = document.querySelector("body");
|
||||
|
||||
return createPortal(
|
||||
<div class="modal is-active">
|
||||
<div
|
||||
class="modal-background"
|
||||
@ -52,6 +55,7 @@ export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }:
|
||||
setModalOpen(false);
|
||||
}}
|
||||
></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 { useReminder } from "../ReminderContext";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { postGuildReminder } from "../../../api";
|
||||
import { postGuildReminder, postGuildTemplate } from "../../../api";
|
||||
import { useParams } from "wouter";
|
||||
import { useState } from "preact/hooks";
|
||||
import { ICON_FLASH_TIME } from "../../../consts";
|
||||
@ -12,6 +12,7 @@ export const CreateButtonRow = () => {
|
||||
const [reminder] = useReminder();
|
||||
|
||||
const [recentlyCreated, setRecentlyCreated] = useState(false);
|
||||
const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false);
|
||||
|
||||
const flash = useFlash();
|
||||
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 (
|
||||
<div class="button-row">
|
||||
<div class="button-row-reminder">
|
||||
@ -66,11 +91,26 @@ export const CreateButtonRow = () => {
|
||||
</div>
|
||||
<div class="button-row-template">
|
||||
<div>
|
||||
<button class="button is-success is-outlined">
|
||||
<button
|
||||
class="button is-success is-outlined"
|
||||
onClick={() => {
|
||||
templateMutation.mutate(reminder);
|
||||
}}
|
||||
>
|
||||
<span>Create Template</span>{" "}
|
||||
{templateMutation.isLoading ? (
|
||||
<span class="icon">
|
||||
<i class="fas fa-spin fa-cog"></i>
|
||||
</span>
|
||||
) : templateRecentlyCreated ? (
|
||||
<span class="icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</span>
|
||||
) : (
|
||||
<span class="icon">
|
||||
<i class="fas fa-file-spreadsheet"></i>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useState } from "preact/hooks";
|
||||
import { useRef, useState } from "preact/hooks";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { patchGuildReminder } from "../../../api";
|
||||
import { useParams } from "wouter";
|
||||
@ -9,21 +9,40 @@ import { useFlash } from "../../App/FlashContext";
|
||||
|
||||
export const EditButtonRow = () => {
|
||||
const { guild } = useParams();
|
||||
const [reminder] = useReminder();
|
||||
const [reminder, setReminder] = useReminder();
|
||||
|
||||
const [recentlySaved, setRecentlySaved] = useState(false);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const iconFlashTimeout = useRef(0);
|
||||
|
||||
const flash = useFlash();
|
||||
const mutation = useMutation({
|
||||
...patchGuildReminder(guild),
|
||||
onSuccess: () => {
|
||||
onSuccess: (response) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["GUILD_REMINDERS", guild],
|
||||
});
|
||||
|
||||
if (iconFlashTimeout.current !== null) {
|
||||
clearTimeout(iconFlashTimeout.current);
|
||||
}
|
||||
|
||||
if (response.data.errors.length > 0) {
|
||||
setRecentlySaved(false);
|
||||
|
||||
for (const error of response.data.errors) {
|
||||
flash({ message: error, type: "error" });
|
||||
}
|
||||
} else {
|
||||
setRecentlySaved(true);
|
||||
setTimeout(() => {
|
||||
|
||||
iconFlashTimeout.current = setTimeout(() => {
|
||||
setRecentlySaved(false);
|
||||
}, ICON_FLASH_TIME);
|
||||
|
||||
setReminder(response.data.reminder);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Reminder } from "../../api";
|
||||
import { useState } from "preact/hooks";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import { EditButtonRow } from "./ButtonRow/EditButtonRow";
|
||||
import { Message } from "./Message";
|
||||
import { Settings } from "./Settings";
|
||||
@ -8,13 +8,24 @@ import { TopBar } from "./TopBar";
|
||||
|
||||
type Props = {
|
||||
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 [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setCollapsed(globalCollapse);
|
||||
}, [globalCollapse]);
|
||||
|
||||
// Reminder updated from web response
|
||||
if (propReminder !== initialReminder) {
|
||||
setReminder(initialReminder);
|
||||
setPropReminder(initialReminder);
|
||||
}
|
||||
|
||||
return (
|
||||
<ReminderContext.Provider value={[reminder, setReminder]}>
|
||||
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
|
||||
|
||||
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 { Footer } from "./Footer";
|
||||
import { Color } from "./Color";
|
||||
import { Fields } from "./Fields";
|
||||
import { Reminder } from "../../../api";
|
||||
import { ImagePicker } from "../ImagePicker";
|
||||
import { useReminder } from "../ReminderContext";
|
||||
@ -52,40 +53,10 @@ export const Embed = () => {
|
||||
embed_description: description,
|
||||
}))
|
||||
}
|
||||
></Description>
|
||||
<br></br>
|
||||
/>
|
||||
<br />
|
||||
|
||||
<div class="embed-multifield-box">
|
||||
<div data-inlined="1" class="embed-field-box">
|
||||
<label class="is-sr-only" for="embedFieldTitle">
|
||||
Field Title
|
||||
</label>
|
||||
<div class="is-flex">
|
||||
<textarea
|
||||
class="discord-field-title field-input message-input autoresize"
|
||||
placeholder="Field Title..."
|
||||
rows={1}
|
||||
maxlength={256}
|
||||
name="embed_field_title[]"
|
||||
></textarea>
|
||||
<button class="button is-small inline-btn">
|
||||
<span class="is-sr-only">Toggle field inline</span>
|
||||
<i class="fas fa-arrows-h"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label class="is-sr-only" for="embedFieldValue">
|
||||
Field Value
|
||||
</label>
|
||||
<textarea
|
||||
class="discord-field-value field-input message-input autoresize "
|
||||
placeholder="Field Value..."
|
||||
maxlength={1024}
|
||||
name="embed_field_value[]"
|
||||
rows={1}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<Fields />
|
||||
</div>
|
||||
|
||||
<div class="b">
|
||||
@ -95,7 +66,7 @@ export const Embed = () => {
|
||||
url={reminder.embed_thumbnail_url}
|
||||
alt="Square thumbnail embedded image"
|
||||
setImage={() => {}}
|
||||
></ImagePicker>
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -106,14 +77,14 @@ export const Embed = () => {
|
||||
url={reminder.embed_image_url}
|
||||
alt="Large embedded image"
|
||||
setImage={() => {}}
|
||||
></ImagePicker>
|
||||
/>
|
||||
</p>
|
||||
|
||||
<Footer
|
||||
footer={reminder.embed_footer}
|
||||
icon={reminder.embed_footer_url}
|
||||
setReminder={setReminder}
|
||||
></Footer>
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import { useCallback, useEffect, useState } from "preact/hooks";
|
||||
import { useReminder } from "./ReminderContext";
|
||||
|
||||
function divmod(a: number, b: number) {
|
||||
@ -45,6 +45,10 @@ export const IntervalSelector = ({
|
||||
}
|
||||
}, [seconds, minutes, hours, days, months]);
|
||||
|
||||
const placeholder = useCallback(() => {
|
||||
return seconds || minutes || hours || days || months ? "0" : "";
|
||||
}, [seconds, minutes, hours, days, months]);
|
||||
|
||||
return (
|
||||
<div class="control intervalSelector">
|
||||
<div class="input interval-group">
|
||||
@ -59,9 +63,12 @@ export const IntervalSelector = ({
|
||||
name="interval_months"
|
||||
maxlength={2}
|
||||
placeholder=""
|
||||
value={months || ""}
|
||||
value={months || placeholder()}
|
||||
onInput={(ev) => {
|
||||
const value = ev.currentTarget.value;
|
||||
if (value && !isNaN(parseInt(value))) {
|
||||
setMonths(parseInt(ev.currentTarget.value));
|
||||
}
|
||||
}}
|
||||
></input>{" "}
|
||||
<span class="half-rem"></span> months, <span class="half-rem"></span>
|
||||
@ -75,9 +82,12 @@ export const IntervalSelector = ({
|
||||
name="interval_days"
|
||||
maxlength={4}
|
||||
placeholder=""
|
||||
value={days || ""}
|
||||
value={days || placeholder()}
|
||||
onInput={(ev) => {
|
||||
const value = ev.currentTarget.value;
|
||||
if (value && !isNaN(parseInt(value))) {
|
||||
setDays(parseInt(ev.currentTarget.value));
|
||||
}
|
||||
}}
|
||||
></input>{" "}
|
||||
<span class="half-rem"></span> days, <span class="half-rem"></span>
|
||||
@ -93,9 +103,12 @@ export const IntervalSelector = ({
|
||||
name="interval_hours"
|
||||
maxlength={2}
|
||||
placeholder="HH"
|
||||
value={hours || ""}
|
||||
value={hours || placeholder()}
|
||||
onInput={(ev) => {
|
||||
const value = ev.currentTarget.value;
|
||||
if (value && !isNaN(parseInt(value))) {
|
||||
setHours(parseInt(ev.currentTarget.value));
|
||||
}
|
||||
}}
|
||||
></input>
|
||||
:
|
||||
@ -109,9 +122,12 @@ export const IntervalSelector = ({
|
||||
name="interval_minutes"
|
||||
maxlength={2}
|
||||
placeholder="MM"
|
||||
value={minutes || ""}
|
||||
value={minutes || placeholder()}
|
||||
onInput={(ev) => {
|
||||
const value = ev.currentTarget.value;
|
||||
if (value && !isNaN(parseInt(value))) {
|
||||
setMinutes(parseInt(ev.currentTarget.value));
|
||||
}
|
||||
}}
|
||||
></input>
|
||||
:
|
||||
@ -125,9 +141,12 @@ export const IntervalSelector = ({
|
||||
name="interval_seconds"
|
||||
maxlength={2}
|
||||
placeholder="SS"
|
||||
value={seconds || ""}
|
||||
value={seconds || placeholder()}
|
||||
onInput={(ev) => {
|
||||
const value = ev.currentTarget.value;
|
||||
if (value && !isNaN(parseInt(value))) {
|
||||
setSeconds(parseInt(ev.currentTarget.value));
|
||||
}
|
||||
}}
|
||||
></input>
|
||||
</label>
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import { useState } from "preact/hooks";
|
||||
import { Modal } from "../Modal";
|
||||
import { useQuery } from "react-query";
|
||||
import { fetchGuildTemplates } from "../../api";
|
||||
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||
import { deleteGuildTemplate, fetchGuildTemplates } from "../../api";
|
||||
import { useParams } from "wouter";
|
||||
import { useReminder } from "./ReminderContext";
|
||||
import { useFlash } from "../App/FlashContext";
|
||||
import { ICON_FLASH_TIME } from "../../consts";
|
||||
|
||||
export const LoadTemplate = () => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
@ -26,9 +28,21 @@ export const LoadTemplate = () => {
|
||||
const LoadTemplateModal = ({ setModalOpen }) => {
|
||||
const { guild } = useParams();
|
||||
const [reminder, setReminder] = useReminder();
|
||||
const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
|
||||
|
||||
const [selected, setSelected] = useState(null);
|
||||
const flash = useFlash();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
|
||||
const mutation = useMutation({
|
||||
...deleteGuildTemplate(guild),
|
||||
onSuccess: () => {
|
||||
flash({ message: "Template deleted", type: "success" });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["GUILD_TEMPLATES", guild],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Modal setModalOpen={setModalOpen} title={"Load Template"}>
|
||||
@ -39,6 +53,7 @@ const LoadTemplateModal = ({ setModalOpen }) => {
|
||||
onChange={(ev) => {
|
||||
setSelected(ev.currentTarget.value);
|
||||
}}
|
||||
disabled={mutation.isLoading}
|
||||
>
|
||||
<option disabled={true} selected={true}>
|
||||
Choose template...
|
||||
@ -58,17 +73,39 @@ const LoadTemplateModal = ({ setModalOpen }) => {
|
||||
<button
|
||||
class="button is-success close-modal"
|
||||
id="load-template"
|
||||
style={{ margin: "2px" }}
|
||||
onClick={() => {
|
||||
const template = templates.find(
|
||||
(template) => template.id.toString() === selected,
|
||||
);
|
||||
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
// todo this probably needs to exclude some things
|
||||
...templates.find((template) => template.id === selected),
|
||||
...template,
|
||||
// drop the template's ID
|
||||
id: undefined,
|
||||
}));
|
||||
|
||||
flash({ message: "Template loaded", type: "success" });
|
||||
setModalOpen(false);
|
||||
}}
|
||||
disabled={mutation.isLoading}
|
||||
>
|
||||
Load Template
|
||||
</button>
|
||||
<button class="button is-danger" id="delete-template">
|
||||
<button
|
||||
class="button is-danger"
|
||||
id="delete-template"
|
||||
style={{ margin: "2px" }}
|
||||
onClick={() => {
|
||||
const template = templates.find(
|
||||
(template) => template.id.toString() === selected,
|
||||
);
|
||||
|
||||
mutation.mutate(template);
|
||||
}}
|
||||
disabled={mutation.isLoading}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -14,7 +14,7 @@ export const Message = () => {
|
||||
<p class="image is-32x32 customizable">
|
||||
<ImagePicker
|
||||
class="is-rounded avatar"
|
||||
url={reminder.avatar}
|
||||
url={reminder.avatar || "/static/img/icon.png"}
|
||||
alt="Image for discord avatar"
|
||||
setImage={(url: string) => {
|
||||
setReminder((reminder) => ({
|
||||
|
||||
@ -4,11 +4,16 @@ import { IntervalSelector } from "./IntervalSelector";
|
||||
import { useQuery } from "react-query";
|
||||
import { fetchUserInfo } from "../../api";
|
||||
import { useReminder } from "./ReminderContext";
|
||||
import { Attachment } from "./Attachment";
|
||||
import { TTS } from "./TTS";
|
||||
import { useTimezone } from "../App/TimezoneProvider";
|
||||
import { TimeInput } from "./TimeInput";
|
||||
|
||||
export const Settings = () => {
|
||||
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
|
||||
|
||||
const [reminder, setReminder] = useReminder();
|
||||
const [timezone] = useTimezone();
|
||||
|
||||
if (!userFetched) {
|
||||
return <></>;
|
||||
@ -37,19 +42,15 @@ export const Settings = () => {
|
||||
<div class="control">
|
||||
<label class="label collapses">
|
||||
Time*
|
||||
<input
|
||||
class="input"
|
||||
type="datetime-local"
|
||||
step="1"
|
||||
name="time"
|
||||
value={reminder.utc_time.toLocal().toFormat("yyyy-LL-dd'T'HH:mm:ss")}
|
||||
onInput={(ev) => {
|
||||
<TimeInput
|
||||
defaultValue={reminder.utc_time}
|
||||
onInput={(time: DateTime) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
utc_time: DateTime.fromISO(ev.currentTarget.value).toUTC(),
|
||||
utc_time: time,
|
||||
}));
|
||||
}}
|
||||
></input>
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -96,16 +97,15 @@ export const Settings = () => {
|
||||
<div class="control">
|
||||
<label class="label">
|
||||
Expiration
|
||||
<input
|
||||
class="input"
|
||||
type="datetime-local"
|
||||
step="1"
|
||||
name="expiration"
|
||||
value={
|
||||
reminder.expires !== null &&
|
||||
reminder.expires.toFormat("yyyy-LL-dd'T'HH:mm:ss")
|
||||
}
|
||||
></input>
|
||||
<TimeInput
|
||||
defaultValue={reminder.expires}
|
||||
onInput={(time: DateTime) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
expires: time,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -113,24 +113,10 @@ export const Settings = () => {
|
||||
|
||||
<div class="columns is-mobile tts-row">
|
||||
<div class="column has-text-centered">
|
||||
<div class="is-boxed">
|
||||
<label class="label">
|
||||
Enable TTS <input type="checkbox" name="tts"></input>
|
||||
</label>
|
||||
</div>
|
||||
<TTS />
|
||||
</div>
|
||||
<div class="column has-text-centered">
|
||||
<div class="file is-small is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="attachment"></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>
|
||||
<Attachment />
|
||||
</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"
|
||||
maxlength={32}
|
||||
name="username"
|
||||
value={reminder.username}
|
||||
onInput={(ev) => {
|
||||
value={reminder.username || "Reminder"}
|
||||
onBlur={(ev) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
username: ev.currentTarget.value,
|
||||
|
||||
@ -1,7 +1,54 @@
|
||||
import { useState } from "preact/hooks";
|
||||
|
||||
export const MobileSidebar = ({ children }) => {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div class="dashboard-sidebar mobile-sidebar is-hidden-desktop" id="mobileSidebar">
|
||||
<>
|
||||
<nav
|
||||
class="navbar is-spaced is-size-4 is-hidden-desktop dashboard-navbar"
|
||||
role="navigation"
|
||||
aria-label="main navigation"
|
||||
>
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<figure class="image">
|
||||
<img
|
||||
width="28px"
|
||||
height="28px"
|
||||
src="/static/img/logo_nobg.webp"
|
||||
alt="Reminder Bot Logo"
|
||||
/>
|
||||
</figure>
|
||||
</a>
|
||||
|
||||
<p class="navbar-item pageTitle"></p>
|
||||
|
||||
<a
|
||||
role="button"
|
||||
class="dashboard-burger navbar-burger is-right"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="mobileSidebar"
|
||||
onClick={() => {
|
||||
setSidebarOpen(!sidebarOpen);
|
||||
}}
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div
|
||||
class="dashboard-sidebar mobile-sidebar is-hidden-desktop"
|
||||
id="mobileSidebar"
|
||||
style={{
|
||||
display: sidebarOpen ? "block" : "none",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -5,7 +5,6 @@ import { Brand } from "./Brand";
|
||||
import { Wave } from "./Wave";
|
||||
import { GuildEntry } from "./GuildEntry";
|
||||
import { fetchUserGuilds, GuildInfo } from "../../api";
|
||||
import { useState } from "preact/hooks";
|
||||
import { TimezonePicker } from "../TimezonePicker";
|
||||
|
||||
type ContentProps = {
|
||||
@ -18,9 +17,9 @@ const SidebarContent = ({ guilds }: ContentProps) => {
|
||||
return (
|
||||
<>
|
||||
<a href="/">
|
||||
<Brand></Brand>
|
||||
<Brand />
|
||||
</a>
|
||||
<Wave></Wave>
|
||||
<Wave />
|
||||
<aside class="menu">
|
||||
<p class="menu-label">Servers</p>
|
||||
<ul class="menu-list guildList">{guildEntries}</ul>
|
||||
@ -28,12 +27,7 @@ const SidebarContent = ({ guilds }: ContentProps) => {
|
||||
<p class="menu-label">Options</p>
|
||||
<ul class="menu-list">
|
||||
<li>
|
||||
<a class="show-modal" data-modal="dataManagerModal">
|
||||
<span class="icon">
|
||||
<i class="fas fa-exchange"></i>
|
||||
</span>{" "}
|
||||
Import/Export
|
||||
</a>
|
||||
<div id="bottom-sidebar"></div>
|
||||
<TimezonePicker />
|
||||
<a href="/login/discord/logout">
|
||||
<span class="icon">
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { DateTime } from "luxon";
|
||||
import { useQuery } from "react-query";
|
||||
import { fetchUserInfo } from "../../api";
|
||||
import { DateTime, SystemZone } from "luxon";
|
||||
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||
import { fetchUserInfo, patchUserInfo } from "../../api";
|
||||
import { Modal } from "../Modal";
|
||||
import { useState } from "preact/hooks";
|
||||
import { useTimezone } from "../App/TimezoneProvider";
|
||||
|
||||
type DisplayProps = {
|
||||
timezone: string;
|
||||
@ -51,20 +52,27 @@ export const TimezonePicker = () => {
|
||||
};
|
||||
|
||||
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 userInfoMutation = useMutation({
|
||||
...patchUserInfo(),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(["USER_INFO"]);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Modal title={"Timezone"} setModalOpen={setModalOpen}>
|
||||
<p>
|
||||
Your configured timezone is:{" "}
|
||||
<TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<TimezoneDisplay timezone={selectedZone}></TimezoneDisplay>
|
||||
<br />
|
||||
Your browser timezone is:{" "}
|
||||
<TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
|
||||
<br></br>
|
||||
<br />
|
||||
{!isError && (
|
||||
<>
|
||||
Your bot timezone is:{" "}
|
||||
@ -78,19 +86,46 @@ const TimezoneModal = ({ setModalOpen }) => {
|
||||
</p>
|
||||
<br></br>
|
||||
<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 class="icon">
|
||||
<i class="fab fa-firefox-browser"></i>
|
||||
</span>
|
||||
</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 class="icon">
|
||||
<i class="fab fa-discord"></i>
|
||||
</span>
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user