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

Merge branch 'frontend' into gruppDM

Browse source
This commit is contained in:
Davenludd 2024-03-17 15:28:20 +01:00
commit b1f57e5ed8
28 changed files with 433 additions and 346 deletions
Download patch file Download diff file Expand all files Collapse all files

31
frontend/src/Pages/AdminPages/AdminManageUsers.tsx
View file

@ -1,25 +1,38 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
import { UserListAdmin } from "../../Components/UserListAdmin";
import { User } from "../../Types/Users";
import { useNavigate } from "react-router-dom";
function AdminManageUsers(): JSX.Element {
const content = <></>;
//TODO: Change so that it reads users from database
const users: User[] = [];
for (let i = 1; i <= 20; i++) {
users.push({ id: i, userName: "Example User " + i });
}
const navigate = useNavigate();
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">Manage Users</h1>
<div className="border-4 border-black bg-white flex flex-col items-center h-[65vh] w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
<UserListAdmin users={users} />
</div>
</>
);
const buttons = (
<>
<Button
text="Add User"
onClick={(): void => {
return;
}}
type="button"
/>
<Button
text="Back"
onClick={(): void => {
return;
navigate("/admin-add-user");
}}
type="button"
/>
<BackButton />
</>
);

4
frontend/src/Pages/AdminPages/AdminMenuPage.tsx
View file

@ -6,12 +6,12 @@ function AdminMenuPage(): JSX.Element {
<>
<h1 className="font-bold text-[30px] mb-[20px]">Administrator Menu</h1>
<div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
<Link to="/admin-users-page">
<Link to="/admin-manage-users">
<h1 className="font-bold underline text-[30px] cursor-pointer">
Manage Users
</h1>
</Link>
<Link to="/admin-projects-page">
<Link to="/admin-manage-projects">
<h1 className="font-bold underline text-[30px] cursor-pointer">
Manage Projects
</h1>

19
frontend/src/Pages/AdminPages/AdminViewUserInfo.tsx
View file

@ -1,8 +1,17 @@
import { useLocation } from "react-router-dom";
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
function AdminViewUserInfo(): JSX.Element {
const content = <></>;
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">{useLocation().state}</h1>
<div className="border-4 border-black bg-white flex flex-col items-center h-[65vh] w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
<p>Put relevant info on user from database here</p>
</div>
</>
);
const buttons = (
<>
@ -13,13 +22,7 @@ function AdminViewUserInfo(): JSX.Element {
}}
type="button"
/>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);

20
frontend/src/Pages/App.tsx Normal file
View file

@ -0,0 +1,20 @@
import { useState } from "react";
import LoginPage from "./LoginPage";
import { useNavigate } from "react-router-dom";
function App(): JSX.Element {
const navigate = useNavigate();
const [authority, setAuthority] = useState(0);
if (authority === 1) {
navigate("/admin");
} else if (authority === 2) {
navigate("/pm");
} else if (authority === 3) {
navigate("/user");
}
return <LoginPage setAuthority={setAuthority} />;
}
export default App;

78
frontend/src/Pages/LoginPage.tsx
View file

