From fe6863fe6e011779373eb8c0894e40886176ecfa Mon Sep 17 00:00:00 2001
From: Jack Psaras <jack.psaras@uconn.edu>
Date: Mon, 13 Nov 2023 17:41:09 -0500
Subject: [PATCH] added search

---
 src/App.vue                  |   4 +-
 src/components/AppHeader.vue |   2 +-
 src/router/index.js          |   8 +-
 src/views/ClassSearch.vue    | 161 +++++++++++++++++++++++++++++++++++
 src/views/FormView.vue       | 108 -----------------------
 5 files changed, 168 insertions(+), 115 deletions(-)
 create mode 100644 src/views/ClassSearch.vue
 delete mode 100644 src/views/FormView.vue

diff --git a/src/App.vue b/src/App.vue
index 33bbb20..cbc3827 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" style="padding-bottom: 60px;">
     <Header :tabs="tabs" />
     <router-view />
     <Footer />
@@ -16,7 +16,7 @@ export default {
       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: '/admin/createcourse', label: 'Create Course' },
         { path: '/login', label: 'Login' },
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 4a25ebf..45645af 100644
--- a/src/components/AppHeader.vue
+++ b/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: '/admin/createcourse', label: 'Create Course' },
   { path: '/login', label: 'Login' },
diff --git a/src/router/index.js b/src/router/index.js
index 5f1363b..edd2b8f 100644
--- a/src/router/index.js
+++ b/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";
@@ -29,9 +29,9 @@ const router = createRouter({
       component: HomeView,
     },
     {
-      path: "/form",
-      name: "form",
-      component: FormView,
+      path: "/search",
+      name: "search",
+      component: ClassSearch,
     },
     {
       path: "/fetch",
diff --git a/src/views/ClassSearch.vue b/src/views/ClassSearch.vue
new file mode 100644
index 0000000..6c95ae9
--- /dev/null
+++ b/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>
diff --git a/src/views/FormView.vue b/src/views/FormView.vue
deleted file mode 100644
index e3eb401..0000000
--- a/src/views/FormView.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <main class="form">
-    <h2>This is a form example</h2>
-    <p>
-      This page includes a simple todo list application, which showcases the
-      state management and form capabilities of vue.
-    </p>
-
-    <form @submit.prevent="createTodo" class="create-todo">
-      <label for="todo">New Todo</label>
-      <input type="text" id="todo" name="todo" v-model="newTodo" />
-      <button type="submit">Save</button>
-    </form>
-
-    <ul>
-      <!--
-        v-for requires a unique key for every element so that it can efficiently keep track
-        of each list item. it is possible for the user to type the same todo more than once,
-        so the todo itself isn't necessarily unique. the index on its own is of course unique,
-        it represents each unique place in the array. there are unfortunately edge case issues
-        with using the index alone that we don't need to get into, so we combine the todo and
-        the index into a unique key that will work in all situations
-      -->
-      <li v-for="(todo, index) in todos" :key="todo + index">
-        {{ todo }}
-        <button @click="deleteTodo(index)">Delete</button>
-      </li>
-
-      <!--
-        it is a good user experience practice to provide feedback when in an "emtpy state",
-        in this case, where there are no todos to show yet. this informs the user of
-        the current status of the system (working), and doesn't make them wonder if something
-        has gone wrong
-       -->
-      <li v-if="todos.length === 0">
-        <p>No Todos Yet, go ahead and create one!</p>
-      </li>
-    </ul>
-  </main>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const newTodo = ref("");
-
-const todos = ref([]);
-
-// function to run when the create todo form is submitted
-function createTodo() {
-  // sanitize the input by removing the whitespace from the beginning and end of newTodo.value
-  const todoToAdd = newTodo.value.trim();
-
-  // if the sanitized input is not an empty string (i.e., an actual todo), add it to the list and reset the form
-  if (todoToAdd !== "") {
-    todos.value.push(todoToAdd);
-    newTodo.value = "";
-  }
-}
-
-// when a todo's delete button is clicked, the index of that todo is passed to this function
-// Array.splice takes an index in the array and a number of items to delete after that
-function deleteTodo(index) {
-  todos.value.splice(index, 1);
-}
-</script>
-
-<style>
-.form {
-  padding: 1rem;
-}
-
-.form h2 {
-  font-size: 1.5rem;
-  margin-bottom: 2rem;
-}
-
-.form p {
-  margin-bottom: 1rem;
-}
-
-/* flex layouts allow us to position elements next to each other that would otherwise have been on top of each other */
-.form ul {
-  display: flex;
-  gap: 1rem;
-  flex-direction: column;
-}
-.form li {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-/* create some space beneath the create todo form */
-.form form {
-  margin-bottom: 1rem;
-}
-
-/* set some default styling to buttons and inputs for borders, heights, and padding */
-.form :is(input, button) {
-  line-height: 2rem;
-  padding-inline: 0.5rem;
-  border-radius: 0.375rem;
-  border: 1px solid #d9d9d9;
-  margin-left: 0.5rem;
-  color: #202020;
-}
-</style>