diff --git a/src/App.tsx b/src/App.tsx index 1c1e0b2..3350c71 100755 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,7 +24,7 @@ function App() { } /> } /> - } /> + } /> Error 404: Page not found}/> diff --git a/src/components/class/class.css b/src/components/class/class.css index 773bdee..1a65049 100755 --- a/src/components/class/class.css +++ b/src/components/class/class.css @@ -80,8 +80,9 @@ } .body-title { + left: 15vw; text-align: left; - width: 70%; + width: 70vw; } #class-description { @@ -146,3 +147,19 @@ transform: scale(1.2); --icon-color: var(--highlight-color); } + +.classRedirect{ + color: var(--accent-color); + padding: 2%; + margin: 4%; + width: 40%; + border-radius: 0.5em; +} + +.classRedirect:hover{ + background-color: rgba(0, 0, 0, .5); +} + +.classRedirectTitle{ + font-weight: bold; +} diff --git a/src/components/class/class.tsx b/src/components/class/class.tsx index 3822002..0413ffe 100755 --- a/src/components/class/class.tsx +++ b/src/components/class/class.tsx @@ -1,4 +1,5 @@ import React, { FC, useState, useEffect } from "react"; +import { Link } from "react-router-dom"; import "./class.css"; /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ @@ -41,18 +42,12 @@ const Class: FC<{data: any}> = ({data}) => {
{data.description}
-
Transfers
-
- {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */} - {data.transfer.length > 0 ? data.transfer.map((el: any, pos: number) => ( -
-
{el.title}
-
{el.id}
-
{el.school}
-
{el.location}
-
- )) :
No Transfers
} -
+ {/* feel free to get rid of this part and make it direct transfer from little class box to website + I did this for convenience and liked the smootheness lol */} + + HEAD OVER TO THE NEW PAGE FOR +
[{data.title}]
+ diff --git a/src/components/settings/settings.css b/src/components/settings/settings.css index dfe10bb..b8d38dd 100644 --- a/src/components/settings/settings.css +++ b/src/components/settings/settings.css @@ -75,7 +75,6 @@ inset: 0; } - .settings-exit { position: absolute; right: 0.5em; diff --git a/src/pages/classes/classes.css b/src/pages/classes/classes.css index b30ee56..5424337 100644 --- a/src/pages/classes/classes.css +++ b/src/pages/classes/classes.css @@ -19,4 +19,161 @@ justify-content: flex-start; font-size: calc(10px + 2vmin); color: var(--header-color); +} + +.whole-body{ + display: flex; + flex-direction: row; + margin-top: 1em; + justify-content: space-around; +} + +.course-titles{ + width: 100%; + display: flex; + flex-flow: row; + justify-content: center; + margin-top: 0.5em; + font-size: 1.05em; + gap: 5%; +} + +.course-title-items{ + /* min-width: 20vw; */ + max-width: 25vw; +} + +.left-body { + display: flex; + flex-flow: column wrap; + justify-content: left; + align-items: center; + height: 80%; + margin-top: 1em; + flex-grow: 3; +} + +.right-body { + display: flex; + flex-flow: column wrap; + justify-content: right; + align-items: center; + height: 80%; + margin-top: 1em; + flex-grow: 1; +} + +.body-title { + left: 15; + text-align: left; + width: 70%; +} + +.description-title{ + width: 60vw; +} + +.transferlistTitle{ + width: 60vw; +} + +.transferlistTitle:hover{ + background-color: rgba(0, 0, 0, .5); +} + +.arrow { + border: solid var(--accent-color); + border-width: 0 0.2em 0.2em 0; + display: inline-block; + padding: 0.2em; + transition: 0.5s; + transform: rotate(-45deg); + justify-content: end; +} + +.arrow:hover{ + transform: rotate(45deg); +} + +.transferList{ + width: 60vw; + height: 35%; + max-height: 35vh; + overflow: scroll; + overflow-x: hidden; + padding: 0.5em; + border-radius: 0.5em; + color: var(--text-color); + border: solid var(--highlight-color); + text-align: left; + font-size: 0.8rem; +} + +.sectionlistTitle{ + width: 20vw; +} + +.sectionsList{ + width: 20vw; + height: 35%; + max-height: 35vh; + overflow: scroll; + overflow-x: hidden; + padding: 0.5em; + border-radius: 0.5em; + color: var(--text-color); + border: solid var(--highlight-color); + text-align: left; + font-size: 0.8rem; +} + +.class-header { + width: 100%; + display: flex; + flex-flow: row; + justify-content: flex-start; + margin-top: 0.5em; + font-size: 1.05em; + } + + .class-header>* { + width: 20%; + margin: auto; +} + +.class-header>*:first-child{ + width: 40% +} + +.class-description { + width: 60vw; + height: 35%; + max-height: 35vh; + overflow: auto; + overflow-x: hidden; + padding: 0.5em; + border-radius: 0.5em; + color: var(--text-color); + border: solid var(--highlight-color); + text-align: left; + text-indent: 2em; + font-size: 0.8em; +} + +.right-sidebox{ + display: block; + width: 20vw; + height: 35%; + overflow: hidden; + overflow-x: auto; + padding: 0.5em; + border-radius: 0.5em; + color: var(--text-color); + border: solid var(--highlight-color); + text-align: left; + font-size: 0.8em; +} + +.req-title{ + } \ No newline at end of file diff --git a/src/pages/classes/classes.tsx b/src/pages/classes/classes.tsx index 228e332..cfe1840 100644 --- a/src/pages/classes/classes.tsx +++ b/src/pages/classes/classes.tsx @@ -1,55 +1,67 @@ -import React, { FC /*, useState, useEffect */ } from "react"; +import React, { FC, useState } from "react"; import "./classes.css"; - -// import { CourseSearcher } from "../../scripts/fuzzy-search"; +import "../../components/class/class.css"; import NavBar from "../../components/navbar/navbar"; -// import SearchBar from "../../components/search/search"; import Pages from "../pageList"; -// import Class from "../../components/class/class"; -// import { Course } from "../../types"; +import Class from "../../components/class/class"; +import { CourseSearcher } from "../../scripts/fuzzy-search"; +import { useAppSelector } from "../../store"; +import { Transfer } from "../../types"; +import ClassesInfo from "./classesComps/classesInfo"; -// interface InputState { -// results: Course[]; -// } -// -// const searcher = new CourseSearcher(); +const searcher = new CourseSearcher(); const ClassesPage: FC = () => { - // const [state, setState] = useState({results:[]}); - // - // const [searchbar_content, content_update] = useState(""); - // - // const searchQuery = (query: string): void => { - // if(query === "") { - // setState({results: []}); - // return; - // } - // const results = searcher.search(query).slice(0,7); - // console.log(results); - // setState({results: results}); - // }; - // - // const call_search = React.useCallback((value: string): void => { - // searchQuery(value); - // }, []); - // - // useEffect(() => { - // const timeOutId = setTimeout(() => call_search(searchbar_content),200); - // return () => clearTimeout(timeOutId); - // },[searchbar_content,call_search]); - - return ( -
-
- -

