Merge pull request #5 from CSE2102-Fall23/schedule_view

edited layout and added schedule view

src/App.vue

@@ -1,11 +1,31 @@
 <template>
-  <div id="app-wrapper">
-    <AppHeader title="My App" />
-    <RouterView />
+  <div id="app">
+    <Header :tabs="tabs" />
+    <router-view />
+    <Footer />
   </div>
 </template>
 
-<script setup>
-import { RouterView } from "vue-router";
-import AppHeader from "./components/AppHeader.vue";
+<script>
+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' },
+      ]
+    };
+  },
+  components: {
+    Header,
+    Footer
+  }
+};
 </script>

src/components/AppHeader.vue

@@ -1,27 +1,11 @@
 <template>
   <header class="app-header">
-    <div>
+    <div class="header-content">
       <h1>{{ title }}</h1>
       <nav>
-        <ul>
-          <li>
-            <RouterLink to="/">Home</RouterLink>
-          </li>
-          <li>
-            <RouterLink to="/fetch">Create an Account</RouterLink>
-          </li>
-          <li>
-            <!--
-              This RouterLink does not point to a specific path, but rather the name of a route.
-              Check out router/index.js for how this is defined
-            -->
-            <RouterLink :to="{ name: 'form' }">Form Example</RouterLink>
-          </li>
-          <li>
-            <RouterLink to="/admin/createcourse">Create Course</RouterLink>
-          </li>
-          <li>
-            <RouterLink to="/login">Login</RouterLink>
+        <ul class="tabs">
+          <li v-for="tab in tabs" :key="tab.path" :class="{ active: isActiveTab(tab.path) }">
+            <RouterLink :to="tab.path">{{ tab.label }}</RouterLink>
           </li>
         </ul>
       </nav>
@@ -30,29 +14,69 @@
 </template>
 
 <script setup>
-// import the <RouterLink> component so that we can use it in the template above
-import { RouterLink } from "vue-router";
-
-// give this component a title property so that the parent component (app.vue) can set whatever title it wants
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-});
+import { RouterLink, useRoute } from "vue-router";
+
+const title = 'Course Registration';
+
+const 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' },
+];
+
+const route = useRoute();
+
+function isActiveTab(path) {
+  return path === route.path || (path === '/' && route.path === '');
+}
 </script>
 
 <style>
-/* give the header itself a background color, a border, and add some padding to the content */
 .app-header {
   background-color: #fcfcfc;
   border-bottom: 1px solid #e0e0e0;
   padding: 1rem;
 }
 
-/* make the title within the header a larger and bolder font */
+.app-header .header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .app-header h1 {
   font-size: 2rem;
   font-weight: bold;
+  margin: 0;
+}
+
+.tabs {
+  list-style: none;
+  padding: 0;
+  display: flex;
+}
+
+.tabs li {
+  margin-right: 10px;
+}
+
+.tabs li a {
+  text-decoration: none;
+  color: #333;
+  padding: 8px 12px;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+}
+
+.tabs li a:hover {
+  background-color: #f0f0f0;
+}
+
+.tabs li.active a {
+  background-color: #333;
+  color: #fff;
 }
 </style>

src/components/Footer.vue

@@ -0,0 +1,19 @@
+<template>
+    <footer class="site-footer">
+      <p>&copy; 2023 Section 2 Group 3 University. All rights reserved.</p>
+    </footer>
+  </template>
+
+  <style scoped>
+  /* UConn website footer styles */
+  .site-footer {
+    background-color: #003366;
+    color: #fff;
+    text-align: center;
+    padding: 10px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+  }
+  </style>
+

src/components/Header.vue

@@ -0,0 +1,75 @@
+<template>
+    <header class="site-header">
+      <div class="header-content">
+        <h1 class="header-title">Section 2 Group 3 </h1>
+        <nav>
+          <ul class="tabs">
+            <li v-for="tab in tabs" :key="tab.path" :class="{ active: isActiveTab(tab.path) }">
+              <router-link :to="tab.path">{{ tab.label }}</router-link>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  </template>
+
+  <script>
+  export default {
+    props: {
+      tabs: Array
+    },
+    methods: {
+      isActiveTab(path) {
+        return this.$route.path === path;
+      }
+    }
+  };
+  </script>
+
+  <style scoped>
+  /* UConn website header styles */
+  .site-header {
+    background-color: #003366;
+    color: #fff;
+    padding: 20px;
+  }
+  
+  /* Add UConn specific styling for header content */
+  .site-header .header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  /* Define styles for navigation tabs */
+  .site-header nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  
+  .site-header nav ul li {
+    display: inline;
+    margin-right: 20px;
+  }
+  
+  .site-header nav ul li a {
+    text-decoration: none;
+    color: #fff;
+  }
+  
+  .site-header nav ul li.active a {
+    background-color: #fff;
+    color: #003366;
+    border-radius: 5px;
+    padding: 5px 10px;
+  }
+  
+  /* Style for the header title */
+  .header-title {
+    font-size: 2.5rem; /* Adjust as needed for the desired size */
+    color: #fff; /* White color for better contrast */
+    font-weight: bold; /* Emphasize the font weight */
+  }
+  </style>
+

src/router/index.js

@@ -7,6 +7,7 @@ import FormView from "../views/FormView.vue";
 import AdminCreateCourseView from "../views/AdminCreateCourseView.vue";
 import LoginPage from "../views/LoginPage.vue";
 import SignUp from "../views/SignUp.vue";
+import ScheduleView from "../views/ScheduleView.vue";
 
 const router = createRouter({
   // the history mode determines how vue router interacts with the url.
@@ -47,6 +48,11 @@ const router = createRouter({
       name: "Login",
       component: LoginPage,
     },
+    {
+      path: "/schedule",
+      name: "schedule",
+      component: ScheduleView,
+    }
   ],
 });