Show time until on collapsed reminders
This commit is contained in:
jude
parent
382c2a5a1e
commit
66135ecd08
6
reminder-dashboard/package-lock.json
generated
6
reminder-dashboard/package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"dependencies": {
|
||||
"axios": "^1.5.1",
|
||||
"bulma": "^0.9.4",
|
||||
"humanize-duration": "^3.31.0",
|
||||
"luxon": "^3.4.3",
|
||||
"preact": "^10.13.1",
|
||||
"react-colorful": "^5.6.1",
|
||||
@ -3321,6 +3322,11 @@
|
||||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/humanize-duration": {
|
||||
"version": "3.31.0",
|
||||
"resolved": "https://registry.npmjs.org/humanize-duration/-/humanize-duration-3.31.0.tgz",
|
||||
"integrity": "sha512-fRrehgBG26NNZysRlTq1S+HPtDpp3u+Jzdc/d5A4cEzOD86YLAkDaJyJg8krSdCi7CJ+s7ht3fwRj8Dl+Btd0w=="
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
|
||||
|
||||
@ -37,7 +37,7 @@ export type Reminder = {
|
||||
embed_title: string;
|
||||
embed_fields: EmbedField[] | null;
|
||||
enabled: boolean;
|
||||
expires: DateTime | null;
|
||||
expires: string | null;
|
||||
interval_seconds: number | null;
|
||||
interval_days: number | null;
|
||||
interval_months: number | null;
|
||||
@ -46,7 +46,7 @@ export type Reminder = {
|
||||
tts: boolean;
|
||||
uid: string;
|
||||
username: string;
|
||||
utc_time: DateTime;
|
||||
utc_time: string;
|
||||
};
|
||||
|
||||
export type ChannelInfo = {
|
||||
|
||||
@ -8,6 +8,7 @@ import { Settings } from "./Settings";
|
||||
import { ReminderContext } from "./ReminderContext";
|
||||
import { useQuery } from "react-query";
|
||||
import { useParams } from "wouter";
|
||||
import "./styles.scss";
|
||||
|
||||
function defaultReminder(): Reminder {
|
||||
return {
|
||||
@ -36,7 +37,7 @@ function defaultReminder(): Reminder {
|
||||
tts: false,
|
||||
uid: "",
|
||||
username: "",
|
||||
utc_time: DateTime.now(),
|
||||
utc_time: DateTime.now().toFormat("yyyy-LL-dd'T'HH:mm:ss"),
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ import { Message } from "./Message";
|
||||
import { Settings } from "./Settings";
|
||||
import { ReminderContext } from "./ReminderContext";
|
||||
import { TopBar } from "./TopBar";
|
||||
import "./styles.scss";
|
||||
|
||||
type Props = {
|
||||
reminder: Reminder;
|
||||
|
||||
@ -7,13 +7,11 @@ import { useReminder } from "./ReminderContext";
|
||||
import { Attachment } from "./Attachment";
|
||||
import { TTS } from "./TTS";
|
||||
import { TimeInput } from "./TimeInput";
|
||||
import { useTimezone } from "../App/TimezoneProvider";
|
||||
|
||||
export const Settings = () => {
|
||||
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
|
||||
|
||||
const [reminder, setReminder] = useReminder();
|
||||
const [timezone] = useTimezone();
|
||||
|
||||
if (!userFetched) {
|
||||
return <></>;
|
||||
@ -44,7 +42,7 @@ export const Settings = () => {
|
||||
Time*
|
||||
<TimeInput
|
||||
defaultValue={reminder.utc_time}
|
||||
onInput={(time: DateTime) => {
|
||||
onInput={(time: string) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
utc_time: time,
|
||||
@ -99,7 +97,7 @@ export const Settings = () => {
|
||||
Expiration
|
||||
<TimeInput
|
||||
defaultValue={reminder.expires}
|
||||
onInput={(time: DateTime) => {
|
||||
onInput={(time: string) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
expires: time,
|
||||
|
||||
@ -3,6 +3,7 @@ import { Name } from "./Name";
|
||||
import { fetchGuildChannels, Reminder } from "../../api";
|
||||
import { useQuery } from "react-query";
|
||||
import { useParams } from "wouter";
|
||||
import { DateTime } from "luxon";
|
||||
|
||||
export const TopBar = ({ toggleCollapsed }) => {
|
||||
const { guild } = useParams();
|
||||
@ -15,10 +16,43 @@ export const TopBar = ({ toggleCollapsed }) => {
|
||||
return channel === undefined ? "" : channel.name;
|
||||
};
|
||||
|
||||
let days, hours, minutes, seconds;
|
||||
|
||||
seconds = Math.floor(
|
||||
DateTime.fromISO(reminder.utc_time, { zone: "UTC" }).diffNow("seconds").seconds,
|
||||
);
|
||||
[days, seconds] = [Math.floor(seconds / 86400), seconds % 86400];
|
||||
[hours, seconds] = [Math.floor(seconds / 3600), seconds % 3600];
|
||||
[minutes, seconds] = [Math.floor(seconds / 60), seconds % 60];
|
||||
|
||||
let string;
|
||||
if (days !== 0) {
|
||||
if (hours !== 0) {
|
||||
string = `${days} days, ${hours} hours`;
|
||||
} else {
|
||||
string = `${days} days`;
|
||||
}
|
||||
} else if (hours !== 0) {
|
||||
if (minutes !== 0) {
|
||||
string = `${hours} hours, ${minutes} minutes`;
|
||||
} else {
|
||||
string = `${hours} hours`;
|
||||
}
|
||||
} else if (minutes !== 0) {
|
||||
if (seconds !== 0) {
|
||||
string = `${minutes} minutes, ${seconds} seconds`;
|
||||
} else {
|
||||
string = `${minutes} minutes`;
|
||||
}
|
||||
} else {
|
||||
string = `${seconds} seconds`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="columns is-mobile column reminder-topbar">
|
||||
{isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
|
||||
<Name />
|
||||
<div class="invert-collapses time-bar">in {string}</div>
|
||||
<div class="hide-button-bar">
|
||||
<button class="button hide-box" onClick={toggleCollapsed}>
|
||||
<span class="is-sr-only">Hide reminder</span>
|
||||
|
||||
6
reminder-dashboard/src/components/Reminder/styles.scss
Normal file
6
reminder-dashboard/src/components/Reminder/styles.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.time-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
font-style: italic;
|
||||
}
|
||||
@ -6,7 +6,7 @@ import { Wave } from "./Wave";
|
||||
import { GuildEntry } from "./GuildEntry";
|
||||
import { fetchUserGuilds, GuildInfo } from "../../api";
|
||||
import { TimezonePicker } from "../TimezonePicker";
|
||||
import "./style.scss";
|
||||
import "./styles.scss";
|
||||
|
||||
type ContentProps = {
|
||||
guilds: GuildInfo[];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user