6 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/icons/DeleteIcon.tsx:
--------------------------------------------------------------------------------
1 | export default function DeleteIcon() {
2 | return (
3 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/helpers/UseConfigBoolean.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 |
3 | export default function useConfigBoolean(name: string) {
4 | const [isEnabled, setIsEnabled] = useStateWISP - Waterloo Integrated Schedule Planner
7 |8 | See how different courses offered at the University of Waterloo fit into 9 | your class schedule. 10 |
11 |To get started, search for courses to add to your schedule.
12 | e.key === 'Enter' && onSelected()}
19 | >
20 | {children}
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/icons/PrintIcon.tsx:
--------------------------------------------------------------------------------
1 | import './style.css';
2 |
3 | export default function PrintIcon() {
4 | return (
5 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/icons/DarkIcon.tsx:
--------------------------------------------------------------------------------
1 | import './style.css';
2 |
3 | export default function DarkIcon() {
4 | return (
5 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/icons/GitHubIcon.tsx:
--------------------------------------------------------------------------------
1 | export default function GitHubIcon() {
2 | return (
3 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/data/ClassTime.ts:
--------------------------------------------------------------------------------
1 | export default class ClassTime {
2 | public hours;
3 | public minutes;
4 | public index;
5 |
6 | constructor(timeStr: string, end = false) {
7 | const [hourStr, minuteStr] = timeStr.split(':');
8 |
9 | this.hours = parseInt(hourStr);
10 | this.minutes = parseInt(minuteStr);
11 | this.index =
12 | (end || this.hours < 8 ? this.hours + 12 : this.hours) * 60 +
13 | this.minutes;
14 | }
15 |
16 | valueOf() {
17 | return this.index;
18 | }
19 |
20 | toString() {
21 | return `${this.hours % 12 || 12}:${this.minutes
22 | .toString()
23 | .padStart(2, '0')}`;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/data/ScheduleSlot.ts:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 | import ClassSlot from './ClassSlot';
3 |
4 | export enum SlotType {
5 | Class = 'class',
6 | Time = 'time',
7 | Gap = 'gap',
8 | Blank = 'blank'
9 | }
10 |
11 | type ScheduleSlot = {
12 | start: number;
13 | end: number;
14 | } & (
15 | | {
16 | type: Exclude
17 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/src/data/ArrayWithSelected.ts:
--------------------------------------------------------------------------------
1 | export default class ArrayWithSelected
18 |
27 |
19 |
20 |
22 |
23 |
24 | {children}
25 |
26 | 
26 | WISP
27 | 37 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /src/data/Class.ts: -------------------------------------------------------------------------------- 1 | import ClassSlot from './ClassSlot'; 2 | import Course from './Course'; 3 | 4 | export default class Class { 5 | constructor( 6 | public course: Course, 7 | public number: string, 8 | public type: string, 9 | public sectionNumber: string, 10 | public campus: string, 11 | public enrolled: number, 12 | public capacity: number, 13 | private instructorRaw: string, 14 | public slots: ClassSlot[] = [] 15 | ) {} 16 | 17 | public get section() { 18 | return `${this.type} ${this.sectionNumber}`; 19 | } 20 | 21 | private get instructorParts() { 22 | return this.instructorRaw.split(',', 2); 23 | } 24 | 25 | public get instructorLast() { 26 | return this.instructorParts[0] || ''; 27 | } 28 | 29 | public get instructorFull() { 30 | return `${this.instructorParts[1] || ''} ${this.instructorParts[0] || ''}`; 31 | } 32 | 33 | public get instructorLink() { 34 | return `/professor/${this.instructorFull 35 | .toLowerCase() 36 | .replace(/ /g, '_') 37 | .replace(/[^a-z_]/g, '')}`; 38 | } 39 | 40 | public get enrolledString() { 41 | return `${this.enrolled}/${this.capacity}`; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/data/UWParser.ts: -------------------------------------------------------------------------------- 1 | export default abstract class UWParser { 2 | private domParser = new DOMParser(); 3 | 4 | protected async fetchTableRows( 5 | path: string, 6 | tableNumbers: number 7 | ): Promise
41 |
42 | {course.code} {courseDetails?.name ?? ''}
43 |
44 |
45 |
46 |
49 | View on UW Flow
50 |
51 |
52 | {!courseDetails && 'Loading...'}
53 | {courseDetails?.classes.length === 0 && 'No classes available.'}
54 | {!!courseDetails?.classes.length &&
55 | courseDetails.classes.map(classInfo => (
56 |
40 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/ColumnCell.css:
--------------------------------------------------------------------------------
1 | .column-slot {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | position: relative;
6 | border: 0 solid var(--border-color);
7 | border-width: 0 0 1px 0;
8 | overflow: hidden;
9 | }
10 |
11 | .mini .column-slot {
12 | height: max-content !important;
13 | }
14 |
15 | .mini .class {
16 | border-left-width: 1px;
17 | border-right-width: 1px;
18 | }
19 |
20 | .schedule:not(.mini) .class:hover {
21 | overflow: visible;
22 | }
23 |
24 | .gap {
25 | color: var(--lighter);
26 | }
27 |
28 | .mini .blank {
29 | display: none;
30 | }
31 |
32 | .cell-content {
33 | padding: 3px;
34 | width: 100%;
35 | min-height: 100%;
36 | display: flex;
37 | flex-direction: column;
38 | justify-content: center;
39 | text-align: center;
40 | }
41 |
42 | .mini .cell-content {
43 | padding: 6px 3px;
44 | }
45 |
46 | .class .cell-content {
47 | background: var(--bg-darker);
48 | }
49 |
50 | .schedule:not(.mini) .class .cell-content {
51 | position: absolute;
52 | top: 0;
53 | left: 0;
54 | transition:
55 | left 15ms linear,
56 | top 15ms linear,
57 | border-color 15ms linear,
58 | box-shadow 15ms linear;
59 | }
60 |
61 | .class-GET_STARTED .cell-content {
62 | font-size: 125%;
63 | }
64 |
65 | .class-LEC .cell-content {
66 | background: var(--bg-blue);
67 | }
68 |
69 | .class-TUT .cell-content {
70 | background: var(--bg-purple);
71 | }
72 |
73 | .class-TST .cell-content {
74 | background: var(--bg-green);
75 | }
76 |
77 | .class-LAB .cell-content {
78 | background: var(--bg-orange);
79 | }
80 |
81 | .class-SEM .cell-content {
82 | background: var(--bg-yellow);
83 | }
84 |
85 | .schedule:not(.mini) .class:hover .cell-content {
86 | top: -3px;
87 | left: -3px;
88 | box-shadow:
89 | var(--border-color) 3px 3px 0px 0px,
90 | var(--border-color) 0px 0px 0px 1px;
91 | z-index: 1;
92 | }
93 |
--------------------------------------------------------------------------------
/src/icons/LightIcon.tsx:
--------------------------------------------------------------------------------
1 | import './style.css';
2 |
3 | export default function LightIcon() {
4 | return (
5 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/src/helpers/UseClassList.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef, useState } from 'react';
2 | import Class from '../data/Class';
3 | import Session from '../data/Session';
4 | import Importer from '../data/Importer';
5 | import StoredClass from '../data/StoredClass';
6 | import LoadingStatus from '../data/LoadingStatus';
7 |
8 | export default function useClassList(
9 | source: StoredClass[],
10 | updateSource: (classes: Class[]) => void,
11 | session: Session
12 | ) {
13 | const [classes, setClasses] = useState
41 | {'classSlots' in slot
42 | ? slot.classSlots.map(classSlot => (
43 | onClassRemoved?.(classSlot.classInfo)}
48 | onCourseClicked={() =>
49 | onCourseClicked?.(classSlot.classInfo.course)
50 | }
51 | expandable={slot.classSlots.length > 1}
52 | />
53 | ))
54 | : slot.content}
55 |
56 |
39 |
55 |
62 | {loading && 1)
40 |
41 | Open your{' '}
42 |
47 | Class Schedule on Quest
48 |
49 |
50 | 2)
51 | Copy all the contents of the page
52 | 3)
53 | Paste below
54 | Importing...
}
63 | {successes !== -1 && (
64 |
65 | Imported {successes} class{successes == 1 ? '' : 'es'}.
66 |
67 | )}
68 |
35 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/ClassListItem.tsx:
--------------------------------------------------------------------------------
1 | import Class from '../data/Class';
2 | import './ClassListItem.css';
3 | import SearchResult from './SearchResult';
4 | import UWFlowLink from './UWFlowLink';
5 |
6 | const listFormatter = new Intl.ListFormat('en');
7 |
8 | export default function ClassListItem({
9 | classInfo,
10 | scheduledClasses,
11 | onSelected
12 | }: {
13 | classInfo: Class;
14 | scheduledClasses: Class[];
15 | onSelected: () => void;
16 | }) {
17 | const isAdded = scheduledClasses.some(
18 | scheduledClass => scheduledClass.number === classInfo.number
19 | );
20 | const isFull = classInfo.enrolled >= classInfo.capacity;
21 | const overlaps = scheduledClasses.filter(
22 | scheduledClass =>
23 | scheduledClass.number !== classInfo.number &&
24 | scheduledClass.slots.some(slot =>
25 | classInfo.slots.some(
26 | proposedSlot =>
27 | proposedSlot.days.some(day => slot.days.includes(day)) &&
28 | proposedSlot.endDate >= slot.startDate &&
29 | proposedSlot.startDate <= slot.endDate &&
30 | proposedSlot.end >= slot.start &&
31 | proposedSlot.start <= slot.end
32 | )
33 | )
34 | );
35 |
36 | return (
37 |
36 | onClassListAdded()}>
42 |
44 | onClassListAdded(true)}>
45 |
47 | onImporterShownChanged(!importerShown)}
49 | >
50 | {importerShown ?
52 | |
53 | onMiniModeChanged(!miniMode)}>
54 | {miniMode ?
56 |
57 |
59 |
60 |
45 |
73 |
46 | {isAdded && Added!} {isFull && Full!}{' '}
47 | {!!overlaps.length && (
48 |
49 | Overlaps with{' '}
50 | {listFormatter.format(
51 | overlaps.map(
52 | overlap => `${overlap.course.code} ${overlap.section}`
53 | )
54 | )}
55 | .
56 |
57 | )}
58 |
59 |
60 | {classInfo.section} {classInfo.number} (
61 | {classInfo.enrolledString}){' '}
62 |
63 | {classInfo.instructorLast}
64 |
65 |
66 | {classInfo.slots.map(dateTime => (
67 |
68 | {dateTime.timeStr} {dateTime.dayStr}{' '}
69 | {dateTime.dateStr} {dateTime.room}
70 |
71 | ))}
72 |
40 | {overlaps && (
41 | <>
42 | setExpanded(!expanded)}>
62 | {expanded ?
64 |
65 | )}{' '}
66 |
67 |
69 |
70 | {(!expandable || expanded) && (
71 |
72 |
83 | )}
84 |
85 | );
86 | }
87 |
--------------------------------------------------------------------------------
/src/components/ScheduleGrid.tsx:
--------------------------------------------------------------------------------
1 | import Class from '../data/Class';
2 | import './ScheduleGrid.css';
3 | import ColumnCell from './ColumnCell';
4 | import GetStarted from './GetStarted';
5 | import Course from '../data/Course';
6 | import { useMemo } from 'react';
7 | import Schedule from '../data/Schedule';
8 | import LoadingStatus from '../data/LoadingStatus';
9 |
10 | function gridOnScroll(e: React.UIEvent) {
11 | const el = e.target as HTMLDivElement;
12 |
13 | el.classList.toggle('scrolled-x', !!el.scrollLeft);
14 | el.classList.toggle('scrolled-y', !!el.scrollTop);
15 | }
16 |
17 | export default function ScheduleGrid({
18 | status,
19 | classes,
20 | onClassRemoved,
21 | onCourseClicked,
22 | isMini
23 | }: {
24 | status: LoadingStatus;
25 | classes: Class[];
26 | onClassRemoved: (classInfo: Class) => void;
27 | onCourseClicked: (course: Course) => void;
28 | isMini?: boolean;
29 | }) {
30 | const [columns, timeColumn, hasClassSlots] = useMemo(() => {
31 | const schedule = new Schedule(classes);
32 |
33 | return [
34 | schedule.prepareColumns(),
35 | schedule.prepareTimeColumn(),
36 | schedule.hasClassSlots
37 | ];
38 | }, [classes]);
39 |
40 | return (
41 |
73 | {classSlot.room}{' '}
74 |
75 | {classSlot.classInfo.instructorLast}
76 | {' '}
77 | {classSlot.classInfo.enrolledString}
78 |
79 |
80 | {classSlot.timeStr} {classSlot.dateStr}
81 |
82 |
42 | {!hasClassSlots &&
85 | );
86 | }
87 |
--------------------------------------------------------------------------------
/src/components/Main.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from 'react';
2 | import './Main.css';
3 | import ScheduleGrid from './ScheduleGrid';
4 | import CourseSearch from './CourseSearch';
5 | import Session from '../data/Session';
6 | import QuestImporter from './QuestImporter';
7 | import TopArea from './TopArea';
8 | import Course from '../data/Course';
9 | import useConfigBoolean from '../helpers/UseConfigBoolean';
10 | import useClassList from '../helpers/UseClassList';
11 | import useClassListStore from '../helpers/UseClassListStore';
12 | import ScheduleActions from './ScheduleActions';
13 |
14 | export default function Main() {
15 | const [session, setSession] = useState(Session.getCurrent());
16 |
17 | const [
18 | classLists,
19 | ensureEmptyClassList,
20 | addClassList,
21 | selectClassList,
22 | updateSelectedClassList,
23 | removeSelectedClassList
24 | ] = useClassListStore(session);
25 |
26 | const [
27 | selectedClasses,
28 | classListStatus,
29 | classImporter,
30 | addClass,
31 | removeClass
32 | ] = useClassList(classLists.selected, updateSelectedClassList, session);
33 |
34 | const [importerShown, setImporterShown] = useState(false);
35 | const [miniMode, setMiniMode] = useConfigBoolean('wisp-mini');
36 |
37 | const mainElement = useRefLoading...
45 | )}
46 | {status === LoadingStatus.Error && (
47 | Error loading classes.
48 | )}
49 |
53 |
84 |
54 |
55 | {Schedule.days.map((day, i) => (
56 |
83 | 1 ? '' : ' header-empty-col'
60 | }`}
61 | >
62 | {Schedule.dayLabels[day]}
63 |
64 | ))}
65 |
66 | {timeColumn.map(slot => (
67 |
70 | {columns.map((slots, i) => (
71 |
72 | {slots.map(slot => (
73 |
81 | ))}
82 |
82 | {
87 | setQuery(input.current?.value ?? '');
88 | onCourseChanged(null);
89 | }}
90 | />
91 | {hadError &&
119 | );
120 | }
121 |
--------------------------------------------------------------------------------
/src/data/Schedule.tsx:
--------------------------------------------------------------------------------
1 | import Class from './Class';
2 | import ScheduleSlot, { SlotType } from './ScheduleSlot';
3 |
4 | type ScheduleSlotWithKey = ScheduleSlot & { key: string };
5 |
6 | export type Day = (typeof Schedule.days)[number];
7 |
8 | export default class Schedule {
9 | static days = ['M', 'T', 'W', 'Th', 'F'] as const;
10 |
11 | static dayLabels: RecordError loading offerings.
}
92 | {hasResults && (
93 |
94 |
117 | )}
118 |
99 | {activeCourse ? (
100 | onCourseChanged(course)}
110 | >
111 | {course.code} {course.name}
112 |
113 | ))
114 | )}
115 |
116 | Your class here
,
33 | key: 'GET_STARTED_1'
34 | });
35 |
36 | this.columns[2].push({
37 | type: SlotType.Class,
38 | classType: 'GET_STARTED',
39 | start: 11 * 60,
40 | end: 12.5 * 60,
41 | content: And another
,
42 | key: 'GET_STARTED_2'
43 | });
44 |
45 | this.columns[2].push({
46 | type: SlotType.Class,
47 | classType: 'GET_STARTED',
48 | start: 13 * 60,
49 | end: 14 * 60,
50 | content: And one more here
,
51 | key: 'GET_STARTED_3'
52 | });
53 | }
54 |
55 | createColumns() {
56 | this.columns = Schedule.days.map(() => []);
57 |
58 | this.classes.forEach(classInfo => {
59 | classInfo.slots.forEach((classSlot, i) => {
60 | classSlot.days.forEach((day, j) => {
61 | this.hasClassSlots = true;
62 |
63 | this.columns[Schedule.days.indexOf(day)].push({
64 | type: SlotType.Class,
65 | start: classSlot.start.index,
66 | end: classSlot.end.index,
67 | classSlots: [classSlot],
68 | key: `${classInfo.number}/${i}/${j}`
69 | });
70 | });
71 | });
72 | });
73 |
74 | if (!this.hasClassSlots) this.addDefaultSlots();
75 | }
76 |
77 | processClassOverlap(
78 | slots: ScheduleSlotWithKey[],
79 | i: number,
80 | slot: ScheduleSlotWithKey,
81 | prevSlot: ScheduleSlotWithKey
82 | ) {
83 | if (!('classSlots' in prevSlot) || !('classSlots' in slot))
84 | throw new Error('Slots must have classSlots');
85 |
86 | const prevSlotEnd = prevSlot.end;
87 | const overlapStart = slot.start;
88 | const overlapEnd = Math.min(prevSlot.end, slot.end);
89 |
90 | prevSlot.end = overlapStart;
91 | slot.start = overlapEnd;
92 |
93 | const newSlots = [...prevSlot.classSlots, ...slot.classSlots];
94 |
95 | slots.splice(i, 0, {
96 | type: SlotType.Class,
97 | start: overlapStart,
98 | end: overlapEnd,
99 | classSlots: newSlots,
100 | key: `${prevSlot.key}+${slot.key}`
101 | });
102 |
103 | i++;
104 |
105 | if (slot.end === overlapEnd) {
106 | slots.splice(i, 1);
107 | i--;
108 | }
109 |
110 | if (prevSlotEnd > overlapEnd) {
111 | let insertIndex = i + 1;
112 |
113 | while (slots[insertIndex]?.start < overlapEnd) insertIndex++;
114 |
115 | slots.splice(insertIndex, 0, {
116 | ...prevSlot,
117 | start: overlapEnd,
118 | end: prevSlotEnd,
119 | key: `${prevSlot.key}/split`
120 | });
121 |
122 | if (insertIndex == i + 1) i++;
123 | }
124 |
125 | return i;
126 | }
127 |
128 | processSlots(slots: ScheduleSlotWithKey[]) {
129 | slots.sort((a, b) => a.start - b.start);
130 |
131 | if (slots.length && slots[0].start < this.start)
132 | this.start = slots[0].start;
133 |
134 | for (let i = 0; i < slots.length; i++) {
135 | const prevSlot = slots[i - 1] as (typeof slots)[0] | undefined;
136 | const slot = slots[i];
137 |
138 | if (slot.end > this.end) this.end = slot.end;
139 |
140 | if (!prevSlot) continue;
141 |
142 | if (prevSlot.end > slot.start) {
143 | i = this.processClassOverlap(slots, i, slot, prevSlot);
144 | continue;
145 | }
146 |
147 | slots.splice(i, 0, {
148 | type: SlotType.Gap,
149 | start: prevSlot.end,
150 | end: slot.start,
151 | content: (
152 |
153 | {Math.floor((slot.start - prevSlot.end) / 60)}:
154 | {Math.floor((slot.start - prevSlot.end) % 60)}
155 |
156 | ),
157 | key: `${prevSlot.key}+${slot.key}`
158 | });
159 |
160 | i++;
161 | }
162 | }
163 |
164 | addPaddingSlots(slots: ScheduleSlotWithKey[]) {
165 | if (!slots.length) {
166 | slots.push({
167 | type: SlotType.Blank,
168 | content: undefined,
169 | start: this.start,
170 | end: this.end,
171 | key: 'START'
172 | });
173 |
174 | return;
175 | }
176 |
177 | slots.unshift({
178 | type: SlotType.Blank,
179 | content: undefined,
180 | start: this.start,
181 | end: slots[0].start,
182 | key: 'START'
183 | });
184 |
185 | slots.push({
186 | type: SlotType.Blank,
187 | content: undefined,
188 | start: slots[slots.length - 1].end,
189 | end: this.end,
190 | key: 'END'
191 | });
192 | }
193 |
194 | prepareColumns() {
195 | this.createColumns();
196 |
197 | this.columns.forEach(this.processSlots, this);
198 | this.columns.forEach(this.addPaddingSlots, this);
199 |
200 | return this.columns;
201 | }
202 |
203 | prepareTimeColumn() {
204 | const timeColumn: ScheduleSlot[] = [];
205 |
206 | for (let i = this.start, nextI = 0; i < this.end; i = nextI) {
207 | let hour = Math.floor(i / 60);
208 | const minutes = i % 60;
209 |
210 | if (hour > 12) hour -= 12;
211 |
212 | nextI = Math.ceil((i + 1) / 60) * 60;
213 |
214 | timeColumn.push({
215 | type: SlotType.Time,
216 | start: i,
217 | end: Math.min(nextI, this.end),
218 | content: {`${hour}:${minutes.toString().padStart(2, '0')}`}
219 | });
220 | }
221 |
222 | return timeColumn;
223 | }
224 | }
225 |
--------------------------------------------------------------------------------