diff --git a/views/src/Pages/Checklist.jsx b/views/src/Pages/Checklist.jsx index a7c490e..7497e8a 100644 --- a/views/src/Pages/Checklist.jsx +++ b/views/src/Pages/Checklist.jsx @@ -6,218 +6,135 @@ import { Center, TableTr, TableTd, + TableTh, } from "@mantine/core"; +import axios from "axios"; +import Loader from "../components/Loader"; +import { IconCheck, IconX } from "@tabler/icons-react"; -const stylingMainTopicsHeader = { textAlign: "center", width: "10%" }; -const stylingTopicStatusHeader = { width: "calc(25%/3)" }; -// const nameList = () => { -// for (internName in database) { -// return ( -// -// {internName} -// -// ); -// } -// }; -// const statusExercises = ()=>{ -// for(status){ -// if (status.submittedhtml = true){ -// return("x") -// } -// } -// } const Checklist = () => { + // States + const [isLoading, setIsLoading] = useState(true); + const [data, setData] = useState([]); + const [topics, setTopics] = useState([]); + const [groupedData, setGroupedData] = useState({}); + + // Fetching and parsing data on page load + const getData = async () => { + try { + const response = await axios.get( + "http://localhost:5001/api/users/exerciseInfo", + { + withCredentials: true, + } + ); + // Store the fetched data + const fetchedData = response.data.data; + + // Set the data state + setData(fetchedData); + + // Create a unique list of topics + const uniqueTopics = [...new Set(fetchedData.map((item) => item.topic))]; + setTopics(uniqueTopics); + + // Parse the data to create user-specific associations + const grouped = fetchedData.reduce((acc, item) => { + const { userId, internName, topic, isSubmitted, isCompleted } = item; + if (!acc[userId]) { + acc[userId] = { internName, topics: {} }; + } + acc[userId].topics[topic] = { isSubmitted, isCompleted }; + return acc; + }, {}); + + setGroupedData(grouped); + + // Set loading state to false after data is fetched and processed + setIsLoading(false); + } catch (error) { + console.log(error); + setIsLoading(false); + } + }; + + useEffect(() => { + //calls function on page load + getData(); + }, []); + //table styling const stylingTable = { display: "flex", alignItems: "center", justifyContent: "center", height: "100vh", }; + const ChecklistTable = () => ( + //creates scrollarea to deal with overflow + + + + + Intern Name + {topics.map((topic) => ( + + {topic} + + ))} + + + {topics.map((topic) => ( + + Submitted + Completed + + ))} + + + + {Object.values(groupedData).map((user, idx) => ( + + {user.internName} + {topics.map((topic) => { + const topicStatus = user.topics[topic] || { + isSubmitted: false, + isCompleted: false, + }; + return ( + + + {topicStatus.isSubmitted ? ( + + ) : ( + + )} + + + {topicStatus.isCompleted ? ( + + ) : ( + + )} + + + ); + })} + + ))} + +
+ + ); return ( - - - - - Intern Name - -
- - - - - HTML - CSS - MQ/RD - Bootstrap - - Javascript - - - Javascript and the DOM - - React - SQL - ExpressJS - - API Integration - - - -
- - - - - Submitted - - - Completed - - - Submitted - - - Completed - - - Submitted - - - Completed - - - Submitted - - - Completed - - - Submitted - - - Completed - - - Submitted - - - Completed - - - Submitted - - - Completed - - - Submitted - - - Completed - - - Submitted - - - Completed - - - Submitted - - - Completed - - - - -
- - - - - {/* {nameList()} */} -
- - {/* {statusExercises()} */} -
- - + {isLoading ? : } ); }; diff --git a/views/src/components/Loader.jsx b/views/src/components/Loader.jsx new file mode 100644 index 0000000..5667afd --- /dev/null +++ b/views/src/components/Loader.jsx @@ -0,0 +1,67 @@ +import { useEffect, useRef } from "react"; +const styleLoaderCircle = { + position: "absolute", + top: "50%", + left: "50%", + width: "90px", + height: "90px", + margin: "-60px 0 0 -60px", + border: "5px solid #F9EB02", + borderRadius: "50%", +}; +const keyframes1 = [ + { transform: "scale(0)" }, + { transform: "scale(0.166)" }, + { transform: "scale(0.333)" }, + { transform: "scale(0.5)" }, + { transform: "scale(0.666)" }, + { transform: "scale(0.833)" }, + { transform: "scale(1)" }, + // { transform: "opacity(0)" }, +]; +const timing = { duration: 1250, iterations: Infinity }; +const keyframes2 = [ + { transform: "scale(0)" }, + { transform: "scale(0)" }, + { transform: "scale(0.25)" }, + { transform: "scale(0.5)" }, + { transform: "scale(0.75)" }, + { transform: "scale(1)" }, + // { transform: "opacity(0)" }, +]; + +const keyframes3 = [ + { transform: "scale(0)" }, + { transform: "scale(0)" }, + { transform: "scale(0)" }, + { transform: "scale(0.33)" }, + { transform: "scale(0.66)" }, + { transform: "scale(1)" }, +]; +const LoadIcon = () => { + const loadIconRef1 = useRef(null); + const loadIconRef2 = useRef(null); + const loadIconRef3 = useRef(null); + useEffect(() => { + loadIconRef1.current.animate(keyframes1, timing); + }, []); + useEffect(() => { + loadIconRef2.current.animate(keyframes2, timing); + }, []); + useEffect(() => { + loadIconRef3.current.animate(keyframes3, timing); + }, []); + return ( + <> +
+
+
+ + ); +}; + +const Loader = () => { + return ; +}; + +export default Loader;