//info: New weekly report form component to create a new weekly report to
//sumbit development time, meeting time, admin time, own work time, study time and testing time
import { useState } from "react";
import type { NewWeeklyReport } from "../Types/goTypes";
import { api } from "../API/API";
import { useNavigate, useParams } from "react-router-dom";
import Button from "./Button";
/**
* Renders a form for creating a new weekly report.
* @returns The JSX element representing the new weekly report form.
*/
export default function NewWeeklyReport(): JSX.Element {
const [week, setWeek] = useState<number>(0);
const [developmentTime, setDevelopmentTime] = useState<number>(0);
const [meetingTime, setMeetingTime] = useState<number>(0);
const [adminTime, setAdminTime] = useState<number>(0);
const [ownWorkTime, setOwnWorkTime] = useState<number>(0);
const [studyTime, setStudyTime] = useState<number>(0);
const [testingTime, setTestingTime] = useState<number>(0);
const { projectName } = useParams();
const token = localStorage.getItem("accessToken") ?? "";
const handleNewWeeklyReport = async (): Promise<boolean> => {
const newWeeklyReport: NewWeeklyReport = {
projectName: projectName ?? "",
week: week,
developmentTime: developmentTime,
meetingTime: meetingTime,
adminTime: adminTime,
ownWorkTime: ownWorkTime,
studyTime: studyTime,
testingTime: testingTime,
};
const response = await api.submitWeeklyReport(newWeeklyReport, token);
console.log(response);
if (response.success) {
return true;
} else {
return false;
}
};
const navigate = useNavigate();
// Check if the browser is Chrome or Edge
const isChromeOrEdge = /Chrome|Edg/.test(navigator.userAgent);
return (
<>
<div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
<form
onSubmit={(e) => {
e.preventDefault();
void (async (): Promise<void> => {
if (week === 0 || week > 53 || week < 1) {
alert("Please enter a valid week number");
return;
}
const success = await handleNewWeeklyReport();
if (!success) {
alert(
"A Time Report for this week already exists, please go to the edit page to edit it or change week number.",
);
return;
}
alert("Weekly report submitted successfully");
navigate(-1);
})();
}}
>
<div className="flex flex-col items-center">
{isChromeOrEdge ? (
<input
className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
type="week"
placeholder="Week"
onChange={(e) => {
const weekNumber = parseInt(e.target.value.split("-W")[1]);
setWeek(weekNumber);
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
onPaste={(event) => {
event.preventDefault();
}}
/>
) : (
<input
className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
type="text"
placeholder="Week (Numbers Only)"
onChange={(e) => {
const weekNumber = parseInt(e.target.value);
setWeek(weekNumber);
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
onPaste={(event) => {
event.preventDefault();
}}
/>
)}
<table className="w-full text-center divide-y divide-x divide-white text-[30px]">
<thead>
<tr>
<th className="w-1/2 py-2 border-b-2 border-black">
Activity
</th>
<th className="w-1/2 py-2 border-b-2 border-black">
Total Time (min)
</th>
</tr>
</thead>
<tbody className="divide-y divide-black">
<tr className="h-[10vh]">
<td>Development</td>
<td>
<input
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={developmentTime === 0 ? "" : developmentTime}
onChange={(e) => {
if (e.target.value === "") {
setDevelopmentTime(0);
return;
} else {
setDevelopmentTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Meeting</td>
<td>
<input
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={meetingTime === 0 ? "" : meetingTime}
onChange={(e) => {
if (e.target.value === "") {
setMeetingTime(0);
return;
} else {
setMeetingTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Administration</td>
<td>
<input
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={adminTime === 0 ? "" : adminTime}
onChange={(e) => {
if (e.target.value === "") {
setAdminTime(0);
return;
} else {
setAdminTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Own Work</td>
<td>
<input
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={ownWorkTime === 0 ? "" : ownWorkTime}
onChange={(e) => {
if (e.target.value === "") {
setOwnWorkTime(0);
return;
} else {
setOwnWorkTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Studies</td>
<td>
<input
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={studyTime === 0 ? "" : studyTime}
onChange={(e) => {
if (e.target.value === "") {
setStudyTime(0);
return;
} else {
setStudyTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Testing</td>
<td>
<input
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={testingTime === 0 ? "" : testingTime}
onChange={(e) => {
if (e.target.value === "") {
setTestingTime(0);
return;
} else {
setTestingTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
/>
</td>
</tr>
</tbody>
</table>
<Button
text="Submit"
onClick={(): void => {
return;
}}
type="submit"
/>
</div>
</form>
</div>
</>
);
}