jude/reminder-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create components for TTS and attachment settings

Browse Source
This commit is contained in:
jude
2023-11-10 16:01:35 +00:00
parent 4aa5b285ac
commit 5ee1fa60db
3 changed files with 65 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Reminder/Attachment.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { useReminder } from "./ReminderContext";
export const Attachment = () => {
const [{ attachment, 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>
<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>
);
};

40
src/components/Reminder/Settings.tsx
View File

@@ -4,11 +4,15 @@ 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";
export const Settings = () => {
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
const [reminder, setReminder] = useReminder();
const [timezone] = useTimezone();
if (!userFetched) {
return <></>;
@@ -42,7 +46,9 @@ export const Settings = () => {
type="datetime-local"
step="1"
name="time"
value={reminder.utc_time.toLocal().toFormat("yyyy-LL-dd'T'HH:mm:ss")}
value={reminder.utc_time
.setZone(timezone)
.toFormat("yyyy-LL-dd'T'HH:mm:ss")}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
@@ -103,8 +109,20 @@ export const Settings = () => {
name="expiration"
value={
reminder.expires !== null &&
reminder.expires.toFormat("yyyy-LL-dd'T'HH:mm:ss")
reminder.expires
.setZone(timezone)
.toFormat("yyyy-LL-dd'T'HH:mm:ss")
}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
expires: ev.currentTarget.value
? DateTime.fromISO(
ev.currentTarget.value,
).toUTC()
: null,
}));
}}
></input>
</label>
</div>
@@ -113,24 +131,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
View 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>
);
};