diff --git a/class_registration_app/src/assets/main.css b/class_registration_app/src/assets/main.css index 9062d77..1fe30cc 100644 --- a/class_registration_app/src/assets/main.css +++ b/class_registration_app/src/assets/main.css @@ -137,7 +137,7 @@ a, border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); transition: transform 1s, box-shadow 1s; - color:#000 + color:#000; } .course-list-item:hover{ @@ -173,6 +173,11 @@ a, margin-left: 2vh; } +.test2{ + box-shadow: 5px black; +} + + .advanced-search-container{ min-width: 80vw; width: 600px; /* Adjust the width as needed */ @@ -186,3 +191,21 @@ a, box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow-y: auto; } + +.enrolled-class-item{ + padding: 20px; + display: block; + margin: 20px auto; + 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; + color:#000; +} + +.enrolled-class-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 */ + height: 200px; +} diff --git a/class_registration_app/src/components/CourseSearch.vue b/class_registration_app/src/components/CourseSearch.vue index 4c0bfa0..5b49dd3 100644 --- a/class_registration_app/src/components/CourseSearch.vue +++ b/class_registration_app/src/components/CourseSearch.vue @@ -77,11 +77,11 @@ function clearFilters() { function applySelectedFilters(courses: CourseInfo[]): CourseInfo[] { // Apply filters based on selectedFilters return courses.filter(course => { - const matchesLocation = !selectedFilters.courseLocation || course.CourseLocation.includes(selectedFilters.courseLocation); + const matchesLocation = !selectedFilters.courseLocation || course.CourseLocation.toLowerCase().includes(selectedFilters.courseLocation.toLowerCase()); 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); + const matchesProfessor = !selectedFilters.courseProfessor || course.Professor.toLowerCase().includes(selectedFilters.courseProfessor.toLowerCase()); return matchesCourseLevel && matchesLocation && matchesOpenStatus && matchesProfessor && matchesMeetingTimes; @@ -89,11 +89,14 @@ function applySelectedFilters(courses: CourseInfo[]): CourseInfo[] { } function handleSearch() { - // for multiple searches... delete all previous results to populate new ones - const elementsToRemove = document.querySelectorAll(`.${"course-list-item"}`); + const elementsToRemove = document.querySelectorAll(`.${"course-list-item"}` ); + const test = document.getElementById('noCourses') elementsToRemove.forEach(element => { element.remove(); }); + if(test!=null){ + test.remove() + } //arn:aws:execute-api:us-east-1:671289147354:5prodolbi7/*/GET/courses //API Gateway link @@ -108,7 +111,13 @@ function handleSearch() { throw "Error" } }).then(response => { - console.log(response.Items); //testing results + let test = document.getElementById("noCourses") + if(test!=null && test.parentNode!=null){ + test.parentNode.removeChild(test); + } + + + console.log(response.Items); //must include type of element with typescript let searchbar = document.getElementById("search"); @@ -120,7 +129,18 @@ function handleSearch() { let newFilteredCourses = applySelectedFilters(filteredCourses); console.log(filteredCourses); + + if(newFilteredCourses.length == 0){ + let container = document.getElementById("container"); + let div = document.createElement('div'); + div.id = ("noCourses"); + div.innerHTML = "

No courses were returned

"; + if(container!=null){ + container.appendChild(div) + } + } + newFilteredCourses.forEach((Course: CourseInfo) => { let container = document.getElementById("container"); let div = document.createElement("div"); @@ -226,7 +246,8 @@ document.addEventListener("click", function() {