Merge pull request #15 from zjf19002/API-Course-Search

added to course search and cleaned up files

class_registration_app/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import Home from './components/Home.vue'
+
 </script>
 
 <template>

class_registration_app/src/assets/main.css

@@ -112,22 +112,46 @@ a,
 
 .course-list-item {
   padding: 20px;
-  display: flex;
+  display: inline-block;
   margin-top: 10px;
   margin-bottom: 40px;
   min-width: 80vw;
   background-color: #ffffff;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  transition: transform 1s, box-shadow 1s;
+}
+
+.course-list-item:hover{
+  transform: scale(1.005); /* Scale to 1.2 times the original size */
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8); /* Shadow with increased blur and opacity */
 }
 
 .course-name {
-  margin-left: 1vw;
+  display: inline-block;
   font-weight: 500;
 }
 
 .course-location {
-  margin-left: 1vh;
+  display: inline-block;
+  margin-left: 2vh;
+}
+
+.course-status{
+  float: right;
+}
+
+.course-professor {
+  display: inline-block;
+  margin-left: 2vh;
+}
+
+.course-space {
+  position: relative;
+  float: right;
+}
 
+.course-prerequisites{
+  margin-left: 2vh;
 }
 

class_registration_app/src/components/CourseSearch.vue

@@ -4,6 +4,16 @@ const AsyncComponent = defineAsyncComponent(() =>
   import('./CourseSearch.vue')
 );
 
+interface CourseInfo {
+  CourseId: string;
+  CourseLocation: string;
+  OpenStatus: boolean;
+  Professor: string;
+  MaxStudents: number;
+  StudentsEnrolled: number;
+  Prerequisites: string;
+}
+
 function handleSearch() {
   const elementsToRemove = document.querySelectorAll(`.${"course-list-item"}`);
       elementsToRemove.forEach(element => {
@@ -26,14 +36,21 @@ function handleSearch() {
     }).then(response => {
       console.log(response.Items);
 
-      let searchbar = document.getElementById("search");
+      let searchbar = <HTMLInputElement>document.getElementById("search");
+
+      let filteredCourses = response.Items.filter(function (course: CourseInfo)
+      { return course.CourseId.includes(searchbar.value.toUpperCase())} );
 
-      let filteredCourses = response.Items.filter(function (str: string) { return str.CourseId.includes(searchbar.value.toUpperCase())} );
-      filteredCourses.forEach((Course: { CourseId: string; CourseLocation: string;}) => {
+      filteredCourses.forEach((Course: CourseInfo) => {
         let container = document.getElementById("container");
         let div = document.createElement("div");
         let course_name = document.createElement('h2');
         let course_location = document.createElement('h2');
+        let course_status = document.createElement('h2');
+        let course_professor = document.createElement('h2');
+        let course_space = document.createElement('h2');
+        let course_prerequisites = document.createElement('h2');
+
         // Set class or any other attributes for the div
         div.className = "course-list-item"; // You can set class name here
 
@@ -44,11 +61,33 @@ function handleSearch() {
         course_location.className = "course-location";
         course_location.textContent = Course.CourseLocation;
 
+        course_status.className = "course-status";
+        if(Course.OpenStatus){
+          course_status.textContent = "Enroll Status: Open";
+        }else{
+          course_status.textContent = "Enroll Status: Closed";
+        }
+
+        course_professor.className = "course-professor";
+        course_professor.textContent = "Instructor - " + Course.Professor;
+
+        course_space.className = "course-space";
+        course_space.textContent = "Space: " + Course.StudentsEnrolled + "/" + Course.MaxStudents;
+
+        course_prerequisites.className = "course-prerequisites";
+        course_prerequisites.textContent = "Prerequisites: " + Course.Prerequisites;
+
+
         // Append the div to the container
         if (container != null){
           container.appendChild(div);
           div.appendChild(course_name);
           div.appendChild(course_location);
+          div.appendChild(course_status);
+          div.appendChild(document.createElement('br'));
+          div.appendChild(course_professor);
+          div.appendChild(course_space);
+          div.appendChild(course_prerequisites);
         }
         
         return response;