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

Formatting and typing

Browse source
This commit is contained in:
Imbus 2024-03-07 11:48:34 +01:00
parent 9c824f1d7b
commit 40f7241550
9 changed files with 155 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/postcss.config.js
View file

@ -3,4 +3,4 @@ export default {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },
} };

24
frontend/src/Components/BasicWindow.tsx
View file

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

24
frontend/src/Components/Button.tsx
View file

@ -1,10 +1,18 @@
function Button({text, onClick}: {text: string; onClick: () => void;}){ function Button({
return <button text,
onClick={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: string;
{text} onClick: () => void;
</button> }): JSX.Element {
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; export default Button;

8
frontend/src/Components/Footer.tsx
View file

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

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

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

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

@ -1,26 +1,38 @@
import BasicWindow from "../../Components/BasicWindow"; import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button"; import Button from "../../Components/Button";
function PMProjectPage() { function PMProjectPage(): JSX.Element {
const content = (
const content = <>
<> <h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
<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]">
<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">
<h1 className="font-bold underline text-[30px] cursor-pointer">Your Time Reports</h1> Your Time Reports
<h1 className="font-bold underline text-[30px] cursor-pointer">New Time Report</h1> </h1>
<h1 className="font-bold underline text-[30px] cursor-pointer">Statistics</h1> <h1 className="font-bold underline text-[30px] cursor-pointer">
<h1 className="font-bold underline text-[30px] cursor-pointer">Unsigned Time Reports</h1> New Time Report
</div> </h1>
</> <h1 className="font-bold underline text-[30px] cursor-pointer">
Statistics
const buttons = </h1>
<> <h1 className="font-bold underline text-[30px] cursor-pointer">
<Button text="Back" onClick={() => {}}/> Unsigned Time Reports
</> </h1>
</div>
return ( </>
<BasicWindow username="Admin" content={content} buttons={buttons}/>
); );
const buttons = (
<>
<Button
text="Back"
onClick={(): void => {
return;
}}
/>
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
} }
export default PMProjectPage; export default PMProjectPage;

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

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

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

@ -2,26 +2,30 @@ import { Link } from "react-router-dom";
import BasicWindow from "../Components/BasicWindow"; import BasicWindow from "../Components/BasicWindow";
function YourProjectsPage() { function YourProjectsPage() {
const content = (
const content = <>
<> <h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
<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]">
<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">
<Link to="/project"> <h1 className="underline text-[24px] cursor-pointer font-bold">
<h1 className="underline text-[24px] cursor-pointer font-bold">ProjectNameExample</h1> ProjectNameExample
</Link> </h1>
<h1 className="underline text-[24px] cursor-pointer font-bold">ProjectNameExample</h1> </Link>
<h1 className="underline text-[24px] cursor-pointer font-bold">ProjectNameExample</h1> <h1 className="underline text-[24px] cursor-pointer font-bold">
<h1 className="underline text-[24px] cursor-pointer font-bold">ProjectNameExample</h1> ProjectNameExample
</div> </h1>
</> <h1 className="underline text-[24px] cursor-pointer font-bold">
ProjectNameExample
const buttons = </h1>
<> <h1 className="underline text-[24px] cursor-pointer font-bold">
</> ProjectNameExample
</h1>
return ( </div>
<BasicWindow username="Admin" content={content} buttons={buttons}/> </>
); );
const buttons = <></>;
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
} }
export default YourProjectsPage; export default YourProjectsPage;

8
frontend/tailwind.config.js
View file

@ -1,13 +1,9 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: [ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [], plugins: [],
} };