Show time until on collapsed reminders
This commit is contained in:
parent
382c2a5a1e
commit
66135ecd08
6
reminder-dashboard/package-lock.json
generated
6
reminder-dashboard/package-lock.json
generated
@ -8,6 +8,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^1.5.1",
|
"axios": "^1.5.1",
|
||||||
"bulma": "^0.9.4",
|
"bulma": "^0.9.4",
|
||||||
|
"humanize-duration": "^3.31.0",
|
||||||
"luxon": "^3.4.3",
|
"luxon": "^3.4.3",
|
||||||
"preact": "^10.13.1",
|
"preact": "^10.13.1",
|
||||||
"react-colorful": "^5.6.1",
|
"react-colorful": "^5.6.1",
|
||||||
@ -3321,6 +3322,11 @@
|
|||||||
"he": "bin/he"
|
"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": {
|
"node_modules/ignore": {
|
||||||
"version": "5.3.1",
|
"version": "5.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
|
||||||
|
@ -37,7 +37,7 @@ export type Reminder = {
|
|||||||
embed_title: string;
|
embed_title: string;
|
||||||
embed_fields: EmbedField[] | null;
|
embed_fields: EmbedField[] | null;
|
||||||
enabled: boolean;
|
enabled: boolean;
|
||||||
expires: DateTime | null;
|
expires: string | null;
|
||||||
interval_seconds: number | null;
|
interval_seconds: number | null;
|
||||||
interval_days: number | null;
|
interval_days: number | null;
|
||||||
interval_months: number | null;
|
interval_months: number | null;
|
||||||
@ -46,7 +46,7 @@ export type Reminder = {
|
|||||||
tts: boolean;
|
tts: boolean;
|
||||||
uid: string;
|
uid: string;
|
||||||
username: string;
|
username: string;
|
||||||
utc_time: DateTime;
|
utc_time: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type ChannelInfo = {
|
export type ChannelInfo = {
|
||||||
|
@ -8,6 +8,7 @@ import { Settings } from "./Settings";
|
|||||||
import { ReminderContext } from "./ReminderContext";
|
import { ReminderContext } from "./ReminderContext";
|
||||||
import { useQuery } from "react-query";
|
import { useQuery } from "react-query";
|
||||||
import { useParams } from "wouter";
|
import { useParams } from "wouter";
|
||||||
|
import "./styles.scss";
|
||||||
|
|
||||||
function defaultReminder(): Reminder {
|
function defaultReminder(): Reminder {
|
||||||
return {
|
return {
|
||||||
@ -36,7 +37,7 @@ function defaultReminder(): Reminder {
|
|||||||
tts: false,
|
tts: false,
|
||||||
uid: "",
|
uid: "",
|
||||||
username: "",
|
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 { Settings } from "./Settings";
|
||||||
import { ReminderContext } from "./ReminderContext";
|
import { ReminderContext } from "./ReminderContext";
|
||||||
import { TopBar } from "./TopBar";
|
import { TopBar } from "./TopBar";
|
||||||
|
import "./styles.scss";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
reminder: Reminder;
|
reminder: Reminder;
|
||||||
|
@ -7,13 +7,11 @@ import { useReminder } from "./ReminderContext";
|
|||||||
import { Attachment } from "./Attachment";
|
import { Attachment } from "./Attachment";
|
||||||
import { TTS } from "./TTS";
|
import { TTS } from "./TTS";
|
||||||
import { TimeInput } from "./TimeInput";
|
import { TimeInput } from "./TimeInput";
|
||||||
import { useTimezone } from "../App/TimezoneProvider";
|
|
||||||
|
|
||||||
export const Settings = () => {
|
export const Settings = () => {
|
||||||
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
|
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
|
||||||
|
|
||||||
const [reminder, setReminder] = useReminder();
|
const [reminder, setReminder] = useReminder();
|
||||||
const [timezone] = useTimezone();
|
|
||||||
|
|
||||||
if (!userFetched) {
|
if (!userFetched) {
|
||||||
return <></>;
|
return <></>;
|
||||||
@ -44,7 +42,7 @@ export const Settings = () => {
|
|||||||
Time*
|
Time*
|
||||||
<TimeInput
|
<TimeInput
|
||||||
defaultValue={reminder.utc_time}
|
defaultValue={reminder.utc_time}
|
||||||
onInput={(time: DateTime) => {
|
onInput={(time: string) => {
|
||||||
setReminder((reminder) => ({
|
setReminder((reminder) => ({
|
||||||
...reminder,
|
...reminder,
|
||||||
utc_time: time,
|
utc_time: time,
|
||||||
@ -99,7 +97,7 @@ export const Settings = () => {
|
|||||||
Expiration
|
Expiration
|
||||||
<TimeInput
|
<TimeInput
|
||||||
defaultValue={reminder.expires}
|
defaultValue={reminder.expires}
|
||||||
onInput={(time: DateTime) => {
|
onInput={(time: string) => {
|
||||||
setReminder((reminder) => ({
|
setReminder((reminder) => ({
|
||||||
...reminder,
|
...reminder,
|
||||||
expires: time,
|
expires: time,
|
||||||
|
@ -3,6 +3,7 @@ import { Name } from "./Name";
|
|||||||
import { fetchGuildChannels, Reminder } from "../../api";
|
import { fetchGuildChannels, Reminder } from "../../api";
|
||||||
import { useQuery } from "react-query";
|
import { useQuery } from "react-query";
|
||||||
import { useParams } from "wouter";
|
import { useParams } from "wouter";
|
||||||
|
import { DateTime } from "luxon";
|
||||||
|
|
||||||
export const TopBar = ({ toggleCollapsed }) => {
|
export const TopBar = ({ toggleCollapsed }) => {
|
||||||
const { guild } = useParams();
|
const { guild } = useParams();
|
||||||
@ -15,10 +16,43 @@ export const TopBar = ({ toggleCollapsed }) => {
|
|||||||
return channel === undefined ? "" : channel.name;
|
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 (
|
return (
|
||||||
<div class="columns is-mobile column reminder-topbar">
|
<div class="columns is-mobile column reminder-topbar">
|
||||||
{isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
|
{isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
|
||||||
<Name />
|
<Name />
|
||||||
|
<div class="invert-collapses time-bar">in {string}</div>
|
||||||
<div class="hide-button-bar">
|
<div class="hide-button-bar">
|
||||||
<button class="button hide-box" onClick={toggleCollapsed}>
|
<button class="button hide-box" onClick={toggleCollapsed}>
|
||||||
<span class="is-sr-only">Hide reminder</span>
|
<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 { GuildEntry } from "./GuildEntry";
|
||||||
import { fetchUserGuilds, GuildInfo } from "../../api";
|
import { fetchUserGuilds, GuildInfo } from "../../api";
|
||||||
import { TimezonePicker } from "../TimezonePicker";
|
import { TimezonePicker } from "../TimezonePicker";
|
||||||
import "./style.scss";
|
import "./styles.scss";
|
||||||
|
|
||||||
type ContentProps = {
|
type ContentProps = {
|
||||||
guilds: GuildInfo[];
|
guilds: GuildInfo[];
|
||||||
|
Loading…
Reference in New Issue
Block a user