Merge branch 'BumBranch' into frontend
This commit is contained in:
al8763be
commit
179a5196e9
8 changed files with 449 additions and 127 deletions
|
|
@ -4,6 +4,32 @@ import { api } from "../API/API";
|
|||
import Logo from "../assets/Logo.svg";
|
||||
import Button from "./Button";
|
||||
|
||||
function InputField(props: {
|
||||
label: string;
|
||||
type: string;
|
||||
value: string;
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<div className="mb-4">
|
||||
<label
|
||||
className="block text-gray-700 text-sm font-sans font-bold mb-2"
|
||||
htmlFor={props.label}
|
||||
>
|
||||
{props.label}
|
||||
</label>
|
||||
<input
|
||||
className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id={props.label}
|
||||
type={props.type}
|
||||
placeholder={props.label}
|
||||
value={props.value}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Register(): JSX.Element {
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
|
@ -14,7 +40,7 @@ export default function Register(): JSX.Element {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen w-screen items-center justify-center">
|
||||
<div className="flex flex-col h-fit w-screen items-center justify-center">
|
||||
<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">
|
||||
<form
|
||||
className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit"
|
||||
|
|
@ -31,42 +57,22 @@ export default function Register(): JSX.Element {
|
|||
<h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
|
||||
Register New User
|
||||
</h3>
|
||||
<div className="mb-4">
|
||||
<label
|
||||
className="block text-gray-700 text-sm font-sans font-bold mb-2"
|
||||
htmlFor="username"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="username"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => {
|
||||
setUsername(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<label
|
||||
className="block text-gray-700 text-sm font-sans font-bold mb-2"
|
||||
htmlFor="password"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Choose your password"
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<InputField
|
||||
label="Username"
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => {
|
||||
setUsername(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<InputField
|
||||
label="Password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<div className="flex items-center justify-between">
|
||||
<Button
|
||||
text="Register"
|
||||
|
|
|
|||
|
|
@ -1,59 +1,203 @@
|
|||
function NewTimeReport(): JSX.Element {
|
||||
const activities = [
|
||||
"Development",
|
||||
"Meeting",
|
||||
"Administration",
|
||||
"Own Work",
|
||||
"Studies",
|
||||
"Testing",
|
||||
];
|
||||
import { useState } from "react";
|
||||
import { TimeReport } from "../Types/TimeReport";
|
||||
import { api } from "../API/API";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Button from "./Button";
|
||||
|
||||
export default function NewTimeReport(): JSX.Element {
|
||||
const [week, setWeek] = useState("");
|
||||
const [development, setDevelopment] = useState("0");
|
||||
const [meeting, setMeeting] = useState("0");
|
||||
const [administration, setAdministration] = useState("0");
|
||||
const [ownwork, setOwnWork] = useState("0");
|
||||
const [studies, setStudies] = useState("0");
|
||||
const [testing, setTesting] = useState("0");
|
||||
|
||||
const handleNewTimeReport = async (): Promise<void> => {
|
||||
const newTimeReport: TimeReport = {
|
||||
week,
|
||||
development,
|
||||
meeting,
|
||||
administration,
|
||||
ownwork,
|
||||
studies,
|
||||
testing,
|
||||
};
|
||||
await Promise.resolve();
|
||||
// await api.registerTimeReport(newTimeReport); This needs to be implemented!
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
|
||||
<input
|
||||
className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
|
||||
type="week"
|
||||
placeholder="Week"
|
||||
onKeyDown={(event) => {
|
||||
event.preventDefault();
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
if (week === "") {
|
||||
alert("Please enter a week number");
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
void handleNewTimeReport();
|
||||
navigate("/project");
|
||||
}}
|
||||
onPaste={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
<table className="w-full text-center divide-y divide-x divide-white text-[30px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="w-1/2 py-2 border-b-2 border-black">Activity</th>
|
||||
<th className="w-1/2 py-2 border-b-2 border-black">
|
||||
Total Time (min)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-black">
|
||||
{activities.map((activity, index) => (
|
||||
<tr key={index} className="h-[10vh]">
|
||||
<td>{activity}</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
onKeyDown={(event) => {
|
||||
const keyValue = event.key;
|
||||
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<input
|
||||
className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
|
||||
type="week"
|
||||
placeholder="Week"
|
||||
onChange={(e) => {
|
||||
const weekNumber = e.target.value.split("-W")[1];
|
||||
setWeek(weekNumber);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
onPaste={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
<table className="w-full text-center divide-y divide-x divide-white text-[30px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="w-1/2 py-2 border-b-2 border-black">
|
||||
Activity
|
||||
</th>
|
||||
<th className="w-1/2 py-2 border-b-2 border-black">
|
||||
Total Time (min)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-black">
|
||||
<tr className="h-[10vh]">
|
||||
<td>Development</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={development}
|
||||
onChange={(e) => {
|
||||
setDevelopment(e.target.value);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const keyValue = event.key;
|
||||
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Meeting</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={meeting}
|
||||
onChange={(e) => {
|
||||
setMeeting(e.target.value);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const keyValue = event.key;
|
||||
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Administration</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={administration}
|
||||
onChange={(e) => {
|
||||
setAdministration(e.target.value);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const keyValue = event.key;
|
||||
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Own Work</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={ownwork}
|
||||
onChange={(e) => {
|
||||
setOwnWork(e.target.value);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const keyValue = event.key;
|
||||
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Studies</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={studies}
|
||||
onChange={(e) => {
|
||||
setStudies(e.target.value);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const keyValue = event.key;
|
||||
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Testing</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={testing}
|
||||
onChange={(e) => {
|
||||
setTesting(e.target.value);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const keyValue = event.key;
|
||||
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<Button
|
||||
text="Submit"
|
||||
onClick={(): void => {
|
||||
return;
|
||||
}}
|
||||
type="submit"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default NewTimeReport;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue