From 54e42cd2a8939647cc1f9837c76ccc0433f0bb9f Mon Sep 17 00:00:00 2001
From: Davenludd <david.ludde01@gmail.com>
Date: Wed, 20 Mar 2024 15:19:09 +0100
Subject: [PATCH] Add support for week input in Chrome and Edge browsers

---
 frontend/src/Components/NewWeeklyReport.tsx | 58 +++++++++++++++------
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/frontend/src/Components/NewWeeklyReport.tsx b/frontend/src/Components/NewWeeklyReport.tsx
index 292ddf5..2593782 100644
--- a/frontend/src/Components/NewWeeklyReport.tsx
+++ b/frontend/src/Components/NewWeeklyReport.tsx
@@ -38,6 +38,7 @@ export default function NewWeeklyReport(): JSX.Element {
   };
 
   const navigate = useNavigate();
+  const isChromeOrEdge = /Chrome|Edg/.test(navigator.userAgent);
 
   return (
     <>
@@ -55,23 +56,48 @@ export default function NewWeeklyReport(): JSX.Element {
           }}
         >
           <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 = parseInt(e.target.value.split("-W")[1]);
-                setWeek(weekNumber);
-              }}
-              onKeyDown={(event) => {
-                const keyValue = event.key;
-                if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+            {isChromeOrEdge ? (
+              <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 = parseInt(e.target.value.split("-W")[1]);
+                  setWeek(weekNumber);
+                }}
+                onKeyDown={(event) => {
+                  const keyValue = event.key;
+                  if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                    event.preventDefault();
+                }}
+                onPaste={(event) => {
                   event.preventDefault();
-              }}
-              onPaste={(event) => {
-                event.preventDefault();
-              }}
-            />
+                }}
+              />
+            ) : (
+              <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="text"
+                placeholder="Week (Numbers Only)"
+                onChange={(e) => {
+                  const weekNumber = parseInt(e.target.value);
+                  if (isNaN(weekNumber) || weekNumber < 1 || weekNumber > 53) {
+                    setWeek(0);
+                    return;
+                  } else {
+                    setWeek(weekNumber);
+                  }
+                }}
+                onKeyDown={(event) => {
+                  const keyValue = event.key;
+                  if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                    event.preventDefault();
+                }}
+                onPaste={(event) => {
+                  event.preventDefault();
+                }}
+              />
+            )}
             <table className="w-full text-center divide-y divide-x divide-white text-[30px]">
               <thead>
                 <tr>