Index: ontend/README.md =================================================================== --- frontend/README.md (revision 4959205261f057ccc4d069fc6e3961d154192be2) +++ (revision ) @@ -1,54 +1,0 @@ -# React + TypeScript + Vite - -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. - -Currently, two official plugins are available: - -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh - -## Expanding the ESLint configuration - -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: - -```js -export default tseslint.config({ - extends: [ - // Remove ...tseslint.configs.recommended and replace with this - ...tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - ...tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - ...tseslint.configs.stylisticTypeChecked, - ], - languageOptions: { - // other options... - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - }, -}) -``` - -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: - -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' - -export default tseslint.config({ - plugins: { - // Add the react-x and react-dom plugins - 'react-x': reactX, - 'react-dom': reactDom, - }, - rules: { - // other rules... - // Enable its recommended typescript rules - ...reactX.configs['recommended-typescript'].rules, - ...reactDom.configs.recommended.rules, - }, -}) -``` Index: frontend/index.html =================================================================== --- frontend/index.html (revision 4959205261f057ccc4d069fc6e3961d154192be2) +++ frontend/index.html (revision 02269e16fe9c7bff90e07a0c0ee9e6bfef8e5b21) @@ -3,5 +3,5 @@ - + IzberiIzboren Index: frontend/src/App.tsx =================================================================== --- frontend/src/App.tsx (revision 4959205261f057ccc4d069fc6e3961d154192be2) +++ frontend/src/App.tsx (revision 02269e16fe9c7bff90e07a0c0ee9e6bfef8e5b21) @@ -1,5 +1,6 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom"; -import Home from "./Home"; +import CourseCatalog from "./components/SubjectCatalog"; import "./index.css"; +import Home from "./pages/Home"; const router = createBrowserRouter([ @@ -7,4 +8,8 @@ path: "/", element: , + }, + { + path: "/test", + element: , }, ]); Index: ontend/src/Home.tsx =================================================================== --- frontend/src/Home.tsx (revision 4959205261f057ccc4d069fc6e3961d154192be2) +++ (revision ) @@ -1,128 +1,0 @@ -import { useEffect, useState } from "react"; - -type ValidHeader = Extract; -const subject_values: ValidHeader[] = ["name", "code"]; -// const subject_values: (keyof Subject)[] = ["name", "code"]; - -interface Subject { - id: number; - code: string; - name: string; - abstract: string; - info: SubjectInfo; -} - -interface SubjectInfo { - level: number; - short: string; - prerequisite: string; - activated: boolean; - participants: number[]; - mandatory: boolean; - mandatory_for: string[]; - semester: number; - season: string; - elective_for: string[]; - professors: string[]; - assistants: string[]; -} - -function Home() { - const [data, setData] = useState([]); - const [extraData, setExtraData] = useState([]); - const [showData, setShowData] = useState([]); - const [isLoaded, setIsLoaded] = useState(false); - const [limit, setLimit] = useState(10); - - const toggleInfo = (index: number) => { - console.log(extraData[index]); - console.log(extraData); - setShowData((prev) => - prev.map((value, i) => (i === index ? !value : value)) - ); - console.log(showData); - }; - - const renderData = (data: SubjectInfo) => { - return Object.keys(data) - .slice(1) - .map((key) => { - const typedKey = key as keyof SubjectInfo; - const field = data[typedKey]; - return Array.isArray(field) ? ( -

- {key}: {field.length === 0 ? "/" : field.join(", ")} -

- ) : ( -

- {key}: {field === "" ? "/" : field.toString()} -

- ); - }); - }; - - useEffect(() => { - const fetchData = async () => { - const response = await fetch("http://localhost:8000/api"); - const data = await response.json(); - setData(data.rows); - const object_data: SubjectInfo[] = data.rows.map((item: Subject) => { - return item.info; - }); - console.log(object_data); - setExtraData(object_data); - setShowData(Array(object_data.length).fill(false)); - setIsLoaded(true); - }; - fetchData(); - }, []); - return !isLoaded ? ( -

Loading...

- ) : ( -
- {data.slice(0, limit).map((item: Subject, index: number) => { - return ( -
-
-

Subject:

- {subject_values.map((header) => { - return ( -

- {header}: {item[header]} -

- ); - })} - -
- {showData[index] && ( -
-

Subject info:

- {renderData(extraData[index])} -
- )} -
- ); - })} - - -
- ); -} - -export default Home; Index: frontend/src/components/SubjectCatalog.tsx =================================================================== --- frontend/src/components/SubjectCatalog.tsx (revision 02269e16fe9c7bff90e07a0c0ee9e6bfef8e5b21) +++ frontend/src/components/SubjectCatalog.tsx (revision 02269e16fe9c7bff90e07a0c0ee9e6bfef8e5b21) @@ -0,0 +1,267 @@ +import { useEffect, useState } from "react"; +import { Subject, SubjectInfo } from "../types"; +const SubjectCatalog = () => { + const [visibleCourses, setVisibleCourses] = useState(10); + const [searchTerm, setSearchTerm] = useState(""); + const [selectedSubject, setSelectedSubject] = useState(null); + const [subjectData, setSubjectData] = useState([]); + const [extraData, setExtraData] = useState([]); + const [isLoaded, setIsLoaded] = useState(false); + + const SkeletonCard = () => { + return ( +
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+
+ ); + }; + + useEffect(() => { + const fetchData = async () => { + const response = await fetch("http://localhost:8000/api"); + const data = await response.json(); + setSubjectData(data.rows); + const object_data: SubjectInfo[] = data.rows.map((item: Subject) => { + return item.info; + }); + console.log(object_data); + setExtraData(object_data); + setIsLoaded(true); + }; + fetchData(); + }, []); + + const loadMore = () => { + setVisibleCourses((prev) => prev + 10); + }; + + const openSubjectDetails = (subject: Subject) => { + setSelectedSubject(subject); + console.log(subject); + }; + + return ( +
+

Преглед на сите предмети

+
+ {/* filters sidebar */} +
+
+

Филтери

+ +
+ + {/* TODO: add more filters following this template*/} +
+

Filter criterium

+
+ {["filter_value1", "filter_value2", "filter_value3"].map( + (dept) => ( +
+ + console.log("filtering logic; not implemented yet") + } + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ) + )} +
+
+
+ + {/* Main content */} +
+ {/* Search bar */} +
+ setSearchTerm(e.target.value)} + className="w-full p-3 pl-4 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" + /> + +
+ + {/* Course grid */} + + {!isLoaded ? ( +
+ {[...Array(6)].map((_, index) => ( + + ))} +
+ ) : ( +
+ {subjectData.slice(0, visibleCourses).map((subject) => ( +
+
+
+
+

+ {subject.name} +

+

{subject.code}

+
+
+ +

+ tuka treba abstract: Lorem ipsum dolor + sit, amet consectetur adipisicing elit. Et praesentium + dolores est animi officiis aperiam. + {subject.abstract} +

+ +
+ {/* these tags are for listing the domains a subject covers, ex. backend, AI ...*/} + {[ + "Web Development", + "Machine Learning", + "Data Science", + ].map((tag) => ( + + {tag} + + ))} +
+ +
+ {/* these tags could be used as certain flags for some subjects, like most picked subject, best match etc. */} +
+
+ TAG1 +
+
+ TAG2 +
+
+ + {/* this could lead to a subject view page, for now there is no such thing*/} + {/* if implemented, tags should be moved elsewhere*/} + {/* */} +
+
+
+ ))} +
+ )} + + {/* Load more button */} + {isLoaded && subjectData.length > visibleCourses && ( +
+ +
+ )} + + {/* No results message */} + {isLoaded && subjectData.length === 0 && ( +
+

+ Не постојат такви предмети +

+ +
+ )} +
+
+
+ ); +}; + +export default SubjectCatalog; Index: frontend/src/pages/Home.tsx =================================================================== --- frontend/src/pages/Home.tsx (revision 02269e16fe9c7bff90e07a0c0ee9e6bfef8e5b21) +++ frontend/src/pages/Home.tsx (revision 02269e16fe9c7bff90e07a0c0ee9e6bfef8e5b21) @@ -0,0 +1,106 @@ +import { useEffect, useState } from "react"; +import { Subject, SubjectInfo } from "../types"; + +type ValidHeader = Extract; +const subject_values: ValidHeader[] = ["name", "code"]; +// const subject_values: (keyof Subject)[] = ["name", "code"]; + +function Home() { + const [data, setData] = useState([]); + const [extraData, setExtraData] = useState([]); + const [showData, setShowData] = useState([]); + const [isLoaded, setIsLoaded] = useState(false); + const [limit, setLimit] = useState(10); + + const toggleInfo = (index: number) => { + console.log(extraData[index]); + console.log(extraData); + setShowData((prev) => + prev.map((value, i) => (i === index ? !value : value)) + ); + console.log(showData); + }; + + const renderData = (data: SubjectInfo) => { + return Object.keys(data) + .slice(1) + .map((key) => { + const typedKey = key as keyof SubjectInfo; + const field = data[typedKey]; + return Array.isArray(field) ? ( +

