Skip to content

Commit 6f39058

Browse files
Archer-KeyArcher-Key
committed
increased minimum size of content containers on tasks and schedule pages to screen to ensure page fills screen, added a condition on the task list container to display none when there are no tasks and the add task form is being shown, increased font size and set font to bold for navbar
2 parents b1f1f4a + f17b80b commit 6f39058

26 files changed

Lines changed: 1205 additions & 59 deletions

‎client/src/components/ui/countdown.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, { ChangeEvent, useEffect,useState } from "react";
2+
3+
import Timer from "./timer";
4+
5+
interface Timed {
6+
taskTime: string;
7+
}
8+
9+
// in future use task data as input
10+
11+
const Countdown = ({ taskTime }: Timed) => {
12+
const [timeRemaining, setTimeRemaining] = useState(0);
13+
const [completed, setCompleted] = useState(false);
14+
15+
const completeTask = (event : ChangeEvent<HTMLInputElement>) => {
16+
// send post request to update db
17+
setCompleted(event.target.checked);
18+
}
19+
20+
useEffect(() => {
21+
if (taskTime) {
22+
const countdownInterval = setInterval(() => {
23+
const [eventHours, eventMins, eventSec] = taskTime
24+
.split(":")
25+
.map(Number);
26+
const d = new Date();
27+
let remainingTime =
28+
(eventHours - d.getHours()) * 60 * 60 +
29+
(eventMins - d.getMinutes()) * 60 +
30+
(eventSec - d.getSeconds());
31+
32+
if (remainingTime <= 0) {
33+
remainingTime = 0;
34+
clearInterval(countdownInterval);
35+
}
36+
37+
setTimeRemaining(remainingTime);
38+
}, 1000);
39+
40+
return () => clearInterval(countdownInterval);
41+
}
42+
}, [taskTime, timeRemaining]);
43+
44+
return (
45+
<>
46+
{timeRemaining > 0 ? (
47+
<div className="m-8 flex flex-col items-center justify-center rounded-xl bg-blue-500 p-3 px-10 font-sans text-white shadow-lg shadow-blue-500/50">
48+
<h1 className="p-2 font-sans">TIME LEFT</h1>
49+
<div>{Timer(timeRemaining)}</div>
50+
<input type="checkbox" onChange={completeTask}></input>
51+
</div>
52+
) : (
53+
<div></div>
54+
)}
55+
</>
56+
);
57+
};
58+
59+
export default Countdown;

‎client/src/components/ui/currentTask.tsx‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { useEffect, useState } from "react";
2+
3+
import Countdown from "./countdown";
4+
import TimeDisplay from "./timeDisplay";
5+
6+
interface Task {
7+
id: number;
8+
start_time: string;
9+
end_time: string;
10+
}
11+
12+
interface Tasks {
13+
tasks: Task[];
14+
}
15+
16+
const CurrentTask = ({ tasks }: Tasks) => {
17+
const [currentTasks, setCurrentTasks] = useState<Task[]>([]);
18+
const [currentTask, setCurrentTask] = useState<Task>(
19+
{
20+
id : 1,
21+
start_time : "00:00:00",
22+
end_time : "00:00:00"
23+
}
24+
);
25+
26+
useEffect(() => {
27+
function getCurrentTask() {
28+
setCurrentTasks([]);
29+
tasks.forEach((task) => {
30+
const [startHours, startMins, startSec] = task.start_time
31+
.split(":")
32+
.map(Number);
33+
const [endHours, endMins, endSec] = task.end_time
34+
.split(":")
35+
.map(Number);
36+
37+
const d = new Date();
38+
const start_time = startHours * 60 * 60 + startMins * 60 + startSec;
39+
const end_time = endHours * 60 * 60 + endMins * 60 + endSec;
40+
const cur_time =
41+
d.getHours() * 60 * 60 + d.getMinutes() * 60 + d.getSeconds();
42+
console.log(
43+
startHours,
44+
" ",
45+
endHours,
46+
" ",
47+
endHours,
48+
" ",
49+
endMins,
50+
" ",
51+
d.getHours(),
52+
" ",
53+
d.getMinutes(),
54+
);
55+
console.log(start_time, " ", end_time, " ", cur_time);
56+
57+
if (start_time <= cur_time && end_time >= cur_time) {
58+
setCurrentTasks((prevTasks) => [...prevTasks, task]);
59+
}
60+
});
61+
setCurrentTask(currentTasks[0]);
62+
}
63+
64+
getCurrentTask();
65+
}, [tasks]);
66+
67+
const updateTask = (status : string) => {
68+
if (status == "finished") {
69+
setCurrentTask(currentTasks[0]);
70+
}
71+
}
72+
73+
return (
74+
<>
75+
<ul>
76+
{currentTasks.length <= 0 ? (
77+
<>
78+
<div className="m-8 flex flex-col items-center justify-center rounded-xl bg-blue-500 p-3 px-10 font-sans text-white shadow-lg shadow-blue-500/50">
79+
<h1 className="p-2 font-sans">NO CURRENT TASKS</h1>
80+
<div>MAKE ONE?</div>
81+
</div>
82+
</>
83+
) : (
84+
<>
85+
{currentTasks.map((task: Task) => (
86+
<li key={task.id}>
87+
<Countdown taskTime={task.end_time} />
88+
</li>
89+
))}
90+
</>
91+
)}
92+
</ul>
93+
<div>
94+
{currentTasks.length > 0 ? (
95+
<TimeDisplay statusSignal={updateTask} end_time={currentTasks[0].end_time} />
96+
):(
97+
<></>
98+
)}
99+
</div>
100+
</>
101+
);
102+
};
103+
104+
export default CurrentTask;

