Created groundwork for the timereport
This commit is contained in:
Mattias
parent
d227ffc6ae
commit
966f8540df
1 changed files with 194 additions and 50 deletions
|
|
@ -1,20 +1,58 @@
|
|||
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">
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
if (week === "") {
|
||||
alert("Please enter a week number");
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
void handleNewTimeReport();
|
||||
navigate("/project");
|
||||
}}
|
||||
>
|
||||
<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();
|
||||
}}
|
||||
|
|
@ -25,21 +63,121 @@ function NewTimeReport(): JSX.Element {
|
|||
<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">
|
||||
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>
|
||||
<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")
|
||||
|
|
@ -48,12 +186,18 @@ function NewTimeReport(): JSX.Element {
|
|||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<Button
|
||||
text="Submit"
|
||||
onClick={(): void => {
|
||||
return;
|
||||
}}
|
||||
type="submit"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default NewTimeReport;
|
||||
|
|
|
|||
Loading…
Reference in a new issue