From c5a072189cd69ab77a3c15bdb4bebdce58346b9b Mon Sep 17 00:00:00 2001
From: Jack Psaras <jack.psaras@uconn.edu>
Date: Mon, 30 Oct 2023 15:48:37 -0400
Subject: [PATCH] edited layout and added schedule view

---
 src/App.vue                  |  32 ++++--
 src/components/AppHeader.vue |  88 +++++++++++------
 src/components/Footer.vue    |  19 ++++
 src/components/Header.vue    |  75 ++++++++++++++
 src/router/index.js          |   6 ++
 src/views/HomeView.vue       | 184 ++++++++++++++++++++++++++++++++---
 src/views/ScheduleView.vue   | 103 ++++++++++++++++++++
 7 files changed, 453 insertions(+), 54 deletions(-)
 create mode 100644 src/components/Footer.vue
 create mode 100644 src/components/Header.vue
 create mode 100644 src/views/ScheduleView.vue

diff --git a/src/App.vue b/src/App.vue
index b0bc04d..33bbb20 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 92942b2..4a25ebf 100644
--- a/src/components/AppHeader.vue
+++ b/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>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..ac8dd5d
--- /dev/null
+++ b/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>
+  
\ No newline at end of file
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..4d8f655
--- /dev/null
+++ b/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>
+  
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 1163d41..5f1363b 100644
--- a/src/router/index.js
+++ b/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,
+    }
   ],
 });
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index fe53dec..37e5663 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,29 +1,181 @@
 <template>
   <main class="home">
-    <h2>The Home Page</h2>
-    <p>
-      This application includes this home page, a page that fetches data, and a
-      page that handles state in a form.
-    </p>
-    <p>
-      These pages, along with the structure of the project, are designed to help
-      you get started solving similar technical challenges, based on the
-      features you are looking to add to your application.
-    </p>
+    <!-- Existing Welcome Section -->
+    <section class="welcome">
+      <div class="welcome-content">
+        <h2>Welcome to Section 2 Group 3 University</h2>
+        <p>Explore our vibrant academic community dedicated to excellence.</p>
+      </div>
+    </section>
+
+    <!-- Existing Programs Section -->
+    <section class="grid-section">
+      <h3>Discover Our Programs</h3>
+      <div class="grid">
+        <div class="grid-item item1">
+          <h4>Computer Science</h4>
+          <p>Explore the world of technology with our innovative Computer Science program.</p>
+        </div>
+        <div class="grid-item item2">
+          <h4>Business Administration</h4>
+          <p>Learn essential business skills and strategies in our Business Administration program.</p>
+        </div>
+        <div class="grid-item item3">
+          <h4>Engineering</h4>
+          <p>Shape the future with our comprehensive Engineering program.</p>
+        </div>
+        <div class="grid-item item4">
+          <h4>Health Sciences</h4>
+          <p>Join the dynamic field of healthcare with our Health Sciences program.</p>
+        </div>
+        <!-- Add more grid items as needed -->
+      </div>
+    </section>
+
+    <!-- New Services Section -->
+    <section class="services">
+      <h3>Our Services</h3>
+      <div class="service-grid">
+        <div class="service-item">
+          <h4>Housing</h4>
+          <p>Discover our comfortable and modern housing options.</p>
+        </div>
+        <div class="service-item">
+          <h4>Dining Halls</h4>
+          <p>Explore diverse culinary experiences at our dining halls.</p>
+        </div>
+        <div class="service-item">
+          <h4>Library</h4>
+          <p>Access our extensive collection and academic resources at the library.</p>
+        </div>
+        <div class="service-item">
+          <h4>Health Center</h4>
+          <p>Get quality healthcare services at our health center.</p>
+        </div>
+        <!-- Add more service items as needed -->
+      </div>
+    </section>
+
+    <!-- New Events Section -->
+    <section class="events">
+      <h3>Upcoming Events</h3>
+      <div class="event-list">
+        <div class="event-item">
+          <h4>Open House</h4>
+          <p>Join us for an open house event to explore campus life.</p>
+        </div>
+        <div class="event-item">
+          <h4>Career Fair</h4>
+          <p>Connect with leading employers at our career fair.</p>
+        </div>
+        <div class="event-item">
+          <h4>Concert Series</h4>
+          <p>Enjoy our upcoming musical concert series.</p>
+        </div>
+        <div class="event-item">
+          <h4>Sports Events</h4>
+          <p>Cheer for our teams at exciting sports events.</p>
+        </div>
+        <!-- Add more event items as needed -->
+      </div>
+    </section>
   </main>
 </template>
 
 <style>
