mirror of
https://github.com/Leado123/Leado123.github.io.git
synced 2026-10-01 00:32:59 +00:00
eee
This commit is contained in:
Leo Wen
@@ -17,16 +17,20 @@
|
||||
"@nextui-org/select": "^2.4.9",
|
||||
"@react-pdf/renderer": "^4.2.1",
|
||||
"@types/mime-types": "^2.1.4",
|
||||
"@types/pdf-viewer-reactjs": "^2.2.5",
|
||||
"@types/react-autocomplete": "^1.8.11",
|
||||
"@types/react-autosuggest": "^10.1.11",
|
||||
"accessible-autocomplete": "^3.0.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"autosuggest": "^0.0.2",
|
||||
"document-viewer-ts": "^1.0.0-legacy",
|
||||
"flowbite": "^2.5.2",
|
||||
"flowbite-react": "^0.10.2",
|
||||
"gh-pages": "^6.3.0",
|
||||
"graphql": "^16.10.0",
|
||||
"is-mobile": "^5.0.0",
|
||||
"mime-types": "^2.1.35",
|
||||
"pdf-viewer-reactjs": "^2.2.3",
|
||||
"react": "^18.3.1",
|
||||
"react-autocomplete": "^1.8.1",
|
||||
"react-autosuggest": "^10.1.0",
|
||||
@@ -38,6 +42,7 @@
|
||||
"react-router-dom": "^7.1.3",
|
||||
"react-select": "^5.10.0",
|
||||
"react-tabs": "^6.1.0",
|
||||
"srpv-js": "^1.0.16",
|
||||
"tailwindcss": "^3.4.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
+10
-25
@@ -8,6 +8,8 @@ import { Accordion, FileInput } from "flowbite-react";
|
||||
import { Button, Label, Modal, TextInput } from "flowbite-react";
|
||||
import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { isMobile } from "is-mobile";
|
||||
|
||||
|
||||
export const classOptions = [ // TODO REMOVE
|
||||
{ key: "nofilter", label: "No Class Filter" },
|
||||
@@ -23,10 +25,6 @@ export const classOptions = [ // TODO REMOVE
|
||||
|
||||
var searchQuery = "";
|
||||
|
||||
function findIfMobile() {
|
||||
//return true;
|
||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
}
|
||||
|
||||
function App() {
|
||||
const navigate = useNavigate();
|
||||
@@ -37,7 +35,6 @@ function App() {
|
||||
const [tempFileId, setTempFileId] = useState<string>("");
|
||||
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
|
||||
const [syllabi, setSyllabi] = useState<ClassListing[]>([]);
|
||||
@@ -115,14 +112,7 @@ function App() {
|
||||
console.log("use effect ran");
|
||||
handleSearch();
|
||||
|
||||
if (findIfMobile()) {
|
||||
// Code for mobile devices
|
||||
setIsMobile(true);
|
||||
console.log("mobile")
|
||||
} else {
|
||||
// Code for desktop devices
|
||||
console.log("pc")
|
||||
}
|
||||
|
||||
},
|
||||
[location])
|
||||
|
||||
@@ -145,12 +135,12 @@ function App() {
|
||||
return (
|
||||
<>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
|
||||
{isMobile === false && <div className=" flex justify-center items-center">
|
||||
{isMobile() === false && <div className=" flex justify-center items-center">
|
||||
<Tabs className="w-full bg-zinc-950 p-4">
|
||||
<TabList className="flex space-x-2 pb-1">
|
||||
<Tab selectedClassName="rounded-lg p-1 underline decoration-wavy" className=" focus:outline-none p-1 cursor-pointer">Syllabuses</Tab>
|
||||
<Tab selectedClassName="rounded-lg p-1 underline decoration-wavy" className=" focus:outline-none p-1 cursor-pointer">ObjectSearch (In Development)</Tab>
|
||||
</TabList>
|
||||
<TabList className="flex space-x-2 pb-1">
|
||||
<Tab selectedClassName="rounded-lg p-1 underline decoration-wavy" className=" focus:outline-none p-1 cursor-pointer">Syllabuses</Tab>
|
||||
<Tab selectedClassName="rounded-lg p-1 underline decoration-wavy" className=" focus:outline-none p-1 cursor-pointer">ObjectSearch (In Development)</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanel>
|
||||
<div className="place-items-center justify-center flex w-full flex-col">
|
||||
@@ -190,7 +180,7 @@ function App() {
|
||||
|
||||
<div className="listing">
|
||||
{syllabi.map((syllabus, i) => {
|
||||
return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.class?.className} description={syllabus.description} fullClassName={syllabus.class?.fullClassName} textbookCost={syllabus.textbookCost} classLength={syllabus.classLength} professor={syllabus.professor} />
|
||||
return <SyllabusListing key={i} fileName={syllabus.fileName} professorId={syllabus.professorId} className={syllabus.class?.className} description={syllabus.description} fullClassName={syllabus.class?.fullClassName} textbookCost={syllabus.textbookCost} classLength={syllabus.classLength} professor={syllabus.professor} />
|
||||
})}
|
||||
|
||||
</div>
|
||||
@@ -202,8 +192,7 @@ function App() {
|
||||
</Tabs>
|
||||
|
||||
</div>}
|
||||
{isMobile === true && <div className="p-1 pt-2">
|
||||
<h3 className="text-2xl font-bold mb-2">Share Syllabus</h3>
|
||||
{isMobile() === true && <div className="p-1 pt-2">
|
||||
|
||||
<div className="">
|
||||
<div className="flex space-x-1">
|
||||
@@ -217,10 +206,6 @@ function App() {
|
||||
search
|
||||
</span>
|
||||
</button></div>
|
||||
<button onClick={() => setOpenModal(true)} className=" bg-blue-700 p-1 text-yellow-50 rounded-lg flex flex-row">
|
||||
<span className="flex justify-center items-center aspect-square flex-1"><i className="material-symbols-rounded">attach_file</i></span>
|
||||
<span className="text-xs">1 hr</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="listing">
|
||||
|
||||
+19
-9
@@ -1,23 +1,32 @@
|
||||
import Marquee from "react-fast-marquee";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { isMobile } from "is-mobile";
|
||||
|
||||
function Layout({children}: {children: React.ReactNode}) {
|
||||
|
||||
function Layout({ children }: { children: React.ReactNode }) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
console.log('Layout rendering'); // Add this line
|
||||
|
||||
|
||||
|
||||
|
||||
const uploadSyllabi = () => {
|
||||
navigate('/upload')
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="place-items-center justify-center flex border-b-2 pt-10 border-purple-500">
|
||||
<div className="w-1/2 ">
|
||||
<div className={`place-items-center justify-center flex border-b-2 ${isMobile() ? "pt-0" : "pt-10"} border-purple-500`}>
|
||||
<div className={`${isMobile() ? "w-full" : "w-1/2"} p-4`}>
|
||||
<div className="flex flex-row">
|
||||
<h3 onClick={() => {navigate("/")}} className="text-4xl hover:text-yellow-400 w-min cursor-pointer text-yellow-300 font-extrabold text-left flex-1">📚 Share Syllabus</h3>
|
||||
<h3 onClick={() => { navigate("/") }} className="text-4xl hover:text-yellow-400 w-min cursor-pointer text-yellow-300 font-extrabold text-left flex-1">📚 Share Syllabus</h3>
|
||||
</div>
|
||||
<p className="text-left ">
|
||||
A platform for sharing and exploring course syllabi, helping students compare class structures, assignments, and topics while earning community service hours by contributing syllabuses to the knowledge base.</p>
|
||||
{!isMobile() && (
|
||||
<p className="text-left">
|
||||
A for sharing and exploring course syllabi, helping students compare class structures, assignments, and topics while earning community service hours by contributing syllabuses to the knowledge base.
|
||||
</p>
|
||||
)}
|
||||
<div className="pt-1 text-left flex flex-row space-x-2">
|
||||
<p className="text-xs font-bold">Contacts:</p>
|
||||
<Marquee className="text-xs flex-1" speed={25}>
|
||||
@@ -25,12 +34,13 @@ function Layout({children}: {children: React.ReactNode}) {
|
||||
</Marquee>
|
||||
</div>
|
||||
|
||||
<div className="w-full p-4 flex place-items-center justify-between text-sm">
|
||||
<div className={`w-full ${isMobile() ? "p-0" : "p-4"} flex place-items-center justify-between text-sm`}>
|
||||
<a href="https://portal.rcc.edu">MyPortal</a>
|
||||
<a href="https://www.norcocollege.edu/articulation/documents/norco-igetc-2024-25.pdf">IGETC</a>
|
||||
<a href="https://www.norcocollege.edu/services/counseling/index.html">Counseling</a>
|
||||
<a href="https://mvc.edu/_resources/files/transfer/rccd-associate-degree-requirements.pdf ">RCCD GE (Graduation Requirements)</a>
|
||||
<button onClick={uploadSyllabi} className="bg-blue-600 hover:bg-blue-700 border-yellow-300 border-2 flex place-items-center justify-center text-white rounded-lg font-bold p-2"><span className="pr-1 material-symbols-rounded">add_circle</span>Upload a Syllabus</button>
|
||||
{!isMobile() && <button onClick={uploadSyllabi} className={`bg-blue-600 hover:bg-blue-700 border-yellow-300 border-2 flex place-items-center justify-center text-white rounded-lg font-bold p-2`}><span className="pr-1 material-symbols-rounded">add_circle</span>Upload a Syllabus</button>}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
function Professor () {
|
||||
return (
|
||||
<div>
|
||||
<h1>Professor</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Professor;
|
||||
+5
-1
@@ -1,5 +1,6 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
|
||||
import {PDFViewer} from 'srpv-js'
|
||||
|
||||
|
||||
|
||||
@@ -32,6 +33,8 @@ function View({passedFile, className}: ViewParams) {
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
console.log(docs[0].uri);
|
||||
|
||||
return (
|
||||
@@ -47,8 +50,9 @@ function View({passedFile, className}: ViewParams) {
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
{isPDF
|
||||
? <iframe src={`https://api.sharesyllabus.me/files/${file}`} className="flex-1 w-full rounded-xl"></iframe>
|
||||
? <div className="flex-1 w-full rounded-xl"><PDFViewer link={`https://api.sharesyllabus.me/files/${file}`}></PDFViewer></div>
|
||||
: <DocViewer className="flex-1 w-full rounded-xl" pluginRenderers={DocViewerRenderers} documents={docs}></DocViewer>
|
||||
}
|
||||
|
||||
|
||||
+11
-4
@@ -9,18 +9,25 @@ import Reports from './Reports.tsx';
|
||||
import Syllabus from './Syllabus.tsx';
|
||||
import Layout from './Layout.tsx';
|
||||
import UploadSyllabi from './UploadSyllabi.tsx';
|
||||
import Professor from './Professor.tsx';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<HashRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Layout><App/></Layout>} />
|
||||
<Route path="/view/:file" element={<View />} />
|
||||
<Route path="/admin" element={<Admin />} />
|
||||
<Route path="/admin/:highlightedSyllabusId" element={<Admin />} />
|
||||
<Route path="/flag/:id" element={<Layout><Flag /></Layout>} />
|
||||
<Route path="/reports" element={<Reports />} />
|
||||
<Route path="/syllabus/:id" element={<Layout><Syllabus/></Layout>} />
|
||||
<Route path="/upload" element={<Layout><UploadSyllabi/></Layout>} />
|
||||
|
||||
</Routes>
|
||||
<Layout>
|
||||
<Routes>
|
||||
<Route path="/" element={<App />} />
|
||||
<Route path="/flag/:id" element={<Flag />} />
|
||||
<Route path="/syllabus/:id" element={<Syllabus />} />
|
||||
<Route path="/upload" element={<UploadSyllabi />} />
|
||||
<Route path="/professor/:id" element={<Professor />} />
|
||||
</Routes>
|
||||
</Layout>
|
||||
</HashRouter>
|
||||
);
|
||||
|
||||
+14
-12
@@ -3,6 +3,7 @@ import "./App.tsx";
|
||||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import isMobile from "is-mobile";
|
||||
|
||||
export enum TextbookCost {
|
||||
free,
|
||||
@@ -33,11 +34,8 @@ export interface ClassListing {
|
||||
professorId?: string;
|
||||
id?: string;
|
||||
}
|
||||
function findIfMobile() {
|
||||
//return true;
|
||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
}
|
||||
function SyllabusListing({ className, professor, fileName, description, classLength, fullClassName, textbookCost }: ClassListing) {
|
||||
|
||||
function SyllabusListing({ className, professor, professorId, fileName, description, classLength, fullClassName, textbookCost }: ClassListing) {
|
||||
|
||||
const [hideMore, setHideMore] = useState(true);
|
||||
|
||||
@@ -61,13 +59,19 @@ function SyllabusListing({ className, professor, fileName, description, classLen
|
||||
const navigate = useNavigate();
|
||||
|
||||
async function handleView() {
|
||||
if (findIfMobile()) {
|
||||
if (isMobile()) {
|
||||
navigate(`/view/${encodeURIComponent(`${fileName}`)}`);
|
||||
} else {
|
||||
navigate(`/syllabus/${encodeURIComponent(`${id}`)}`);
|
||||
}
|
||||
}
|
||||
|
||||
/*async function viewProfessor() {
|
||||
navigate(`/professor/${encodeURIComponent
|
||||
(`${professorId}`)}`);
|
||||
}*/
|
||||
console.log(professorId);
|
||||
|
||||
async function handleFlag() {
|
||||
navigate(`/flag/${encodeURIComponent(`${id}`)}`);
|
||||
}
|
||||
@@ -85,7 +89,7 @@ function SyllabusListing({ className, professor, fileName, description, classLen
|
||||
}
|
||||
|
||||
|
||||
if (!findIfMobile()) {
|
||||
if (!isMobile()) {
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -94,7 +98,7 @@ function SyllabusListing({ className, professor, fileName, description, classLen
|
||||
<span className="font-extrabold">{className}</span>
|
||||
<span className="text-xs text-gray-300">{fullClassName}</span>
|
||||
{textbookCostElement()}
|
||||
<span className="flex-1 italic">{professor}</span>
|
||||
<span className="flex-1 italic cursor-pointer hover:text-yellow-300 w-min">{professor}</span>
|
||||
{classLength > 7 ? <span className="text-xs font-light text-green-600">{classLength} weeks course</span> : <span className="text-xs font-light text-red-600">{classLength} weeks course</span>}
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col text-center">
|
||||
@@ -119,16 +123,14 @@ function SyllabusListing({ className, professor, fileName, description, classLen
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<div className="w-full flex flex-row text-left bg-white text-black rounded-lg p-3">
|
||||
<div onClick={handleView} className="w-full flex flex-row text-left bg-purple-200 text-black rounded-lg p-3">
|
||||
<div className="flex-1 flex flex-col">
|
||||
<span className=" font-extrabold">{className}</span>
|
||||
<span className="flex-1 italic">{professor}</span>
|
||||
<span className="w-4/5 font-serif">"{description}"</span>
|
||||
{classLength > 7 ? <span className="text-xs font-light text-green-600">{classLength} weeks course</span> : <span className="text-xs font-light text-red-600">{classLength} weeks course</span>}
|
||||
</div>
|
||||
<button className="flex items-center h-full p-2 rounded-lg bg-slate-200 text-black" onClick={handleView}>
|
||||
<span className="material-symbols-rounded text-2xl">open_in_new</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user