Imbus/TTime
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Brand new TimePerRole component deluxe edition

Browse source
This commit is contained in:
Mattias 2024-03-20 16:24:38 +01:00
parent 287e97fe6f
commit dd02c2c5c6
2 changed files with 147 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

141
frontend/src/Components/TimePerRole.tsx Normal file
View file

@ -0,0 +1,141 @@
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 [PManagerTime, setPManagerTime] = useState(0);
const [SManagerTime, setSManagerTime] = useState(0);
const [DeveloperTime, setDeveloperTime] = useState(0);
const [TesterTime, setTesterTime] = useState(0);
// 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 TimePerRole {
PManager: number;
SManager: number;
Developer: number;
Tester: number;
}
const fetchWeeklyReport = async (): Promise<void> => {
// Use mock data
const report: TimePerRole = {
PManager: 120,
SManager: 80,
Developer: 200,
Tester: 150,
};
// Set the state with the mock data
setPManagerTime(report.PManager);
setSManagerTime(report.SManager);
setDeveloperTime(report.Developer);
setTesterTime(report.Tester);
await Promise.resolve();
};
useEffect(() => {
void fetchWeeklyReport();
});
return (
<>
<h1 className="font-bold text-[30px] mb-[20px]">
Total Time Per Role 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">Role</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>Project Manager</td>
<td>
<input
type="string"
className="border-2 border-black rounded-md text-center w-1/2"
value={PManagerTime}
onKeyDown={(event) => {
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>System Manager</td>
<td>
<input
type="string"
className="border-2 border-black rounded-md text-center w-1/2"
value={SManagerTime}
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={DeveloperTime}
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={TesterTime}
onKeyDown={(event) => {
event.preventDefault();
}}
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</>
);
}