From 7879394da326d426780d933f939c5adee320e1d8 Mon Sep 17 00:00:00 2001 From: Mattias Date: Thu, 7 Mar 2024 10:05:45 +0100 Subject: [PATCH] Added a few pages and components to the frontend --- frontend/index.html | 4 +- frontend/src/Components/BasicWindow.tsx | 18 +++++++ frontend/src/Components/Button.tsx | 10 ++++ frontend/src/Components/Footer.tsx | 13 +++++ frontend/src/Components/Header.tsx | 41 ++++++++++++++++ frontend/src/Pages/LoginPage.css | 26 ++++++++++ frontend/src/Pages/LoginPage.tsx | 45 ++++++++++++++++++ .../ProjectManagerPages/PMProjectPage.tsx | 26 ++++++++++ .../src/Pages/UserPages/UserProjectPage.tsx | 29 +++++++++++ frontend/src/Pages/YourProjectsPage.tsx | 27 +++++++++++ frontend/src/assets/1.jpg | Bin 0 -> 678376 bytes frontend/src/assets/2.jpg | Bin 0 -> 674675 bytes frontend/src/assets/3.jpg | Bin 0 -> 683724 bytes frontend/src/assets/4.jpg | Bin 0 -> 681330 bytes frontend/src/assets/TTIMElogo.png | Bin 0 -> 267203 bytes frontend/src/assets/favicon.ico | Bin 0 -> 15406 bytes frontend/src/index.css | 4 +- frontend/src/main.tsx | 13 +++-- 18 files changed, 249 insertions(+), 7 deletions(-) create mode 100644 frontend/src/Components/BasicWindow.tsx create mode 100644 frontend/src/Components/Button.tsx create mode 100644 frontend/src/Components/Footer.tsx create mode 100644 frontend/src/Components/Header.tsx create mode 100644 frontend/src/Pages/LoginPage.css create mode 100644 frontend/src/Pages/LoginPage.tsx create mode 100644 frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx create mode 100644 frontend/src/Pages/UserPages/UserProjectPage.tsx create mode 100644 frontend/src/Pages/YourProjectsPage.tsx create mode 100644 frontend/src/assets/1.jpg create mode 100644 frontend/src/assets/2.jpg create mode 100644 frontend/src/assets/3.jpg create mode 100644 frontend/src/assets/4.jpg create mode 100644 frontend/src/assets/TTIMElogo.png create mode 100644 frontend/src/assets/favicon.ico diff --git a/frontend/index.html b/frontend/index.html index e4b78ea..573ba58 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,9 +2,9 @@ - + - Vite + React + TS + TTIME
diff --git a/frontend/src/Components/BasicWindow.tsx b/frontend/src/Components/BasicWindow.tsx new file mode 100644 index 0000000..9899fa1 --- /dev/null +++ b/frontend/src/Components/BasicWindow.tsx @@ -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 ( +
+
+
+ {content} +
+
+ {buttons} +
+
+ ); +} + +export default BasicWindow; \ No newline at end of file diff --git a/frontend/src/Components/Button.tsx b/frontend/src/Components/Button.tsx new file mode 100644 index 0000000..a00f5e1 --- /dev/null +++ b/frontend/src/Components/Button.tsx @@ -0,0 +1,10 @@ +function Button({text, onClick}: {text: string; onClick: () => void;}){ + return +} + +export default Button; \ No newline at end of file diff --git a/frontend/src/Components/Footer.tsx b/frontend/src/Components/Footer.tsx new file mode 100644 index 0000000..f1c7e29 --- /dev/null +++ b/frontend/src/Components/Footer.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +function Footer({ children }: { children: React.ReactNode }) { + return ( + + ); +} + +export default Footer; \ No newline at end of file diff --git a/frontend/src/Components/Header.tsx b/frontend/src/Components/Header.tsx new file mode 100644 index 0000000..fde1fbf --- /dev/null +++ b/frontend/src/Components/Header.tsx @@ -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 ( +
+ + TTIME Logo + + +
setIsOpen(true)} + onMouseLeave={() => setIsOpen(false)} + > + + + {isOpen && ( +
+ + + +
+ )} +
+
+ ); + } + +export default Header; + diff --git a/frontend/src/Pages/LoginPage.css b/frontend/src/Pages/LoginPage.css new file mode 100644 index 0000000..0b2f5db --- /dev/null +++ b/frontend/src/Pages/LoginPage.css @@ -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; + } +} \ No newline at end of file diff --git a/frontend/src/Pages/LoginPage.tsx b/frontend/src/Pages/LoginPage.tsx new file mode 100644 index 0000000..bbee6b8 --- /dev/null +++ b/frontend/src/Pages/LoginPage.tsx @@ -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 ( + <> + +
+
+ TTIME Logo +

Welcome to TTIME!

+

Please log in to continue

+ + + +
+
+ + ); +} + +export default LoginPage; \ No newline at end of file diff --git a/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx b/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx new file mode 100644 index 0000000..80f35ad --- /dev/null +++ b/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx @@ -0,0 +1,26 @@ +import BasicWindow from "../../Components/BasicWindow"; +import Button from "../../Components/Button"; + +function PMProjectPage() { + + const content = +<> +

ProjectNameExample

+
+

Your Time Reports

+

New Time Report

+

Statistics

+

Unsigned Time Reports

+
+ + + const buttons = + <> +