‎client/src/components/ui/focus/currentTaskTitle.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react";
2+
3+
export default function CurrentTaskTitle(task_name: string) {
4+
return (
5+
<div className="m-3 flex flex-col items-center justify-center rounded-3xl bg-slate-900 p-10 shadow-xl shadow-black/40">
6+
<h1 className="mb-2 font-inter text-4xl font-semibold">Current Focus</h1>
7+
<div className="rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
8+
{task_name}
9+
</div>
10+
</div>
11+
);
12+
}

‎client/src/components/ui/focus/taskDisplay.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
interface Task {
2+
id: number;
3+
name: string;
4+
description: string;
5+
}
6+
7+
interface Time {
8+
id: number;
9+
day: number;
10+
start_time: string;
11+
end_time: string;
12+
repeating: boolean;
13+
task: number;
14+
}
15+
16+
export default function TaskDisplay({
17+
task,
18+
time,
19+
current
20+
}: {
21+
task: Task;
22+
time: Time;
23+
current: Boolean;
24+
}) {
25+
return (
26+
<div className={current ? "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-500 p-4 shadow-md shadow-black/40 outline-3 outline outline-slate-50" : "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-400 p-4 shadow-md shadow-black/40"}>
27+
<div className="flex flex-auto flex-row gap-4 px-3">
28+
<div>{task.name}:</div>
29+
<div>
30+
{time.start_time} - {time.end_time}
31+
</div>
32+
</div>
33+
<div className="px-3 italic">{task.description}</div>
34+
</div>
35+
);
36+
}

‎client/src/components/ui/focus/timeDisplay.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, { useEffect, useState } from "react";
2+
3+
import Timer from "./timer";
4+
5+
interface TimeDisplayProps {
6+
statusSignal: (data: string) => void;
7+
time: string;
8+
current: boolean;
9+
day: number;
10+
}
11+
12+
export default function TimeDisplay({
13+
statusSignal,
14+
time,
15+
current,
16+
day,
17+
}: TimeDisplayProps) {
18+
const [timeRemaining, setTimeRemaining] = useState(0);
19+
20+
useEffect(() => {
21+
const getTimeRemaining = setInterval(() => {
22+
const [Hours, Mins, Sec] = time.split(":").map(Number);
23+
24+
const d = new Date();
25+
const time_serial = Hours * 60 * 60 + Mins * 60 + Sec;
26+
var day_diff = ((day - d.getDay() + 8) % 8) * 24 * 60 * 60
27+
28+
const cur_time =
29+
d.getHours() * 60 * 60 + d.getMinutes() * 60 + d.getSeconds();
30+
31+
let remaining_time = 0;
32+
33+
remaining_time = time_serial - cur_time + day_diff;
34+
if (remaining_time <= 1) {
35+
clearInterval(getTimeRemaining);
36+
}
37+
38+
setTimeRemaining(remaining_time);
39+
}, 1000);
40+
41+
return () => clearInterval(getTimeRemaining);
42+
}, [time, timeRemaining, day]);
43+
44+
useEffect(() => {
45+
if (timeRemaining <= 1) {
46+
statusSignal("finished");
47+
}
48+
}, [timeRemaining, statusSignal]);
49+
50+
return (
51+
<div className="m-3 flex flex-col items-center justify-center rounded-3xl bg-slate-900 p-10 shadow-xl shadow-black/40">
52+
{current ? (
53+
<>
54+
<h1 className="mb-2 font-inter text-4xl font-semibold">Timer</h1>
55+
</>
56+
) : (
57+
<>
58+
<h1 className="mb-2 font-inter text-4xl font-semibold">Next Task</h1>
59+
</>
60+
)}
61+
<div className="time_left">{Timer(timeRemaining)}</div>
62+
<div></div>
63+
</div>
64+
);
65+
}

