From 699e68c4d253ce1b7b3f4ae4ea721388a10aeb15 Mon Sep 17 00:00:00 2001 From: Zach Florian Date: Wed, 1 Nov 2023 00:53:04 -0400 Subject: [PATCH 1/2] Displayed all class names --- class_registration_app/src/assets/main.css | 7 ++ .../src/components/CourseSearch.vue | 78 ++++++++++++------- 2 files changed, 56 insertions(+), 29 deletions(-) diff --git a/class_registration_app/src/assets/main.css b/class_registration_app/src/assets/main.css index bbb7c6c..90a23cd 100644 --- a/class_registration_app/src/assets/main.css +++ b/class_registration_app/src/assets/main.css @@ -97,3 +97,10 @@ a, transform: translateY(-5px); } +.course-list-item { + margin-bottom: 40px; + min-width: 80vw; + background-color: #ffffff; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} diff --git a/class_registration_app/src/components/CourseSearch.vue b/class_registration_app/src/components/CourseSearch.vue index a2018d0..8a320c0 100644 --- a/class_registration_app/src/components/CourseSearch.vue +++ b/class_registration_app/src/components/CourseSearch.vue @@ -1,50 +1,72 @@ +const response = fetch(`${apiUrl}/courses`); +let courseJson = fetch(`${apiUrl}/courses`) + .then(response => { + if (response.ok) { + return response.json() + } else{ + throw "Error" + } + }).then(response => { + console.log(response.Items); + response.Items.forEach((Course: { CourseId: string; }) => { + let container = document.getElementById("container"); + let div = document.createElement("div"); + let class_name = document.createElement('h2') + // Set class or any other attributes for the div + div.className = "course-list-item"; // You can set class name here + + // Set content or any other properties for the div + class_name.textContent = Course.CourseId; // You can set content here + // Append the div to the container + if (container != null){ + container.appendChild(div); + div.appendChild(class_name); + } + return response; + }) + }) + -// Your API Gateway endpoint URL \ No newline at end of file From 37ae438867e5bb231cf224c13136b77fbf17deff Mon Sep 17 00:00:00 2001 From: Zach Florian Date: Wed, 1 Nov 2023 13:11:35 -0400 Subject: [PATCH 2/2] got filtering working somewhat --- class_registration_app/src/assets/main.css | 16 +++ .../src/components/CourseSearch.vue | 116 +++++++++++++----- .../src/components/LoginPage.vue | 23 ++-- 3 files changed, 110 insertions(+), 45 deletions(-) diff --git a/class_registration_app/src/assets/main.css b/class_registration_app/src/assets/main.css index 90a23cd..5352f54 100644 --- a/class_registration_app/src/assets/main.css +++ b/class_registration_app/src/assets/main.css @@ -38,6 +38,9 @@ a, padding: 0 auto; } } + + + */ .btn-97, .btn-97 *, @@ -98,9 +101,22 @@ a, } .course-list-item { + padding: 20px; + display: flex; + 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); } + +.course-name { + margin-left: 1vw; + font-weight: 500; +} + +.course-location { + margin-left: 1vh; + +} \ No newline at end of file diff --git a/class_registration_app/src/components/CourseSearch.vue b/class_registration_app/src/components/CourseSearch.vue index 8a320c0..d7032d6 100644 --- a/class_registration_app/src/components/CourseSearch.vue +++ b/class_registration_app/src/components/CourseSearch.vue @@ -3,37 +3,72 @@ import { defineAsyncComponent } from 'vue'; const AsyncComponent = defineAsyncComponent(() => import('./CourseSearch.vue') ); -//arn:aws:execute-api:us-east-1:671289147354:5prodolbi7/*/GET/courses -const apiUrl = 'https://5prodolbi7.execute-api.us-east-1.amazonaws.com/Beta'; - -const response = fetch(`${apiUrl}/courses`); -let courseJson = fetch(`${apiUrl}/courses`) - .then(response => { - if (response.ok) { - return response.json() - } else{ - throw "Error" - } - }).then(response => { - console.log(response.Items); - response.Items.forEach((Course: { CourseId: string; }) => { - let container = document.getElementById("container"); - let div = document.createElement("div"); - let class_name = document.createElement('h2') - // Set class or any other attributes for the div - div.className = "course-list-item"; // You can set class name here - - // Set content or any other properties for the div - class_name.textContent = Course.CourseId; // You can set content here - - // Append the div to the container - if (container != null){ - container.appendChild(div); - div.appendChild(class_name); + +function handleSearch() { + const elementsToRemove = document.querySelectorAll(`.${"course-list-item"}`); + elementsToRemove.forEach(element => { + element.remove(); + }); + + + console.log("button clicked"); + //arn:aws:execute-api:us-east-1:671289147354:5prodolbi7/*/GET/courses + const apiUrl = 'https://5prodolbi7.execute-api.us-east-1.amazonaws.com/Beta'; + + const response = fetch(`${apiUrl}/courses`); + let courseJson = fetch(`${apiUrl}/courses`) + .then(response => { + if (response.ok) { + return response.json() + } else{ + throw "Error" } - return response; + }).then(response => { + console.log(response.Items); + + let searchbar = document.getElementById("search"); + + let filteredCourses = response.Items.filter(function (str: string) { return str.CourseId.includes(searchbar.value.toUpperCase())} ); + filteredCourses.forEach((Course: { CourseId: string; CourseLocation: string;}) => { + let container = document.getElementById("container"); + let div = document.createElement("div"); + let course_name = document.createElement('h2'); + let course_location = document.createElement('h2'); + // Set class or any other attributes for the div + div.className = "course-list-item"; // You can set class name here + + // Set content or any other properties for the div + course_name.className = "course-name"; + course_name.textContent = Course.CourseId + " -"; // You can set content here + + course_location.className = "course-location"; + course_location.textContent = Course.CourseLocation; + + // Append the div to the container + if (container != null){ + container.appendChild(div); + div.appendChild(course_name); + div.appendChild(course_location); + } + + return response; + }) }) - }) +} +document.addEventListener("DOMContentLoaded", function() { + // Get the button element by its ID + const button = document.getElementById("searchButton"); + + +// Check if the button element exists + if (button) { + // Assign the handleClick function to the button's onclick property + button.addEventListener("click", handleSearch); + } +}); + + + @@ -41,7 +76,10 @@ let courseJson = fetch(`${apiUrl}/courses`)