+ {key}: {field.length === 0 ? "/" : field.join(", ")} +

+ ) : ( +

+ {key}: {field === "" ? "/" : field.toString()} +

+ ); + }); + }; + + useEffect(() => { + const fetchData = async () => { + const response = await fetch("http://localhost:8000/api"); + const data = await response.json(); + setData(data.rows); + const object_data: SubjectInfo[] = data.rows.map((item: Subject) => { + return item.info; + }); + console.log(object_data); + setExtraData(object_data); + setShowData(Array(object_data.length).fill(false)); + setIsLoaded(true); + }; + fetchData(); + }, []); + return !isLoaded ? ( +

Loading...

+ ) : ( +
+ {data.slice(0, limit).map((item: Subject, index: number) => { + return ( +
+
+

Subject:

+ {subject_values.map((header) => { + return ( +

+ {header}: {item[header]} +

+ ); + })} + +
+ {showData[index] && ( +
+

Subject info:

+ {renderData(extraData[index])} +
+ )} +
+ ); + })} + + +
+ ); +} + +export default Home; Index: frontend/src/pages/Test.tsx =================================================================== --- frontend/src/pages/Test.tsx (revision 02269e16fe9c7bff90e07a0c0ee9e6bfef8e5b21) +++ frontend/src/pages/Test.tsx (revision 02269e16fe9c7bff90e07a0c0ee9e6bfef8e5b21) @@ -0,0 +1,7 @@ +import SubjectCatalog from "../components/SubjectCatalog"; + +function Test() { + return ; +} + +export default Test; Index: frontend/src/types.ts =================================================================== --- frontend/src/types.ts (revision 02269e16fe9c7bff90e07a0c0ee9e6bfef8e5b21) +++ frontend/src/types.ts (revision 02269e16fe9c7bff90e07a0c0ee9e6bfef8e5b21) @@ -0,0 +1,214 @@ +export interface Subject { + id: number; + code: string; + name: string; + abstract: string; + info: SubjectInfo; +} + +export interface SubjectInfo { + level: number; + short: string; + prerequisite: string; + activated: boolean; + participants: number[]; + mandatory: boolean; + mandatory_for: string[]; + semester: number; + season: string; + elective_for: string[]; + professors: string[]; + assistants: string[]; +} + +export interface Course { + id: number; + name: string; + code: string; + credits: number; + description: string; + department: string; + semester: string; + duration: string; + prerequisites: string; + level: "Beginner" | "Intermediate" | "Advanced"; + tags: string[]; + learningOutcomes?: string[]; +} + +export const courseData: Course[] = [ + { + id: 1, + name: "Introduction to Computer Science", + code: "CS 101", + credits: 3, + description: + "A foundational course covering the basic principles of computer science, including algorithms, data structures, and problem-solving techniques.", + department: "Computer Science", + semester: "Fall", + duration: "15 weeks", + prerequisites: "None", + level: "Beginner", + tags: ["Programming", "Algorithms", "Beginner"], + learningOutcomes: [ + "Understand fundamental programming concepts", + "Develop basic problem-solving skills", + "Implement simple algorithms", + "Analyze program efficiency", + ], + }, + { + id: 2, + name: "Data Structures and Algorithms", + code: "CS 201", + credits: 4, + description: + "An in-depth exploration of data structures and algorithms, focusing on implementation, analysis, and application to real-world problems.", + department: "Computer Science", + semester: "Spring", + duration: "15 weeks", + prerequisites: "CS 101", + level: "Intermediate", + tags: ["Data Structures", "Algorithms", "Intermediate"], + }, + { + id: 3, + name: "Database Systems", + code: "CS 301", + credits: 3, + description: + "Introduction to database design, implementation, and management, covering relational models, SQL, and database optimization techniques.", + department: "Computer Science", + semester: "Fall", + duration: "15 weeks", + prerequisites: "CS 201", + level: "Intermediate", + tags: ["Databases", "SQL", "Intermediate"], + }, + { + id: 4, + name: "Artificial Intelligence", + code: "CS 401", + credits: 4, + description: + "Exploration of AI concepts including search algorithms, knowledge representation, machine learning, and natural language processing.", + department: "Computer Science", + semester: "Spring", + duration: "15 weeks", + prerequisites: "CS 201, MATH 240", + level: "Advanced", + tags: ["AI", "Machine Learning", "Advanced"], + }, + { + id: 5, + name: "Calculus I", + code: "MATH 101", + credits: 4, + description: + "Introduction to differential and integral calculus, covering limits, derivatives, integrals, and their applications.", + department: "Mathematics", + semester: "Fall", + duration: "15 weeks", + prerequisites: "None", + level: "Beginner", + tags: ["Calculus", "Mathematics", "Beginner"], + }, + { + id: 6, + name: "Linear Algebra", + code: "MATH 201", + credits: 3, + description: + "Study of vector spaces, linear transformations, matrices, determinants, eigenvalues, and eigenvectors.", + department: "Mathematics", + semester: "Spring", + duration: "15 weeks", + prerequisites: "MATH 101", + level: "Intermediate", + tags: ["Linear Algebra", "Mathematics", "Intermediate"], + }, + { + id: 7, + name: "Classical Mechanics", + code: "PHYS 201", + credits: 4, + description: + "Study of motion, forces, energy, and momentum in physical systems using Newtonian mechanics.", + department: "Physics", + semester: "Fall", + duration: "15 weeks", + prerequisites: "PHYS 101, MATH 101", + level: "Intermediate", + tags: ["Mechanics", "Physics", "Intermediate"], + }, + { + id: 8, + name: "Electromagnetics", + code: "PHYS 301", + credits: 4, + description: + "Study of electromagnetic fields, waves, and their applications in modern technology.", + department: "Physics", + semester: "Spring", + duration: "15 weeks", + prerequisites: "PHYS 201, MATH 201", + level: "Advanced", + tags: ["Electromagnetics", "Physics", "Advanced"], + }, + { + id: 9, + name: "Circuit Analysis", + code: "ENG 201", + credits: 3, + description: + "Introduction to the analysis of electrical circuits, including DC and AC circuits, network theorems, and operational amplifiers.", + department: "Engineering", + semester: "Fall", + duration: "15 weeks", + prerequisites: "PHYS 201, MATH 201", + level: "Intermediate", + tags: ["Circuits", "Engineering", "Intermediate"], + }, + { + id: 10, + name: "Signals and Systems", + code: "ENG 301", + credits: 4, + description: + "Analysis of continuous and discrete signals and systems in both time and frequency domains.", + department: "Engineering", + semester: "Spring", + duration: "15 weeks", + prerequisites: "ENG 201, MATH 301", + level: "Advanced", + tags: ["Signals", "Systems", "Engineering", "Advanced"], + }, + { + id: 11, + name: "Discrete Mathematics", + code: "MATH 240", + credits: 3, + description: + "Introduction to discrete mathematical structures including sets, logic, combinatorics, graphs, and number theory.", + department: "Mathematics", + semester: "Fall", + duration: "15 weeks", + prerequisites: "MATH 101", + level: "Intermediate", + tags: ["Discrete Math", "Mathematics", "Intermediate"], + }, + { + id: 12, + name: "Operating Systems", + code: "CS 350", + credits: 4, + description: + "Study of operating system principles, including process management, memory management, file systems, and security.", + department: "Computer Science", + semester: "Fall", + duration: "15 weeks", + prerequisites: "CS 201", + level: "Advanced", + tags: ["OS", "Systems", "Advanced"], + }, +];