Merge branch 'gruppDM' into gruppPP
This commit is contained in:
Peter KW
commit
ace11570a5
11 changed files with 459 additions and 88 deletions
247
frontend/src/Components/EditWeeklyReport.tsx
Normal file
247
frontend/src/Components/EditWeeklyReport.tsx
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { NewWeeklyReport } from "../Types/goTypes";
|
||||
import { api } from "../API/API";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Button from "./Button";
|
||||
|
||||
export default function GetWeeklyReport(): JSX.Element {
|
||||
const [projectName, setProjectName] = useState("");
|
||||
const [week, setWeek] = useState(0);
|
||||
const [developmentTime, setDevelopmentTime] = useState(0);
|
||||
const [meetingTime, setMeetingTime] = useState(0);
|
||||
const [adminTime, setAdminTime] = useState(0);
|
||||
const [ownWorkTime, setOwnWorkTime] = useState(0);
|
||||
const [studyTime, setStudyTime] = useState(0);
|
||||
const [testingTime, setTestingTime] = useState(0);
|
||||
|
||||
const token = localStorage.getItem("accessToken") ?? "";
|
||||
const username = localStorage.getItem("username") ?? "";
|
||||
|
||||
useEffect(() => {
|
||||
const fetchWeeklyReport = async (): Promise<void> => {
|
||||
const response = await api.getWeeklyReport(
|
||||
username,
|
||||
projectName,
|
||||
week.toString(),
|
||||
token,
|
||||
);
|
||||
|
||||
if (response.success) {
|
||||
const report: NewWeeklyReport = response.data ?? {
|
||||
projectName: "",
|
||||
week: 0,
|
||||
developmentTime: 0,
|
||||
meetingTime: 0,
|
||||
adminTime: 0,
|
||||
ownWorkTime: 0,
|
||||
studyTime: 0,
|
||||
testingTime: 0,
|
||||
};
|
||||
setProjectName(report.projectName);
|
||||
setWeek(report.week);
|
||||
setDevelopmentTime(report.developmentTime);
|
||||
setMeetingTime(report.meetingTime);
|
||||
setAdminTime(report.adminTime);
|
||||
setOwnWorkTime(report.ownWorkTime);
|
||||
setStudyTime(report.studyTime);
|
||||
setTestingTime(report.testingTime);
|
||||
} else {
|
||||
console.error("Failed to fetch weekly report:", response.message);
|
||||
}
|
||||
};
|
||||
|
||||
fetchWeeklyReport();
|
||||
}, []);
|
||||
|
||||
const handleNewWeeklyReport = async (): Promise<void> => {
|
||||
const newWeeklyReport: NewWeeklyReport = {
|
||||
projectName,
|
||||
week,
|
||||
developmentTime,
|
||||
meetingTime,
|
||||
adminTime,
|
||||
ownWorkTime,
|
||||
studyTime,
|
||||
testingTime,
|
||||
};
|
||||
|
||||
await api.submitWeeklyReport(newWeeklyReport, token);
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
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) => {
|
||||
if (week === 0) {
|
||||
alert("Please enter a week number");
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
void handleNewWeeklyReport();
|
||||
navigate("/project");
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<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"
|
||||
value={
|
||||
week === 0 ? "" : `2024-W${week.toString().padStart(2, "0")}`
|
||||
}
|
||||
onChange={(e) => {
|
||||
const weekNumber = parseInt(e.target.value.split("-W")[1]);
|
||||
setWeek(weekNumber);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
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}
|
||||
onChange={(e) => {
|
||||
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}
|
||||
onChange={(e) => {
|
||||
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}
|
||||
onChange={(e) => {
|
||||
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}
|
||||
onChange={(e) => {
|
||||
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}
|
||||
onChange={(e) => {
|
||||
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}
|
||||
onChange={(e) => {
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
function Header({ username }: { username: string }): JSX.Element {
|
||||
function Header(): JSX.Element {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleLogout = (): void => {
|
||||
|
|
@ -31,7 +31,7 @@ function Header({ username }: { username: string }): JSX.Element {
|
|||
}}
|
||||
>
|
||||
<button className="mr-4 underline font-bold text-white">
|
||||
{username}
|
||||
{localStorage.getItem("username")}
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ function LoginCheck(props: {
|
|||
if (response.data !== undefined) {
|
||||
const token = response.data;
|
||||
localStorage.setItem("accessToken", token);
|
||||
localStorage.setItem("username", props.username);
|
||||
//TODO: change so that it checks for user type (admin, user, pm) instead
|
||||
if (token !== "" && props.username === "admin") {
|
||||
props.setAuthority((prevAuth) => {
|
||||
|
|
|
|||
|
|
@ -1,50 +1,51 @@
|
|||
import { useState } from "react";
|
||||
import { useState, useContext } from "react";
|
||||
import { NewWeeklyReport } from "../Types/goTypes";
|
||||
import { api } from "../API/API";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Button from "./Button";
|
||||
import { NewWeeklyReport } from "../Types/goTypes";
|
||||
import { ProjectNameContext } from "../Pages/YourProjectsPage";
|
||||
|
||||
export default function NewTimeReport(): JSX.Element {
|
||||
const [projectName, setProjectName] = useState<string>("projectName"); // TODO: Get from backend
|
||||
const [week, setWeek] = useState<number>(NaN);
|
||||
const [development, setDevelopment] = useState<number>(NaN);
|
||||
const [meeting, setMeeting] = useState<number>(NaN);
|
||||
const [administration, setAdministration] = useState<number>(NaN);
|
||||
const [ownwork, setOwnWork] = useState<number>(NaN);
|
||||
const [studies, setStudies] = useState<number>(NaN);
|
||||
const [testing, setTesting] = useState<number>(NaN);
|
||||
export default function NewWeeklyReport(): JSX.Element {
|
||||
const [week, setWeek] = useState(0);
|
||||
const [developmentTime, setDevelopmentTime] = useState(0);
|
||||
const [meetingTime, setMeetingTime] = useState(0);
|
||||
const [adminTime, setAdminTime] = useState(0);
|
||||
const [ownWorkTime, setOwnWorkTime] = useState(0);
|
||||
const [studyTime, setStudyTime] = useState(0);
|
||||
const [testingTime, setTestingTime] = useState(0);
|
||||
|
||||
const handleNewTimeReport = async (): Promise<void> => {
|
||||
const newTimeReport: NewWeeklyReport = {
|
||||
const projectName = useContext(ProjectNameContext);
|
||||
const token = localStorage.getItem("accessToken") ?? "";
|
||||
|
||||
const handleNewWeeklyReport = async (): Promise<void> => {
|
||||
const newWeeklyReport: NewWeeklyReport = {
|
||||
projectName,
|
||||
week,
|
||||
developmentTime: development,
|
||||
meetingTime: meeting,
|
||||
adminTime: administration,
|
||||
ownWorkTime: ownwork,
|
||||
studyTime: studies,
|
||||
testingTime: testing,
|
||||
developmentTime,
|
||||
meetingTime,
|
||||
adminTime,
|
||||
ownWorkTime,
|
||||
studyTime,
|
||||
testingTime,
|
||||
};
|
||||
await Promise.resolve();
|
||||
await api.submitWeeklyReport(newTimeReport, "token");
|
||||
|
||||
await api.submitWeeklyReport(newWeeklyReport, token);
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
setProjectName("Something Reasonable"); // This should obviously not be used here
|
||||
|
||||
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) => {
|
||||
if (!week) {
|
||||
if (week === 0) {
|
||||
alert("Please enter a week number");
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
void handleNewTimeReport();
|
||||
void handleNewWeeklyReport();
|
||||
navigate("/project");
|
||||
}}
|
||||
>
|
||||
|
|
@ -83,9 +84,9 @@ export default function NewTimeReport(): JSX.Element {
|
|||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={development}
|
||||
value={developmentTime}
|
||||
onChange={(e) => {
|
||||
setDevelopment(parseInt(e.target.value));
|
||||
setDevelopmentTime(parseInt(e.target.value));
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const keyValue = event.key;
|
||||
|
|
@ -102,9 +103,9 @@ export default function NewTimeReport(): JSX.Element {
|
|||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={meeting}
|
||||
value={meetingTime}
|
||||
onChange={(e) => {
|
||||
setMeeting(parseInt(e.target.value));
|
||||
setMeetingTime(parseInt(e.target.value));
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const keyValue = event.key;
|
||||
|
|
@ -121,9 +122,9 @@ export default function NewTimeReport(): JSX.Element {
|
|||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={administration}
|
||||
value={adminTime}
|
||||
onChange={(e) => {
|
||||
setAdministration(parseInt(e.target.value));
|
||||
setAdminTime(parseInt(e.target.value));
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const keyValue = event.key;
|
||||
|
|
@ -140,9 +141,9 @@ export default function NewTimeReport(): JSX.Element {
|
|||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={ownwork}
|
||||
value={ownWorkTime}
|
||||
onChange={(e) => {
|
||||
setOwnWork(parseInt(e.target.value));
|
||||
setOwnWorkTime(parseInt(e.target.value));
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const keyValue = event.key;
|
||||
|
|
@ -159,9 +160,9 @@ export default function NewTimeReport(): JSX.Element {
|
|||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={studies}
|
||||
value={studyTime}
|
||||
onChange={(e) => {
|
||||
setStudies(parseInt(e.target.value));
|
||||
setStudyTime(parseInt(e.target.value));
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const keyValue = event.key;
|
||||
|
|
@ -178,9 +179,9 @@ export default function NewTimeReport(): JSX.Element {
|
|||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={testing}
|
||||
value={testingTime}
|
||||
onChange={(e) => {
|
||||
setTesting(parseInt(e.target.value));
|
||||
setTestingTime(parseInt(e.target.value));
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const keyValue = event.key;
|
||||
Loading…
Add table
Add a link
Reference in a new issue