Skip to content

Commit

Permalink
Merge pull request #113 from unkn-wn/temp
Browse files Browse the repository at this point in the history 
"minor tweaks"
  • Loading branch information
@knightron0
knightron0 authored Sep 13, 2024
2 parents cab5edb + 8297800 commit 201db01
Show file tree
Hide file tree
Showing 10 changed files with 516 additions and 467 deletions.
37 changes: 26 additions & 11 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"react": "^18",
"react-chartjs-2": "^5.2.0",
"react-circular-progressbar": "^2.1.0",
"react-collapse": "^5.1.1",
"react-dom": "^18",
"react-icons": "^5.0.1",
"react-select": "^5.8.0",
Expand Down
23 changes: 21 additions & 2 deletions src/components/calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,12 +199,31 @@ const Calendar = (props) => {
const LectureTimeDisplay = (props) => {
const { lecture } = props;

const translateType = (type) => {
switch (type) {
case "Practice Study Observation":
return "PSO";
case "Laboratory":
return "Lab";
default:
return type;
}
}

return (
<Popover placement="auto" trigger="hover">
<PopoverTrigger>
<span className="w-full bg-zinc-700 py-1 px-2 rounded-md hover:bg-zinc-600 transition-all">{lecture.type + " - " + lecture.startTime}</span>
{/* If lecture, color background lighter */}
<span className={`w-full py-1 px-2 rounded-md hover:bg-zinc-600 transition-all ${lecture.type === 'Lecture' ? 'bg-zinc-700' : 'bg-zinc-800'}`}>
<p className="text-white">
{translateType(lecture.type) + " - " + lecture.startTime}
</p>
<p className="text-zinc-400 text-sm">
{lecture.instructors[0]}
</p>
</span>
</PopoverTrigger>
<PopoverContent backgroundColor='black' borderColor='gray.500' boxShadow="0 0 10px 0 rgba(0, 0, 0, 0.5)" width='fit-content'>
<PopoverContent backgroundColor='black' borderColor='gray.500' boxShadow="0 0 10px 0 rgba(0, 0, 0, 0.5)" minW={{ base: "90%", lg: "max-content" }}>
<PopoverArrow />
<PopoverHeader fontWeight='semibold'>{lecture.type}</PopoverHeader>
<PopoverBody>
Expand Down
67 changes: 33 additions & 34 deletions src/components/card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import Link from 'next/link'


const Card = ({ course }) => {
const Card = ({ course, searchTerm }) => {

const instructors = new Set();
const availableSemesters = [];
Expand All @@ -21,39 +21,38 @@ const Card = ({ course }) => {

return (
<>
<Link target="_blank"
href={`/detail/${course.detailId}`}
rel="noopener noreferrer"
className="flex flex-col bg-slate-200 p-6 rounded-md shadow-md hover:scale-105 transition hover:transition cursor-pointer">

<h2 className="lg:text-lg md:text-lg font-bold">{course.subjectCode} {course.courseCode}: {course.title}</h2>
<p className="lg:text-sm text-sm text-gray-700 font-medium my-1">
{course.credits[1] > 1
? `${course.credits[1]} Credits`
: `${course.credits[1]} Credit`}
{` | `}
{uniqueInstructors[0]}
{uniqueInstructors.length > 1 && ", "}
{uniqueInstructors.length > 1 &&
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)}...`
: course.description}
</span>
</p>

<div className="flex flex-row flex-wrap">
{course.sched.includes("Distance Learning") && <p className="text-sm px-2 py-1 mx-1 my-1 rounded-full border-solid border border-purple-500 bg-purple-300 whitespace-nowrap">
Distance Learning
</p>}
{availableSemesters.map((sem, i) => (
(i < 2) && <span className="text-sm px-2 py-1 mx-1 my-1 rounded-full border-solid border border-sky-500 bg-sky-300 whitespace-nowrap" key={i}>{sem}</span>
))}
</div>
<Link
href={{pathname: `/detail/${course.detailId}`, query: { q: searchTerm }}}
className="flex flex-col bg-zinc-800 p-6 rounded-md shadow-md hover:scale-[1.02] transition hover:transition cursor-pointer">

<h2 className="lg:text-lg md:text-lg font-bold text-white">{course.subjectCode} {course.courseCode}: {course.title}</h2>
<p className="lg:text-sm text-sm text-zinc-400 font-medium my-1">
{course.credits[1] > 1
? `${course.credits[1]} Credits`
: `${course.credits[1]} Credit`}
{` | `}
{uniqueInstructors[0]}
{uniqueInstructors.length > 1 && ", "}
{uniqueInstructors.length > 1 &&
uniqueInstructors[1]
}
</p>

<p className="text-sm text-zinc-300 mb-4 break-words grow">
<span>{course.description.length > 300
? `${course.description.substring(0, 300)}...`
: course.description}
</span>
</p>

<div className="flex flex-row flex-wrap">
{course.sched.includes("Distance Learning") && <p className="text-sm px-2 py-1 mx-1 my-1 rounded-full border-solid border border-purple-500 bg-purple-300 whitespace-nowrap">
Distance Learning
</p>}
{availableSemesters.map((sem, i) => (
(i < 2) && <span className="text-sm text-white px-2 py-1 mx-1 my-1 rounded-full bg-sky-700 whitespace-nowrap" key={i}>{sem}</span>
))}
</div>
</Link >
</>
)
Expand Down
82 changes: 21 additions & 61 deletions src/components/fullInstructorModal.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,6 @@
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 FullInstructorModal = ({ isOpen, onClose, course }) => {
const FullInstructorModal = ({ course }) => {

const [gpa, setGpa] = useState({});

Expand Down Expand Up @@ -107,46 +82,31 @@ const FullInstructorModal = ({ isOpen, onClose, course }) => {


return (
<ChakraProvider theme={theme}>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay
backdropFilter='blur(5px)'
/>
<ModalContent maxW={{ base: "90%", md: "60%", lg: "40%" }} maxH={"80%"}>
<ModalHeader />
<ModalBody className=' overflow-y-auto'>
<div className='flex flex-col'>
<h1 className='text-white text-2xl font-bold'>All Instructors Breakdown</h1>
<h3 className='text-white text-sm'>
To view all semester GPAs sorted by professor, click on the "Average GPA" circle graph!<br />
This graphic displays all the semesters with each professor. Pro-tip: use ⌘F or Ctrl+F to search for a specific professor!<br />
GPA: <span className='bg-[#632230] px-2'>1.0</span> ― <span className='bg-[#ddaa33] px-2 text-black'>4.0</span>
</h3>
<div className='mt-2'>
{Object.keys(gpa).map((semester, index) => (
<div key={index} className='flex flex-col mt-5'>
<h2 className='text-white font-bold text-xl border-b border-yellow-500'>{semester}</h2>
<div className='flex flex-col justify-stretch'>
{Object.keys(gpa[semester]).map((instructor, index) => (
<div key={index} className='flex flex-row mt-2 items-center justify-between'>
<h3 className='text-white font-semibold text-md mr-2'>{instructor}</h3>
<span className='h-0.5 border-b border-dotted flex-grow mx-2' />
<div className='grid w-20 h-10 text-center' style={{ backgroundColor: `${gpa[semester][instructor].color}` }}>
<p className='text-white m-auto font-semibold'>{gpa[semester][instructor].gpa}</p>
</div>
</div>
))}
<div className='h-[32rem] overflow-y-auto flex flex-col'>
<h1 className='text-white text-2xl font-bold'>All Instructors Breakdown</h1>
<h3 className='text-white text-sm'>
This graphic displays all the semesters with each professor. Pro-tip: use ⌘F or Ctrl+F to search for a specific professor!<br />
GPA: <span className='bg-[#632230] px-2'>1.0</span> ― <span className='bg-[#ddaa33] px-2 text-black'>4.0</span>
</h3>
<div className='mt-2'>
{Object.keys(gpa).map((semester, index) => (
<div key={index} className='flex flex-col mt-5'>
<h2 className='text-white font-bold text-xl border-b border-yellow-500'>{semester}</h2>
<div className='flex flex-col justify-stretch'>
{Object.keys(gpa[semester]).map((instructor, index) => (
<div key={index} className='flex flex-row mt-2 items-center justify-between'>
<h3 className='text-white font-semibold text-md mr-2'>{instructor}</h3>
<span className='h-0.5 border-b border-dotted flex-grow mx-2' />
<div className='grid w-20 h-10 text-center' style={{ backgroundColor: `${gpa[semester][instructor].color}` }}>
<p className='text-white m-auto font-semibold'>{gpa[semester][instructor].gpa}</p>
</div>
</div>
))}
</div>
</div>
</ModalBody>
<ModalCloseButton color={'white'} />
<ModalFooter />
</ModalContent>
</Modal>
</ChakraProvider>
))}
</div>
</div>
);
};

Expand Down
Loading

0 comments on commit 201db01

Please sign in to comment.