New comp TimePerActivity
This commit is contained in:
Mattias
parent
dd02c2c5c6
commit
4030031ce9
2 changed files with 177 additions and 5 deletions
175
frontend/src/Components/TimePerActivity.tsx
Normal file
175
frontend/src/Components/TimePerActivity.tsx
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
/**
|
||||
* Renders the component for showing total time per role in a project.
|
||||
* @returns JSX.Element
|
||||
*/
|
||||
export default function TimePerRole(): JSX.Element {
|
||||
const [developmentTime, setDevelopmentTime] = useState<number>();
|
||||
const [meetingTime, setMeetingTime] = useState<number>();
|
||||
const [adminTime, setAdminTime] = useState<number>();
|
||||
const [ownWorkTime, setOwnWorkTime] = useState<number>();
|
||||
const [studyTime, setStudyTime] = useState<number>();
|
||||
const [testingTime, setTestingTime] = useState<number>();
|
||||
|
||||
// const token = localStorage.getItem("accessToken") ?? "";
|
||||
// const username = localStorage.getItem("username") ?? "";
|
||||
const { projectName } = useParams();
|
||||
|
||||
// const fetchTimePerRole = async (): Promise<void> => {
|
||||
// const response = await api.getTimePerRole(
|
||||
// username,
|
||||
// projectName ?? "",
|
||||
// token,
|
||||
// );
|
||||
// {
|
||||
// if (response.success) {
|
||||
// const report: TimePerRole = response.data ?? {
|
||||
// PManagerTime: 0,
|
||||
// SManagerTime: 0,
|
||||
// DeveloperTime: 0,
|
||||
// TesterTime: 0,
|
||||
// };
|
||||
// } else {
|
||||
// console.error("Failed to fetch weekly report:", response.message);
|
||||
// }
|
||||
// }
|
||||
|
||||
interface TimePerActivity {
|
||||
developmentTime: number;
|
||||
meetingTime: number;
|
||||
adminTime: number;
|
||||
ownWorkTime: number;
|
||||
studyTime: number;
|
||||
testingTime: number;
|
||||
}
|
||||
|
||||
const fetchTimePerActivity = async (): Promise<void> => {
|
||||
// Use mock data
|
||||
const report: TimePerActivity = {
|
||||
developmentTime: 100,
|
||||
meetingTime: 200,
|
||||
adminTime: 300,
|
||||
ownWorkTime: 50,
|
||||
studyTime: 75,
|
||||
testingTime: 110,
|
||||
};
|
||||
|
||||
// Set the state with the mock data
|
||||
setDevelopmentTime(report.developmentTime);
|
||||
setMeetingTime(report.meetingTime);
|
||||
setAdminTime(report.adminTime);
|
||||
setOwnWorkTime(report.ownWorkTime);
|
||||
setStudyTime(report.studyTime);
|
||||
setTestingTime(report.testingTime);
|
||||
|
||||
await Promise.resolve();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
void fetchTimePerActivity();
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="font-bold text-[30px] mb-[20px]">
|
||||
Total Time Per Activity In: {projectName}{" "}
|
||||
</h1>
|
||||
<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">
|
||||
<div className="flex flex-col items-center">
|
||||
<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="string"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={developmentTime}
|
||||
onKeyDown={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Meeting</td>
|
||||
<td>
|
||||
<input
|
||||
type="string"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={meetingTime}
|
||||
onKeyDown={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Administration</td>
|
||||
<td>
|
||||
<input
|
||||
type="string"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={adminTime}
|
||||
onKeyDown={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Own Work</td>
|
||||
<td>
|
||||
<input
|
||||
type="string"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={ownWorkTime}
|
||||
onKeyDown={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Studies</td>
|
||||
<td>
|
||||
<input
|
||||
type="string"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={studyTime}
|
||||
onKeyDown={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Testing</td>
|
||||
<td>
|
||||
<input
|
||||
type="string"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={testingTime}
|
||||
onKeyDown={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,14 +1,11 @@
|
|||
import BackButton from "../../Components/BackButton";
|
||||
import BasicWindow from "../../Components/BasicWindow";
|
||||
import TimeReport from "../../Components/NewWeeklyReport";
|
||||
import TimePerActivity from "../../Components/TimePerActivity";
|
||||
|
||||
function PMTotalTimeActivity(): JSX.Element {
|
||||
const content = (
|
||||
<>
|
||||
<h1 className="font-bold text-[30px] mb-[20px]">
|
||||
Total Time Per Activity
|
||||
</h1>
|
||||
<TimeReport />
|
||||
<TimePerActivity />
|
||||
</>
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue