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