-.home {
-  padding: 1rem;
+/* Existing styles for Welcome and Programs sections */
+
+.welcome {
+  background-color: #003366;
+  color: #fff;
+  padding: 3rem 0;
+  text-align: center;
 }
 
-.home h2 {
-  font-size: 1.5rem;
-  margin-bottom: 2rem;
+.welcome-content {
+  max-width: 800px;
+  margin: 0 auto;
 }
 
-.home p {
+.welcome h2, .welcome p {
+  color: #fff; /* Changing text color to white for better visibility */
+}
+
+.welcome h2 {
+  font-size: 2.5rem;
   margin-bottom: 1rem;
 }
+
+/* Programs Section Styles */
+.grid-section {
+  margin: 3rem 0;
+}
+
+.grid-section h3 {
+  font-size: 2rem;
+  text-align: center;
+  margin-bottom: 2rem;
+  color: #003366; /* Changing the color for better visibility */
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.grid-item {
+  padding: 20px;
+  border-radius: 10px;
+  background-color: #f0f0f0;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  color: #333; /* Adjusted font color for better contrast */
+}
+
+.item1 {
+  grid-column: span 2;
+}
+
+.item2 {
+  background-color: #e9f4f9;
+}
+
+.item3 {
+  background-color: #f9ebf4;
+}
+
+.item4 {
+  grid-column: span 2;
+  background-color: #e9f9f4;
+}
+
+/* Styles for Services Section */
+.services, .events {
+  margin: 3rem 0;
+}
+
+.services h3, .events h3 {
+  font-size: 2rem;
+  text-align: center;
+  margin-bottom: 2rem;
+  color: #003366; /* Adjusted the color for better visibility */
+}
+
+.service-grid, .event-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.service-item, .event-item {
+  padding: 20px;
+  border-radius: 10px;
+  background-color: #f0f0f0;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  color: #333; /* Adjusted font color for better contrast */
+}
+
+.service-item:nth-child(even), .event-item:nth-child(even) {
+  background-color: #e9f4f9;
+}
 </style>
diff --git a/src/views/ScheduleView.vue b/src/views/ScheduleView.vue
new file mode 100644
index 0000000..f0e87ad
--- /dev/null
+++ b/src/views/ScheduleView.vue
@@ -0,0 +1,103 @@
+<!-- ScheduleView.vue -->
+<template>
+    <div>
+      <h1>Weekly Class Schedule</h1>
+      <div class="week-calendar">
+        <div class="header">
+          <div v-for="day in weekDays" :key="day" class="day-header">{{ day }}</div>
+        </div>
+        <div class="calendar">
+          <div v-for="day in weekDays" :key="day" class="day-column">
+            <div v-for="classItem in getClassesByDay(getDayIndex(day))" :key="classItem.id" class="class-item">
+              <h4>{{ classItem.title }}</h4>
+              <p>Professor: {{ classItem.professor }}</p>
+              <p>Time: {{ classItem.time }}</p>
+              <p>Location: {{ classItem.location }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        courses: [
+          // Example courses for each day of the week
+          { id: 1, title: 'Mathematics', professor: 'Dr. Smith', time: '8:00 AM - 9:30 AM', location: 'Room 101', day: 'Monday' },
+          { id: 2, title: 'Physics', professor: 'Prof. Johnson', time: '10:00 AM - 11:30 AM', location: 'Room 205', day: 'Tuesday' },
+          { id: 3, title: 'Literature', professor: 'Dr. Brown', time: '12:00 PM - 1:30 PM', location: 'Room 303', day: 'Wednesday' },
+          { id: 4, title: 'Computer Science', professor: 'Prof. Davis', time: '2:00 PM - 3:30 PM', location: 'Room 402', day: 'Thursday' },
+          { id: 5, title: 'History', professor: 'Dr. Lee', time: '4:00 PM - 5:30 PM', location: 'Room 505', day: 'Friday' }
+          // Add more courses as necessary
+        ],
+        weekDays: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+      };
+    },
+    methods: {
+      getDayIndex(day) {
+        return this.weekDays.indexOf(day);
+      },
+      getClassesByDay(dayIndex) {
+        return this.courses.filter(course => course.day === this.weekDays[dayIndex]);
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  /* Add your styles here */
+  .week-calendar {
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    font-family: 'Arial', sans-serif;
+  }
+  
+  .header {
+    display: flex;
+    background-color: #f0f0f0;
+    border-bottom: 1px solid #ccc;
+  }
+  
+  .day-header {
+    flex: 1;
+    border-right: 1px solid #ccc;
+    padding: 15px;
+    text-align: center;
+    font-weight: bold;
+  }
+  
+  .calendar {
+    display: flex;
+  }
+  
+  .day-column {
+    flex: 1;
+    border: 1px solid #ccc;
+    padding: 10px;
+    margin-right: 10px;
+  }
+  
+  .class-item {
+    margin-bottom: 20px;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #f9f9f9;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  
+  .class-item h4 {
+    margin-bottom: 10px;
+    color: #333;
+  }
+  
+  .class-item p {
+    margin-bottom: 5px;
+    color: #666;
+  }
+  </style>
+  
\ No newline at end of file