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: {},
autoprefixer: {},
},
}
};

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

@ -1,16 +1,20 @@
import Header from './Header';
import Footer from './Footer';
import Header from "./Header";
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 (
<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 className="flex flex-col items-center flex-grow">{content}</div>
<Footer>{buttons}</Footer>
</div>
);
}

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

@ -1,10 +1,18 @@
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>
function Button({
text,
onClick,
}: {
text: string;
onClick: () => void;
}): 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;

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

@ -1,9 +1,9 @@
import React from 'react';
import React from "react";
function Footer({ children }: { children: React.ReactNode }) {
function Footer({ children }: { children: React.ReactNode }): JSX.Element {
return (
<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}
</div>
</footer>

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

@ -1,25 +1,34 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { useState } from "react";
import { Link } from "react-router-dom";
function Header({ username }: { username: string }) {
function Header({ username }: { username: string }): JSX.Element {
const [isOpen, setIsOpen] = useState(false);
const handleLogout = () => {
const handleLogout = (): void => {
// 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')` }}>
<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" />
<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)}
onMouseEnter={() => {
setIsOpen(true);
}}
onMouseLeave={() => {
setIsOpen(false);
}}
>
<button className="mr-4 underline font-bold text-white">
{username}
@ -28,14 +37,18 @@ function Header({ username }: { username: string }) {
{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>
<button
onClick={handleLogout}
className="block px-2 py-1 text-black hover:bg-gray-200"
>
Logout
</button>
</Link>
</div>
)}
</div>
</header>
);
}
}
export default Header;

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

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

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

@ -2,28 +2,36 @@ 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}/>
function UserProjectPage(): JSX.Element {
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={(): void => {
return;
}}
/>
</Link>
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
}
export default UserProjectPage;

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

@ -2,26 +2,30 @@ 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 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">ProjectNameExample</h1>
<h1 className="underline text-[24px] cursor-pointer font-bold">ProjectNameExample</h1>
</div>
</>
const buttons =
<>
</>
return (
<BasicWindow username="Admin" content={content} buttons={buttons}/>
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">
ProjectNameExample
</h1>
<h1 className="underline text-[24px] cursor-pointer font-bold">
ProjectNameExample
</h1>
<h1 className="underline text-[24px] cursor-pointer font-bold">
ProjectNameExample
</h1>
</div>
</>
);
const buttons = <></>;
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
}
export default YourProjectsPage;

8
frontend/tailwind.config.js
View file

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