Compare commits
11 Commits
d068782596
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 5fe558ebd1 | |||
| 8b508b39c0 | |||
| 4dc821bf73 | |||
| 4fee936939 | |||
| 4c10682de8 | |||
| 85a9a872c9 | |||
| c8443340f4 | |||
| 76c8afd45f | |||
| 67ce9077b6 | |||
| 3d70be22e3 | |||
| 71e7857e9a |
3
.gitignore
vendored
3
.gitignore
vendored
@ -22,3 +22,6 @@ dist-ssr
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.deb
|
||||
reminder-dashboard/usr/share/reminder-dashboard/*
|
||||
|
||||
27
index.html
27
index.html
@ -29,33 +29,6 @@
|
||||
<link rel="stylesheet" href="/static/css/dtsel.css">
|
||||
</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",
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
"scripts": {
|
||||
"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
|
||||
@ -1,14 +1,14 @@
|
||||
import { createContext } from "preact";
|
||||
import { useContext } from "preact/compat";
|
||||
import { useState } from "preact/hooks";
|
||||
import { SystemZone } from "luxon";
|
||||
import { DateTime } from "luxon";
|
||||
|
||||
type TTimezoneContext = [string, (tz: string) => void];
|
||||
|
||||
const TimezoneContext = createContext(["UTC", () => {}] as TTimezoneContext);
|
||||
|
||||
export const TimezoneProvider = ({ children }) => {
|
||||
const [timezone, setTimezone] = useState(SystemZone.name);
|
||||
const [timezone, setTimezone] = useState(DateTime.now().zoneName);
|
||||
|
||||
return (
|
||||
<TimezoneContext.Provider value={[timezone, setTimezone]}>
|
||||
|
||||
@ -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,
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,12 +1,39 @@
|
||||
import { useReminder } from "./ReminderContext";
|
||||
|
||||
export const Attachment = () => {
|
||||
const [{ attachment, attachment_name }, setReminder] = useReminder();
|
||||
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"></input>
|
||||
<input
|
||||
class="file-input"
|
||||
type="file"
|
||||
name="attachment"
|
||||
onInput={async (ev) => {
|
||||
const input = ev.currentTarget;
|
||||
|
||||
let file = input.files[0];
|
||||
|
||||
if (file.size >= 8 * 1024 * 1024) {
|
||||
return { error: "File too large." };
|
||||
}
|
||||
|
||||
let attachment: string = await new Promise((resolve) => {
|
||||
let fileReader = new FileReader();
|
||||
fileReader.onload = () => resolve(fileReader.result as string);
|
||||
fileReader.readAsDataURL(file);
|
||||
});
|
||||
attachment = attachment.split(",")[1];
|
||||
const attachment_name = file.name;
|
||||
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
attachment,
|
||||
attachment_name,
|
||||
}));
|
||||
}}
|
||||
></input>
|
||||
<span class="file-cta">
|
||||
<span class="file-label">{attachment_name || "Add Attachment"}</span>
|
||||
<span class="file-icon">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useState } from "preact/hooks";
|
||||
import { useRef, useState } from "preact/hooks";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { 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"}>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export const Field = ({ title, value, inlined, index, onUpdate }) => {
|
||||
export const Field = ({ title, value, inline, index, onUpdate }) => {
|
||||
return (
|
||||
<div data-inlined={inlined ? "1" : "0"} class="embed-field-box" key={index}>
|
||||
<div data-inlined={inline ? "1" : "0"} class="embed-field-box" key={index}>
|
||||
<label class="is-sr-only" for="embedFieldTitle">
|
||||
Field Title
|
||||
</label>
|
||||
@ -18,19 +18,21 @@ export const Field = ({ title, value, inlined, index, onUpdate }) => {
|
||||
title: ev.currentTarget.value,
|
||||
})
|
||||
}
|
||||
></textarea>
|
||||
/>
|
||||
{(value !== "" || title !== "") && (
|
||||
<button
|
||||
class="button is-small inline-btn"
|
||||
onClick={() => {
|
||||
onUpdate({
|
||||
index,
|
||||
inlined: !inlined,
|
||||
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">
|
||||
|
||||
@ -6,7 +6,7 @@ export const Fields = () => {
|
||||
|
||||
return (
|
||||
<div class={"embed-multifield-box"}>
|
||||
{[...embed_fields, { value: "", title: "", inlined: true }].map((field, index) => (
|
||||
{[...embed_fields, { value: "", title: "", inline: true }].map((field, index) => (
|
||||
<Field
|
||||
{...field}
|
||||
index={index}
|
||||
@ -15,7 +15,7 @@ export const Fields = () => {
|
||||
...reminder,
|
||||
embed_fields: [
|
||||
...reminder.embed_fields,
|
||||
{ value: "", title: "", inlined: true },
|
||||
{ value: "", title: "", inline: true },
|
||||
]
|
||||
.map((f, i) => {
|
||||
if (i === index) {
|
||||
|
||||
@ -53,8 +53,8 @@ export const Embed = () => {
|
||||
embed_description: description,
|
||||
}))
|
||||
}
|
||||
></Description>
|
||||
<br></br>
|
||||
/>
|
||||
<br />
|
||||
|
||||
<Fields />
|
||||
</div>
|
||||
@ -66,7 +66,7 @@ export const Embed = () => {
|
||||
url={reminder.embed_thumbnail_url}
|
||||
alt="Square thumbnail embedded image"
|
||||
setImage={() => {}}
|
||||
></ImagePicker>
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -77,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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -65,7 +65,10 @@ export const IntervalSelector = ({
|
||||
placeholder=""
|
||||
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>
|
||||
@ -81,7 +84,10 @@ export const IntervalSelector = ({
|
||||
placeholder=""
|
||||
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>
|
||||
@ -99,7 +105,10 @@ export const IntervalSelector = ({
|
||||
placeholder="HH"
|
||||
value={hours || placeholder()}
|
||||
onInput={(ev) => {
|
||||
const value = ev.currentTarget.value;
|
||||
if (value && !isNaN(parseInt(value))) {
|
||||
setHours(parseInt(ev.currentTarget.value));
|
||||
}
|
||||
}}
|
||||
></input>
|
||||
:
|
||||
@ -115,7 +124,10 @@ export const IntervalSelector = ({
|
||||
placeholder="MM"
|
||||
value={minutes || placeholder()}
|
||||
onInput={(ev) => {
|
||||
const value = ev.currentTarget.value;
|
||||
if (value && !isNaN(parseInt(value))) {
|
||||
setMinutes(parseInt(ev.currentTarget.value));
|
||||
}
|
||||
}}
|
||||
></input>
|
||||
:
|
||||
@ -131,7 +143,10 @@ export const IntervalSelector = ({
|
||||
placeholder="SS"
|
||||
value={seconds || placeholder()}
|
||||
onInput={(ev) => {
|
||||
const value = ev.currentTarget.value;
|
||||
if (value && !isNaN(parseInt(value))) {
|
||||
setSeconds(parseInt(ev.currentTarget.value));
|
||||
}
|
||||
}}
|
||||
></input>
|
||||
</label>
|
||||
|
||||
@ -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) => ({
|
||||
|
||||
@ -7,6 +7,7 @@ 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());
|
||||
@ -41,21 +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
|
||||
.setZone(timezone)
|
||||
.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>
|
||||
@ -102,28 +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
|
||||
.setZone(timezone)
|
||||
.toFormat("yyyy-LL-dd'T'HH:mm:ss")
|
||||
}
|
||||
onInput={(ev) => {
|
||||
<TimeInput
|
||||
defaultValue={reminder.expires}
|
||||
onInput={(time: DateTime) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
expires: ev.currentTarget.value
|
||||
? DateTime.fromISO(
|
||||
ev.currentTarget.value,
|
||||
).toUTC()
|
||||
: null,
|
||||
expires: time,
|
||||
}));
|
||||
}}
|
||||
></input>
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
208
src/components/Reminder/TimeInput.tsx
Normal file
208
src/components/Reminder/TimeInput.tsx
Normal file
@ -0,0 +1,208 @@
|
||||
import { useEffect, useRef, useState } from "preact/hooks";
|
||||
import { DateTime } from "luxon";
|
||||
import { useFlash } from "../App/FlashContext";
|
||||
|
||||
export const TimeInput = ({ defaultValue, onInput }) => {
|
||||
const ref = useRef(null);
|
||||
|
||||
const [time, setTime] = useState(defaultValue);
|
||||
|
||||
useEffect(() => {
|
||||
onInput(time);
|
||||
}, [time]);
|
||||
|
||||
const flash = useFlash();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
class={"input"}
|
||||
onPaste={(ev) => {
|
||||
ev.preventDefault();
|
||||
const pasteValue = ev.clipboardData.getData("text/plain");
|
||||
let dt = DateTime.fromISO(pasteValue);
|
||||
|
||||
if (dt.isValid) {
|
||||
setTime(dt);
|
||||
return;
|
||||
}
|
||||
|
||||
dt = DateTime.fromSQL(pasteValue);
|
||||
|
||||
if (dt.isValid) {
|
||||
setTime(dt);
|
||||
return;
|
||||
}
|
||||
|
||||
flash({
|
||||
message: `Couldn't parse your clipboard data as a valid date-time`,
|
||||
type: "error",
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div style={{ flexGrow: "1" }}>
|
||||
<label>
|
||||
<span class="is-sr-only">Years input</span>
|
||||
<input
|
||||
style={{
|
||||
borderStyle: "none",
|
||||
fontFamily: "monospace",
|
||||
width: "calc(4ch + 4px)",
|
||||
fontSize: "1rem",
|
||||
}}
|
||||
type="text"
|
||||
pattern="\d*"
|
||||
maxlength={4}
|
||||
placeholder="YYYY"
|
||||
value={time?.year.toLocaleString("en-US", {
|
||||
minimumIntegerDigits: 4,
|
||||
useGrouping: false,
|
||||
})}
|
||||
onBlur={(ev) => {
|
||||
setTime(time.set({ year: ev.currentTarget.value }));
|
||||
}}
|
||||
></input>{" "}
|
||||
</label>
|
||||
-
|
||||
<label>
|
||||
<span class="is-sr-only">Months input</span>
|
||||
<input
|
||||
style={{
|
||||
borderStyle: "none",
|
||||
fontFamily: "monospace",
|
||||
width: "calc(2ch + 4px)",
|
||||
fontSize: "1rem",
|
||||
}}
|
||||
type="text"
|
||||
pattern="\d*"
|
||||
maxlength={2}
|
||||
placeholder="MM"
|
||||
value={time?.month.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
|
||||
onBlur={(ev) => {
|
||||
setTime(time.set({ month: ev.currentTarget.value }));
|
||||
}}
|
||||
></input>{" "}
|
||||
</label>
|
||||
-
|
||||
<label>
|
||||
<span class="is-sr-only">Days input</span>
|
||||
<input
|
||||
style={{
|
||||
borderStyle: "none",
|
||||
fontFamily: "monospace",
|
||||
width: "calc(2ch + 4px)",
|
||||
fontSize: "1rem",
|
||||
}}
|
||||
type="text"
|
||||
pattern="\d*"
|
||||
maxlength={2}
|
||||
placeholder="DD"
|
||||
value={time?.day.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
|
||||
onBlur={(ev) => {
|
||||
setTime(time.set({ day: ev.currentTarget.value }));
|
||||
}}
|
||||
></input>{" "}
|
||||
</label>
|
||||
<label style={{ marginLeft: "8px" }}>
|
||||
<span class="is-sr-only">Hours input</span>
|
||||
<input
|
||||
style={{
|
||||
borderStyle: "none",
|
||||
fontFamily: "monospace",
|
||||
width: "calc(2ch + 4px)",
|
||||
fontSize: "1rem",
|
||||
}}
|
||||
type="text"
|
||||
pattern="\d*"
|
||||
maxlength={2}
|
||||
placeholder="hh"
|
||||
value={time?.hour.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
|
||||
onBlur={(ev) => {
|
||||
setTime(time.set({ hour: ev.currentTarget.value }));
|
||||
}}
|
||||
></input>{" "}
|
||||
</label>
|
||||
:
|
||||
<label>
|
||||
<span class="is-sr-only">Minutes input</span>
|
||||
<input
|
||||
style={{
|
||||
borderStyle: "none",
|
||||
fontFamily: "monospace",
|
||||
width: "calc(2ch + 4px)",
|
||||
fontSize: "1rem",
|
||||
}}
|
||||
type="text"
|
||||
pattern="\d*"
|
||||
maxlength={2}
|
||||
placeholder="mm"
|
||||
value={time?.minute.toLocaleString("en-US", {
|
||||
minimumIntegerDigits: 2,
|
||||
})}
|
||||
onBlur={(ev) => {
|
||||
setTime(time.set({ minute: ev.currentTarget.value }));
|
||||
}}
|
||||
></input>{" "}
|
||||
</label>
|
||||
:
|
||||
<label>
|
||||
<span class="is-sr-only">Seconds input</span>
|
||||
<input
|
||||
style={{
|
||||
borderStyle: "none",
|
||||
fontFamily: "monospace",
|
||||
width: "calc(2ch + 4px)",
|
||||
fontSize: "1rem",
|
||||
}}
|
||||
type="text"
|
||||
pattern="\d*"
|
||||
maxlength={2}
|
||||
placeholder="ss"
|
||||
value={time?.second.toLocaleString("en-US", {
|
||||
minimumIntegerDigits: 2,
|
||||
})}
|
||||
onBlur={(ev) => {
|
||||
setTime(time.set({ second: ev.currentTarget.value }));
|
||||
}}
|
||||
></input>{" "}
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
padding: "1px",
|
||||
marginRight: "-3px",
|
||||
}}
|
||||
onClick={() => {
|
||||
ref.current.showPicker();
|
||||
}}
|
||||
>
|
||||
<span class="is-sr-only">Show time picker</span>
|
||||
<span class="icon">
|
||||
<i class="fas fa-calendar"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
visibility: "hidden",
|
||||
}}
|
||||
class={"input"}
|
||||
type="datetime-local"
|
||||
step="1"
|
||||
value={
|
||||
time
|
||||
? time.toFormat("yyyy-LL-dd'T'HH:mm:ss")
|
||||
: DateTime.now().toFormat("yyyy-LL-dd'T'HH:mm:ss")
|
||||
}
|
||||
ref={ref}
|
||||
onInput={(ev) => {
|
||||
setTime(DateTime.fromISO(ev.currentTarget.value));
|
||||
}}
|
||||
></input>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -11,8 +11,8 @@ export const Username = () => {
|
||||
placeholder="Username Override"
|
||||
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">
|
||||
|
||||
@ -52,7 +52,7 @@ export const TimezonePicker = () => {
|
||||
};
|
||||
|
||||
const TimezoneModal = ({ setModalOpen }) => {
|
||||
const browserTimezone = SystemZone.name;
|
||||
const browserTimezone = DateTime.now().zoneName;
|
||||
const [selectedZone, setSelectedZone] = useTimezone();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
@ -69,11 +69,10 @@ const TimezoneModal = ({ setModalOpen }) => {
|
||||
<p>
|
||||
Your configured timezone is:{" "}
|
||||
<TimezoneDisplay timezone={selectedZone}></TimezoneDisplay>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<br />
|
||||
Your browser timezone is:{" "}
|
||||
<TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
|
||||
<br></br>
|
||||
<br />
|
||||
{!isError && (
|
||||
<>
|
||||
Your bot timezone is:{" "}
|
||||
@ -89,6 +88,9 @@ const TimezoneModal = ({ setModalOpen }) => {
|
||||
<div class="has-text-centered">
|
||||
<button
|
||||
class="button is-success"
|
||||
style={{
|
||||
margin: "2px",
|
||||
}}
|
||||
id="set-browser-timezone"
|
||||
onClick={() => {
|
||||
setSelectedZone(browserTimezone);
|
||||
@ -102,6 +104,9 @@ const TimezoneModal = ({ setModalOpen }) => {
|
||||
<button
|
||||
class="button is-success"
|
||||
id="set-bot-timezone"
|
||||
style={{
|
||||
margin: "2px",
|
||||
}}
|
||||
onClick={() => {
|
||||
setSelectedZone(data.timezone);
|
||||
}}
|
||||
@ -114,6 +119,9 @@ const TimezoneModal = ({ setModalOpen }) => {
|
||||
<button
|
||||
class="button is-warning"
|
||||
id="update-bot-timezone"
|
||||
style={{
|
||||
margin: "2px",
|
||||
}}
|
||||
onClick={() => {
|
||||
userInfoMutation.mutate(browserTimezone);
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user