@ -1,36 +1,31 @@
import Button from "../Components/Button";
import Logo from "/src/assets/Logo.svg";
import "./LoginPage.css";
import { useEffect } from "react";
import { Link } from "react-router-dom";
import { Dispatch, FormEvent, SetStateAction, useState } from "react";
import BackgroundAnimation from "../Components/BackgroundAnimation";
import LoginField from "../Components/LoginField";
import LoginCheck from "../Components/LoginCheck";
const PreloadBackgroundAnimation = (): JSX.Element => {
useEffect(() => {
const images = [
"src/assets/1.jpg",
"src/assets/2.jpg",
"src/assets/3.jpg",
"src/assets/4.jpg",
];
function LoginPage(props: {
setAuthority: Dispatch<SetStateAction<number>>;
}): JSX.Element {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
// Pre-load images
for (const i of images) {
console.log(i);
}
/* On submit (enter or button click) check if username and password match any user
and if so, redirect to correct page */
function handleSubmit(event: FormEvent<HTMLFormElement>): void {
event.preventDefault();
props.setAuthority((prevAuth) => {
prevAuth = LoginCheck({ username: username, password: password });
return prevAuth;
});
}
// Start animation
document.body.style.animation = "backgroundTransition 30s infinite";
}, []);
return <></>;
};
function LoginPage(): JSX.Element {
return (
<>
<PreloadBackgroundAnimation />
<BackgroundAnimation />
<div
className="flex flex-col h-screen w-screen items-center justify-center"
className="flex flex-col h-screen items-center justify-center bg-cover bg-fixed"
style={{
animation: "backgroundTransition 30s infinite",
backgroundSize: "cover",
@ -51,34 +46,13 @@ function LoginPage(): JSX.Element {
{" "}
Please log in to continue{" "}
</h2>
<input
className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
type="text"
placeholder="Username"
<LoginField
handleSubmit={handleSubmit}
setUsername={setUsername}
setPassword={setPassword}
username={username}
password={password}
/>
<input
className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
type="password"
placeholder="Password"
/>
<Link to="/your-projects">
<Button
text="Login"
onClick={(): void => {
return;
}}
type="button"
/>
</Link>
<Link to="/register">
<Button
text="Register new user"
onClick={(): void => {
return;
}}
type="button"
/>
</Link>
</div>
</div>
</>

9
frontend/src/Pages/ProjectManagerPages/PMChangeRole.tsx
View file

@ -1,5 +1,6 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
function ChangeRole(): JSX.Element {
const content = <></>;
@ -13,13 +14,7 @@ function ChangeRole(): JSX.Element {
}}
type="button"
/>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);

10
frontend/src/Pages/ProjectManagerPages/PMOtherUsersTR.tsx
View file

@ -1,18 +1,12 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
function PMOtherUsersTR(): JSX.Element {
const content = <></>;
const buttons = (
<>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);

40
frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx
View file

@ -1,32 +1,30 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
import { Link } from "react-router-dom";
function PMProjectMembers(): JSX.Element {
const content = <></>;
const buttons = (
<>
<Button
text="Time / Activity"
onClick={(): void => {
return;
}}
type="button"
/>
<Button
text="Time / Role"
onClick={(): void => {
return;
}}
type="button"
/>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<Link to="/PM-time-activity">
<Button
text="Time / Activity"
onClick={(): void => {
return;
}}
/>
</Link>
<Link to="/PM-time-role">
<Button
text="Time / Role"
onClick={(): void => {
return;
}}
/>
</Link>
<BackButton />
</>
);

49
frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx
View file

@ -1,39 +1,36 @@
import { Link } from "react-router-dom";
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import { JSX } from "react/jsx-runtime";
function PMProjectPage(): JSX.Element {
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
<div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[5vh] p-[30px]">
<h1 className="font-bold underline text-[30px] cursor-pointer">
Your Time Reports
</h1>
<h1 className="font-bold underline text-[30px] cursor-pointer">
New Time Report
</h1>
<h1 className="font-bold underline text-[30px] cursor-pointer">
Statistics
</h1>
<h1 className="font-bold underline text-[30px] cursor-pointer">
Unsigned Time Reports
</h1>
<Link to="/project-page">
<h1 className="font-bold underline text-[30px] cursor-pointer">
Your Time Reports
</h1>
</Link>
<Link to="/new-time-report">
<h1 className="font-bold underline text-[30px] cursor-pointer">
New Time Report
</h1>
</Link>
<Link to="/project-members">
<h1 className="font-bold underline text-[30px] cursor-pointer">
Statistics
</h1>
</Link>
<Link to="/PM-unsigned-reports">
<h1 className="font-bold underline text-[30px] cursor-pointer">
Unsigned Time Reports
</h1>
</Link>
</div>
</>
);
const buttons = (
<>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow username="Admin" content={content} buttons={undefined} />;
}
export default PMProjectPage;

8
frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx
View file

@ -14,13 +14,7 @@ function PMTotalTimeActivity(): JSX.Element {
const buttons = (
<>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);

10
frontend/src/Pages/ProjectManagerPages/PMTotalTimeRole.tsx
View file

@ -1,18 +1,12 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
function PMTotalTimeRole(): JSX.Element {
const content = <></>;
const buttons = (
<>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);

10
frontend/src/Pages/ProjectManagerPages/PMUnsignedReports.tsx
View file

@ -1,18 +1,12 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
function PMUnsignedReports(): JSX.Element {
const content = <></>;
const buttons = (
<>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);

8
frontend/src/Pages/ProjectManagerPages/PMViewUnsignedReport.tsx
View file

@ -28,13 +28,7 @@ function PMViewUnsignedReport(): JSX.Element {
}}
type="button"
/>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);

8
frontend/src/Pages/UserPages/UserEditTimeReportPage.tsx
View file

@ -19,13 +19,7 @@ function UserEditTimeReportPage(): JSX.Element {
}}
type="button"
/>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);

24
frontend/src/Pages/UserPages/UserProjectPage.tsx
View file

@ -1,15 +1,17 @@
import { Link } from "react-router-dom";
import { Link, useLocation } from "react-router-dom";
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
function UserProjectPage(): JSX.Element {
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
<h1 className="font-bold text-[30px] mb-[20px]">{useLocation().state}</h1>
<div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
<h1 className="font-bold underline text-[30px] cursor-pointer">
Your Time Reports
</h1>
<Link to="/project-page">
<h1 className="font-bold underline text-[30px] cursor-pointer">
Your Time Reports
</h1>
</Link>
<Link to="/new-time-report">
<h1 className="font-bold underline text-[30px] cursor-pointer">
New Time Report
@ -21,15 +23,7 @@ function UserProjectPage(): JSX.Element {
const buttons = (
<>
<Link to="/your-projects">
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
</Link>
<BackButton />
</>
);

17
frontend/src/Pages/UserPages/UserViewTimeReportsPage.tsx
View file

@ -1,18 +1,17 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
function UserViewTimeReportsPage(): JSX.Element {
const content = <></>;
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">Your Time Reports</h1>
{/* Här kan du inkludera logiken för att visa användarens tidrapporter */}
</>
);
const buttons = (
<>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);

32
frontend/src/Pages/YourProjectsPage.tsx
View file

@ -1,25 +1,25 @@
import { Link } from "react-router-dom";
import BasicWindow from "../Components/BasicWindow";
import { ProjectListUser } from "../Components/ProjectListUser";
import { Project } from "../Types/Project";
function YourProjectsPage(): JSX.Element {
//TODO: Change so that it reads projects from database
const projects: Project[] = [];
for (let i = 1; i <= 20; i++) {
projects.push({
id: i,
name: "Example Project " + i,
description: "good",
created: "now",
owner: "me",
});
}
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
<div className="border-4 border-black bg-white flex flex-col items-center justify-between min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10px] p-[30px]">
<Link to="/project">
<h1 className="underline text-[24px] cursor-pointer font-bold">
ProjectNameExample
</h1>
</Link>
<h1 className="underline text-[24px] cursor-pointer font-bold">
ProjectNameExample2
</h1>
<h1 className="underline text-[24px] cursor-pointer font-bold">
ProjectNameExample3
</h1>
<h1 className="underline text-[24px] cursor-pointer font-bold">
ProjectNameExample4
</h1>
<div className="border-4 border-black bg-white flex flex-col items-center h-[65vh] w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
<ProjectListUser projects={projects} />
</div>
</>
);