From 8211c6737836a0533dbff9100ae1aaf426e6f5f3 Mon Sep 17 00:00:00 2001
From: Andrew J Xu <ajx8@cornell.edu>
Date: Fri, 16 Feb 2024 13:56:02 -0500
Subject: [PATCH 1/8] add schedules and courses sections

---
 .../ScheduleGenerateModal.vue                 | 66 ++++---------------
 1 file changed, 13 insertions(+), 53 deletions(-)

diff --git a/src/components/ScheduleGenerate/ScheduleGenerateModal.vue b/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
index 37dd4102c..ffe65502d 100644
--- a/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
+++ b/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
@@ -26,59 +26,23 @@
             Please download before closing or it won't be saved!
           </div>
         </div>
-        <div class="schedule-generate-body">
-          <div class="schedule-generate-section-courses">
-            <div class="schedule-generate-subHeader schedule-generate-subHeader--smallerIndent">
-              <span class="schedule-generate-subHeader--font">Your Courses</span>
+        <div class="generated-schedule-body">
+          <div class="generated-schedule-section-courses">
+            <div class="generated-schedule-subHeader generated-schedule-subHeader--indent">
+              <span class="generated-schedule-subHeader--font">Your Courses</span>
             </div>
-            <div class="schedule-generate-inputs">
-              <div class="schedule-generate-inputWrapper">
-                <schedule-courses
-                  :num-credits="12"
-                  :classes="[
-                    {
-                      title: 'Introductory Programming',
-                      name: 'CS 1110',
-                      color: '#FF3B30', // eventually want to use coursescolorset
-                      // and match with the right component of this modal
-                    },
-                    {
-                      title: 'Information Science Major Concentration Group A',
-                      name: 'INFO 2450',
-                      color: '#34C759',
-                    },
-                    {
-                      title: 'Information Science Major Core Courses',
-                      name: 'INFO 1260',
-                      color: '#32A0F2',
-                    },
-                    {
-                      title: 'Information Science Major Electives',
-                      name: 'INFO 2300',
-                      color: '#AF52DE',
-                    },
-                    {
-                      title: 'College Requirements Human Diversity (D)',
-                      name: 'DSOC 1101',
-                      color: '#FF9500',
-                    },
-                    {
-                      title: 'No Requirement',
-                      name: 'ART 2301',
-                      color: '#B155E0',
-                    },
-                    // question: what if # of courses overflows the box? not in designs iirc
-                  ]"
-                />
+            <div class="generated-schedule-inputs">
+              <div class="generated-schedule-inputWrapper">
+                <schedule-courses />
               </div>
             </div>
           </div>
-          <div class="schedule-generate-section-schedule">
-            <div class="schedule-generate-subHeader schedule-generate-subHeader--indent">
-              <span class="schedule-generate-subHeader--font">Fall 2024</span>
+          <div class="generated-schedule-section-schedule">
+            <div class="generated-schedule-subHeader generated-schedule-subHeader--indent">
+              <span class="generated-schedule-subHeader--font">Fall 2024</span>
             </div>
-            <div class="schedule-generate-inputs">
-              <div class="schedule-generate-inputWrapper">
+            <div class="generated-schedule-inputs">
+              <div class="generated-schedule-inputWrapper">
                 <schedule />
               </div>
             </div>
@@ -220,12 +184,8 @@ input {
       color: $lightPlaceholderGray;
       font-size: 16px;
     }
-    &--smallerIndent {
-      padding-left: 1.25rem;
-      font-size: 18px;
-    }
     &--indent {
-      padding-left: 2rem;
+      padding-left: 3rem;
       font-size: 18px;
     }
   }

From 2e60fe12c9ba14d521b464d5bd8c8b8fac6d30ab Mon Sep 17 00:00:00 2001
From: Andrew J Xu <ajx8@cornell.edu>
Date: Fri, 16 Feb 2024 13:56:57 -0500
Subject: [PATCH 2/8] fix indent

---
 src/components/ScheduleGenerate/ScheduleGenerateModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ScheduleGenerate/ScheduleGenerateModal.vue b/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
index ffe65502d..4a983b8de 100644
--- a/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
+++ b/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
@@ -185,7 +185,7 @@ input {
       font-size: 16px;
     }
     &--indent {
-      padding-left: 3rem;
+      padding-left: 2rem;
       font-size: 18px;
     }
   }

From e25dfe99c72338562a883057d0cb49d2883906f6 Mon Sep 17 00:00:00 2001
From: Simon Ilincev <trilogicworlds@gmail.com>
Date: Thu, 22 Feb 2024 15:26:14 -0500
Subject: [PATCH 3/8] chore: flesh out component for LHS of schedgen modal

---
 .../ScheduleGenerateModal.vue                 | 44 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/ScheduleGenerate/ScheduleGenerateModal.vue b/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
index 4a983b8de..430b6efbc 100644
--- a/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
+++ b/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
@@ -28,12 +28,48 @@
         </div>
         <div class="generated-schedule-body">
           <div class="generated-schedule-section-courses">
-            <div class="generated-schedule-subHeader generated-schedule-subHeader--indent">
+            <div class="generated-schedule-subHeader generated-schedule-subHeader--smallerIndent">
               <span class="generated-schedule-subHeader--font">Your Courses</span>
             </div>
             <div class="generated-schedule-inputs">
               <div class="generated-schedule-inputWrapper">
-                <schedule-courses />
+                <schedule-courses
+                  :num-credits="12"
+                  :classes="[
+                    {
+                      title: 'Introductory Programming',
+                      name: 'CS 1110',
+                      color: '#FF3B30', // eventually want to use coursescolorset
+                      // and match with the right component of this modal
+                    },
+                    {
+                      title: 'Information Science Major Concentration Group A',
+                      name: 'INFO 2450',
+                      color: '#34C759',
+                    },
+                    {
+                      title: 'Information Science Major Core Courses',
+                      name: 'INFO 1260',
+                      color: '#32A0F2',
+                    },
+                    {
+                      title: 'Information Science Major Electives',
+                      name: 'INFO 2300',
+                      color: '#AF52DE',
+                    },
+                    {
+                      title: 'College Requirements Human Diversity (D)',
+                      name: 'DSOC 1101',
+                      color: '#FF9500',
+                    },
+                    {
+                      title: 'No Requirement',
+                      name: 'ART 2301',
+                      color: '#B155E0',
+                    },
+                    // question: what if # of courses overflows the box? not in designs iirc
+                  ]"
+                />
               </div>
             </div>
           </div>
@@ -184,6 +220,10 @@ input {
       color: $lightPlaceholderGray;
       font-size: 16px;
     }
+    &--smallerIndent {
+      padding-left: 1.25rem;
+      font-size: 18px;
+    }
     &--indent {
       padding-left: 2rem;
       font-size: 18px;

From 85adaafbfecca8942c978ea7e66629564a4176ba Mon Sep 17 00:00:00 2001
From: Andrew J Xu <ajx8@cornell.edu>
Date: Sat, 2 Mar 2024 16:48:37 -0500
Subject: [PATCH 4/8] fixes

---
 .../ScheduleGenerateModal.vue                 | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/ScheduleGenerate/ScheduleGenerateModal.vue b/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
index 430b6efbc..37dd4102c 100644
--- a/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
+++ b/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
@@ -26,13 +26,13 @@
             Please download before closing or it won't be saved!
           </div>
         </div>
-        <div class="generated-schedule-body">
-          <div class="generated-schedule-section-courses">
-            <div class="generated-schedule-subHeader generated-schedule-subHeader--smallerIndent">
-              <span class="generated-schedule-subHeader--font">Your Courses</span>
+        <div class="schedule-generate-body">
+          <div class="schedule-generate-section-courses">
+            <div class="schedule-generate-subHeader schedule-generate-subHeader--smallerIndent">
+              <span class="schedule-generate-subHeader--font">Your Courses</span>
             </div>
-            <div class="generated-schedule-inputs">
-              <div class="generated-schedule-inputWrapper">
+            <div class="schedule-generate-inputs">
+              <div class="schedule-generate-inputWrapper">
                 <schedule-courses
                   :num-credits="12"
                   :classes="[
@@ -73,12 +73,12 @@
               </div>
             </div>
           </div>
-          <div class="generated-schedule-section-schedule">
-            <div class="generated-schedule-subHeader generated-schedule-subHeader--indent">
-              <span class="generated-schedule-subHeader--font">Fall 2024</span>
+          <div class="schedule-generate-section-schedule">
+            <div class="schedule-generate-subHeader schedule-generate-subHeader--indent">
+              <span class="schedule-generate-subHeader--font">Fall 2024</span>
             </div>
-            <div class="generated-schedule-inputs">
-              <div class="generated-schedule-inputWrapper">
+            <div class="schedule-generate-inputs">
+              <div class="schedule-generate-inputWrapper">
                 <schedule />
               </div>
             </div>

From e574c6e36975f6cbfbabdb6799630bf47dd7df40 Mon Sep 17 00:00:00 2001
From: andxu282 <ajx8@cornell.edu>
Date: Mon, 18 Mar 2024 18:22:47 -0400
Subject: [PATCH 5/8] schedule

---
 src/components/ScheduleGenerate/Schedule.vue  | 134 +++++++++++-
 .../ScheduleGenerateModal.vue                 | 190 ++++++++++++++----
 2 files changed, 279 insertions(+), 45 deletions(-)

diff --git a/src/components/ScheduleGenerate/Schedule.vue b/src/components/ScheduleGenerate/Schedule.vue
index 3fd48c4e0..4148a72f5 100644
--- a/src/components/ScheduleGenerate/Schedule.vue
+++ b/src/components/ScheduleGenerate/Schedule.vue
@@ -1,25 +1,145 @@
 <template>
-  <div class="generated-schedule-schedule">
-    <div>hello</div>
+  <div class="schedule-main">
+    <div class="schedule-body">
+      <div class="schedule-hours">
+        <div class="schedule-hour" v-for="hour in hoursRange">{{ hour }}</div>
+      </div>
+      <div class="schedule-week">
+        <div class="schedule-day" v-for="day in days">
+          <span class="schedule-day-label">
+            {{ day }}
+          </span>
+          <div
+            class="schedule-course"
+            v-for="cls in classesSchedule[day]"
+            :style="getStyle(cls.color, cls.timeStart)"
+          >
+            <div class="schedule-course-info">
+              <span class="schedule-course-name">
+                {{ cls.name }}
+              </span>
+              <span> {{ cls.timeStart }} - {{ cls.timeEnd }} </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
-export default defineComponent({});
+type Course = {
+  color: string;
+  title: string;
+  name: string;
+  timeStart: string;
+  timeEnd: string;
+};
+const minHour = 8;
+const totalMinutes = 600;
+const totalPixels = 610;
+export default defineComponent({
+  props: {
+    classesSchedule: {
+      type: Object as PropType<{ [key: string]: Array<Course> }>,
+      required: true,
+    },
+  },
+  computed: {
+    days(): string[] {
+      return ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+    },
+    hoursRange(): string[] {
+      return ['8am', '9am', '10am', '11am', '12pm', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm'];
+    },
+  },
+  methods: {
+    getStyle(color: string, timeStart: string): Record<string, string> {
+      return {
+        borderColor: color,
+        top: this.getPixels(timeStart).toString() + 'px',
+      };
+    },
+    getPixels(time: string): number {
+      const parts = time.match(/(\d+):(\d+)(AM|PM)/i);
+      if (!parts) {
+        throw new Error('Invalid time format');
+      }
+      let hours = parseInt(parts[1], 10);
+      const minutes = parseInt(parts[2]);
+
+      const ampm = parts[3];
+      if (ampm.toUpperCase() === 'PM' && hours < 12) {
+        hours += 12;
+      } else if (ampm.toUpperCase() === 'AM' && hours === 12) {
+        hours = 0;
+      }
+      return Math.round((((hours - minHour) * 60 + minutes) / totalMinutes) * totalPixels) + 50;
+    },
+  },
+});
 </script>
 
 <style scoped lang="scss">
 @import '@/assets/scss/_variables.scss';
-.generated-schedule {
-  &-schedule {
+.schedule {
+  &-main {
     border-color: $inactiveGray;
     border: 1px solid $inactiveGray;
     box-sizing: border-box;
     border-radius: 4px;
 
-    padding: 2rem 3rem 2rem;
+    padding: 2rem 1.5rem 1rem 1.5rem;
+  }
+  &-week {
+    display: flex;
+    flex-direction: row;
+    color: $secondaryGray;
+    justify-content: space-between;
+    flex-grow: 1;
+  }
+  &-day {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    position: relative;
+    &-label {
+      margin-bottom: 1.8rem;
+    }
+  }
+  &-hours {
+    display: flex;
+    flex-direction: column;
+    color: $secondaryGray;
+    justify-content: space-between;
+    margin-right: 2rem;
+    margin-top: 3rem;
+  }
+  &-hour {
+    margin-bottom: 40px;
+  }
+  &-body {
+    display: flex;
+    flex-direction: row;
+  }
+  &-course {
+    border-left-width: 4px;
+    border-left-style: solid;
+    padding-top: 4px;
+    padding-left: 8px;
+    height: 70px;
+    width: 85px;
+    position: absolute;
+    &-info {
+      display: flex;
+      flex-direction: column;
+      color: black;
+    }
+    &-name {
+      font-weight: 900;
+    }
   }
 }
 </style>
diff --git a/src/components/ScheduleGenerate/ScheduleGenerateModal.vue b/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
index 37dd4102c..d5a226094 100644
--- a/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
+++ b/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
@@ -33,43 +33,7 @@
             </div>
             <div class="schedule-generate-inputs">
               <div class="schedule-generate-inputWrapper">
-                <schedule-courses
-                  :num-credits="12"
-                  :classes="[
-                    {
-                      title: 'Introductory Programming',
-                      name: 'CS 1110',
-                      color: '#FF3B30', // eventually want to use coursescolorset
-                      // and match with the right component of this modal
-                    },
-                    {
-                      title: 'Information Science Major Concentration Group A',
-                      name: 'INFO 2450',
-                      color: '#34C759',
-                    },
-                    {
-                      title: 'Information Science Major Core Courses',
-                      name: 'INFO 1260',
-                      color: '#32A0F2',
-                    },
-                    {
-                      title: 'Information Science Major Electives',
-                      name: 'INFO 2300',
-                      color: '#AF52DE',
-                    },
-                    {
-                      title: 'College Requirements Human Diversity (D)',
-                      name: 'DSOC 1101',
-                      color: '#FF9500',
-                    },
-                    {
-                      title: 'No Requirement',
-                      name: 'ART 2301',
-                      color: '#B155E0',
-                    },
-                    // question: what if # of courses overflows the box? not in designs iirc
-                  ]"
-                />
+                <schedule-courses :num-credits="12" :classes="classes" />
               </div>
             </div>
           </div>
@@ -79,7 +43,7 @@
             </div>
             <div class="schedule-generate-inputs">
               <div class="schedule-generate-inputWrapper">
-                <schedule />
+                <schedule :classesSchedule="classesSchedule" />
               </div>
             </div>
           </div>
@@ -111,6 +75,156 @@ export default defineComponent({
       }
     },
   },
+  computed: {
+    classes() {
+      return [
+        {
+          title: 'Introductory Programming',
+          name: 'CS 1110',
+          color: '#FF3B30', // eventually want to use coursescolorset
+          // and match with the right component of this modal
+          timeStart: '8:00am',
+          timeEnd: '8:50am',
+        },
+        {
+          title: 'Information Science Major Concentration Group A',
+          name: 'INFO 2450',
+          color: '#34C759',
+          timeStart: '8:40am',
+          timeEnd: '9:55am',
+        },
+        {
+          title: 'Information Science Major Core Courses',
+          name: 'INFO 1260',
+          color: '#32A0F2',
+          timeStart: '10:10am',
+          timeEnd: '11:00am',
+        },
+        {
+          title: 'Information Science Major Electives',
+          name: 'INFO 2300',
+          color: '#AF52DE',
+          timeStart: '12:20pm',
+          timeEnd: '1:10pm',
+        },
+        {
+          title: 'College Requirements Human Diversity (D)',
+          name: 'DSOC 1101',
+          color: '#FF9500',
+          timeStart: '2:30pm',
+          timeEnd: '3:20pm',
+        },
+        {
+          title: 'No Requirement',
+          name: 'ART 2301',
+          color: '#B155E0',
+          timeStart: '5:10pm',
+          timeEnd: '6:00am',
+        },
+        // question: what if # of courses overflows the box? not in designs iirc
+      ];
+    },
+    classesSchedule() {
+      return {
+        Monday: [
+          {
+            title: 'Introductory Programming',
+            name: 'CS 1110',
+            color: '#FF3B30',
+            timeStart: '8:00am',
+            timeEnd: '8:50am',
+          },
+          {
+            title: 'Information Science Major Core Courses',
+            name: 'INFO 1260',
+            color: '#32A0F2',
+            timeStart: '10:10am',
+            timeEnd: '11:00am',
+          },
+          {
+            title: 'Information Science Major Electives',
+            name: 'INFO 2300',
+            color: '#AF52DE',
+            timeStart: '12:20pm',
+            timeEnd: '1:10pm',
+          },
+          {
+            title: 'No Requirement',
+            name: 'ART 2301',
+            color: '#B155E0',
+            timeStart: '5:10pm',
+            timeEnd: '6:00am',
+          },
+        ],
+        Tuesday: [
+          {
+            title: 'Information Science Major Concentration Group A',
+            name: 'INFO 2450',
+            color: '#34C759',
+            timeStart: '8:40am',
+            timeEnd: '9:55am',
+          },
+          {
+            title: 'College Requirements Human Diversity (D)',
+            name: 'DSOC 1101',
+            color: '#FF9500',
+            timeStart: '2:30pm',
+            timeEnd: '3:20pm',
+          },
+        ],
+        Wednesday: [
+          {
+            title: 'Introductory Programming',
+            name: 'CS 1110',
+            color: '#FF3B30',
+            timeStart: '8:00am',
+            timeEnd: '8:50am',
+          },
+          {
+            title: 'Information Science Major Core Courses',
+            name: 'INFO 1260',
+            color: '#32A0F2',
+            timeStart: '10:10am',
+            timeEnd: '11:00am',
+          },
+          {
+            title: 'Information Science Major Electives',
+            name: 'INFO 2300',
+            color: '#AF52DE',
+            timeStart: '12:20pm',
+            timeEnd: '1:10pm',
+          },
+        ],
+        Thursday: [
+          {
+            title: 'Information Science Major Concentration Group A',
+            name: 'INFO 2450',
+            color: '#34C759',
+            timeStart: '8:40am',
+            timeEnd: '9:55am',
+          },
+          {
+            title: 'College Requirements Human Diversity (D)',
+            name: 'DSOC 1101',
+            color: '#FF9500',
+            timeStart: '2:30pm',
+            timeEnd: '3:20pm',
+          },
+        ],
+        Friday: [
+          {
+            title: 'Introductory Programming',
+            name: 'CS 1110',
+            color: '#FF3B30',
+            timeStart: '12:20pm',
+            timeEnd: '1:10pm',
+          },
+        ],
+        Saturday: [],
+        Sunday: [],
+      };
+    },
+  },
 });
 </script>
 <style scoped lang="scss">

From 562c84db68c9e7d7161de4c259a91e49c8fd14ea Mon Sep 17 00:00:00 2001
From: andxu282 <ajx8@cornell.edu>
Date: Mon, 18 Mar 2024 20:01:53 -0400
Subject: [PATCH 6/8] refactoring

---
 src/components/ScheduleGenerate/Schedule.vue | 61 +++++++++++++++-----
 1 file changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/components/ScheduleGenerate/Schedule.vue b/src/components/ScheduleGenerate/Schedule.vue
index 4148a72f5..780050724 100644
--- a/src/components/ScheduleGenerate/Schedule.vue
+++ b/src/components/ScheduleGenerate/Schedule.vue
@@ -12,7 +12,7 @@
           <div
             class="schedule-course"
             v-for="cls in classesSchedule[day]"
-            :style="getStyle(cls.color, cls.timeStart)"
+            :style="getStyle(cls.color, cls.timeStart, cls.timeEnd)"
           >
             <div class="schedule-course-info">
               <span class="schedule-course-name">
@@ -37,6 +37,12 @@ type Course = {
   timeStart: string;
   timeEnd: string;
 };
+
+type Time = {
+  hours: number;
+  minutes: number;
+};
+
 const minHour = 8;
 const totalMinutes = 600;
 const totalPixels = 610;
@@ -56,13 +62,7 @@ export default defineComponent({
     },
   },
   methods: {
-    getStyle(color: string, timeStart: string): Record<string, string> {
-      return {
-        borderColor: color,
-        top: this.getPixels(timeStart).toString() + 'px',
-      };
-    },
-    getPixels(time: string): number {
+    parseTimeString(time: string): Time {
       const parts = time.match(/(\d+):(\d+)(AM|PM)/i);
       if (!parts) {
         throw new Error('Invalid time format');
@@ -76,6 +76,37 @@ export default defineComponent({
       } else if (ampm.toUpperCase() === 'AM' && hours === 12) {
         hours = 0;
       }
+      return { hours, minutes };
+    },
+
+    getTotalMinutes(classes: Course[]): number {
+      // Initial min and max values set to the opposite extremes
+      let minHour = 23;
+      let maxHour = 0;
+
+      classes.forEach(cls => {
+        // Extract hours from timeStart and timeEnd and convert them to numbers
+        const startHour = this.parseTimeString(cls.timeStart).hours;
+        const endHour = this.parseTimeString(cls.timeEnd).minutes;
+
+        // Update min and max hours
+        minHour = Math.min(minHour, startHour);
+        maxHour = Math.max(maxHour, endHour);
+      });
+
+      return (maxHour - minHour) * 60;
+    },
+    getStyle(color: string, timeStart: string, timeEnd: string): Record<string, string> {
+      return {
+        borderColor: color,
+        top: this.getPixels(timeStart).toString() + 'px',
+        height: (this.getPixels(timeEnd) - this.getPixels(timeStart)).toString() + 'px',
+      };
+    },
+    getPixels(time: string): number {
+      const t = this.parseTimeString(time);
+      const hours = t.hours;
+      const minutes = t.minutes;
       return Math.round((((hours - minHour) * 60 + minutes) / totalMinutes) * totalPixels) + 50;
     },
   },
@@ -90,24 +121,24 @@ export default defineComponent({
     border: 1px solid $inactiveGray;
     box-sizing: border-box;
     border-radius: 4px;
+    height: 780px;
 
-    padding: 2rem 1.5rem 1rem 1.5rem;
+    padding: 2rem 0.5rem 1rem 1.5rem;
   }
   &-week {
     display: flex;
     flex-direction: row;
     color: $secondaryGray;
-    justify-content: space-between;
-    flex-grow: 1;
   }
   &-day {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
+    width: 6rem;
     position: relative;
+    display: grid;
     &-label {
       margin-bottom: 1.8rem;
+      justify-self: center;
     }
+    border-left: 1px solid $inactiveGray;
   }
   &-hours {
     display: flex;
@@ -125,9 +156,9 @@ export default defineComponent({
     flex-direction: row;
   }
   &-course {
+    font-size: 12px;
     border-left-width: 4px;
     border-left-style: solid;
-    padding-top: 4px;
     padding-left: 8px;
     height: 70px;
     width: 85px;

From 7aa975c2203ce7c689128b746ae316a681026cf4 Mon Sep 17 00:00:00 2001
From: andxu282 <ajx8@cornell.edu>
Date: Mon, 18 Mar 2024 20:59:52 -0400
Subject: [PATCH 7/8] calculate minutes and labels

---
 src/components/ScheduleGenerate/Schedule.vue  | 75 +++++++++++++------
 .../ScheduleGenerateModal.vue                 |  4 +-
 2 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/src/components/ScheduleGenerate/Schedule.vue b/src/components/ScheduleGenerate/Schedule.vue
index 780050724..e0ad9a32d 100644
--- a/src/components/ScheduleGenerate/Schedule.vue
+++ b/src/components/ScheduleGenerate/Schedule.vue
@@ -43,8 +43,12 @@ type Time = {
   minutes: number;
 };
 
+type MinMaxHour = {
+  minHour: number;
+  maxHour: number;
+};
+
 const minHour = 8;
-const totalMinutes = 600;
 const totalPixels = 610;
 export default defineComponent({
   props: {
@@ -53,12 +57,27 @@ export default defineComponent({
       required: true,
     },
   },
+  data() {
+    return {
+      days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+    };
+  },
   computed: {
-    days(): string[] {
-      return ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-    },
     hoursRange(): string[] {
-      return ['8am', '9am', '10am', '11am', '12pm', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm'];
+      const { minHour, maxHour } = this.getMinMaxHours();
+      const hoursArray: string[] = [];
+      for (let hour = minHour; hour <= maxHour; hour++) {
+        // Determine AM or PM
+        const suffix = hour < 12 ? 'am' : 'pm';
+        // Convert hour to 12-hour format and create the string
+        const formattedHour = `${hour <= 12 ? hour : hour - 12}${suffix}`;
+        hoursArray.push(formattedHour);
+      }
+      return hoursArray;
+    },
+    totalMinutes(): number {
+      const total = this.getTotalMinutes();
+      return total;
     },
   },
   methods: {
@@ -79,23 +98,42 @@ export default defineComponent({
       return { hours, minutes };
     },
 
-    getTotalMinutes(classes: Course[]): number {
-      // Initial min and max values set to the opposite extremes
+    getMinMaxHours(): MinMaxHour {
       let minHour = 23;
       let maxHour = 0;
 
-      classes.forEach(cls => {
-        // Extract hours from timeStart and timeEnd and convert them to numbers
-        const startHour = this.parseTimeString(cls.timeStart).hours;
-        const endHour = this.parseTimeString(cls.timeEnd).minutes;
+      this.days.forEach(day => {
+        const classes = this.classesSchedule[day];
+        classes.forEach(cls => {
+          // Extract hours from timeStart and timeEnd and convert them to numbers
+          const startHour = this.parseTimeString(cls.timeStart).hours;
+          const { hours: endHour, minutes: endMinutes } = this.parseTimeString(cls.timeEnd);
 
-        // Update min and max hours
-        minHour = Math.min(minHour, startHour);
-        maxHour = Math.max(maxHour, endHour);
+          // Update min and max hours
+          minHour = Math.min(minHour, startHour);
+          if (maxHour < endHour) {
+            maxHour = endHour + (endMinutes > 0 ? 1 : 0);
+          }
+        });
       });
+      return { minHour, maxHour };
+    },
 
+    getTotalMinutes(): number {
+      // Initial min and max values set to the opposite extremes
+      const hoursRange = this.getMinMaxHours();
+      const maxHour = hoursRange.maxHour;
+      const minHour = hoursRange.minHour;
       return (maxHour - minHour) * 60;
     },
+    getPixels(time: string): number {
+      const t = this.parseTimeString(time);
+      const hours = t.hours;
+      const minutes = t.minutes;
+      return (
+        Math.round((((hours - minHour) * 60 + minutes) / this.totalMinutes) * totalPixels) + 50
+      );
+    },
     getStyle(color: string, timeStart: string, timeEnd: string): Record<string, string> {
       return {
         borderColor: color,
@@ -103,12 +141,6 @@ export default defineComponent({
         height: (this.getPixels(timeEnd) - this.getPixels(timeStart)).toString() + 'px',
       };
     },
-    getPixels(time: string): number {
-      const t = this.parseTimeString(time);
-      const hours = t.hours;
-      const minutes = t.minutes;
-      return Math.round((((hours - minHour) * 60 + minutes) / totalMinutes) * totalPixels) + 50;
-    },
   },
 });
 </script>
@@ -146,10 +178,9 @@ export default defineComponent({
     color: $secondaryGray;
     justify-content: space-between;
     margin-right: 2rem;
-    margin-top: 3rem;
   }
   &-hour {
-    margin-bottom: 40px;
+    margin-top: 40px;
   }
   &-body {
     display: flex;
diff --git a/src/components/ScheduleGenerate/ScheduleGenerateModal.vue b/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
index d5a226094..dee85ff12 100644
--- a/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
+++ b/src/components/ScheduleGenerate/ScheduleGenerateModal.vue
@@ -119,7 +119,7 @@ export default defineComponent({
           name: 'ART 2301',
           color: '#B155E0',
           timeStart: '5:10pm',
-          timeEnd: '6:00am',
+          timeEnd: '6:00pm',
         },
         // question: what if # of courses overflows the box? not in designs iirc
       ];
@@ -153,7 +153,7 @@ export default defineComponent({
             name: 'ART 2301',
             color: '#B155E0',
             timeStart: '5:10pm',
-            timeEnd: '6:00am',
+            timeEnd: '6:00pm',
           },
         ],
         Tuesday: [

From c3241ca509cc468e253e97b1f36714e3a280a50c Mon Sep 17 00:00:00 2001
From: andxu282 <ajx8@cornell.edu>
Date: Mon, 18 Mar 2024 21:05:53 -0400
Subject: [PATCH 8/8] fix lint

---
 src/components/ScheduleGenerate/Schedule.vue | 23 +++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/ScheduleGenerate/Schedule.vue b/src/components/ScheduleGenerate/Schedule.vue
index e0ad9a32d..a9e041350 100644
--- a/src/components/ScheduleGenerate/Schedule.vue
+++ b/src/components/ScheduleGenerate/Schedule.vue
@@ -2,15 +2,16 @@
   <div class="schedule-main">
     <div class="schedule-body">
       <div class="schedule-hours">
-        <div class="schedule-hour" v-for="hour in hoursRange">{{ hour }}</div>
+        <div class="schedule-hour" :key="hour" v-for="hour in hoursRange">{{ hour }}</div>
       </div>
       <div class="schedule-week">
-        <div class="schedule-day" v-for="day in days">
+        <div class="schedule-day" :key="day" v-for="day in days">
           <span class="schedule-day-label">
             {{ day }}
           </span>
           <div
             class="schedule-course"
+            :key="cls.name"
             v-for="cls in classesSchedule[day]"
             :style="getStyle(cls.color, cls.timeStart, cls.timeEnd)"
           >
@@ -48,7 +49,6 @@ type MinMaxHour = {
   maxHour: number;
 };
 
-const minHour = 8;
 const totalPixels = 610;
 export default defineComponent({
   props: {
@@ -66,7 +66,7 @@ export default defineComponent({
     hoursRange(): string[] {
       const { minHour, maxHour } = this.getMinMaxHours();
       const hoursArray: string[] = [];
-      for (let hour = minHour; hour <= maxHour; hour++) {
+      for (let hour = minHour; hour <= maxHour; hour += 1) {
         // Determine AM or PM
         const suffix = hour < 12 ? 'am' : 'pm';
         // Convert hour to 12-hour format and create the string
@@ -87,7 +87,7 @@ export default defineComponent({
         throw new Error('Invalid time format');
       }
       let hours = parseInt(parts[1], 10);
-      const minutes = parseInt(parts[2]);
+      const minutes = parseInt(parts[2], 10);
 
       const ampm = parts[3];
       if (ampm.toUpperCase() === 'PM' && hours < 12) {
@@ -121,15 +121,12 @@ export default defineComponent({
 
     getTotalMinutes(): number {
       // Initial min and max values set to the opposite extremes
-      const hoursRange = this.getMinMaxHours();
-      const maxHour = hoursRange.maxHour;
-      const minHour = hoursRange.minHour;
+      const { maxHour, minHour } = this.getMinMaxHours();
       return (maxHour - minHour) * 60;
     },
     getPixels(time: string): number {
-      const t = this.parseTimeString(time);
-      const hours = t.hours;
-      const minutes = t.minutes;
+      const { hours, minutes } = this.parseTimeString(time);
+      const { minHour } = this.getMinMaxHours();
       return (
         Math.round((((hours - minHour) * 60 + minutes) / this.totalMinutes) * totalPixels) + 50
       );
@@ -137,8 +134,8 @@ export default defineComponent({
     getStyle(color: string, timeStart: string, timeEnd: string): Record<string, string> {
       return {
         borderColor: color,
-        top: this.getPixels(timeStart).toString() + 'px',
-        height: (this.getPixels(timeEnd) - this.getPixels(timeStart)).toString() + 'px',
+        top: `${this.getPixels(timeStart).toString()}px`,
+        height: `${(this.getPixels(timeEnd) - this.getPixels(timeStart)).toString()}px`,
       };
     },
   },