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

Now shows project statistics

Browse source
This commit is contained in:
Peter KW 2024-04-02 13:11:33 +02:00
parent ca88daf493
commit cb68a6323b
1 changed files with 51 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
frontend/src/Components/ProjectInfoModal.tsx
View file

@ -1,30 +1,48 @@
import { useState } from "react";
import { useEffect, useRef, useState } from "react";
import Button from "./Button";
import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
import { Link } from "react-router-dom";
import GetProjectTimes, { projectTimes } from "./GetProjectTimes";
function ProjectInfoModal(props: {
isVisible: boolean;
projectname: string;
onClose: () => void;
onClick: (username: string) => void;
}): JSX.Element {
const [users, setUsers] = useState<ProjectMember[]>([]);
const [times, setTimes] = useState<projectTimes>();
const totalTime = useRef(0);
GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
if (!props.isVisible) return <></>;
GetProjectTimes({ setTimesProp: setTimes, projectName: props.projectname });
useEffect(() => {
if (times?.totalTime !== undefined) {
totalTime.current = times.totalTime;
}
}, [times]);
return (
<div
className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm
flex justify-center items-center"
>
<div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[47vh] w-[40] flex flex-col">
<div className="pl-20 pr-20">
<div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[61vh] w-[40] overflow-auto">
<div className="pl-10 pr-10">
<h1 className="font-bold text-[32px] mb-[20px]">
{localStorage.getItem("projectName") ?? ""}
{props.projectname}
</h1>
<h2 className="font-bold text-[24px] mb-[20px]">Project members:</h2>
<div className="border-2 border-black p-2 rounded-lg text-center overflow-scroll h-[26vh]">
<div className="p-1 text-center">
<h2 className="text-[20px] font-bold">Statistics:</h2>
</div>
<div className="border-2 border-black rounded-lg h-[8vh] text-left divide-y-2 flex flex-col overflow-auto mx-10">
<p className="p-2">Number of members: {users.length}</p>
<p className="p-2">Total time reported: {totalTime.current}</p>
</div>
<div className="h-[6vh] p-7 text-center">
<h2 className="text-[20px] font-bold">Project members:</h2>
</div>
<div className="border-2 border-black p-2 rounded-lg text-center overflow-auto h-[24vh] mx-10">
<ul className="text-left font-medium space-y-2">
<div></div>
{users.map((user) => (
@ -44,8 +62,7 @@ function ProjectInfoModal(props: {
))}
</ul>
</div>
</div>
<div className="space-x-16">
<div className="space-x-5 my-2">
<Button
text={"Delete"}
onClick={function (): void {
@ -53,7 +70,12 @@ function ProjectInfoModal(props: {
}}
type="button"
/>
<Link to={"/adminProjectAddMember"}>
<Link
to={{
pathname: "/adminProjectAddMember",
search: props.projectname,
}}
>
<Button
text={"Add Member"}
onClick={function (): void {
@ -72,6 +94,7 @@ function ProjectInfoModal(props: {
</div>
</div>
</div>
</div>
);
}