From 0c379eaed583b9647ca162d67f530678d531d12a Mon Sep 17 00:00:00 2001
From: Jack Psaras <jack.psaras@uconn.edu>
Date: Mon, 30 Oct 2023 17:43:49 -0400
Subject: [PATCH 1/3] NEW BRANCH

---
 src/views/ScheduleView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/ScheduleView.vue b/src/views/ScheduleView.vue
index f0e87ad..f290450 100644
--- a/src/views/ScheduleView.vue
+++ b/src/views/ScheduleView.vue
@@ -1,4 +1,4 @@
-<!-- ScheduleView.vue -->
+<!-- ScheduleView.vue new -->
 <template>
     <div>
       <h1>Weekly Class Schedule</h1>

From 93a8e4b8da6b0e8ba85334cae20c48d7a0527b61 Mon Sep 17 00:00:00 2001
From: Novrus Shehaj <Novrus.Shehaj@uconn.edu>
Date: Wed, 1 Nov 2023 16:27:11 -0400
Subject: [PATCH 2/3] Course View Tab

Course View Tab added and template design for page implemented.
---
 src/App.vue                     |  24 ++---
 src/components/AppHeader.vue    |   1 +
 src/router/index.js             |   8 +-
 src/views/StudentCourseView.vue | 182 ++++++++++++++++++++++++++++++++
 4 files changed, 202 insertions(+), 13 deletions(-)
 create mode 100644 src/views/StudentCourseView.vue

diff --git a/src/App.vue b/src/App.vue
index 33bbb20..e37a891 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,25 +7,25 @@
 </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: '/admin/createcourse', label: 'Create Course' },
-        { path: '/login', label: 'Login' },
-      ]
+        { 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" },
+      ],
     };
   },
   components: {
     Header,
-    Footer
-  }
+    Footer,
+  },
 };
 </script>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 4a25ebf..693c3e4 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -23,6 +23,7 @@ const tabs = [
   { 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' },
 ];
diff --git a/src/router/index.js b/src/router/index.js
index 5f1363b..3cdb0cf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,7 @@ import AdminCreateCourseView from "../views/AdminCreateCourseView.vue";
 import LoginPage from "../views/LoginPage.vue";
 import SignUp from "../views/SignUp.vue";
 import ScheduleView from "../views/ScheduleView.vue";
+import StudentCourseView from "../views/StudentCourseView.vue";
 
 const router = createRouter({
   // the history mode determines how vue router interacts with the url.
@@ -52,7 +53,12 @@ const router = createRouter({
       path: "/schedule",
       name: "schedule",
       component: ScheduleView,
-    }
+    },
+    {
+      path: "/mycourses",
+      name: "mycourses",
+      component: StudentCourseView,
+    },
   ],
 });
 
diff --git a/src/views/StudentCourseView.vue b/src/views/StudentCourseView.vue
new file mode 100644
index 0000000..c83aa8d
--- /dev/null
+++ b/src/views/StudentCourseView.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="course-container">
+    <h1>My Courses</h1>
+    <input type="text" v-model="search" placeholder="Search for a course" />
+    <table class="course-table">
+      <thead>
+        <tr>
+          <th>Courses</th>
+          <th>Credits</th>
+          <th>Professor</th>
+          <th>Time</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="course in filteredCourses" :key="course.id" @click="selectCourse(course)">
+          <td>{{ course.name }}</td>
+          <td>{{ course.credits }}</td>
+          <td>{{ course.professor }}</td>
+          <td>{{ course.time }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-if="selectedCourse" class="course-details">
+      <h2>Selected Course Details</h2>
+      <p><strong>Course:</strong> {{ selectedCourse.name }}</p>
+      <p><strong>Credits:</strong> {{ selectedCourse.credits }}</p>
+      <p><strong>Professor:</strong> {{ selectedCourse.professor }}</p>
+      <p><strong>Time:</strong> {{ selectedCourse.time }}</p>
+    </div>
+    <div v-if="!isLoggedIn">
+      <p><router-link to="/login">Log in</router-link></p>
+      <p>
+        <router-link to="/fetch">Create an Account</router-link>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StudentMyCourses",
+  data() {
+    return {
+      search: "",
+      selectedCourse: null,
+    };
+  },
+  props: {
+    courses: {
+      type: Array,
+      required: true,
+      default: () => [],
+      validator: (courses) => {
+        return courses.every(
+          (course) =>
+            course.hasOwnProperty("id") &&
+            course.hasOwnProperty("name") &&
+            course.hasOwnProperty("credits") &&
+            course.hasOwnProperty("professor") &&
+            course.hasOwnProperty("time")
+        );
+      },
+    },
+    isLoggedIn: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  computed: {
+    filteredCourses() {
+      if (this.search) {
+        return this.courses.filter((course) =>
+          course.name.toLowerCase().includes(this.search.toLowerCase())
+        );
+      } else {
+        return this.courses;
+      }
+    },
+  },
+  mounted() {
+    this.animateTable();
+  },
+  methods: {
+    animateTable() {
+      const rows = document.querySelectorAll(".course-table tr");
+      rows.forEach((row, index) => {
+        setTimeout(() => {
+          row.classList.add("visible");
+        }, index * 200);
+      });
+    },
+    selectCourse(course) {
+      this.selectedCourse = course;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.course-container {
+  font-family: "Arial", sans-serif;
+  width: 80%;
+  margin: 0 auto;
+  padding: 2rem;
+  background: url("background.jpg") no-repeat center center fixed;
+  background-size: cover;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1,
+h2 {
+  text-align: center;
+  font-size: 2rem;
+  color: #333;
+  margin-bottom: 1rem;
+}
+
+input {
+  display: block;
+  width: 100%;
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.course-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.course-table thead {
+  background-color: #0077cc;
+  color: #fff;
+}
+
+.course-table th,
+.course-table td {
+  padding: 1rem;
+  text-align: left;
+  border: 1px solid #ddd;
+}
+
+.course-table tr {
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.course-table tr.visible {
+  opacity: 1;
+}
+
+.course-table tr:hover {
+  background-color: #f5f5f5;
+}
+
+.course-details {
+  margin-top: 2rem;
+  padding: 1rem;
+  background-color: #f5f5f5;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+p {
+  text-align: center;
+  margin: 1rem 0;
+}
+
+p a {
+  color: #0077cc;
+  text-decoration: none;
+}
+
+p a:hover {
+  text-decoration: underline;
+}
+</style>

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 3/3] 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>