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 BackButton from "../../Components/BackButton";
|
||||||
import BasicWindow from "../../Components/BasicWindow";
|
import BasicWindow from "../../Components/BasicWindow";
|
||||||
import TimeReport from "../../Components/NewWeeklyReport";
|
import TimePerActivity from "../../Components/TimePerActivity";
|
||||||
|
|
||||||
function PMTotalTimeActivity(): JSX.Element {
|
function PMTotalTimeActivity(): JSX.Element {
|
||||||
const content = (
|
const content = (
|
||||||
<>
|
<>
|
||||||
<h1 className="font-bold text-[30px] mb-[20px]">
|
<TimePerActivity />
|
||||||
Total Time Per Activity
|
|
||||||
</h1>
|
|
||||||
<TimeReport />
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue