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

Added a few pages and components to the frontend

Browse source
This commit is contained in:
Mattias 2024-03-07 10:05:45 +01:00
parent b31349ec37
commit 7879394da3
18 changed files with 249 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/Pages/LoginPage.css Normal file
View file

@ -0,0 +1,26 @@
body{
overflow: hidden;
}
@keyframes backgroundTransition {
0% {
background-image: url('src/assets/1.jpg');
animation-timing-function: ease-out;
}
25% {
background-image: url('src/assets/2.jpg');
animation-timing-function: ease-in;
}
50% {
background-image: url('src/assets/3.jpg');
animation-timing-function: ease-out;
}
75% {
background-image: url('src/assets/4.jpg');
animation-timing-function: ease-in;
}
100% {
background-image: url('src/assets/1.jpg');
animation-timing-function: ease-out;
}
}

45
frontend/src/Pages/LoginPage.tsx Normal file
View file

@ -0,0 +1,45 @@
import Button from "../Components/Button";
import Logo from "/src/assets/TTIMElogo.png";
import './LoginPage.css';
import { useEffect } from "react";
import { Link } from "react-router-dom";
const PreloadBackgroundAnimation = () => {
useEffect(() => {
const images = ['src/assets/1.jpg', 'src/assets/2.jpg', 'src/assets/3.jpg', 'src/assets/4.jpg'];
// Pre-load images
for (let i = 0; i < images.length; i++) {
const img = new Image();
img.src = images[i];
}
// Start animation
document.body.style.animation = "backgroundTransition 30s infinite";
}, []);
return null;
};
function LoginPage() {
return (
<>
<PreloadBackgroundAnimation/>
<div className="flex flex-col h-screen w-screen items-center justify-center" style={{ animation: "backgroundTransition 30s infinite", backgroundSize: "cover", backgroundAttachment: "fixed"}}>
<div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20">
<img src={Logo} className="logo w-[7vw] mb-10 mt-10" alt="TTIME Logo"/>
<h1 className="font-sans mb-4 font-bold text-[25px]"> Welcome to TTIME! </h1>
<h2 className="font-sans mb-4 text-[15px]"> Please log in to continue </h2>
<input className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1" type="text" placeholder="Username" />
<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={() => {}} />
</Link>
</div>
</div>
</>
);
}
export default LoginPage;

26
frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx Normal file
View file

@ -0,0 +1,26 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
function PMProjectPage() {
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>
</div>
</>
const buttons =
<>
<Button text="Back" onClick={() => {}}/>
</>
return (
<BasicWindow username="Admin" content={content} buttons={buttons}/>
);
}
export default PMProjectPage;

29
frontend/src/Pages/UserPages/UserProjectPage.tsx Normal file
View file

@ -0,0 +1,29 @@
import { Link } from "react-router-dom";
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
function UserProjectPage() {
const content =
<>
<Link to="/settingsPage">
<h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
</Link>
<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>
<h1 className="font-bold underline text-[30px] cursor-pointer">New Time Report</h1>
</div>
</>
const buttons =
<>
<Link to="/your-projects">
<Button text="Back" onClick={() => {}}/>
</Link>
</>
return (
<BasicWindow username="Admin" content={content} buttons={buttons}/>
);
}
export default UserProjectPage;

27
frontend/src/Pages/YourProjectsPage.tsx Normal file
View file

@ -0,0 +1,27 @@
import { Link } from "react-router-dom";
import BasicWindow from "../Components/BasicWindow";
function YourProjectsPage() {
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">ProjectNameExample</h1>
</Link>
<h1 className="underline text-[24px] cursor-pointer">ProjectNameExample</h1>
<h1 className="underline text-[24px] cursor-pointer">ProjectNameExample</h1>
<h1 className="underline text-[24px] cursor-pointer">ProjectNameExample</h1>
</div>
</>
const buttons =
<>
</>
return (
<BasicWindow username="Admin" content={content} buttons={buttons}/>
);
}
export default YourProjectsPage;