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>