Merge pull request #7 from CSE2102-Fall23/class_search

Class search

src/App.vue

@@ -1,31 +1,31 @@
 <template>
-  <div id="app">
+  <div id="app" style="padding-bottom: 60px;">
     <Header :tabs="tabs" />
     <router-view />
     <Footer />
   </div>
 </template>
 
 <script>
-import Header from "./components/Header.vue";
-import Footer from "./components/Footer.vue";
+import Header from './components/Header.vue';
+import Footer from './components/Footer.vue';
+
 export default {
   data() {
     return {
       tabs: [
-        { path: "/", label: "Home" },
-        { path: "/fetch", label: "Create an Account" },
-        { path: { name: "form" }, label: "Form Example" },
-        { path: "/schedule", label: "Schedule View" },
-        { path: "/mycourses", label: "Course View" },
-        { path: "/admin/createcourse", label: "Create Course" },
-        { path: "/login", label: "Login" },
-      ],
+        { path: '/', label: 'Home' },
+        { path: '/fetch', label: 'Create an Account' },
+        { path: { name: 'search' }, label: 'Course Search' },
+        { path: '/schedule', label: 'Schedule View' },
+        { path: '/admin/createcourse', label: 'Create Course' },
+        { path: '/login', label: 'Login' },
+      ]
     };
   },
   components: {
     Header,
-    Footer,
-  },
+    Footer
+  }
 };
 </script>

src/components/AppHeader.vue

@@ -21,7 +21,7 @@ const title = 'Course Registration';
 const tabs = [
   { path: '/', label: 'Home' },
   { path: '/fetch', label: 'Create an Account' },
-  { path: { name: 'form' }, label: 'Form Example' },
+  { path: { name: 'search' }, label: 'Course Search' },
   { path: '/schedule', label: 'Schedule View' },
   { path: '/mycourses', label: 'Course View' },
   { path: '/admin/createcourse', label: 'Create Course' },

src/router/index.js

@@ -3,7 +3,7 @@
 // we start by importing the createRouter and createWebHistory functions, as well as the components describing each of our views
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
-import FormView from "../views/FormView.vue";
+import ClassSearch from "../views/ClassSearch.vue";
 import AdminCreateCourseView from "../views/AdminCreateCourseView.vue";
 import LoginPage from "../views/LoginPage.vue";
 import SignUp from "../views/SignUp.vue";
@@ -30,9 +30,9 @@ const router = createRouter({
       component: HomeView,
     },
     {
-      path: "/form",
-      name: "form",
-      component: FormView,
+      path: "/search",
+      name: "search",
+      component: ClassSearch,
     },
     {
       path: "/fetch",

src/views/ClassSearch.vue

@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <!-- Search Form -->
+    <section class="search-form">
+      <h3>Class Search</h3>
+      <form @submit.prevent="searchClasses">
+        <label for="courseName">Course Name:</label>
+        <input type="text" id="courseName" v-model="courseName" /><br /><br />
+
+        <label for="professor">Professor (Optional):</label>
+        <input type="text" id="professor" v-model="professor" /><br /><br />
+
+        <label for="courseID">Course ID (Optional):</label>
+        <input type="text" id="courseID" v-model="courseID" /><br /><br />
+
+        <button type="submit">Search</button>
+      </form>
+    </section>
+
+    <!-- Search Results Section -->
+    <section class="search-results">
+      <h3>Search Results</h3>
+      <div class="card-container" v-if="results">
+        <div class="card">
+          <div class="card-content">
+            <h4>{{ results.name ? results.name.S : 'Course Name N/A' }}</h4>
+            <div class="card-details">
+              <div v-for="(value, name) in results" :key="name" v-if="name !== 'name'">
+                <strong>{{ name }}:</strong>
+                {{ formatValue(value) }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <p v-else>No results found.</p>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      courseName: '',
+      professor: '',
+      courseID: '',
+      results: null
+    };
+  },
+  methods: {
+    searchClasses() {
+      const url = `https://8dbuywnj95.execute-api.us-east-1.amazonaws.com/Final_stage_course/search?name=${this.courseName}`;
+
+      if (this.professor) {
+        url += `&professor=${this.professor}`;
+      }
+
+      if (this.courseID) {
+        url += `&id=${this.courseID}`;
+      }
+
+      fetch(url)
+        .then(response => response.json())
+        .then(data => {
+          this.results = data;
+        })
+        .catch(error => {
+          console.error('Error:', error);
+        });
+    },
+    formatValue(value) {
+      if (value && value.S) return value.S;
+      if (value && value.N) return value.N;
+      // Add other types here if needed
+      return value || 'N/A';
+    }
+  }
+};
+</script>
+
+<style>
+.search-form {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.search-form h3 {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+  color: #003366;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  color: #333; /* Darkened label text color for better contrast */
+}
+
+input {
+  padding: 10px;
+  width: 400px;
+  border: 1px solid #777; /* Darker border color for better contrast */
+  border-radius: 5px;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+button {
+  padding: 10px 20px;
+  border: 1px solid #003366; /* Darker border color for contrast */
+  border-radius: 5px;
+  background-color: #003366;
+  color: #fff; /* Text color */
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.card-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.card {
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 20px; /* Added padding */
+  width: 500px; /* Set width to make it more horizontal */
+  background-color: #f9f9f9;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  margin: 20px auto; /* Center the card horizontally */
+  display: flex; /* Set display to flex */
+}
+
+.card-content {
+  flex: 1; /* Fill the space evenly for horizontal alignment */
+}
+
+.card h4 {
+  font-size: 1.3rem;
+  margin: 0 0 20px; /* Add margin for spacing */
+  color: #003366;
+}
+
+.card-details {
+  display: flex;
+  flex-direction: column;
+  gap: 10px; /* Added gap for spacing between details */
+}
+
+.card-details div {
+  margin-bottom: 5px;
+}
+
+.card-details strong {
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+</style>

src/views/ScheduleView.vue

@@ -1,4 +1,4 @@
-<!-- ScheduleView.vue -->
+<!-- ScheduleView.vue new -->
 <template>
     <div>
       <h1>Weekly Class Schedule</h1>