Enter the department you want

- {/**/} - {/*{state.results.map((el,pos) => {return ;})}*/} -
-
- ); -}; + + const pathname = window.location.pathname; + const classCode = pathname.substring(7); + const classDept = classCode.substring(0,4).toUpperCase(); + const classNum = classCode.substring(4); + + const { courses } = useAppSelector(state => state.courses); + + searcher.update(Object.values(courses)); + const results = searcher.search(classCode); + // fuzzy search not the fastest nor best however, it was only solution i could find :( + + if(classCode.length != 8){ + return ( +
+
+ +

ERROR 404: PAGE NOT FOUND

+ invalid class code +
+
+ ); + } + else if(results[0].id == classDept + "-" + classNum){ + + return ( +
+
+ +
+ +
+
+
+ ); + } + else{ + return ( +
+
+ +

No class found

+ Did you mean any of these: + {results.splice(0,5).map((el,pos) => {return ;})} +
+
+ ); + } +}; export default ClassesPage; \ No newline at end of file diff --git a/src/pages/classes/classesComps/classesInfo.tsx b/src/pages/classes/classesComps/classesInfo.tsx new file mode 100644 index 0000000..0d92ad0 --- /dev/null +++ b/src/pages/classes/classesComps/classesInfo.tsx @@ -0,0 +1,77 @@ +import React, { FC } from "react"; +import ClassesTransfers from "./classesTransfers"; +import ClassesSections from "./classesSections"; +import { Transfer } from "../../../types"; +import "../classes.css"; +import "../../../components/class/class.css"; + +const ClassesInfo: FC<{course: any}> = ({course}) => { + + return ( +
+

+ {course.title} + {course.id} + Credits: {course.credits} +

+
+ +
Description
+
{course.description}
+ + + + +
+ Related Classes +
+
+ + Prerequisites courses: + + {/* Issue: white screens when doing course.prereq.length + or any other course.something + also it seems like a lot of information is still + not here yet*/} +
+ {course.prereq} +
+ + Corequisite courses: + +
+ {course.coreq} +
+ + Cross-listed courses: + +
+ {course.cross} +
+
+
+
+ Other details +
+
+
+ Communication Intensive: + +  {course.ci} + +
+
+ When Offered: + + {course.offered} + +
+
+ +
+
+ ); + +}; + +export default ClassesInfo; \ No newline at end of file diff --git a/src/pages/classes/classesComps/classesSections.tsx b/src/pages/classes/classesComps/classesSections.tsx new file mode 100644 index 0000000..bc2499a --- /dev/null +++ b/src/pages/classes/classesComps/classesSections.tsx @@ -0,0 +1,31 @@ +import React, { FC, useState } from "react"; +import { Section } from "../../../types"; +import "../classes.css"; + +const ClassesSections: FC<{sections: Section[]}> = ({sections}) => { + return( +
+
+ + Sections + +
+
+ {/* Issue: white screens when adding this, or even doing sections.length */} + {/* Plan: idea was to have the sections listed on the right and clickable to + display more info per section */} + + {/*sections.length > 0 ? sections.map((el: Section, pos: number) => ( +
+
{el.section}
+
{el.crn}
+
{el.remaining} / {el.capacity}
+
+ )) :
No Sections
*/} + {sections} +
+
+ ); +}; + +export default ClassesSections; \ No newline at end of file diff --git a/src/pages/classes/classesComps/classesTransfers.tsx b/src/pages/classes/classesComps/classesTransfers.tsx new file mode 100644 index 0000000..5a4005a --- /dev/null +++ b/src/pages/classes/classesComps/classesTransfers.tsx @@ -0,0 +1,35 @@ +import React, { FC, useState } from "react"; +import { Transfer } from "../../../types"; +import "../classes.css"; + +const ClassesTransfers: FC<{transfers: Transfer[]}> = ({transfers}) => { + + const [display, update_display] = useState(false); + + const toggle_shown = () => { + update_display(!display); + }; + + return( +
+
+ + Transfers + + +
+
+ {transfers.length > 0 ? transfers.map((el: Transfer, pos: number) => ( +
+
{el.title}
+
{el.id}
+
{el.school}
+
{el.location}
+
+ )) :
No Transfers
} +
+
+ ); +}; + +export default ClassesTransfers; \ No newline at end of file