From aa70f38267e686a2adbb171a58b8b1b25068e709 Mon Sep 17 00:00:00 2001
From: Jack Psaras <jack.psaras@uconn.edu>
Date: Wed, 29 Nov 2023 13:31:19 -0500
Subject: [PATCH] WIP

---
 src/views/ScheduleView.vue | 218 ++++++++++++++++++++-----------------
 1 file changed, 120 insertions(+), 98 deletions(-)

diff --git a/src/views/ScheduleView.vue b/src/views/ScheduleView.vue
index 1a199ab..4c0218c 100644
--- a/src/views/ScheduleView.vue
+++ b/src/views/ScheduleView.vue
@@ -1,105 +1,127 @@
-<!-- ScheduleView.vue new -->
 <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 class="center-button">
+      <button @click="viewSchedule" v-if="isAuthenticated">View Schedule</button>
+    </div>
+
+    <!-- Schedule Section -->
+    <section class="schedule">
+      <h3>Schedule</h3>
+      <div class="card-container" v-if="scheduleItems.length > 0">
+        <div class="card" v-for="(item, index) in scheduleItems" :key="index">
+          <div class="card-content">
+            <h4>{{ item.name }}</h4>
+            <div class="card-details">
+              <strong>Course Name:</strong> {{ item.courseName }}
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </template>
-  
-  <script>
-  import { useAuth0 } from '@auth0/auth0-vue';
-  
-  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']
+      <p v-else>No schedule available.</p>
+    </section>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import { ref } from 'vue';
+
+export default {
+  data() {
+    return {
+      isAuthenticated: true, // Change this to your authentication logic
+      scheduleItems: [],
+    };
+  },
+  methods: {
+    viewSchedule() {
+      const requestData = {
+        name: 'Jack Psaras',
       };
+
+      let url = 'https://xb55sqy2kf.execute-api.us-east-1.amazonaws.com/prod/enroll';
+
+      // Constructing the URL with query parameters
+      url += `?name=${requestData.name}`;
+
+      axios.get(url)
+        .then(response => {
+          if (response.data.statusCode === 200) {
+            this.scheduleItems = response.data.body.items;
+          } else {
+            console.error('Error fetching schedule:', response.data.body.message);
+          }
+        })
+        .catch(error => {
+          console.error('Error fetching schedule:', error.message);
+        });
     },
-    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
+  },
+};
+</script>
+
+<style>
+.center-button {
+  text-align: center;
+  margin-top: 50vh; /* Adjust this value to center the button vertically */
+}
+
+.center-button button {
+  padding: 10px 20px;
+  border: 1px solid #003366;
+  border-radius: 5px;
+  background-color: #003366;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.schedule {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.schedule h3 {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+  color: #003366;
+}
+
+.card-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.card {
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 20px;
+  width: 500px;
+  background-color: #f9f9f9;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  margin: 20px auto;
+  display: flex;
+}
+
+.card-content {
+  flex: 1;
+}
+
+.card h4 {
+  font-size: 1.3rem;
+  margin: 0 0 20px;
+  color: #003366;
+}
+
+.card-details {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.card-details strong {
+  font-weight: bold;
+  margin-right: 5px;
+}
+</style>