From 4030031ce9c1c936e31ac5b8a13f0764e3a33a22 Mon Sep 17 00:00:00 2001
From: Mattias <mattias.rasmusson.1032@student.lu.se>
Date: Wed, 20 Mar 2024 16:36:24 +0100
Subject: [PATCH] New comp TimePerActivity
---
frontend/src/Components/TimePerActivity.tsx | 175 ++++++++++++++++++
.../PMTotalTimeActivity.tsx | 7 +-
2 files changed, 177 insertions(+), 5 deletions(-)
create mode 100644 frontend/src/Components/TimePerActivity.tsx
diff --git a/frontend/src/Components/TimePerActivity.tsx b/frontend/src/Components/TimePerActivity.tsx
new file mode 100644
index 0000000..3dc1a6b
--- /dev/null
+++ b/frontend/src/Components/TimePerActivity.tsx
@@ -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>
+ </>
+ );
+}
diff --git a/frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx b/frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx
index 676ea28..257a89c 100644
--- a/frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx
+++ b/frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx
@@ -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 />
</>
);