added advanced search to course search

class_registration_app/src/assets/main.css

@@ -28,7 +28,7 @@
 #app {
   min-width: 100vw;
   padding: 0rem;
-
+  color: black;
   font-weight: normal;
 }
 
@@ -172,3 +172,16 @@ a,
   margin-left: 2vh;
 }
 
+.advanced-search-container{
+  min-width: 80vw;
+  width: 600px; /* Adjust the width as needed */
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  overflow-y: auto;
+}

class_registration_app/src/components/CourseSearch.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from 'vue';
+import { ref } from 'vue';
+
 const AsyncComponent = defineAsyncComponent(() =>
   import('./CourseSearch.vue')
 );
@@ -11,8 +13,78 @@ interface CourseInfo {
   Professor: string;
   MaxStudents: number;
   StudentsEnrolled: number;
-  Prerequisites: string;
+  Prerequisites: string[];
   Section: string; // added for section
+  CourseScheduledDays: string[];
+  Level: string;
+}
+
+interface Filters { // interface for user-selected filters
+  courseLocation: string;
+  meetingTimes: string[];
+  courseLevel: string[];
+  openStatus: string[];
+  courseProfessor: string;
+}
+
+let showAdvancedSearch = ref(false); // visibility state of advanced search
+const selectedFilters: Filters = { // default parameters for search settings, gets modified by user
+  courseLocation: '',
+  meetingTimes: [],
+  courseLevel: [],
+  openStatus: [],
+  courseProfessor: ''
+};
+
+function updateMeetingFilters(value: string) {
+  const index = selectedFilters.meetingTimes.indexOf(value);
+  if (index === -1) {
+    selectedFilters.meetingTimes.push(value);
+  } else {
+    selectedFilters.meetingTimes.splice(index, 1);
+  }
+}
+
+function updateCourseLevelFilters(value: string) {
+  const index = selectedFilters.courseLevel.indexOf(value);
+  if (index === -1) {
+    selectedFilters.courseLevel.push(value);
+  } else {
+    selectedFilters.courseLevel.splice(index, 1);
+  }
+}
+
+function updateOpenStatusFilters(value: string) {
+  const index = selectedFilters.openStatus.indexOf(value);
+  if (index === -1) {
+    selectedFilters.openStatus.push(value);
+  } else {
+    selectedFilters.openStatus.splice(index, 1);
+  }
+}
+
+function clearFilters() {
+  selectedFilters.courseLocation = '';
+  selectedFilters.meetingTimes = [];
+  selectedFilters.courseLevel = [];
+  selectedFilters.openStatus = [];
+  selectedFilters.courseProfessor = '';
+
+  console.log(selectedFilters);
+}
+
+function applySelectedFilters(courses: CourseInfo[]): CourseInfo[] {
+  // Apply filters based on selectedFilters
+  return courses.filter(course => {
+    const matchesLocation = !selectedFilters.courseLocation || course.CourseLocation.includes(selectedFilters.courseLocation);
+    const matchesMeetingTimes = selectedFilters.meetingTimes.length === 0 || (course.CourseScheduledDays && selectedFilters.meetingTimes.some(day => course.CourseScheduledDays.includes(day)));
+    const matchesCourseLevel = selectedFilters.courseLevel.length === 0 || selectedFilters.courseLevel.includes(course.Level.toString()); // DONE
+    const matchesOpenStatus = selectedFilters.openStatus.length === 0 || selectedFilters.openStatus.includes(course.OpenStatus ? 'Open' : 'Closed');
+    const matchesProfessor = !selectedFilters.courseProfessor || course.Professor.includes(selectedFilters.courseProfessor);
+
+    return matchesCourseLevel && matchesLocation && matchesOpenStatus && matchesProfessor && matchesMeetingTimes;
+
+  });
 }
 
 function handleSearch() {
@@ -39,10 +111,14 @@ function handleSearch() {
 
       let searchbar = <HTMLInputElement>document.getElementById("search");
 
+      console.log(response);
       let filteredCourses = response.Items.filter(function (course: CourseInfo)
       { return course.CourseId.includes(searchbar.value.toUpperCase())} );
 
-      filteredCourses.forEach((Course: CourseInfo) => {
+      let newFilteredCourses = applySelectedFilters(filteredCourses);
+      console.log(filteredCourses);
+
+      newFilteredCourses.forEach((Course: CourseInfo) => {
         let container = document.getElementById("container");
         let div = document.createElement("div");
         let course_name = document.createElement('h2');
@@ -100,6 +176,8 @@ function handleSearch() {
       })
     })
 }
+
+
 document.addEventListener("click", function() {
   // Get the button element by its ID
   
@@ -128,11 +206,58 @@ document.addEventListener("click", function() {
         <div class="search">
           <input type="text" id="search" class="search-bar" placeholder="Enter course name or code">
           <button id="searchButton" class="btn-97">Search</button>
+          <button @click="showAdvancedSearch = !showAdvancedSearch" id="advancedSearch" class="btn-97">Search Filters</button> <!--toggles visibility variable-->
         </div>
         <ul class="course-list">
 
         </ul>
     </div>
+    <div v-if="showAdvancedSearch" class="advanced-search-container">
+      <!-- Add your advanced search options here -->
+      <div id="courseLocationSection">
+        <label for="courseLocation">Course Location:</label>
+        <input type="text" id="courseLocation" v-model="selectedFilters.courseLocation">
+      </div>
+      <div id="meetingTimesSection">
+        <label for="meetingTimes">Meeting Times:</label>
+        <ul>
+          <li><label><input type="checkbox" id="meetingSelection" value="Sunday" :checked="selectedFilters.meetingTimes.includes('Sunday')" @change="updateMeetingFilters('Sunday')">Sunday</label></li>
+          <li><label><input type="checkbox" id="meetingSelection" value="Monday" :checked="selectedFilters.meetingTimes.includes('Monday')" @change="updateMeetingFilters('Monday')">Monday</label></li>
+          <li><label><input type="checkbox" id="meetingSelection" value="Tuesday" :checked="selectedFilters.meetingTimes.includes('Tuesday')" @change="updateMeetingFilters('Tuesday')">Tuesday</label></li>
+          <li><label><input type="checkbox" id="meetingSelection" value="Wednesday" :checked="selectedFilters.meetingTimes.includes('Wednesday')" @change="updateMeetingFilters('Wednesday')">Wednesday</label></li>
+          <li><label><input type="checkbox" id="meetingSelection" value="Thursday" :checked="selectedFilters.meetingTimes.includes('Thursday')" @change="updateMeetingFilters('Thursday')">Thursday</label></li>
+          <li><label><input type="checkbox" id="meetingSelection" value="Friday" :checked="selectedFilters.meetingTimes.includes('Friday')" @change="updateMeetingFilters('Friday')">Friday</label></li>
+          <li><label><input type="checkbox" id="meetingSelection" value="Saturday" :checked="selectedFilters.meetingTimes.includes('Saturday')" @change="updateMeetingFilters('Saturday')">Saturday</label></li>
+        </ul>
+      </div>
+      <div id="courseLevelSection">
+        <label for="courseLevel">Course Level:</label>
+        <ul>
+          <li><label><input type="checkbox" id="courseLevel" value="1000" :checked="selectedFilters.courseLevel.includes('1000')" @change="updateCourseLevelFilters('1000')">1000</label></li> <!--change to int?-->
+          <li><label><input type="checkbox" id="courseLevel" value="2000" :checked="selectedFilters.courseLevel.includes('2000')" @change="updateCourseLevelFilters('2000')">2000</label></li>
+          <li><label><input type="checkbox" id="courseLevel" value="3000" :checked="selectedFilters.courseLevel.includes('3000')" @change="updateCourseLevelFilters('3000')">3000</label></li>
+          <li><label><input type="checkbox" id="courseLevel" value="4000" :checked="selectedFilters.courseLevel.includes('4000')" @change="updateCourseLevelFilters('4000')">4000</label></li>
+        </ul>
+      </div>
+      <div id="openStatusSection">
+        <label for="openStatus">Open Status:</label>
+        <ul>
+          <li><label><input type="checkbox" id="openStatus" value="Open" :checked="selectedFilters.openStatus.includes('Open')" @change="updateOpenStatusFilters('Open')">Open</label></li>
+          <li><label><input type="checkbox" id="openStatus" value="All" :checked="selectedFilters.openStatus.includes('All')" @change="updateOpenStatusFilters('All')">All</label></li>
+        </ul>
+      </div>
+      <div id="professorSection">
+        <label for="courseProfessor">Professor:</label>
+        <input type="text" id="courseProfessor" v-model="selectedFilters.courseProfessor">
+      </div>
+
+      <div class="confirmations" id="advancedButtons">
+        <button @click="showAdvancedSearch = !showAdvancedSearch" id="saveFilters" class="btn-97">Select Filters</button>
+        <button @click="clearFilters();showAdvancedSearch = !showAdvancedSearch" id="clearFilters" class="btn-97">Clear Filters</button>
+      </div>
+      <!-- Add more options as needed -->
+    </div>
+
 </template>
 
 <style scoped>