Skip to content

added to course search and cleaned up files #15

Merged
merged 2 commits into from
Nov 6, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion class_registration_app/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import Home from './components/Home.vue'
</script>

<template>
Expand Down
30 changes: 27 additions & 3 deletions class_registration_app/src/assets/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -112,22 +112,46 @@ a,

.course-list-item {
padding: 20px;
display: flex;
display: inline-block;
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);
transition: transform 1s, box-shadow 1s;
}

.course-list-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 */
}

.course-name {
margin-left: 1vw;
display: inline-block;
font-weight: 500;
}

.course-location {
margin-left: 1vh;
display: inline-block;
margin-left: 2vh;
}

.course-status{
float: right;
}

.course-professor {
display: inline-block;
margin-left: 2vh;
}

.course-space {
position: relative;
float: right;
}

.course-prerequisites{
margin-left: 2vh;
}

45 changes: 42 additions & 3 deletions class_registration_app/src/components/CourseSearch.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,16 @@ const AsyncComponent = defineAsyncComponent(() =>
import('./CourseSearch.vue')
);
interface CourseInfo {
CourseId: string;
CourseLocation: string;
OpenStatus: boolean;
Professor: string;
MaxStudents: number;
StudentsEnrolled: number;
Prerequisites: string;
}
function handleSearch() {
const elementsToRemove = document.querySelectorAll(`.${"course-list-item"}`);
elementsToRemove.forEach(element => {
Expand All @@ -26,14 +36,21 @@ function handleSearch() {
}).then(response => {
console.log(response.Items);
let searchbar = document.getElementById("search");
let searchbar = <HTMLInputElement>document.getElementById("search");
let filteredCourses = response.Items.filter(function (course: CourseInfo)
{ return course.CourseId.includes(searchbar.value.toUpperCase())} );
let filteredCourses = response.Items.filter(function (str: string) { return str.CourseId.includes(searchbar.value.toUpperCase())} );
filteredCourses.forEach((Course: { CourseId: string; CourseLocation: string;}) => {
filteredCourses.forEach((Course: CourseInfo) => {
let container = document.getElementById("container");
let div = document.createElement("div");
let course_name = document.createElement('h2');
let course_location = document.createElement('h2');
let course_status = document.createElement('h2');
let course_professor = document.createElement('h2');
let course_space = document.createElement('h2');
let course_prerequisites = document.createElement('h2');
// Set class or any other attributes for the div
div.className = "course-list-item"; // You can set class name here
Expand All @@ -44,11 +61,33 @@ function handleSearch() {
course_location.className = "course-location";
course_location.textContent = Course.CourseLocation;
course_status.className = "course-status";
if(Course.OpenStatus){
course_status.textContent = "Enroll Status: Open";
}else{
course_status.textContent = "Enroll Status: Closed";
}
course_professor.className = "course-professor";
course_professor.textContent = "Instructor - " + Course.Professor;
course_space.className = "course-space";
course_space.textContent = "Space: " + Course.StudentsEnrolled + "/" + Course.MaxStudents;
course_prerequisites.className = "course-prerequisites";
course_prerequisites.textContent = "Prerequisites: " + Course.Prerequisites;
// Append the div to the container
if (container != null){
container.appendChild(div);
div.appendChild(course_name);
div.appendChild(course_location);
div.appendChild(course_status);
div.appendChild(document.createElement('br'));
div.appendChild(course_professor);
div.appendChild(course_space);
div.appendChild(course_prerequisites);
}
return response;
Expand Down
15 changes: 0 additions & 15 deletions class_registration_app/src/views/AboutView.vue

This file was deleted.

9 changes: 0 additions & 9 deletions class_registration_app/src/views/AuthView.vue

This file was deleted.

9 changes: 0 additions & 9 deletions class_registration_app/src/views/HomeView.vue

This file was deleted.