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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/index.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/x-icon" href="src/assets/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>TTIME</title>
</head>
<body>
<div id="root"></div>

18
frontend/src/Components/BasicWindow.tsx Normal file
View file

@ -0,0 +1,18 @@
import Header from './Header';
import Footer from './Footer';
function BasicWindow({ username, content, buttons }: { username: string, content: React.ReactNode, buttons:React.ReactNode }) {
return (
<div className="font-sans flex flex-col h-screen bg-white border-2 border-black overflow-auto pt-[110px]">
<Header username={username} />
<div className="flex flex-col items-center flex-grow">
{content}
</div>
<Footer>
{buttons}
</Footer>
</div>
);
}
export default BasicWindow;

10
frontend/src/Components/Button.tsx Normal file
View file

@ -0,0 +1,10 @@
function Button({text, onClick}: {text: string; onClick: () => void;}){
return <button
onClick={onClick}
className="inline-block py-1 px-8 font-bold bg-orange-500 text-white border-2 border-black rounded-full cursor-pointer mt-5 mb-5 transition-colors duration-10 hover:bg-orange-600 hover:text-gray-300 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 4vh;"
>
{text}
</button>
}
export default Button;

13
frontend/src/Components/Footer.tsx Normal file
View file

@ -0,0 +1,13 @@
import React from 'react';
function Footer({ children }: { children: React.ReactNode }) {
return (
<footer className="bg-white">
<div className="flex justify-end items-center h-16 space-x-6 pr-6">
{children}
</div>
</footer>
);
}
export default Footer;

41
frontend/src/Components/Header.tsx Normal file
View file

@ -0,0 +1,41 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
function Header({ username }: { username: string }) {
const [isOpen, setIsOpen] = useState(false);
const handleLogout = () => {
// Add any logout logic here
};
return (
<header className="fixed top-0 left-0 right-0 border-[1.75px] border-black text-black p-3 pl-5 flex items-center justify-between bg-cover"
style={{ backgroundImage: `url('src/assets/1.jpg')` }}>
<Link to="/your-projects">
<img src="/src/assets/TTIMElogo.png" alt="TTIME Logo" className="w-11 h-14 cursor-pointer" />
</Link>
<div
className="relative"
onMouseEnter={() => setIsOpen(true)}
onMouseLeave={() => setIsOpen(false)}
>
<button className="mr-4 underline font-bold text-white">
{username}
</button>
{isOpen && (
<div className="absolute right-0 bg-white border rounded shadow-lg">
<Link to="/">
<button onClick={handleLogout} className="block px-2 py-1 text-black hover:bg-gray-200">Logout</button>
</Link>
</div>
)}
</div>
</header>
);
}
export default Header;

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;

BIN
frontend/src/assets/1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 662 KiB

BIN
frontend/src/assets/2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 659 KiB

BIN
frontend/src/assets/3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 668 KiB

BIN
frontend/src/assets/4.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 665 KiB

BIN
frontend/src/assets/TTIMElogo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 261 KiB

BIN
frontend/src/assets/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

4
frontend/src/index.css
View file

@ -6,7 +6,7 @@
* We are using tailwind, so do not add any custom CSS here.
* Most of this is going to get cleaned up eventually.
*/
/*
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
@ -119,4 +119,4 @@ a {
.read-the-docs {
color: #888;
}
} */

13
frontend/src/main.tsx
View file

@ -4,16 +4,23 @@ import SettingsPage from "./Pages/Settings.tsx";
import HomePage from "./Pages/Home.tsx";
import "./index.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import LoginPage from "./Pages/LoginPage.tsx";
import YourProjectsPage from "./Pages/YourProjectsPage.tsx";
import UserProjectPage from "./Pages/UserPages/UserProjectPage.tsx";
// This is where the routes are mounted
const router = createBrowserRouter([
{
path: "/",
element: <HomePage />,
element: <LoginPage />,
},
{
path: "/settings",
element: <SettingsPage />,
path: "/your-projects",
element: <YourProjectsPage />,
},
{
path: "/project",
element: <UserProjectPage />,
},
]);