‎client/src/components/ui/focus/timer.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const Timer = (timeRemaining: number) => {
2+
const formatTime = (time: number) => {
3+
const seconds = Math.floor(time % 60);
4+
const minutes = Math.floor((time / 60) % 60);
5+
const hours = Math.floor((time / (60 * 60)) % 24);
6+
7+
return (
8+
<div className="countdown-display">
9+
<div className="countdown-value">
10+
{hours > 0 ? (
11+
<>
12+
{hours.toString()}
13+
<span>:</span>
14+
</>
15+
) : (
16+
<></>
17+
)}
18+
{minutes.toString().padStart(2, "0")}
19+
<span>:</span>
20+
{seconds.toString().padStart(2, "0")}
21+
</div>
22+
</div>
23+
);
24+
};
25+
26+
return (
27+
<div className="rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
28+
{formatTime(timeRemaining)}
29+
</div>
30+
);
31+
};
32+
33+
export default Timer;

‎client/src/components/ui/focus/upcomingTasks.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { useEffect, useState } from "react";
2+
3+
import TaskDisplay from "./taskDisplay";
4+
5+
interface Task {
6+
id: number;
7+
name: string;
8+
description: string;
9+
}
10+
11+
interface Time {
12+
id: number;
13+
day: number;
14+
start_time: string;
15+
end_time: string;
16+
repeating: boolean;
17+
task: number;
18+
}
19+
20+
function serializeTime(time: string) {
21+
const [Hours, Mins, Sec] = time.split(":").map(Number);
22+
return Hours * 60 * 60 + Mins * 60 + Sec;
23+
}
24+
25+
export default function UpcomingTasks({ tasks, times, refresh }: { tasks: Task[], times:Time[], refresh : Boolean}) {
26+
const [upcomingTimes, setUpcomingTimes] = useState<Time[]>([]);
27+
28+
useEffect(() => {
29+
function sortTimes() {
30+
const d = new Date();
31+
const cur_time =
32+
d.getHours() * 60 * 60 + d.getMinutes() * 60 + d.getSeconds();
33+
const cur_d = d.getDay();
34+
let ut = times.filter(
35+
(time) =>
36+
!(cur_d == time.day && serializeTime(time.end_time) <= cur_time),
37+
);
38+
39+
ut = ut.sort((a, b) => {
40+
return (
41+
serializeTime(a.start_time) +
42+
((a.day + 8 - cur_d) % 8) * 24 * 60 * 60 -
43+
(serializeTime(b.start_time) +
44+
((b.day + 8 - cur_d) % 8) * 24 * 60 * 60)
45+
);
46+
});
47+
setUpcomingTimes(ut);
48+
}
49+
50+
sortTimes();
51+
}, [times, tasks, refresh]);
52+
53+
return (
54+
<div className="rounded-2xl bg-slate-900 p-2 py-3 shadow-xl shadow-black/40">
55+
<div className="scrollbar h-[285px] w-96 overflow-y-auto overflow-x-hidden">
56+
{upcomingTimes.map((time: Time, index) => (
57+
<>
58+
<TaskDisplay
59+
task={tasks.filter((task) => task.id === time.task)[0]}
60+
time={time}
61+
key={time.id}
62+
current={index===0}
63+
/>
64+
</>
65+
))}
66+
</div>
67+
</div>
68+
);
69+
}

0 commit comments

Comments
 (0)