Skip to content

Commit

Permalink
Merge pull request #18 from zjf19002/nic21003_experimental
Browse files Browse the repository at this point in the history 
added advanced search to course search
  • Loading branch information
@nic21003
nic21003 authored Nov 14, 2023
2 parents cdbd45a + bda1b3c commit 05f91d6
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 3 deletions.
15 changes: 14 additions & 1 deletion class_registration_app/src/assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
#app {
min-width: 100vw;
padding: 0rem;

color: black;
font-weight: normal;
}

Expand Down Expand Up @@ -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;
}
129 changes: 127 additions & 2 deletions class_registration_app/src/components/CourseSearch.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
import { ref } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./CourseSearch.vue')
);
Expand All @@ -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() {
Expand All @@ -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');
Expand Down Expand Up @@ -100,6 +176,8 @@ function handleSearch() {
})
})
}
document.addEventListener("click", function() {
// Get the button element by its ID
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 05f91d6

Please sign in to comment.