From 966f8540dfcbac5395ecb7733a5fe005f4c64879 Mon Sep 17 00:00:00 2001
From: Mattias <mattias.rasmusson.1032@student.lu.se>
Date: Sat, 16 Mar 2024 13:10:46 +0100
Subject: [PATCH] Created groundwork for the timereport

---
 frontend/src/Components/TimeReport.tsx | 244 ++++++++++++++++++++-----
 1 file changed, 194 insertions(+), 50 deletions(-)

diff --git a/frontend/src/Components/TimeReport.tsx b/frontend/src/Components/TimeReport.tsx
index c4ddc38..cb33ad9 100644
--- a/frontend/src/Components/TimeReport.tsx
+++ b/frontend/src/Components/TimeReport.tsx
@@ -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;