Made with ❤️ by{" "}
{children}
-
-
+
@@ -76,18 +62,20 @@ function Modal({ isOpen, onClose, children }: ModalProps) {
);
}
-export type ModalReturn = [() => void, JSX.Element];
+export type ModalReturn = [() => void, ReactElement];
export function useModal(
- contents: (props: ModalProps) => JSX.Element,
+ contents: (props: ModalProps) => ReactElement,
): ModalReturn {
const [isOpen, setIsOpen] = useState(false);
const onClose = () => {
setIsOpen(false);
};
return [
- () => setIsOpen(true),
-
+ () => {
+ setIsOpen(true);
+ },
+
{contents({ isOpen, onClose, children: null })}
,
];
diff --git a/src/Planner.tsx b/src/Planner.tsx
index d9c7e22..1e22179 100644
--- a/src/Planner.tsx
+++ b/src/Planner.tsx
@@ -5,12 +5,18 @@ import moment from "moment";
import Flatpickr from "react-flatpickr";
import "react-big-calendar/lib/css/react-big-calendar.css";
-import "flatpickr/dist/themes/airbnb.css";
-
-import "./css/planner.css";
+import "flatpickr/dist/themes/material_orange.css";
const localizer = momentLocalizer(moment);
const hasWeekendCourse = false;
+const WEEKDAY_INDICES: WeekdayIndex[] = [0, 1, 2, 3, 4];
+const DAY_TO_INDEX: Record = {
+ M: 0,
+ T: 1,
+ W: 2,
+ R: 3,
+ F: 4,
+};
function CourseToDates(courses: CourseStorage[]): DateData[] {
const dates: DateData[] = [];
@@ -21,6 +27,10 @@ function CourseToDates(courses: CourseStorage[]): DateData[] {
}
const section = course.courseData.sections[course.sectionId];
+ if (section === undefined) {
+ continue;
+ }
+
if (section.times === "A") {
continue;
}
@@ -34,8 +44,8 @@ function CourseToDates(courses: CourseStorage[]): DateData[] {
dates.push({
id: course.courseData.id,
title: course.courseData.number + " Section " + section.number,
- start: interval!.start,
- end: interval!.end,
+ start: interval.start,
+ end: interval.end,
courseData: course.courseData,
});
}
@@ -49,35 +59,58 @@ type TimeInterval = {
start: Date;
end: Date;
};
+type ParsedTimes = [
+ TimeInterval[],
+ TimeInterval[],
+ TimeInterval[],
+ TimeInterval[],
+ TimeInterval[],
+];
-export function parseTimes(times: string): Maybe[][] {
- const ret: Maybe[][] = [[], [], [], [], []];
- const day_to_i = ["M", "T", "W", "R", "F"]; // TODO: Include Sat/Sun Courses, OM Courses
+export function parseTimes(times: string): ParsedTimes {
+ const ret: ParsedTimes = [[], [], [], [], []];
// super hacky fix for a parsing bug when location is A
- let times_clean = times.replace("\nA", "");
- console.log(times_clean)
+ const timesClean = times.replace("\nA", "");
- for (let line of times_clean.split(/[,\n]/)) {
+ for (const line of timesClean.split(/[,\n]/)) {
const match = line.match(/([MTWRF]+) (\d\d):(\d\d) - (\d\d):(\d\d)/);
if (match !== null) {
+ const [days, startHour, startMinute, endHourRaw, endMinute] = match.slice(
+ 1,
+ );
+ if (
+ days === undefined ||
+ startHour === undefined ||
+ startMinute === undefined ||
+ endHourRaw === undefined ||
+ endMinute === undefined
+ ) {
+ continue;
+ }
+ const parsedEndHour = Number.parseInt(endHourRaw, 10);
+
// An example match: [ "MWF 14:00 - 14:55", "MWF", "14", "00", "14", "55" ]
- for (const day of match[1]) {
- ret[day_to_i.indexOf(day)].push({
+ for (const day of days) {
+ const dayIndex = DAY_TO_INDEX[day];
+ if (dayIndex === undefined) {
+ continue;
+ }
+
+ ret[dayIndex].push({
start: new Date(
2018,
0,
- day_to_i.indexOf(day) + 1,
- parseInt(match[2]),
- parseInt(match[3]),
+ dayIndex + 1,
+ Number.parseInt(startHour, 10),
+ Number.parseInt(startMinute, 10),
),
end: new Date(
2018,
0,
- day_to_i.indexOf(day) + 1,
- // stupid hacky thing to avoid crashing when time is entered incorrectly in catalog (11pm instead of 11am)
- parseInt(match[4]) === 23 ? 11 : parseInt(match[4]),
- parseInt(match[5]),
+ dayIndex + 1,
+ parsedEndHour === 23 ? 11 : parsedEndHour,
+ Number.parseInt(endMinute, 10),
),
});
}
@@ -86,6 +119,21 @@ export function parseTimes(times: string): Maybe[][] {
return ret;
}
+/** Hashes id to proper color and styling for calendar items */
+const eventStyleGetter = (event: DateData) => {
+ const hue = ((event.id * 1.4269) % 1.0) * 360;
+ const sat = (((event.id * 1.7234) % 0.2) + 0.5) * 100;
+
+ return {
+ style: {
+ backgroundColor: `hsl(${hue}, ${sat}%, 70%)`,
+ cursor: "pointer",
+ borderStyle: "none",
+ borderRadius: "4px",
+ },
+ };
+};
+
/** Calendar shown on left side of screen
* Extends from `App.tsx` */
function Planner() {
@@ -95,49 +143,41 @@ function Planner() {
state.courses.filter((course) => course.enabled),
);
- /** Hashes id to proper color and styling for calendar items */
- const eventStyleGetter = (event: DateData) => {
- const hue = ((event.id * 1.4269) % 1.0) * 360;
- const sat = (((event.id * 1.7234) % 0.2) + 0.5) * 100;
-
- return {
- style: {
- backgroundColor: `hsl(${hue}, ${sat}%, 70%)`,
- cursor: "pointer",
- borderStyle: "none",
- borderRadius: "4px",
- },
- };
- };
-
return (
-
- {[0, 1, 2, 3, 4].map((idx) => {
+
+ {WEEKDAY_INDICES.map((idx) => {
+ const [startTime, endTime] = state.availableTimes[idx];
return (
-
+
{
- state.updateAvailableTimes(idx, true, day);
+ if (day !== undefined) {
+ state.updateAvailableTimes(idx, true, day);
+ }
}}
/>
{
- state.updateAvailableTimes(idx, false, day);
+ if (day !== undefined) {
+ state.updateAvailableTimes(idx, false, day);
+ }
}}
/>
@@ -147,10 +187,10 @@ function Planner() {
+ timeGutterFormat: (date, culture, calendarLocalizer) =>
date.getMinutes() > 0
? ""
- : localizer!.format(date, "h A", culture),
+ : (calendarLocalizer?.format(date, "h A", culture) ?? ""),
dayFormat: "ddd",
}}
views={[Views.WEEK, Views.WORK_WEEK]}
diff --git a/src/Workspace.tsx b/src/Workspace.tsx
index 7a69be7..0b3bc23 100644
--- a/src/Workspace.tsx
+++ b/src/Workspace.tsx
@@ -1,8 +1,12 @@
import { useContext, useState } from "react";
import Modal, { useModal } from "./Modal";
-import Select from "react-select";
-import { SingleValue } from "react-select";
-import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import Select, { type SingleValue } from "react-select";
+import {
+ DragDropContext,
+ Droppable,
+ Draggable,
+ type DropResult,
+} from "@hello-pangea/dnd";
import { Fzf } from "fzf";
import Lock from "@mui/icons-material/Lock";
import LockOpen from "@mui/icons-material/LockOpen";
@@ -12,8 +16,6 @@ import ArrowForward from "@mui/icons-material/ArrowForward";
import { shortenCourses, lengthenCourses, AllCourses, AppState } from "./App";
import { motion } from "framer-motion";
-import "react-toggle/style.css";
-import "./css/workspace.css";
import { Collapse, IconButton, Switch } from "@mui/material";
import { UnfoldLess, UnfoldMore } from "@mui/icons-material";
import { useAutoAnimate } from "@formkit/auto-animate/react";
@@ -23,7 +25,7 @@ const DEFAULT_COURSES: { [key: string]: string[] } = {
"fa": ["Ma 1 a", "Ph 1 a", "Ch 1 a", "CS 1"],
"wi": ["Ma 1 b", "Ph 1 b", "Ch 1 b", "CS 2"],
"sp": ["Ma 1 c", "Ph 1 c", "CS 3 x"],
-}
+};
/** Fetches courses */
function getCourse(
@@ -58,7 +60,12 @@ function getCourse(
}
function exportICS(term: string, courses: CourseStorage[]): string {
- const termStartDate = new Date(( TERM_START_DATES as {[key: string] : string} )[term]);
+ const termStartDateValue = (TERM_START_DATES as Record)[term];
+ if (termStartDateValue === undefined) {
+ throw new Error(`Missing term start date for ${term}`);
+ }
+
+ const termStartDate = new Date(termStartDateValue);
// Map weekdays to indices for easy comparison
const dayMap = "MTWRFSU";
@@ -67,6 +74,9 @@ function exportICS(term: string, courses: CourseStorage[]): string {
function getFirstOccurrence(startDate: Date, dayOfWeek: string, timeString: string): Date {
const date = new Date(startDate); // Copy the term start date
const targetDay = dayMap.indexOf(dayOfWeek) + 1; // Get index for the weekday
+ if (targetDay === 0) {
+ throw new Error(`Unknown weekday ${dayOfWeek}`);
+ }
const currentDay = date.getDay();
// Move the date to the first occurrence of the target weekday
@@ -74,33 +84,45 @@ function exportICS(term: string, courses: CourseStorage[]): string {
date.setDate(date.getDate() + dayOffset); // Ensure we don't return the start date if it's the same day
// Parse time (e.g., "09:00") and set the time explicitly using local time
- const [hours, minutes] = timeString.split(':').map(Number);
+ const [hoursText, minutesText] = timeString.split(":");
+ if (hoursText === undefined || minutesText === undefined) {
+ throw new Error(`Invalid time ${timeString}`);
+ }
+ const hours = Number.parseInt(hoursText, 10);
+ const minutes = Number.parseInt(minutesText, 10);
date.setHours(hours, minutes, 0, 0); // Set hours and minutes in the local timezone
-
+
return date;
}
// Flatten the courses and parse times with start and end times, matching locations
const parsedEvents = courses
- .filter(course => course.enabled)
- .flatMap(course => {
+ .filter((course) => course.enabled)
+ .flatMap((course) => {
return course.courseData.sections
- .filter(section => section.number - 1 === course.sectionId) // Filter by selected section
- .flatMap(section => {
- const times = section.times.split('\n'); // Split multiple times on newline
- const locations = section.locations.split('\n'); // Split multiple locations on newline
+ .filter((section) => section.number - 1 === course.sectionId) // Filter by selected section
+ .flatMap((section) => {
+ const times = section.times.split("\n"); // Split multiple times on newline
+ const locations = section.locations.split("\n"); // Split multiple locations on newline
// Zip times and locations together
return times.flatMap((time, index) => {
- const location = locations[index] || 'Unknown'; // Match time with corresponding location
- const [days, startTime, , endTime] = time.split(' '); // Separate days and time range
- if (days === 'A') return []; // skip to-be-announced times
-
- return days.split('').map(day => ({
+ const location = locations[index] ?? "Unknown"; // Match time with corresponding location
+ const [days, startTime, , endTime] = time.split(" "); // Separate days and time range
+ if (
+ days === undefined ||
+ startTime === undefined ||
+ endTime === undefined ||
+ days === "A"
+ ) {
+ return []; // skip to-be-announced times
+ }
+
+ return days.split("").map((day) => ({
name: course.courseData.number, // Use course number for the title
location, // Set the matched location for this time
startTime: getFirstOccurrence(termStartDate, day, startTime),
- endTime: getFirstOccurrence(termStartDate, day, endTime) // Parse the end time
+ endTime: getFirstOccurrence(termStartDate, day, endTime), // Parse the end time
}));
});
});
@@ -115,7 +137,7 @@ METHOD:PUBLISH
`;
// Generate the events in ICS format
- parsedEvents.forEach(event => {
+ parsedEvents.forEach((event) => {
const dtStart = event.startTime.toISOString().replace(/-|:|\.\d+/g, ""); // Convert to UTC in .ics format
const dtEnd = event.endTime.toISOString().replace(/-|:|\.\d+/g, ""); // Convert to UTC in .ics format
@@ -141,40 +163,36 @@ END:VEVENT
function SectionDropdown(props: { course: CourseStorage }) {
const course = props.course;
const state = useContext(AppState);
-
- const onChange = (newSection: SingleValue>) => {
- course.sectionId =
- newSection !== null
- ? course.courseData.sections.findIndex(
- (s) => s.number === newSection.number,
- )
- : null;
+ const selectedSection =
+ course.sectionId === null
+ ? null
+ : (course.courseData.sections[course.sectionId] ?? null);
+
+ const onChange = (newSection: SingleValue) => {
+ const sectionId =
+ newSection === null
+ ? null
+ : course.courseData.sections.findIndex(
+ (section) => section.number === newSection.number,
+ );
// if course with same id already exists, section number will simply be updated
- state.addCourse(course);
+ state.addCourse({
+ ...course,
+ sectionId: sectionId === -1 ? null : sectionId,
+ });
};
return (
-
+
- c.number ===
- course.courseData.sections[course.sectionId!].number,
- )
- : null
- }
+ value={selectedSection}
onChange={onChange}
options={course.courseData.sections}
getOptionLabel={(section) => `${section.number}`}
isOptionSelected={(section) =>
- course.sectionId !== null
- ? section.number ===
- course.courseData.sections[course.sectionId].number
- : false
+ selectedSection === null ? false : section.number === selectedSection.number
}
/>
@@ -217,8 +235,6 @@ function AdvancedCourseInfo(props: { course: CourseStorage }) {
interface WorkspaceEntryProps {
course: CourseStorage;
- innerRef: any;
- provided: any;
index: number;
}
@@ -233,19 +249,17 @@ function WorkspaceEntry(props: WorkspaceEntryProps) {
const course = props.course;
const sections = course.courseData.sections;
const id = course.sectionId;
+ const selectedSection = id === null ? null : (sections[id] ?? null);
const state = useContext(AppState);
const [expanded, setExpanded] = useState(true);
const [animParent] = useAutoAnimate();
- let className = "workspace-entry";
- className += course.locked
- ? " workspace-entry-locked"
- : " workspace-entry-unlocked";
- className += course.enabled
- ? " workspace-entry-enabled"
- : " workspace-entry-disabled";
+ let className =
+ "mb-8 flex flex-col items-center rounded border border-neutral-300 p-2 transition-colors shadow-lg";
+ className += course.enabled ? " bg-white" : " bg-neutral-300";
+ className += course.locked ? " bg-neutral-100" : "";
const [infoModalOpen, setInfoModalOpen] = useState(false);
return (
@@ -284,7 +298,7 @@ function WorkspaceEntry(props: WorkspaceEntryProps) {
-
+
{
state.removeCourse(course);
}}
@@ -318,28 +331,28 @@ function WorkspaceEntry(props: WorkspaceEntryProps) {
-
-
+
+
{course.courseData.number}
{": "}
{course.courseData.name} {" "}
- {`(${course.courseData.units[0]}-${course.courseData.units[1]}-${course.courseData.units[2]})`}
+ {`(${course.courseData.units[0] ?? 0}-${course.courseData.units[1] ?? 0}-${course.courseData.units[2] ?? 0})`}
- {id !== null
- ? sections[id].instructor
- : "No Section Selected"}
+ {selectedSection?.instructor ?? "No Section Selected"}
-
{id !== null ? sections[id].locations : "Location"}
-
{id !== null ? sections[id].times : "Times"}
+
{selectedSection?.locations ?? "Location"}
+
{selectedSection?.times ?? "Times"}
-
+
setInfoModalOpen(true)}
+ className="rounded-md bg-orange-500 py-1 font-bold text-white"
+ onClick={() => {
+ setInfoModalOpen(true);
+ }}
>
More Info
@@ -350,7 +363,12 @@ function WorkspaceEntry(props: WorkspaceEntryProps) {
)}
-
setInfoModalOpen(false)}>
+ {
+ setInfoModalOpen(false);
+ }}
+ >
@@ -375,8 +393,8 @@ function WorkspaceSearch() {
const [selectedCourse, setCourse] = useState
>(null);
const handleSelect = (courseData: SingleValue) => {
- setCourse(courseData as CourseData);
- if (courseData) {
+ setCourse(courseData);
+ if (courseData !== null) {
state.addCourse({
courseData: courseData,
sectionId: null,
@@ -403,7 +421,7 @@ function WorkspaceSearch() {
placeholder="Add a course..."
options={options}
value={selectedCourse}
- getOptionLabel={(course) => `${course?.number} - ${course?.name}`}
+ getOptionLabel={(course) => `${course.number} - ${course.name}`}
onChange={handleSelect}
isOptionSelected={(course) => course.id === selectedCourse?.id}
onInputChange={sortCourses}
@@ -433,24 +451,30 @@ function WorkspaceScheduler() {
-1 === state.courses.findIndex((c) => c.enabled && !c.locked);
if (allSectionsSet) {
return (
-
+
);
} else if (total === 0) {
return (
-
+
);
} else {
return (
-
-
+
+
-
{`${displayIdx}/${total}`}
-
+ {`${displayIdx}/${total}`}
+
(
- list: Array,
+ list: readonly T[],
startIndex: number,
endIndex: number,
): Array {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
+ if (removed === undefined) {
+ return result;
+ }
result.splice(endIndex, 0, removed);
return result;
@@ -474,41 +501,43 @@ function reorder(
A fuzzy searcher will show you a limited selection of courses
Clicking on the course will add it to the workspace and enable it (there will also be a button to show more info)
From the workspace, you can enable/disable courses in addition to switching the section number */
-// TODO: import/export classes in plaintext or a human-readable format
export default function Workspace({ term }: { term: string }) {
const state = useContext(AppState);
const indexedCourses = useContext(AllCourses);
- const workspaceEntries = (provided: any) =>
+ const workspaceEntries = () =>
state.courses.map((course: CourseStorage, index: number) => (
+
Your workspace code is:
{code}
@@ -516,7 +545,7 @@ export default function Workspace({ term }: { term: string }) {
{
- const code = prompt("Copy in the workspace code.") || "";
+ const code = prompt("Copy in the workspace code.") ?? "";
if (code === "") {
return;
}
try {
- const shortened = JSON.parse(window.atob(code));
+ const shortened = JSON.parse(window.atob(code)) as unknown;
+ if (!Array.isArray(shortened)) {
+ throw new Error("Workspace code must decode to an array.");
+ }
const courses: CourseStorageShort[] = [];
for (let i = 0; i * 4 < shortened.length; i++) {
+ const courseId = shortened[i * 4];
+ const enabled = shortened[i * 4 + 1];
+ const locked = shortened[i * 4 + 2];
+ const sectionId = shortened[i * 4 + 3];
+ if (
+ typeof courseId !== "number" ||
+ typeof enabled !== "boolean" ||
+ typeof locked !== "boolean" ||
+ (typeof sectionId !== "number" && sectionId !== null)
+ ) {
+ throw new Error("Workspace code contains invalid course data.");
+ }
courses.push({
- courseId: shortened[i * 4],
- enabled: shortened[i * 4 + 1],
- locked: shortened[i * 4 + 2],
- sectionId: shortened[i * 4 + 3],
+ courseId,
+ enabled,
+ locked,
+ sectionId,
});
}
const lengthened = lengthenCourses(courses, indexedCourses);
@@ -563,9 +607,10 @@ export default function Workspace({ term }: { term: string }) {
}
};
- function onDragEnd(result: any) {
+ function onDragEnd(result: DropResult) {
if (
- !result.destination ||
+ result.destination === null ||
+ result.destination === undefined ||
result.destination.index === result.source.index
) {
return;
@@ -577,16 +622,20 @@ export default function Workspace({ term }: { term: string }) {
}
return (
-
+
{exportModal}
Choose Workspace...
-
+
{[0, 1, 2, 3, 4].map((idx) => {
return (
state.setWorkspace(idx)}
+ className={`relative bottom-[-1px] h-6 w-12 rounded-t border border-neutral-300 bg-white transition-colors hover:cursor-pointer hover:bg-neutral-200 ${
+ state.workspaceIdx === idx ? "border-b-transparent" : ""
+ }`}
+ onClick={() => {
+ state.setWorkspace(idx);
+ }}
>
{idx + 1}
@@ -595,7 +644,7 @@ export default function Workspace({ term }: { term: string }) {
-
+
{
@@ -628,41 +677,51 @@ export default function Workspace({ term }: { term: string }) {
);
}}
/>
- state.setCourses([])} />
+ {
+ state.setCourses([]);
+ }}
+ />
{
+ const defaultCourses = DEFAULT_COURSES[term.substring(0, 2)] ?? [];
state.setCourses(
// Change based on term
- DEFAULT_COURSES[term.substring(0, 2)].map((name) => ({
- ...getCourse(name, indexedCourses)!,
- enabled: true,
- locked: true,
- })),
+ defaultCourses.flatMap((name) => {
+ const course = getCourse(name, indexedCourses);
+ return course === null
+ ? []
+ : [{ ...course, enabled: true, locked: true }];
+ }),
);
}}
/>
{
- const icsContent = exportICS(term, state.courses);
+ {
+ const icsContent = exportICS(term, state.courses);
- const blob = new Blob([icsContent], { type: 'text/calendar' });
+ const blob = new Blob([icsContent], { type: "text/calendar" });
- const link = document.createElement('a');
- link.href = URL.createObjectURL(blob);
- link.download = `schedule_${term}.ics`;
+ const link = document.createElement("a");
+ link.href = URL.createObjectURL(blob);
+ link.download = `schedule_${term}.ics`;
- document.body.appendChild(link);
- link.click();
- URL.revokeObjectURL(link.href);
- document.body.removeChild(link);
- }} />
+ document.body.appendChild(link);
+ link.click();
+ URL.revokeObjectURL(link.href);
+ document.body.removeChild(link);
+ }}
+ />
{`${units[0] + units[1] + units[2]} units (${units[0]}-${units[1]}-${units[2]})`}
-
+
{state.courses.length === 0 ? (
No courses added. Add some using the search bar above!
@@ -672,7 +731,7 @@ export default function Workspace({ term }: { term: string }) {
{(provided) => (
- {workspaceEntries(provided)}
+ {workspaceEntries()}
{provided.placeholder}
)}
diff --git a/src/css/index.css b/src/css/index.css
index 40922bf..eedf51d 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,71 +1,40 @@
-@import url("./tailwind.css");
-
-body {
- /* margin: 0; */
- font-family:
- "ProximaSoft",
- -apple-system,
- BlinkMacSystemFont,
- "Segoe UI",
- "Roboto",
- "Oxygen",
- "Ubuntu",
- "Cantarell",
- "Fira Sans",
- "Droid Sans",
- "Helvetica Neue",
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- font-size: 0.9em; /* basically zooms out to 90% by default */
-}
-
-#column-container {
- display: flex;
- align-items: top;
- flex-direction: column;
-}
-
-@media (min-width: 768px) {
- #column-container {
- flex-direction: row;
+@import "tailwindcss";
+
+@layer base {
+ body {
+ @apply bg-white text-black antialiased;
+
+ font-family:
+ ProximaSoft,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ Oxygen,
+ Ubuntu,
+ Cantarell,
+ "Fira Sans",
+ "Droid Sans",
+ "Helvetica Neue",
+ sans-serif;
+ font-size: 0.9em;
}
-}
-
-.column {
- flex: 1;
-}
-.footer {
- display: flex;
- flex-direction: column;
- justify-content: center;
- row-gap: 10px;
- padding-top: 30px;
- padding-bottom: 30px;
- margin: auto;
-}
-
-.footer p {
- text-align: center;
-}
+ a {
+ @apply text-blue-600 underline;
+ }
-.sticky-help {
- position: fixed;
- z-index: 999;
- margin: 0.5rem;
+ li {
+ @apply list-none;
+ }
}
-.help-button {
- width: 2rem;
- height: 2rem;
- padding: 0;
- background-color: white;
- border: none;
- border-radius: 100px;
-}
+@layer components {
+ .rbc-allday-cell {
+ @apply hidden;
+ }
-a {
- color: blue;
- text-decoration: underline;
+ .rbc-time-view .rbc-header {
+ @apply border-b-0;
+ }
}
diff --git a/src/css/modal.css b/src/css/modal.css
deleted file mode 100644
index 35df4f3..0000000
--- a/src/css/modal.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.modal {
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: #fff;
- padding: 15px;
- z-index: 1000;
- display: flex;
- flex-direction: column;
- max-width: 40vw;
- min-width: 400px;
-}
-
-.modal-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.7);
- z-index: 1000;
-}
-
-.modal > button {
- background-color: white;
- border: 1px solid lightgrey;
- border-radius: 4px;
-}
-
-.modal > button:hover {
- cursor: pointer;
- background-color: lightgrey;
-}
diff --git a/src/css/planner.css b/src/css/planner.css
deleted file mode 100644
index b82d5bb..0000000
--- a/src/css/planner.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.rbc-allday-cell {
- display: none;
-}
-
-.rbc-time-view .rbc-header {
- border-bottom: none;
-}
-
-.time-picker {
- display: flex;
- flex-direction: column;
- row-gap: 8px;
- max-width: 4rem;
-}
-
-.time-picker > input {
- text-align: center;
-}
-
-.flatpickr-input {
- border: 1px solid lightgrey;
- border-radius: 4px;
-}
-
-.time-controls {
- display: flex;
- flex-direction: row;
- justify-content: space-around;
- margin-left: 65px;
- margin-right: 20px;
- padding-top: 5px;
- padding-bottom: 5px;
-}
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
deleted file mode 100644
index b5c61c9..0000000
--- a/src/css/tailwind.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/src/css/workspace.css b/src/css/workspace.css
deleted file mode 100644
index a386562..0000000
--- a/src/css/workspace.css
+++ /dev/null
@@ -1,188 +0,0 @@
-.workspace-wrapper {
- padding-left: 10px;
- display: flex;
- flex-direction: column;
- margin-bottom: 10px;
-}
-
-.workspace-switcher {
- display: flex;
- flex-direction: row;
- gap: 0.8rem;
- border-bottom: 1px solid lightgrey;
-}
-
-.workspace-switcher > button {
- width: 3rem;
- height: 1.5rem;
- border: 1px solid lightgrey;
- border-top-right-radius: 4px;
- border-top-left-radius: 4px;
- transition: background-color 0.1s ease;
- background-color: white;
- position: relative;
- bottom: -1px;
-}
-
-.workspace-switcher > button:hover {
- background-color: lightgrey;
-}
-
-.workspace-switcher > button.enabled {
- border-bottom: transparent;
-}
-
-.workspace-switcher > button:hover {
- cursor: pointer;
-}
-
-.workspace-scheduler {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- margin-top: 8px;
-}
-
-.workspace-scheduler-content {
- width: 74px;
- text-align: center;
-}
-
-.workspace-scheduler > .small-button {
- width: 2em;
- height: 2em;
- background-color: white;
- border: 1px solid lightgrey;
- border-radius: 4px;
-}
-
-.workspace-scheduler > .small-button:hover {
- cursor: pointer;
- background-color: lightgrey;
-}
-
-.workspace-controls {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: space-evenly;
- gap: 10px;
- margin-bottom: 0.8em;
-}
-
-li {
- list-style-type: none;
-}
-
-.workspace-entries {
- display: flex;
- flex-direction: column;
- padding-top: 12px;
- overflow-y: unset;
- max-height: auto;
-}
-
-@media (min-width: 768px) {
- .workspace-wrapper {
- width: 40vw;
- }
-}
-
-.workspace-entry {
- display: flex;
- flex-direction: column;
- align-items: center;
- border: 1px solid lightgrey;
- border-radius: 4px;
- margin-bottom: 2em;
- @apply p-2;
-}
-
-.workspace-entry-enabled {
- transition: background-color 0.2s ease;
- background-color: rgb(255, 255, 255);
-}
-
-.workspace-entry-locked {
- transition: background-color 0.2s ease;
- background-color: rgb(241, 241, 241);
- /* background-color: rgb(238, 238, 110); */
-}
-
-.workspace-entry-disabled {
- transition: background-color 0.2s ease;
- background-color: rgb(200, 200, 200);
-}
-
-.workspace-entry-buttons {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- /* position: relative; */
- /* top: -12px; */
-}
-
-.workspace-entry-toggle .react-toggle-track {
- border-radius: 20px;
-}
-
-.workspace-entry-toggle .react-toggle-thumb {
- border-radius: 100%;
-}
-
-.workspace-entry-content {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- column-gap: 1.5em;
- align-items: center;
- width: 100%;
- @apply p-2 pt-0;
-}
-
-.workspace-entry-info > p {
- margin: 2.5px;
-}
-
-.workspace-entry-info {
- display: flex;
- flex-direction: column;
-}
-
-.workspace-entry-controls {
- display: flex;
- flex-wrap: wrap;
- flex-direction: column;
- row-gap: 10px;
- min-width: 7.5rem;
-}
-
-.export-modal {
- display: flex;
- flex-direction: column;
- margin-top: 1rem;
- margin-bottom: 1rem;
-}
-
-.export-modal > button {
- margin: auto;
- background-color: white;
- border: 1px solid lightgrey;
- border-radius: 4px;
-}
-
-.export-modal > button:hover {
- cursor: pointer;
- background-color: lightgrey;
-}
-
-.export-modal > p {
- text-align: center;
- margin-top: 0;
- margin-bottom: 1.2em;
- margin-left: auto;
- margin-right: auto;
- max-width: 75%;
-}
diff --git a/src/index.tsx b/src/index.tsx
index 1c6616d..e920f61 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,11 +1,19 @@
+import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./css/index.css";
-const root = ReactDOM.createRoot(
- document.getElementById("root") as HTMLElement,
-);
+const rootElement = document.querySelector("#root");
+
+if (rootElement === null) {
+ throw new Error("Root element not found");
+}
-// Remove StrictMode for react-beautiful-dnd
-root.render(
+ ,
+);
diff --git a/src/react-app-env.d.ts b/src/types.d.ts
similarity index 82%
rename from src/react-app-env.d.ts
rename to src/types.d.ts
index 0e44606..ba60fed 100644
--- a/src/react-app-env.d.ts
+++ b/src/types.d.ts
@@ -1,4 +1,13 @@
type Maybe = T | null;
+type WeekdayIndex = 0 | 1 | 2 | 3 | 4;
+type DayAvailability = [Date, Date];
+type AvailableTimes = [
+ DayAvailability,
+ DayAvailability,
+ DayAvailability,
+ DayAvailability,
+ DayAvailability,
+];
interface CourseStorage {
courseData: CourseData;
@@ -44,9 +53,6 @@ interface CourseStorageShort {
locked: boolean;
}
-type AvailableTimes = Date[][];
-
-// the overall state of a single workspace
interface Workspace {
courses: CourseStorage[];
arrangements: CourseStorageShort[][];
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..39fc679
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,3 @@
+///