completed gpa per sem #27 #45

src/components/calendar.js

@@ -103,6 +103,7 @@ const Calendar = (props) => {
         for (const day in updatedLectures) {
             updatedLectures[day].sort((a, b) => new Date('1970/01/01 ' + a.startTimeRaw) - new Date('1970/01/01 ' + b.startTimeRaw));
         }
+        console.log(updatedLectures);
 
         setLectures(updatedLectures);
     }

src/components/card.js

@@ -38,7 +38,7 @@ const Card = ({ course }) => {
               uniqueInstructors[1]
             }
           </p>
-          
+
           <p className="text-sm text-gray-600 mb-4 break-words grow">
             <span>{course.description.length > 300
               ? `${course.description.substring(0, 300)}...`

src/components/gpaModal.js

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import {
+	Modal,
+	ModalOverlay,
+	ModalContent,
+	ModalHeader,
+	ModalFooter,
+	ModalBody,
+	ModalCloseButton,
+	ChakraProvider,
+	extendTheme,
+} from '@chakra-ui/react';
+
+const theme = extendTheme({
+	components: {
+		Modal: {
+			baseStyle: (props) => ({
+				dialog: {
+					bg: "#18181b"
+				}
+			})
+		}
+	}
+});
+
+
+
+const GpaModal = ({ isOpen, onClose, grades }) => {
+
+	const [gpa, setGpa] = useState({});
+
+
+	useEffect(() => {
+		console.log(grades);
+		setGpa(grades);
+	}, [grades]);
+
+
+	return (
+		<ChakraProvider theme={theme}>
+			<Modal isOpen={isOpen} onClose={onClose}>
+				<ModalOverlay
+					backdropFilter='blur(5px)'
+				/>
+				<ModalContent maxW={{ base: "90%", lg: "60%" }} maxH={"80%"}>
+					<ModalHeader />
+					<ModalBody className=' overflow-y-auto'>
+						<div className='flex flex-col'>
+							<h1 className='text-white text-2xl font-bold'>GPA Breakdown</h1>
+							<div className='mt-2'>
+								{/*sems.length > 0 && (
+									<div className='grid grid-flow-col justify-stretch'>
+										{sems.map((semester, index) => (
+											<div key={index} className='flex flex-col mt-2'>
+												<div className='grid h-12 text-center'>
+													<p className='text-white m-auto'>{semester}</p>
+												</div>
+											</div>
+										))}
+									</div>
+								)*/}
+								{Object.keys(gpa).map((instructor, index) => (
+									<div key={index} className='flex flex-col mt-5'>
+										<h2 className='text-white font-bold text-xl'>{instructor}</h2>
+										<div className='grid grid-flow-col justify-stretch'>
+											{Object.keys(gpa[instructor]).map((semester, index) => (
+												// console.log(`bg-[${gpa[instructor][semester].color}]`),
+												<div key={index} className='flex flex-col mt-2'>
+													<div className='grid h-12 text-center' style={{backgroundColor: `${gpa[instructor][semester].color}`}}>
+														<p className='text-white m-auto font-semibold'>{gpa[instructor][semester].gpa}</p>
+													</div>
+													<h3 className='text-zinc-500 text-center text-sm px-1'>{semester}</h3>
+												</div>
+											))}
+										</div>
+									</div>
+								))}
+							</div>
+						</div>
+					</ModalBody>
+					<ModalCloseButton color={'white'} />
+					<ModalFooter />
+				</ModalContent>
+			</Modal>
+		</ChakraProvider>
+	);
+};
+
+export default GpaModal;

src/components/infoModal.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
 	Modal,
 	ModalOverlay,
@@ -23,6 +23,8 @@ const theme = extendTheme({
 	}
 });
 
+
+
 const InfoModal = ({ isOpen, onClose }) => {
 
 	return (
@@ -31,12 +33,17 @@ const InfoModal = ({ isOpen, onClose }) => {
 				<ModalOverlay
 					backdropFilter='blur(5px)'
 				/>
-				<ModalContent>
+				<ModalContent maxW={{ base: "40%" }} maxH={"80%"}>
 					<ModalHeader />
 					<ModalBody>
-						<span className='text-white'>
-						The <span className='font-bold'>first instructor selected</span> represents the Average GPA and RateMyProfessors Rating!
-						</span>
+
+							<p className='text-white'>
+								The <span className='font-bold'>first instructor selected</span> represents the Average GPA and RateMyProfessors Rating on the circle graphs! To view a different average GPA or RateMyProfessor (RMP) rating, click the instructor dropdown and select a different instructor, and remove the previous instructor.
+								<br />
+								<br />
+								To view <span className='font-bold'>all instructor GPAs</span>, click on the circle graphs. It will display the breakdown of each professor's GPA per semester. 0 means that the professor has not taught that semester.
+							</p>
+
 					</ModalBody>
 					<ModalCloseButton color={'white'} />
 					<ModalFooter />