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,59 +1,203 @@
|
||||||
function NewTimeReport(): JSX.Element {
|
import { useState } from "react";
|
||||||
const activities = [
|
import { TimeReport } from "../Types/TimeReport";
|
||||||
"Development",
|
import { api } from "../API/API";
|
||||||
"Meeting",
|
import { useNavigate } from "react-router-dom";
|
||||||
"Administration",
|
import Button from "./Button";
|
||||||
"Own Work",
|
|
||||||
"Studies",
|
export default function NewTimeReport(): JSX.Element {
|
||||||
"Testing",
|
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 (
|
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">
|
<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
|
<form
|
||||||
className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
|
onSubmit={(e) => {
|
||||||
type="week"
|
if (week === "") {
|
||||||
placeholder="Week"
|
alert("Please enter a week number");
|
||||||
onKeyDown={(event) => {
|
e.preventDefault();
|
||||||
event.preventDefault();
|
return;
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
void handleNewTimeReport();
|
||||||
|
navigate("/project");
|
||||||
}}
|
}}
|
||||||
onPaste={(event) => {
|
>
|
||||||
event.preventDefault();
|
<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"
|
||||||
<table className="w-full text-center divide-y divide-x divide-white text-[30px]">
|
type="week"
|
||||||
<thead>
|
placeholder="Week"
|
||||||
<tr>
|
onChange={(e) => {
|
||||||
<th className="w-1/2 py-2 border-b-2 border-black">Activity</th>
|
const weekNumber = e.target.value.split("-W")[1];
|
||||||
<th className="w-1/2 py-2 border-b-2 border-black">
|
setWeek(weekNumber);
|
||||||
Total Time (min)
|
}}
|
||||||
</th>
|
onKeyDown={(event) => {
|
||||||
</tr>
|
event.preventDefault();
|
||||||
</thead>
|
}}
|
||||||
<tbody className="divide-y divide-black">
|
onPaste={(event) => {
|
||||||
{activities.map((activity, index) => (
|
event.preventDefault();
|
||||||
<tr key={index} className="h-[10vh]">
|
}}
|
||||||
<td>{activity}</td>
|
/>
|
||||||
<td>
|
<table className="w-full text-center divide-y divide-x divide-white text-[30px]">
|
||||||
<input
|
<thead>
|
||||||
type="number"
|
<tr>
|
||||||
min="0"
|
<th className="w-1/2 py-2 border-b-2 border-black">
|
||||||
className="border-2 border-black rounded-md text-center w-1/2"
|
Activity
|
||||||
onKeyDown={(event) => {
|
</th>
|
||||||
const keyValue = event.key;
|
<th className="w-1/2 py-2 border-b-2 border-black">
|
||||||
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
Total Time (min)
|
||||||
event.preventDefault();
|
</th>
|
||||||
}}
|
</tr>
|
||||||
/>
|
</thead>
|
||||||
</td>
|
<tbody className="divide-y divide-black">
|
||||||
</tr>
|
<tr className="h-[10vh]">
|
||||||
))}
|
<td>Development</td>
|
||||||
</tbody>
|
<td>
|
||||||
</table>
|
<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>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default NewTimeReport;
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue