Skip to content

Commit

Permalink
formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrew Xu authored and andxu282 committed Mar 13, 2024
1 parent afd148b commit 3fcb5ff
Show file tree
Hide file tree
Showing 2 changed files with 264 additions and 58 deletions.
132 changes: 112 additions & 20 deletions src/components/ScheduleGenerate/Schedule.vue
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,83 @@
<template>
<div class="schedule-main">
<div class="schedule-week">
<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>
<div>Saturday</div>
<div>Sunday</div>
</div>
<div class="schedule-body">
<div class="schedule-hours" v-for="hoursRange"></div>
<div class="schedule-hours">
<div class="schedule-hour" v-for="hour in hoursRange">{{ hour }}</div>

Check failure on line 5 in src/components/ScheduleGenerate/Schedule.vue

View workflow job for this annotation

GitHub Actions / check 

Elements in iteration expect to have 'v-bind:key' directives
</div>
<div class="schedule-week">
<div class="schedule-day" v-for="day in days">

Check failure on line 8 in src/components/ScheduleGenerate/Schedule.vue

View workflow job for this annotation

GitHub Actions / check 

Elements in iteration expect to have 'v-bind:key' directives
<span class="schedule-day-label">
{{ day }}
</span>
<div

Check failure on line 12 in src/components/ScheduleGenerate/Schedule.vue

View workflow job for this annotation

GitHub Actions / check 

Elements in iteration expect to have 'v-bind:key' directives
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 { PropType, defineComponent } from 'vue';
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: {
classes: {
type: Array as PropType<
Array<{ color: string; title: string; name: string; startHour: Date; endHour: Date }>
>,
classesSchedule: {
type: Object as PropType<{ [key: string]: Array<Course> }>,
required: true,
},
},
computed: {
hoursRange(): number[] {
return Array.from(
{ length: this.endHour - this.startHour },
(_, i) => this.startHour + 1 + i
);
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',

Check failure on line 64 in src/components/ScheduleGenerate/Schedule.vue

View workflow job for this annotation

GitHub Actions / check 

Unexpected string concatenation
};
},
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]);

Check failure on line 73 in src/components/ScheduleGenerate/Schedule.vue

View workflow job for this annotation

GitHub Actions / check 

Missing radix parameter
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;
},
},
});
Expand All @@ -47,14 +92,61 @@ export default defineComponent({
box-sizing: border-box;
border-radius: 4px;
padding: 2rem 3rem 1rem 5rem;
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>
190 changes: 152 additions & 38 deletions src/components/ScheduleGenerate/ScheduleGenerateModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -79,7 +43,7 @@
</div>
<div class="schedule-generate-inputs">
<div class="schedule-generate-inputWrapper">
<schedule />
<schedule :classesSchedule="classesSchedule" />
</div>
</div>
</div>
Expand All @@ -101,6 +65,156 @@ export default defineComponent({
ScheduleCourses,
},
emits: ['closeScheduleGenerateModal'],
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: [],
};
},
},
methods: {
cancel() {
this.$emit('closeScheduleGenerateModal');
Expand Down

0 comments on commit 3fcb5ff

Please sign in to comment.