From 6af84d67f879225a0682fc3a1fc291163d90694b Mon Sep 17 00:00:00 2001 From: nic21003 Date: Mon, 23 Oct 2023 19:13:36 -0400 Subject: [PATCH 1/5] experimental vue changes --- .../src/components/LoginPage.vue | 40 +++++++++++++++++-- class_registration_app/src/main.ts | 6 +-- 2 files changed, 40 insertions(+), 6 deletions(-) diff --git a/class_registration_app/src/components/LoginPage.vue b/class_registration_app/src/components/LoginPage.vue index 1ea4c91..e985e08 100644 --- a/class_registration_app/src/components/LoginPage.vue +++ b/class_registration_app/src/components/LoginPage.vue @@ -8,15 +8,49 @@

Valid. Please wait a moment.

Error. Please enter correct Username & password.

- - + + - +
Back + + \ 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 3/5] 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`) diff --git a/class_registration_app/src/components/EnrolledCourseList.vue b/class_registration_app/src/components/EnrolledCourseList.vue new file mode 100644 index 0000000..697cc61 --- /dev/null +++ b/class_registration_app/src/components/EnrolledCourseList.vue @@ -0,0 +1,12 @@ + + + + + \ No newline at end of file diff --git a/class_registration_app/src/components/LoginPage.vue b/class_registration_app/src/components/LoginPage.vue index e985e08..f7f3d1f 100644 --- a/class_registration_app/src/components/LoginPage.vue +++ b/class_registration_app/src/components/LoginPage.vue @@ -1,54 +1,56 @@ - - - diff --git a/class_registration_app/src/router/index.ts b/class_registration_app/src/router/index.ts index b56c908..cfd7ba8 100644 --- a/class_registration_app/src/router/index.ts +++ b/class_registration_app/src/router/index.ts @@ -5,6 +5,7 @@ import RegisterAccount from '../components/RegisterAccount.vue' import CourseSearch from '../components/CourseSearch.vue' import ScheduleView from '../components/ScheduleView.vue' import DashBoard from '../components/DashBoard.vue' +import EnrolledCourseList from '../components/EnrolledCourseList.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -41,6 +42,11 @@ const router = createRouter({ path: '/schedule_viewer', name: 'Schedule Viewer', component: ScheduleView + }, + { + path: '/my_courses', + name: 'My Courses', + component: EnrolledCourseList } ]