Created groundwork for the timereport

frontend/src/Components/TimeReport.tsx

@@ -1,20 +1,58 @@
-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 (
     <>
       <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 className="h-[10vh]">
-              <tr key={index} className="h-[10vh]">
+                  <td>Development</td>
-                <td>{activity}</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;