Merge branch 'hackathon' into abhinavchadaga/course-catalog-popup
This commit is contained in:
Abhinav Chadaga
@@ -73,6 +73,7 @@
|
||||
"ignoreReadBeforeAssign": false
|
||||
}
|
||||
],
|
||||
"no-plusplus": "off",
|
||||
"no-inner-declarations": "off",
|
||||
"sort-imports": "off",
|
||||
"no-case-declarations": "off",
|
||||
|
||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@@ -1,5 +1,8 @@
|
||||
{
|
||||
"editor.formatOnSave": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit"
|
||||
},
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"[javascript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
|
||||
16
README.md
16
README.md
@@ -14,5 +14,17 @@
|
||||
|
||||
1. Clone this repo
|
||||
2. Run `pnpm install` to install and patch all the required dependencies
|
||||
3. Run `pnpm run dev` to start the development server
|
||||
4. Run `pnpm build` to build the extension for production
|
||||
|
||||
- If you want to run the development build:
|
||||
|
||||
- Run `pnpm run dev`
|
||||
|
||||
- If you want to build the extension for production:
|
||||
|
||||
- Run `pnpm build`
|
||||
|
||||
You may have to rename the `__uno.css.js` to `uno.css.js` in dist
|
||||
|
||||
Go to chrome://extensions, ensure you have "Developer Mode" enabled, and click 'Load unpacked'
|
||||
|
||||
Navigate to the 'dist' folder and click 'select' to import the extension
|
||||
|
||||
3267
package-lock.json
generated
3267
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -17,6 +17,8 @@
|
||||
"build-storybook": "storybook build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.7.18",
|
||||
"@headlessui/tailwindcss": "^0.2.0",
|
||||
"@hello-pangea/dnd": "^16.5.0",
|
||||
"@types/sql.js": "^1.4.9",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
@@ -24,12 +26,15 @@
|
||||
"clsx": "^2.1.0",
|
||||
"highcharts": "^11.3.0",
|
||||
"highcharts-react-official": "^3.2.1",
|
||||
"html-to-image": "^1.11.11",
|
||||
"react": "^18.2.0",
|
||||
"react-devtools-core": "^5.0.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-window": "^1.8.10",
|
||||
"sass": "^1.70.0",
|
||||
"sql.js": "1.10.2",
|
||||
"styled-components": "^6.1.8",
|
||||
"uuid": "^9.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
677
pnpm-lock.yaml
generated
677
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
8
src/assets/icons/cal.svg
Normal file
8
src/assets/icons/cal.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_3175_7842" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
|
||||
<rect y="0.5" width="24" height="24" fill="#D9D9D9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_3175_7842)">
|
||||
<path d="M12 14.5C11.7167 14.5 11.4792 14.4042 11.2875 14.2125C11.0958 14.0208 11 13.7833 11 13.5C11 13.2167 11.0958 12.9792 11.2875 12.7875C11.4792 12.5958 11.7167 12.5 12 12.5C12.2833 12.5 12.5208 12.5958 12.7125 12.7875C12.9042 12.9792 13 13.2167 13 13.5C13 13.7833 12.9042 14.0208 12.7125 14.2125C12.5208 14.4042 12.2833 14.5 12 14.5ZM8 14.5C7.71667 14.5 7.47917 14.4042 7.2875 14.2125C7.09583 14.0208 7 13.7833 7 13.5C7 13.2167 7.09583 12.9792 7.2875 12.7875C7.47917 12.5958 7.71667 12.5 8 12.5C8.28333 12.5 8.52083 12.5958 8.7125 12.7875C8.90417 12.9792 9 13.2167 9 13.5C9 13.7833 8.90417 14.0208 8.7125 14.2125C8.52083 14.4042 8.28333 14.5 8 14.5ZM16 14.5C15.7167 14.5 15.4792 14.4042 15.2875 14.2125C15.0958 14.0208 15 13.7833 15 13.5C15 13.2167 15.0958 12.9792 15.2875 12.7875C15.4792 12.5958 15.7167 12.5 16 12.5C16.2833 12.5 16.5208 12.5958 16.7125 12.7875C16.9042 12.9792 17 13.2167 17 13.5C17 13.7833 16.9042 14.0208 16.7125 14.2125C16.5208 14.4042 16.2833 14.5 16 14.5ZM12 18.5C11.7167 18.5 11.4792 18.4042 11.2875 18.2125C11.0958 18.0208 11 17.7833 11 17.5C11 17.2167 11.0958 16.9792 11.2875 16.7875C11.4792 16.5958 11.7167 16.5 12 16.5C12.2833 16.5 12.5208 16.5958 12.7125 16.7875C12.9042 16.9792 13 17.2167 13 17.5C13 17.7833 12.9042 18.0208 12.7125 18.2125C12.5208 18.4042 12.2833 18.5 12 18.5ZM8 18.5C7.71667 18.5 7.47917 18.4042 7.2875 18.2125C7.09583 18.0208 7 17.7833 7 17.5C7 17.2167 7.09583 16.9792 7.2875 16.7875C7.47917 16.5958 7.71667 16.5 8 16.5C8.28333 16.5 8.52083 16.5958 8.7125 16.7875C8.90417 16.9792 9 17.2167 9 17.5C9 17.7833 8.90417 18.0208 8.7125 18.2125C8.52083 18.4042 8.28333 18.5 8 18.5ZM16 18.5C15.7167 18.5 15.4792 18.4042 15.2875 18.2125C15.0958 18.0208 15 17.7833 15 17.5C15 17.2167 15.0958 16.9792 15.2875 16.7875C15.4792 16.5958 15.7167 16.5 16 16.5C16.2833 16.5 16.5208 16.5958 16.7125 16.7875C16.9042 16.9792 17 17.2167 17 17.5C17 17.7833 16.9042 18.0208 16.7125 18.2125C16.5208 18.4042 16.2833 18.5 16 18.5ZM5 22.5C4.45 22.5 3.97917 22.3042 3.5875 21.9125C3.19583 21.5208 3 21.05 3 20.5V6.5C3 5.95 3.19583 5.47917 3.5875 5.0875C3.97917 4.69583 4.45 4.5 5 4.5H6V2.5H8V4.5H16V2.5H18V4.5H19C19.55 4.5 20.0208 4.69583 20.4125 5.0875C20.8042 5.47917 21 5.95 21 6.5V20.5C21 21.05 20.8042 21.5208 20.4125 21.9125C20.0208 22.3042 19.55 22.5 19 22.5H5ZM5 20.5H19V10.5H5V20.5Z" fill="#333F48"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
8
src/assets/icons/png.svg
Normal file
8
src/assets/icons/png.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_3211_5369" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
|
||||
<rect y="0.5" width="24" height="24" fill="#D9D9D9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_3211_5369)">
|
||||
<path d="M5 21.5C4.45 21.5 3.97917 21.3042 3.5875 20.9125C3.19583 20.5208 3 20.05 3 19.5V5.5C3 4.95 3.19583 4.47917 3.5875 4.0875C3.97917 3.69583 4.45 3.5 5 3.5H19C19.55 3.5 20.0208 3.69583 20.4125 4.0875C20.8042 4.47917 21 4.95 21 5.5V19.5C21 20.05 20.8042 20.5208 20.4125 20.9125C20.0208 21.3042 19.55 21.5 19 21.5H5ZM6 17.5H18L14.25 12.5L11.25 16.5L9 13.5L6 17.5Z" fill="#333F48"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 702 B |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -14,6 +14,7 @@ export default async function createSchedule(scheduleName: string): Promise<stri
|
||||
schedules.push({
|
||||
name: scheduleName,
|
||||
courses: [],
|
||||
hours: 0
|
||||
});
|
||||
|
||||
await UserScheduleStore.set('schedules', schedules);
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
import React from 'react';
|
||||
import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
|
||||
|
||||
/**
|
||||
* Calendar page
|
||||
* @returns entire page
|
||||
*/
|
||||
export default function CalendarMain() {
|
||||
return (
|
||||
<ExtensionRoot>
|
||||
|
||||
@@ -14,6 +14,7 @@ export const UserScheduleStore = createLocalStore<IUserScheduleStore>({
|
||||
new UserSchedule({
|
||||
courses: [],
|
||||
name: 'Schedule 1',
|
||||
hours: 0,
|
||||
}),
|
||||
],
|
||||
activeIndex: 0,
|
||||
|
||||
@@ -2,6 +2,7 @@ import { Serialized } from 'chrome-extension-toolkit';
|
||||
|
||||
/**
|
||||
* a map of the days of the week that a class is taught, and the corresponding abbreviation
|
||||
* Don't modify the keys
|
||||
*/
|
||||
export const DAY_MAP = {
|
||||
M: 'Monday',
|
||||
@@ -14,7 +15,7 @@ export const DAY_MAP = {
|
||||
} as const;
|
||||
|
||||
/** A day of the week that a class is taught */
|
||||
export type Day = typeof DAY_MAP[keyof typeof DAY_MAP];
|
||||
export type Day = (typeof DAY_MAP)[keyof typeof DAY_MAP];
|
||||
|
||||
/** A physical room that a class is taught in */
|
||||
export type Location = {
|
||||
|
||||
@@ -7,10 +7,15 @@ import { Course } from './Course';
|
||||
export class UserSchedule {
|
||||
courses: Course[];
|
||||
name: string;
|
||||
hours: number;
|
||||
|
||||
constructor(schedule: Serialized<UserSchedule>) {
|
||||
this.courses = schedule.courses.map(c => new Course(c));
|
||||
this.name = schedule.name;
|
||||
this.hours = 0;
|
||||
for (const course of this.courses) {
|
||||
this.hours += course.creditHours;
|
||||
}
|
||||
}
|
||||
|
||||
containsCourse(course: Course): boolean {
|
||||
|
||||
@@ -42,9 +42,9 @@ export function pickFontColor(bgColor: string): 'text-white' | 'text-black' {
|
||||
* Get primary and secondary colors from a tailwind colorway
|
||||
* @param colorway the tailwind colorway ex. "emerald"
|
||||
*/
|
||||
export function getCourseColors(colorway: keyof typeof theme.colors): CourseColors {
|
||||
export function getCourseColors(colorway: keyof typeof theme.colors, index = 600, offset = 200): CourseColors {
|
||||
return {
|
||||
primaryColor: theme.colors[colorway][600] as string,
|
||||
secondaryColor: theme.colors[colorway][800] as string,
|
||||
primaryColor: theme.colors[colorway][index] as string,
|
||||
secondaryColor: theme.colors[colorway][index + offset] as string,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { Button } from 'src/views/components/common/Button/Button';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { colorsFlattened } from 'src/shared/util/themeColors';
|
||||
import ImagePlaceholderIcon from '~icons/material-symbols/image';
|
||||
import { Button } from 'src/views/components/common/Button/Button';
|
||||
import AddIcon from '~icons/material-symbols/add';
|
||||
import RemoveIcon from '~icons/material-symbols/remove';
|
||||
import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
|
||||
import ReviewsIcon from '~icons/material-symbols/reviews';
|
||||
import HappyFaceIcon from '~icons/material-symbols/mood';
|
||||
import DescriptionIcon from '~icons/material-symbols/description';
|
||||
import ImagePlaceholderIcon from '~icons/material-symbols/image';
|
||||
import HappyFaceIcon from '~icons/material-symbols/mood';
|
||||
import RemoveIcon from '~icons/material-symbols/remove';
|
||||
import ReviewsIcon from '~icons/material-symbols/reviews';
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
||||
const meta = {
|
||||
@@ -128,7 +128,7 @@ export const CourseCatalogActionButtons: Story = {
|
||||
},
|
||||
render: props => (
|
||||
<div style={{ display: 'flex', gap: '15px' }}>
|
||||
<Button {...props} variant='filled' color='ut-burnt-orange' icon={CalendarMonthIcon} />
|
||||
<Button {...props} variant='filled' color='ut-burntorange' icon={CalendarMonthIcon} />
|
||||
<Button {...props} variant='outline' color='ut-blue' icon={ReviewsIcon}>
|
||||
RateMyProf
|
||||
</Button>
|
||||
|
||||
101
src/stories/components/CalendarBottomBar.stories.tsx
Normal file
101
src/stories/components/CalendarBottomBar.stories.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import React from 'react';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { Course, Status } from '@shared/types/Course';
|
||||
import Instructor from '@shared/types/Instructor';
|
||||
import { CalendarBottomBar } from '@views/components/common/CalendarBottomBar/CalendarBottomBar';
|
||||
import { getCourseColors } from '../../shared/util/colors';
|
||||
|
||||
const exampleGovCourse: Course = new Course({
|
||||
courseName: 'Nope',
|
||||
creditHours: 3,
|
||||
department: 'GOV',
|
||||
description: ['nah', 'aint typing this', 'corndog'],
|
||||
flags: ['no flag for you >:)'],
|
||||
fullName: 'GOV 312L Something something',
|
||||
instructionMode: 'Online',
|
||||
instructors: [
|
||||
new Instructor({
|
||||
firstName: 'Bevo',
|
||||
lastName: 'Barrymore',
|
||||
fullName: 'Bevo Barrymore',
|
||||
}),
|
||||
],
|
||||
isReserved: false,
|
||||
number: '312L',
|
||||
schedule: {
|
||||
meetings: [],
|
||||
},
|
||||
semester: {
|
||||
code: '12345',
|
||||
season: 'Spring',
|
||||
year: 2024,
|
||||
},
|
||||
status: Status.OPEN,
|
||||
uniqueId: 12345,
|
||||
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
|
||||
});
|
||||
|
||||
const examplePsyCourse: Course = new Course({
|
||||
courseName: 'Nope Again',
|
||||
creditHours: 3,
|
||||
department: 'PSY',
|
||||
description: ['nah', 'aint typing this', 'corndog'],
|
||||
flags: ['no flag for you >:)'],
|
||||
fullName: 'PSY 317L Yada yada',
|
||||
instructionMode: 'Online',
|
||||
instructors: [
|
||||
new Instructor({
|
||||
firstName: 'Bevo',
|
||||
lastName: 'Etz',
|
||||
fullName: 'Bevo Etz',
|
||||
}),
|
||||
],
|
||||
isReserved: false,
|
||||
number: '317L',
|
||||
schedule: {
|
||||
meetings: [],
|
||||
},
|
||||
semester: {
|
||||
code: '12346',
|
||||
season: 'Spring',
|
||||
year: 2024,
|
||||
},
|
||||
status: Status.CLOSED,
|
||||
uniqueId: 12346,
|
||||
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
|
||||
});
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Common/CalendarBottomBar',
|
||||
component: CalendarBottomBar,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {},
|
||||
} satisfies Meta<typeof CalendarBottomBar>;
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
courses: [
|
||||
{
|
||||
colors: getCourseColors('pink', 200),
|
||||
courseDeptAndInstr: `${exampleGovCourse.department} ${exampleGovCourse.number} – ${exampleGovCourse.instructors[0].lastName}`,
|
||||
status: exampleGovCourse.status,
|
||||
},
|
||||
{
|
||||
colors: getCourseColors('slate', 500),
|
||||
courseDeptAndInstr: `${examplePsyCourse.department} ${examplePsyCourse.number} – ${examplePsyCourse.instructors[0].lastName}`,
|
||||
status: examplePsyCourse.status,
|
||||
},
|
||||
],
|
||||
},
|
||||
render: props => (
|
||||
<div className='outline-red outline w-292.5!'>
|
||||
<CalendarBottomBar {...props} />
|
||||
</div>
|
||||
),
|
||||
};
|
||||
@@ -1,10 +1,9 @@
|
||||
import { Course, Status } from '@shared/types/Course';
|
||||
import { getCourseColors } from '@shared/util/colors';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import CalendarCourseCell from '@views/components/common/CalendarCourseCell/CalendarCourseCell';
|
||||
import React from 'react';
|
||||
import { Course, Status } from 'src/shared/types/Course';
|
||||
import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
|
||||
import { CourseSchedule } from 'src/shared/types/CourseSchedule';
|
||||
import Instructor from 'src/shared/types/Instructor';
|
||||
import CalendarCourseCell from 'src/views/components/common/CalendarCourseCell/CalendarCourseCell';
|
||||
import { exampleCourse } from './PopupCourseBlock.stories';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Common/CalendarCourseCell',
|
||||
@@ -14,54 +13,102 @@ const meta = {
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
course: { control: 'object' },
|
||||
meetingIdx: { control: 'number' },
|
||||
color: { control: 'color' },
|
||||
courseDeptAndInstr: { control: { type: 'text' } },
|
||||
className: { control: { type: 'text' } },
|
||||
status: { control: { type: 'select', options: Object.values(Status) } },
|
||||
timeAndLocation: { control: { type: 'text' } },
|
||||
colors: { control: { type: 'object' } },
|
||||
},
|
||||
render: (args: any) => (
|
||||
<div className="w-45">
|
||||
<div className='w-45'>
|
||||
<CalendarCourseCell {...args} />
|
||||
</div>
|
||||
),
|
||||
args: {
|
||||
courseDeptAndInstr: exampleCourse.department,
|
||||
className: exampleCourse.number,
|
||||
status: exampleCourse.status,
|
||||
timeAndLocation: exampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
|
||||
|
||||
colors: getCourseColors('emerald', 500),
|
||||
},
|
||||
} satisfies Meta<typeof CalendarCourseCell>;
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
course: new Course({
|
||||
uniqueId: 123,
|
||||
number: '311C',
|
||||
fullName: "311C - Bevo's Default Course",
|
||||
courseName: "Bevo's Default Course",
|
||||
department: 'BVO',
|
||||
creditHours: 3,
|
||||
status: Status.WAITLISTED,
|
||||
instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
|
||||
isReserved: false,
|
||||
url: '',
|
||||
flags: [],
|
||||
schedule: new CourseSchedule({
|
||||
meetings: [
|
||||
new CourseMeeting({
|
||||
days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
|
||||
startTime: 480,
|
||||
endTime: 570,
|
||||
location: {
|
||||
building: 'UTC',
|
||||
room: '123',
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
instructionMode: 'In Person',
|
||||
semester: {
|
||||
year: 2024,
|
||||
season: 'Spring',
|
||||
},
|
||||
}),
|
||||
meetingIdx: 0,
|
||||
color: 'red',
|
||||
},
|
||||
export const Default: Story = {};
|
||||
|
||||
export const Variants: Story = {
|
||||
render: props => (
|
||||
<div className='grid grid-cols-2 h-40 max-w-60 w-90vw gap-x-4 gap-y-2'>
|
||||
<CalendarCourseCell
|
||||
{...props}
|
||||
// course={new Course({ ...exampleCourse, status: Status.OPEN })}
|
||||
// Course = new Course({
|
||||
// courseName: 'PRINCIPLES OF COMPUTER SYSTEMS',
|
||||
// creditHours: 3,
|
||||
// department: 'C S',
|
||||
// description: [
|
||||
// 'Restricted to computer science majors.',
|
||||
// 'An introduction to computer systems software abstractions with an emphasis on the connection of these abstractions to underlying computer hardware. Key abstractions include threads, virtual memory, protection, and I/O. Requires writing of synchronized multithreaded programs and pieces of an operating system.',
|
||||
// 'Computer Science 439 and 439H may not both be counted.',
|
||||
// 'Prerequisite: Computer Science 429, or 429H with a grade of at least C-.',
|
||||
// 'May be counted toward the Independent Inquiry flag requirement.',
|
||||
// ],
|
||||
// flags: ['Independent Inquiry'],
|
||||
// fullName: 'C S 439 PRINCIPLES OF COMPUTER SYSTEMS',
|
||||
// instructionMode: 'In Person',
|
||||
// instructors: [
|
||||
// new Instructor({
|
||||
// firstName: 'Allison',
|
||||
// lastName: 'Norman',
|
||||
// fullName: 'Allison Norman',
|
||||
// }),
|
||||
// ],
|
||||
// isReserved: false,
|
||||
// number: '439',
|
||||
// schedule: {
|
||||
// meetings: [
|
||||
// new CourseMeeting({
|
||||
// days: ['Tuesday', 'Thursday'],
|
||||
// startTime: 930,
|
||||
// endTime: 1050,
|
||||
// }),
|
||||
// new CourseMeeting({
|
||||
// days: ['Friday'],
|
||||
// startTime: 600,
|
||||
// endTime: 720,
|
||||
// }),
|
||||
// ],
|
||||
// },
|
||||
// semester: {
|
||||
// code: '12345',
|
||||
// season: 'Spring',
|
||||
// year: 2024,
|
||||
// },
|
||||
// status: Status.WAITLISTED,
|
||||
// uniqueId: 67890,
|
||||
// url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
|
||||
// });
|
||||
|
||||
colors={getCourseColors('green', 500)}
|
||||
/>
|
||||
<CalendarCourseCell
|
||||
{...props}
|
||||
// course={new Course({ ...exampleCourse, status: Status.CLOSED })}
|
||||
colors={getCourseColors('teal', 400)}
|
||||
/>
|
||||
<CalendarCourseCell
|
||||
{...props}
|
||||
// course={new Course({ ...exampleCourse, status: Status.WAITLISTED })}
|
||||
colors={getCourseColors('indigo', 400)}
|
||||
/>
|
||||
<CalendarCourseCell
|
||||
{...props}
|
||||
// course={new Course({ ...exampleCourse, status: Status.CANCELLED })}
|
||||
colors={getCourseColors('red', 500)}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
@@ -1,19 +1,57 @@
|
||||
// Calendar.stories.tsx
|
||||
import React from 'react';
|
||||
import Calendar from '@views/components/common/CalendarGrid/CalendarGrid';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import CalendarGrid from 'src/views/components/common/CalendarGrid/CalendarGrid';
|
||||
import { getCourseColors } from 'src/shared/util/colors';
|
||||
import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
|
||||
import { Status } from 'src/shared/types/Course';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Common/Calendar',
|
||||
component: Calendar,
|
||||
title: 'Components/Common/CalendarGrid',
|
||||
component: CalendarGrid,
|
||||
parameters: {
|
||||
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
}
|
||||
} satisfies Meta<typeof Calendar>;
|
||||
|
||||
argTypes: {
|
||||
saturdayClass: { control: 'boolean' },
|
||||
},
|
||||
} satisfies Meta<typeof CalendarGrid>;
|
||||
export default meta;
|
||||
|
||||
const testData: CalendarGridCourse[] = [
|
||||
{
|
||||
calendarGridPoint: {
|
||||
dayIndex: 0,
|
||||
startIndex: 1,
|
||||
endIndex: 2,
|
||||
},
|
||||
componentProps: {
|
||||
courseDeptAndInstr: 'Course 1',
|
||||
timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
|
||||
status: Status.OPEN,
|
||||
colors: getCourseColors('emerald', 500),
|
||||
},
|
||||
},
|
||||
{
|
||||
calendarGridPoint: {
|
||||
dayIndex: 1,
|
||||
startIndex: 2,
|
||||
endIndex: 3,
|
||||
},
|
||||
componentProps: {
|
||||
courseDeptAndInstr: 'Course 2',
|
||||
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
|
||||
status: Status.CLOSED,
|
||||
colors: getCourseColors('emerald', 500),
|
||||
},
|
||||
},
|
||||
// add more data as needed
|
||||
];
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {};
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
saturdayClass: true,
|
||||
courseCells: testData,
|
||||
},
|
||||
};
|
||||
19
src/stories/components/CalendarGridCell.stories.tsx
Normal file
19
src/stories/components/CalendarGridCell.stories.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
// Calendar.stories.tsx
|
||||
import React from 'react';
|
||||
import CalendarCell from '@views/components/common/CalendarGridCell/CalendarGridCell';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Common/CalendarGridCell',
|
||||
component: CalendarCell,
|
||||
parameters: {
|
||||
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
||||
layout: 'centered',
|
||||
tags: ['autodocs'],
|
||||
}
|
||||
} satisfies Meta<typeof CalendarCell>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {};
|
||||
17
src/stories/components/CalendarHeader.stories.tsx
Normal file
17
src/stories/components/CalendarHeader.stories.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import CalendarHeader from '@views/components/common/CalendarHeader/CalenderHeader';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Common/CalendarHeader',
|
||||
component: CalendarHeader,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof CalendarHeader>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {};
|
||||
146
src/stories/components/CalendarSchedules.stories.tsx
Normal file
146
src/stories/components/CalendarSchedules.stories.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import { Course, Status } from '@shared/types/Course';
|
||||
import { UserSchedule } from '@shared/types/UserSchedule';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
|
||||
import { CourseSchedule } from 'src/shared/types/CourseSchedule';
|
||||
import Instructor from 'src/shared/types/Instructor';
|
||||
import { CalendarSchedules } from 'src/views/components/common/CalendarSchedules/CalendarSchedules';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Common/CalendarSchedules',
|
||||
component: CalendarSchedules,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
tags: ['autodocs'],
|
||||
},
|
||||
argTypes: {
|
||||
dummySchedules: { control: 'object' },
|
||||
dummyActiveIndex: { control: 'number' },
|
||||
|
||||
},
|
||||
render: (args: any) => (
|
||||
<div>
|
||||
<CalendarSchedules {...args} />
|
||||
</div>
|
||||
),
|
||||
} satisfies Meta<typeof CalendarSchedules>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const schedules = [
|
||||
new UserSchedule({
|
||||
courses: [
|
||||
new Course({
|
||||
uniqueId: 123,
|
||||
number: '311C',
|
||||
fullName: "311C - Bevo's Default Course",
|
||||
courseName: "Bevo's Default Course",
|
||||
department: 'BVO',
|
||||
creditHours: 3,
|
||||
status: Status.WAITLISTED,
|
||||
instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
|
||||
isReserved: false,
|
||||
url: '',
|
||||
flags: [],
|
||||
schedule: new CourseSchedule({
|
||||
meetings: [
|
||||
new CourseMeeting({
|
||||
days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
|
||||
startTime: 480,
|
||||
endTime: 570,
|
||||
location: {
|
||||
building: 'UTC',
|
||||
room: '123',
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
instructionMode: 'In Person',
|
||||
semester: {
|
||||
year: 2024,
|
||||
season: 'Fall',
|
||||
},
|
||||
}),
|
||||
],
|
||||
name: 'Main Schedule',
|
||||
hours: 0, // Add the missing 'hours' property
|
||||
}),
|
||||
new UserSchedule({
|
||||
courses: [
|
||||
new Course({
|
||||
uniqueId: 123,
|
||||
number: '311C',
|
||||
fullName: "311C - Bevo's Default Course",
|
||||
courseName: "Bevo's Default Course",
|
||||
department: 'BVO',
|
||||
creditHours: 3,
|
||||
status: Status.WAITLISTED,
|
||||
instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
|
||||
isReserved: false,
|
||||
url: '',
|
||||
flags: [],
|
||||
schedule: new CourseSchedule({
|
||||
meetings: [
|
||||
new CourseMeeting({
|
||||
days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
|
||||
startTime: 480,
|
||||
endTime: 570,
|
||||
location: {
|
||||
building: 'UTC',
|
||||
room: '123',
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
instructionMode: 'In Person',
|
||||
semester: {
|
||||
year: 2024,
|
||||
season: 'Spring',
|
||||
},
|
||||
}),
|
||||
new Course({
|
||||
uniqueId: 123,
|
||||
number: '311C',
|
||||
fullName: "311C - Bevo's Default Course",
|
||||
courseName: "Bevo's Default Course",
|
||||
department: 'BVO',
|
||||
creditHours: 3,
|
||||
status: Status.WAITLISTED,
|
||||
instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
|
||||
isReserved: false,
|
||||
url: '',
|
||||
flags: [],
|
||||
schedule: new CourseSchedule({
|
||||
meetings: [
|
||||
new CourseMeeting({
|
||||
days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
|
||||
startTime: 480,
|
||||
endTime: 570,
|
||||
location: {
|
||||
building: 'UTC',
|
||||
room: '123',
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
instructionMode: 'In Person',
|
||||
semester: {
|
||||
year: 2024,
|
||||
season: 'Fall',
|
||||
},
|
||||
}),
|
||||
],
|
||||
name: 'Backup #3',
|
||||
hours: 0, // Add the missing 'hours' property
|
||||
}),
|
||||
];
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
dummySchedules: schedules,
|
||||
dummyActiveIndex: 0,
|
||||
|
||||
},
|
||||
};
|
||||
@@ -1,5 +1,96 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
|
||||
import { Course, Status } from 'src/shared/types/Course';
|
||||
import { CourseMeeting } from 'src/shared/types/CourseMeeting';
|
||||
import Instructor from 'src/shared/types/Instructor';
|
||||
|
||||
export const ExampleCourse: Course = new Course({
|
||||
courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
|
||||
creditHours: 3,
|
||||
department: 'C S',
|
||||
description: [
|
||||
'Problem solving and fundamental algorithms for various applications in science, business, and on the World Wide Web, and introductory programming in a modern object-oriented programming language.',
|
||||
'Only one of the following may be counted: Computer Science 303E, 312, 312H. Credit for Computer Science 303E may not be earned after a student has received credit for Computer Science 314, or 314H. May not be counted toward a degree in computer science.',
|
||||
'May be counted toward the Quantitative Reasoning flag requirement.',
|
||||
'Designed to accommodate 100 or more students.',
|
||||
'Taught as a Web-based course.',
|
||||
],
|
||||
flags: ['Quantitative Reasoning'],
|
||||
fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
|
||||
instructionMode: 'Online',
|
||||
instructors: [
|
||||
new Instructor({
|
||||
firstName: 'Bevo',
|
||||
lastName: 'Bevo',
|
||||
fullName: 'Bevo Bevo',
|
||||
}),
|
||||
],
|
||||
isReserved: false,
|
||||
number: '303E',
|
||||
schedule: {
|
||||
meetings: [
|
||||
new CourseMeeting({
|
||||
days: ['Tuesday', 'Thursday'],
|
||||
endTime: 660,
|
||||
startTime: 570,
|
||||
}),
|
||||
],
|
||||
},
|
||||
semester: {
|
||||
code: '12345',
|
||||
season: 'Spring',
|
||||
year: 2024,
|
||||
},
|
||||
status: Status.WAITLISTED,
|
||||
uniqueId: 12345,
|
||||
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
|
||||
});
|
||||
export const ExampleCourse2: Course = new Course({
|
||||
courseName: 'PRINCIPLES OF COMPUTER SYSTEMS',
|
||||
creditHours: 3,
|
||||
department: 'C S',
|
||||
description: [
|
||||
'Restricted to computer science majors.',
|
||||
'An introduction to computer systems software abstractions with an emphasis on the connection of these abstractions to underlying computer hardware. Key abstractions include threads, virtual memory, protection, and I/O. Requires writing of synchronized multithreaded programs and pieces of an operating system.',
|
||||
'Computer Science 439 and 439H may not both be counted.',
|
||||
'Prerequisite: Computer Science 429, or 429H with a grade of at least C-.',
|
||||
'May be counted toward the Independent Inquiry flag requirement.',
|
||||
],
|
||||
flags: ['Independent Inquiry'],
|
||||
fullName: 'C S 439 PRINCIPLES OF COMPUTER SYSTEMS',
|
||||
instructionMode: 'In Person',
|
||||
instructors: [
|
||||
new Instructor({
|
||||
firstName: 'Allison',
|
||||
lastName: 'Norman',
|
||||
fullName: 'Allison Norman',
|
||||
}),
|
||||
],
|
||||
isReserved: false,
|
||||
number: '439',
|
||||
schedule: {
|
||||
meetings: [
|
||||
new CourseMeeting({
|
||||
days: ['Tuesday', 'Thursday'],
|
||||
startTime: 930,
|
||||
endTime: 1050,
|
||||
}),
|
||||
new CourseMeeting({
|
||||
days: ['Friday'],
|
||||
startTime: 600,
|
||||
endTime: 720,
|
||||
}),
|
||||
],
|
||||
},
|
||||
semester: {
|
||||
code: '12345',
|
||||
season: 'Spring',
|
||||
year: 2024,
|
||||
},
|
||||
status: Status.WAITLISTED,
|
||||
uniqueId: 67890,
|
||||
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
|
||||
});
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Common/ConflictsWithWarning',
|
||||
@@ -9,8 +100,10 @@ const meta = {
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
ConflictingCourse: { control: 'string' },
|
||||
SectionNumber: { control: 'string' },
|
||||
conflicts: { control: 'object' },
|
||||
},
|
||||
args: {
|
||||
conflicts: [ExampleCourse, ExampleCourse2],
|
||||
},
|
||||
} satisfies Meta<typeof ConflictsWithWarning>;
|
||||
export default meta;
|
||||
@@ -19,7 +112,6 @@ type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
ConflictingCourse: 'BVO 311C',
|
||||
SectionNumber: '47280',
|
||||
conflicts: [ExampleCourse, ExampleCourse2],
|
||||
},
|
||||
};
|
||||
157
src/stories/components/Dropdown.stories.tsx
Normal file
157
src/stories/components/Dropdown.stories.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import { Course, Status } from '@shared/types/Course';
|
||||
import { UserSchedule } from '@shared/types/UserSchedule';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Serialized } from 'chrome-extension-toolkit';
|
||||
import React from 'react';
|
||||
import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
|
||||
import { CourseSchedule } from 'src/shared/types/CourseSchedule';
|
||||
import Instructor from 'src/shared/types/Instructor';
|
||||
import Dropdown from 'src/views/components/common/Dropdown/Dropdown';
|
||||
import ScheduleListItem from 'src/views/components/common/ScheduleListItem/ScheduleListItem';
|
||||
|
||||
const meta: Meta<typeof Dropdown> = {
|
||||
title: 'Components/Common/Dropdown',
|
||||
component: Dropdown,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
dummySchedules: { control: 'object' },
|
||||
dummyActiveIndex: { control: 'number' },
|
||||
scheduleComponents: { control: 'object' },
|
||||
},
|
||||
render: (args: any) => (
|
||||
<div className='w-80'>
|
||||
<Dropdown {...args} />
|
||||
</div>
|
||||
),
|
||||
} satisfies Meta<typeof Dropdown>;
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const schedules = [
|
||||
new UserSchedule({
|
||||
courses: [
|
||||
new Course({
|
||||
uniqueId: 123,
|
||||
number: '311C',
|
||||
fullName: "311C - Bevo's Default Course",
|
||||
courseName: "Bevo's Default Course",
|
||||
department: 'BVO',
|
||||
creditHours: 3,
|
||||
status: Status.WAITLISTED,
|
||||
instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
|
||||
isReserved: false,
|
||||
url: '',
|
||||
flags: [],
|
||||
schedule: new CourseSchedule({
|
||||
meetings: [
|
||||
new CourseMeeting({
|
||||
days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
|
||||
startTime: 480,
|
||||
endTime: 570,
|
||||
location: {
|
||||
building: 'UTC',
|
||||
room: '123',
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
instructionMode: 'In Person',
|
||||
semester: {
|
||||
year: 2024,
|
||||
season: 'Fall',
|
||||
},
|
||||
}),
|
||||
],
|
||||
name: 'Main Schedule',
|
||||
hours: 0,
|
||||
} as Serialized<UserSchedule>),
|
||||
new UserSchedule({
|
||||
courses: [
|
||||
new Course({
|
||||
uniqueId: 123,
|
||||
number: '311C',
|
||||
fullName: "311C - Bevo's Default Course",
|
||||
courseName: "Bevo's Default Course",
|
||||
department: 'BVO',
|
||||
creditHours: 3,
|
||||
status: Status.WAITLISTED,
|
||||
instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
|
||||
isReserved: false,
|
||||
url: '',
|
||||
flags: [],
|
||||
schedule: new CourseSchedule({
|
||||
meetings: [
|
||||
new CourseMeeting({
|
||||
days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
|
||||
startTime: 480,
|
||||
endTime: 570,
|
||||
location: {
|
||||
building: 'UTC',
|
||||
room: '123',
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
instructionMode: 'In Person',
|
||||
semester: {
|
||||
year: 2024,
|
||||
season: 'Fall',
|
||||
},
|
||||
}),
|
||||
new Course({
|
||||
uniqueId: 123,
|
||||
number: '311C',
|
||||
fullName: "311C - Bevo's Default Course",
|
||||
courseName: "Bevo's Default Course",
|
||||
department: 'BVO',
|
||||
creditHours: 3,
|
||||
status: Status.WAITLISTED,
|
||||
instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
|
||||
isReserved: false,
|
||||
url: '',
|
||||
flags: [],
|
||||
schedule: new CourseSchedule({
|
||||
meetings: [
|
||||
new CourseMeeting({
|
||||
days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
|
||||
startTime: 480,
|
||||
endTime: 570,
|
||||
location: {
|
||||
building: 'UTC',
|
||||
room: '123',
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
instructionMode: 'In Person',
|
||||
semester: {
|
||||
year: 2024,
|
||||
season: 'Fall',
|
||||
},
|
||||
}),
|
||||
],
|
||||
name: 'Backup #3',
|
||||
hours: 0,
|
||||
} as Serialized<UserSchedule>),
|
||||
];
|
||||
|
||||
export const Hidden: Story = {
|
||||
parameters: {
|
||||
design: {
|
||||
type: 'figma',
|
||||
url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=1579-5083&mode=dev',
|
||||
},
|
||||
},
|
||||
|
||||
args: {
|
||||
dummySchedules: schedules,
|
||||
dummyActiveIndex: 0,
|
||||
scheduleComponents: schedules.map((schedule, index) => (
|
||||
<ScheduleListItem active={index === 0} name={schedule.name} />
|
||||
)),
|
||||
},
|
||||
};
|
||||
19
src/stories/components/ImportantLinks.stories.tsx
Normal file
19
src/stories/components/ImportantLinks.stories.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import ImportantLinks from 'src/views/components/ImportantLinks';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Common/ImportantLinks',
|
||||
component: ImportantLinks,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {},
|
||||
} satisfies Meta<typeof ImportantLinks>;
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
@@ -9,7 +9,7 @@ import { test_colors } from './PopupCourseBlock.stories';
|
||||
|
||||
const numberOfCourses = 5;
|
||||
|
||||
const generateCourses = count => {
|
||||
export const generateCourses = count => {
|
||||
const courses = [];
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
@@ -64,7 +64,7 @@ const generateCourses = count => {
|
||||
const exampleCourses = generateCourses(numberOfCourses);
|
||||
const generateCourseBlocks = (exampleCourses, colors) =>
|
||||
exampleCourses.map((course, i) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors[i]} />);
|
||||
const exampleCourseBlocks = generateCourseBlocks(exampleCourses, test_colors);
|
||||
export const exampleCourseBlocks = generateCourseBlocks(exampleCourses, test_colors);
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Common/List',
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
|
||||
import React from 'react';
|
||||
import { Course, Status } from 'src/shared/types/Course';
|
||||
import { CourseMeeting } from 'src/shared/types/CourseMeeting';
|
||||
import Instructor from 'src/shared/types/Instructor';
|
||||
import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
|
||||
import { getCourseColors } from 'src/shared/util/colors';
|
||||
import { theme } from 'unocss/preset-mini';
|
||||
|
||||
const exampleCourse: Course = new Course({
|
||||
export const exampleCourse: Course = new Course({
|
||||
courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
|
||||
creditHours: 3,
|
||||
department: 'C S',
|
||||
@@ -103,7 +103,7 @@ export const test_colors = Object.keys(theme.colors)
|
||||
|
||||
export const AllColors: Story = {
|
||||
render: props => (
|
||||
<div className='grid grid-rows-9 grid-cols-2 grid-flow-col max-w-2xl w-90vw gap-x-4 gap-y-2'>
|
||||
<div className='grid grid-flow-col grid-cols-2 grid-rows-9 max-w-2xl w-90vw gap-x-4 gap-y-2'>
|
||||
{test_colors.map((color, i) => (
|
||||
<PopupCourseBlock key={color.primaryColor} course={exampleCourse} colors={color} />
|
||||
))}
|
||||
|
||||
23
src/stories/components/PopupMain.stories.tsx
Normal file
23
src/stories/components/PopupMain.stories.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import PopupMain from '@views/components/PopupMain';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Common/PopupMain',
|
||||
component: PopupMain,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
|
||||
},
|
||||
} satisfies Meta<typeof PopupMain>;
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
|
||||
},
|
||||
};
|
||||
36
src/stories/components/ScheduleListItem.stories.tsx
Normal file
36
src/stories/components/ScheduleListItem.stories.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import ScheduleListItem from 'src/views/components/common/ScheduleListItem/ScheduleListItem';
|
||||
|
||||
export default {
|
||||
title: 'Components/Common/ScheduleListItem',
|
||||
component: ScheduleListItem,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
tags: ['autodocs'],
|
||||
},
|
||||
argTypes: {
|
||||
active: { control: 'boolean' },
|
||||
name: { control: 'text' },
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = (args) => <ScheduleListItem {...args} />;
|
||||
|
||||
Default.args = {
|
||||
name: 'My Schedule',
|
||||
active: true,
|
||||
};
|
||||
|
||||
export const Active = (args) => <ScheduleListItem {...args} />;
|
||||
|
||||
Active.args = {
|
||||
name: 'My Schedule',
|
||||
active: true,
|
||||
};
|
||||
|
||||
export const Inactive = (args) => <ScheduleListItem {...args} />;
|
||||
|
||||
Inactive.args = {
|
||||
name: 'My Schedule',
|
||||
active: false,
|
||||
};
|
||||
19
src/stories/components/Settings.stories.tsx
Normal file
19
src/stories/components/Settings.stories.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import Settings from 'src/views/components/Settings';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Common/Settings',
|
||||
component: Settings,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {},
|
||||
} satisfies Meta<typeof Settings>;
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
@@ -1,8 +1,9 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Course, Status } from 'src/shared/types/Course';
|
||||
import { CourseMeeting } from 'src/shared/types/CourseMeeting';
|
||||
import { UserSchedule } from 'src/shared/types/UserSchedule';
|
||||
import CoursePopup from 'src/views/components/injected/CoursePopupOld/CoursePopup';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import Instructor from 'src/shared/types/Instructor';
|
||||
|
||||
const exampleCourse: Course = new Course({
|
||||
courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
|
||||
@@ -18,7 +19,20 @@ const exampleCourse: Course = new Course({
|
||||
flags: ['Quantitative Reasoning'],
|
||||
fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
|
||||
instructionMode: 'Online',
|
||||
instructors: [],
|
||||
instructors: [
|
||||
new Instructor({
|
||||
firstName: 'William',
|
||||
lastName: 'Young',
|
||||
middleInitial: 'D',
|
||||
fullName: 'William D Young',
|
||||
}),
|
||||
new Instructor({
|
||||
firstName: 'William',
|
||||
lastName: 'Young',
|
||||
middleInitial: 'D',
|
||||
fullName: 'William D Young',
|
||||
}),
|
||||
],
|
||||
isReserved: false,
|
||||
number: '303E',
|
||||
schedule: {
|
||||
@@ -43,6 +57,7 @@ const exampleCourse: Course = new Course({
|
||||
const exampleSchedule: UserSchedule = new UserSchedule({
|
||||
courses: [exampleCourse],
|
||||
name: 'Example Schedule',
|
||||
hours: 0,
|
||||
});
|
||||
|
||||
const meta = {
|
||||
@@ -82,6 +97,7 @@ export const Open: Story = {
|
||||
activeSchedule: new UserSchedule({
|
||||
courses: [],
|
||||
name: 'Example Schedule',
|
||||
hours: 0,
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
65
src/views/components/ImportantLinks.tsx
Normal file
65
src/views/components/ImportantLinks.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Text from './common/Text/Text';
|
||||
import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
|
||||
|
||||
type Props = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* The "Important Links" section of the calendar website
|
||||
* @returns
|
||||
*/
|
||||
export default function ImportantLinks({ className }: Props) {
|
||||
return (
|
||||
<article className={clsx(className, 'flex flex-col gap-2')}>
|
||||
<Text variant='h3'>Important Links</Text>
|
||||
<a
|
||||
href='https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/'
|
||||
className='flex items-center gap-0.5 text-ut-burntorange'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
<Text variant='p'>Spring Course Schedule</Text>
|
||||
<OutwardArrowIcon className='h-3 w-3' />
|
||||
</a>
|
||||
<a
|
||||
href='https://utdirect.utexas.edu/apps/registrar/course_schedule/20236/'
|
||||
className='flex items-center gap-0.5 text-ut-burntorange'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
<Text variant='p'>Summer Course Schedule</Text>
|
||||
<OutwardArrowIcon className='h-3 w-3' />
|
||||
</a>
|
||||
<a
|
||||
href='https://utdirect.utexas.edu/registrar/ris.WBX'
|
||||
className='flex items-center gap-0.5 text-ut-burntorange'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
<Text variant='p'>Registration Info Sheet</Text>
|
||||
<OutwardArrowIcon className='h-3 w-3' />
|
||||
</a>
|
||||
<a
|
||||
href='https://utdirect.utexas.edu/registration/chooseSemester.WBX'
|
||||
className='flex items-center gap-0.5 text-ut-burntorange'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
<Text variant='p'>Register For Courses</Text>
|
||||
<OutwardArrowIcon className='h-3 w-3' />
|
||||
</a>
|
||||
<a
|
||||
href='https://utdirect.utexas.edu/apps/degree/audits/'
|
||||
className='flex items-center gap-0.5 text-ut-burntorange'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
<Text variant='p'>Degree Audit</Text>
|
||||
<OutwardArrowIcon className='h-3 w-3' />
|
||||
</a>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -1,24 +1,99 @@
|
||||
import { background } from '@shared/messages';
|
||||
import React from 'react';
|
||||
import useSchedules from '../hooks/useSchedules';
|
||||
import { Button } from './common/Button/Button';
|
||||
import { FaCalendarAlt, FaCog, FaRedo } from 'react-icons/fa'; // Added FaRedo for the refresh icon
|
||||
import { StatusIcon } from '@shared/util/icons';
|
||||
import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
|
||||
import PopupCourseBlock from './common/PopupCourseBlock/PopupCourseBlock';
|
||||
import Text from './common/Text/Text';
|
||||
import Divider from './common/Divider/Divider';
|
||||
import logoImage from '../../assets/logo.png'; // Adjust the path as necessary
|
||||
import List from './common/List/List'; // Ensure this path is correctly pointing to your List component
|
||||
import { generateCourses } from 'src/stories/components/List.stories';
|
||||
|
||||
export default function PopupMain() {
|
||||
const [activeSchedule, schedules] = useSchedules();
|
||||
const courses = generateCourses(5);
|
||||
|
||||
|
||||
// Manually applying colors for the demonstration
|
||||
const colors = {
|
||||
OPEN: { primaryColor: '#34D399', secondaryColor: '#059669' },
|
||||
CLOSED: { primaryColor: '#818cf8', secondaryColor: '#4f46e5' },
|
||||
WAITLISTED: { primaryColor: '#F59E00', secondaryColor: '#B45309' },
|
||||
CANCELLED: { primaryColor: '#EF4444', secondaryColor: '#b91c1c' },
|
||||
TEMP: { primaryColor: '#fde047', secondaryColor: '#eab308' },
|
||||
};
|
||||
|
||||
const draggableElements = courses.map((course) => (
|
||||
<PopupCourseBlock
|
||||
key={course.uniqueId}
|
||||
course={course}
|
||||
colors={colors[course.status]}
|
||||
/>
|
||||
));
|
||||
|
||||
// TODO: Add a button to to switch the active schedule
|
||||
|
||||
return (
|
||||
<ExtensionRoot>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (!activeSchedule) return;
|
||||
background.clearCourses({ scheduleName: activeSchedule?.name });
|
||||
}}
|
||||
>
|
||||
Clear Courses
|
||||
</Button>
|
||||
<div className="p-4 bg-white max-w-sm mx-auto rounded-lg shadow-md">
|
||||
<div className="mb-2 flex items-center justify-between bg-white">
|
||||
<div className="flex items-center">
|
||||
<img src={logoImage} alt="Logo" style={{ width: '40px', height: '40px', marginRight: '8px' }} />
|
||||
<div>
|
||||
<Text as="div" variant="h1-course" style={{ color: '#bf5700', fontSize: '1.3rem' }}>UT Registration</Text>
|
||||
<Text as="div" variant="h1-course" style={{ color: '#f8971f', fontSize: '1.3rem' }}>Plus</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<button style={{ backgroundColor: '#bf5700', borderRadius: '8px', padding: '8px' }}>
|
||||
<FaCalendarAlt color="white" />
|
||||
</button>
|
||||
<button style={{ backgroundColor: 'white', marginLeft: '10px', borderRadius: '8px', padding: '8px', boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}>
|
||||
<FaCog color="#C05621" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Divider color="#E2E8F0" type="solid" style={{ margin: '1rem 0' }} />
|
||||
<div className="mb-4 p-2 bg-white text-left rounded-lg shadow-inner" style={{ backgroundColor: 'white', border: '1px solid #FBD38D', borderRadius: '0.5rem' }}>
|
||||
<Text as="div" variant="h2-course" style={{ color: '#DD6B20', fontSize: '1.2rem' }}>MAIN SCHEDULE:</Text>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', color: '#333f48' }}>
|
||||
<Text as="div" variant="h1" style={{ fontSize: '1.2rem', fontWeight: 'bold', marginRight: '0.5rem' }}>22 HOURS</Text>
|
||||
<Text as="div" variant="h2-course" style={{ fontSize: '1.2rem' }}>8 Courses</Text>
|
||||
</div>
|
||||
</div>
|
||||
{/* Integrate the List component here */}
|
||||
<List
|
||||
draggableElements={draggableElements}
|
||||
itemHeight={100} // Adjust based on your content size
|
||||
listHeight={500} // Adjust based on total height you want for the list
|
||||
listWidth={350} // Adjust based on your layout/design
|
||||
gap={12} // Spacing between items
|
||||
/>
|
||||
<div className="mt-4 p-4 border-t border-gray-200 flex justify-between text-xs">
|
||||
<div className="flex items-center">
|
||||
<div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
|
||||
<StatusIcon status="WAITLISTED" className="text-white h-5 w-5" />
|
||||
</div>
|
||||
<Text as="span" variant="mini">WAITLISTED</Text>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
|
||||
<StatusIcon status="CLOSED" className="text-white h-5 w-5" />
|
||||
</div>
|
||||
<Text as="span" variant="mini">CLOSED</Text>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
|
||||
<StatusIcon status="CANCELLED" className="text-white h-5 w-5" />
|
||||
</div>
|
||||
<Text as="span" variant="mini">CANCELLED</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-center text-xs">
|
||||
<div className="inline-flex items-center justify-center">
|
||||
<Text as="div" variant="mini">DATA UPDATED ON: 12:00 AM 02/01/2024</Text>
|
||||
<FaRedo className="text-gray-600 h-4 w-4 ml-2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ExtensionRoot>
|
||||
);
|
||||
}
|
||||
|
||||
14
src/views/components/Settings.tsx
Normal file
14
src/views/components/Settings.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
type Props = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Component to hold everything for the settings page
|
||||
* @param props className
|
||||
* @returns The content for the settings page
|
||||
*/
|
||||
export default function Settings({ className }: Props) {
|
||||
return <div className={className}>this will be finished laterrrrrrr</div>;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
|
||||
import type IconComponent from '~icons/material-symbols';
|
||||
import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
|
||||
import Text from '../Text/Text';
|
||||
|
||||
interface Props {
|
||||
@@ -33,28 +33,24 @@ export function Button({
|
||||
const Icon = icon;
|
||||
const isIconOnly = !children && !!icon;
|
||||
const colorHex = getThemeColorHexByName(color);
|
||||
const colorRgb = getThemeColorRgbByName(color).join(' ');
|
||||
const colorRgb = getThemeColorRgbByName(color)?.join(' ');
|
||||
|
||||
return (
|
||||
<button
|
||||
style={
|
||||
{
|
||||
...style,
|
||||
'--color': colorHex,
|
||||
'--bg-color-8': `rgba(${colorRgb} / 0.08)`,
|
||||
'--shadow-color-15': `rgba(${colorRgb} / 0.15)`,
|
||||
'--shadow-color-30': `rgba(${colorRgb} / 0.3)`,
|
||||
color: colorHex,
|
||||
backgroundColor: `rgb(${colorRgb} / var(--un-bg-opacity)`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={clsx(
|
||||
'btn',
|
||||
{
|
||||
'disabled:(cursor-not-allowed opacity-50)': disabled,
|
||||
'color-white bg-[var(--color)] border-[var(--color)] hover:enabled:btn-shadow':
|
||||
'text-white! bg-opacity-100 hover:enabled:shadow-md active:enabled:shadow-sm shadow-black/20':
|
||||
variant === 'filled',
|
||||
'color-[var(--color)] bg-white border-current hover:enabled:btn-shade border border-solid':
|
||||
variant === 'outline',
|
||||
'color-[var(--color)] bg-white border-white hover:enabled:btn-shade': variant === 'single', // settings is the only "single"
|
||||
'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border': variant === 'outline',
|
||||
'bg-opacity-0 border-none hover:enabled:bg-opacity-8': variant === 'single', // settings is the only "single"
|
||||
'px-2 py-1.25': isIconOnly && variant !== 'outline',
|
||||
'px-1.75 py-1.25': isIconOnly && variant === 'outline',
|
||||
'px-3.75': variant === 'outline' && !isIconOnly,
|
||||
@@ -65,7 +61,7 @@ export function Button({
|
||||
disabled={disabled}
|
||||
onClick={disabled ? undefined : onClick}
|
||||
>
|
||||
{icon && <Icon className='size-6' />}
|
||||
{icon && <Icon className='h-6 w-6' />}
|
||||
{!isIconOnly && (
|
||||
<Text variant='h4' className='translate-y-0.08'>
|
||||
{children}
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Text from '../Text/Text';
|
||||
import CalendarCourseBlock, { CalendarCourseCellProps } from '../CalendarCourseCell/CalendarCourseCell';
|
||||
import { Button } from '../Button/Button';
|
||||
import ImageIcon from '~icons/material-symbols/image';
|
||||
import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
|
||||
|
||||
type CalendarBottomBarProps = {
|
||||
courses: CalendarCourseCellProps[];
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export const CalendarBottomBar = ({ courses }: CalendarBottomBarProps): JSX.Element => {
|
||||
if (courses.length === -1) console.log('foo'); // dumb line to make eslint happy
|
||||
return (
|
||||
<div className='w-full flex py-1.25'>
|
||||
<div className='flex flex-grow items-center gap-3.75 pl-7.5 pr-2.5'>
|
||||
<Text variant='h4'>Async. and Other:</Text>
|
||||
<div className='h-14 inline-flex gap-2.5'>
|
||||
{courses.map(course => (
|
||||
<CalendarCourseBlock
|
||||
courseDeptAndInstr={course.courseDeptAndInstr}
|
||||
status={course.status}
|
||||
colors={course.colors}
|
||||
key={course.courseDeptAndInstr}
|
||||
className={clsx(course.className, 'w-35!')}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center pl-2.5 pr-7.5'>
|
||||
<Button variant='single' color='ut-black' icon={CalendarMonthIcon}>
|
||||
Save as .CAL
|
||||
</Button>
|
||||
<Button variant='single' color='ut-black' icon={ImageIcon}>
|
||||
Save as .PNG
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,45 +1,68 @@
|
||||
import { Status } from '@shared/types/Course';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { Course, Status } from 'src/shared/types/Course';
|
||||
import { CourseMeeting } from 'src/shared/types/CourseMeeting';
|
||||
import { CourseColors, pickFontColor } from 'src/shared/util/colors';
|
||||
import ClosedIcon from '~icons/material-symbols/lock';
|
||||
import WaitlistIcon from '~icons/material-symbols/timelapse';
|
||||
import CancelledIcon from '~icons/material-symbols/warning';
|
||||
import Text from '../Text/Text';
|
||||
|
||||
export interface CalendarCourseBlockProps {
|
||||
/** The Course that the meeting is for. */
|
||||
course: Course;
|
||||
/* index into course meeting array to display */
|
||||
meetingIdx?: number;
|
||||
/** The background color for the course. */
|
||||
color: string;
|
||||
export interface CalendarCourseCellProps {
|
||||
courseDeptAndInstr: string;
|
||||
timeAndLocation?: string;
|
||||
status: Status;
|
||||
colors: CourseColors;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meetingIdx }: CalendarCourseBlockProps) => {
|
||||
let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
|
||||
const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
|
||||
courseDeptAndInstr,
|
||||
timeAndLocation,
|
||||
status,
|
||||
colors,
|
||||
className,
|
||||
}: CalendarCourseCellProps) => {
|
||||
let rightIcon: React.ReactNode | null = null;
|
||||
if (course.status === Status.WAITLISTED) {
|
||||
if (status === Status.WAITLISTED) {
|
||||
rightIcon = <WaitlistIcon className='h-5 w-5' />;
|
||||
} else if (course.status === Status.CLOSED) {
|
||||
} else if (status === Status.CLOSED) {
|
||||
rightIcon = <ClosedIcon className='h-5 w-5' />;
|
||||
} else if (course.status === Status.CANCELLED) {
|
||||
} else if (status === Status.CANCELLED) {
|
||||
rightIcon = <CancelledIcon className='h-5 w-5' />;
|
||||
}
|
||||
|
||||
// whiteText based on secondaryColor
|
||||
const fontColor = pickFontColor(colors.primaryColor);
|
||||
|
||||
return (
|
||||
<div className='w-full flex justify-center rounded bg-slate-300 p-2 text-ut-black'>
|
||||
<div className='flex flex-1 flex-col gap-1'>
|
||||
<Text variant='h1-course' className='leading-[75%]!'>
|
||||
{course.department} {course.number} - {course.instructors[0].lastName}
|
||||
<div
|
||||
className={clsx('w-full flex justify-center rounded p-2', fontColor, className)}
|
||||
style={{
|
||||
backgroundColor: colors.primaryColor,
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-1 flex-col gap-1 overflow-x-hidden'>
|
||||
<Text
|
||||
variant='h1-course'
|
||||
className={clsx('-my-0.8 leading-tight', {
|
||||
truncate: timeAndLocation,
|
||||
})}
|
||||
>
|
||||
{courseDeptAndInstr}
|
||||
</Text>
|
||||
<Text variant='h3-course' className='leading-[75%]!'>
|
||||
{`${meeting.getTimeString({ separator: '–', capitalize: true })}${
|
||||
meeting.location ? ` – ${meeting.location.building}` : ''
|
||||
}`}
|
||||
{timeAndLocation && (
|
||||
<Text variant='h3-course' className='-mb-0.5'>
|
||||
{timeAndLocation}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
{rightIcon && (
|
||||
<div className='h-fit flex items-center justify-center justify-self-start rounded bg-slate-700 p-0.5 text-white'>
|
||||
<div
|
||||
className='h-fit flex items-center justify-center justify-self-start rounded p-0.5 text-white'
|
||||
style={{
|
||||
backgroundColor: colors.secondaryColor,
|
||||
}}
|
||||
>
|
||||
{rightIcon}
|
||||
</div>
|
||||
)}
|
||||
@@ -47,4 +70,4 @@ const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meeti
|
||||
);
|
||||
};
|
||||
|
||||
export default CalendarCourseBlock;
|
||||
export default CalendarCourseCell;
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
@use 'sass:color';
|
||||
@use 'src/views/styles/colors.module.scss';
|
||||
|
||||
.dayLabelContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -16,7 +13,7 @@
|
||||
|
||||
.calendarGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: repeat(13, 1fr);
|
||||
}
|
||||
|
||||
@@ -25,19 +22,24 @@
|
||||
}
|
||||
|
||||
.calendar {
|
||||
// display: grid;
|
||||
// grid-template-columns: auto repeat(5, 1fr);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
position: relative; // Ensuring that child elements can be positioned in relation to this.
|
||||
}
|
||||
|
||||
.day {
|
||||
gap: 5px;
|
||||
color: colors.$burnt_orange;
|
||||
color: #bf5700;
|
||||
text-align: center;
|
||||
font-size: 14.22px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
margin-top: 20px;
|
||||
border-right: 1px solid #dadce0;
|
||||
border-bottom: 1px solid #dadce0;
|
||||
border-left: 1px solid #dadce0;
|
||||
}
|
||||
|
||||
.timeAndGrid {
|
||||
@@ -56,11 +58,8 @@
|
||||
|
||||
.timeBlock {
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 40.279px;
|
||||
min-width: 50px;
|
||||
max-width: 50px;
|
||||
min-height: 40px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
@@ -71,20 +70,20 @@
|
||||
align-items: flex-end;
|
||||
gap: 17px;
|
||||
flex: 1 0 0;
|
||||
align-self: stretch;
|
||||
border-radius: var(--border-radius-none, 0px);
|
||||
}
|
||||
|
||||
p {
|
||||
color: #1A2024;
|
||||
color: #1a2024;
|
||||
text-align: left;
|
||||
height: 6.6px;
|
||||
align-self: stretch;
|
||||
margin-top: 0;
|
||||
margin-top: -10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 0;
|
||||
|
||||
/* Type scale/small */
|
||||
font-family: "Roboto Flex";
|
||||
font-family: 'Roboto Flex';
|
||||
font-size: 14.22px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
@@ -92,3 +91,37 @@
|
||||
}
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.calendarButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 6px 6px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.buttonIcon {
|
||||
height: 24px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 30px;
|
||||
width: 1px;
|
||||
background-color: grey;
|
||||
}
|
||||
@@ -1,52 +1,132 @@
|
||||
import React from 'react';
|
||||
import styles from './CalendarGrid.module.scss';
|
||||
import CalendarCell from '../CalendarGridCell/CalendarGridCell';
|
||||
import React, { useRef } from 'react';
|
||||
import * as htmlToImage from 'html-to-image';
|
||||
import { DAY_MAP } from 'src/shared/types/CourseMeeting';
|
||||
import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
|
||||
import calIcon from 'src/assets/icons/cal.svg';
|
||||
import pngIcon from 'src/assets/icons/png.svg';
|
||||
import CalendarCell from '../CalendarGridCell/CalendarGridCell';
|
||||
import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
|
||||
import styles from './CalendarGrid.module.scss';
|
||||
|
||||
const daysOfWeek = Object.values(DAY_MAP).filter(d => d != "Saturday" && d != "Sunday")
|
||||
const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
|
||||
const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
|
||||
const grid = Array.from({ length: 5 }, () =>
|
||||
Array.from({ length: 13 }, (_, columnIndex) => (
|
||||
<CalendarCell key={columnIndex} />
|
||||
))
|
||||
const grid = [];
|
||||
for (let i = 0; i < 13; i++) {
|
||||
const row = [];
|
||||
let hour = hoursOfDay[i];
|
||||
row.push(
|
||||
<div key={hour} className={styles.timeBlock}>
|
||||
<div className={styles.timeLabelContainer}>
|
||||
<p>{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
row.push(Array.from({ length: 5 }, (_, j) => <CalendarCell key={j} />));
|
||||
grid.push(row);
|
||||
}
|
||||
|
||||
interface Props {
|
||||
courseCells: CalendarGridCourse[];
|
||||
saturdayClass: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Grid of CalendarGridCell components forming the user's course schedule calendar view
|
||||
* @param props
|
||||
*/
|
||||
const Calendar: React.FC = (props) => {
|
||||
function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props>): JSX.Element {
|
||||
const calendarRef = useRef(null); // Create a ref for the calendar grid
|
||||
|
||||
const saveAsPNG = () => {
|
||||
htmlToImage
|
||||
.toPng(calendarRef.current, {
|
||||
backgroundColor: 'white',
|
||||
style: {
|
||||
background: 'white',
|
||||
marginTop: '20px',
|
||||
marginBottom: '20px',
|
||||
marginRight: '20px',
|
||||
marginLeft: '20px',
|
||||
},
|
||||
})
|
||||
.then(dataUrl => {
|
||||
let img = new Image();
|
||||
img.src = dataUrl;
|
||||
fetch(dataUrl)
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
const href = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = href;
|
||||
link.download = 'my-schedule.png';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
})
|
||||
.catch(error => console.error('Error downloading file:', error));
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('oops, something went wrong!', error);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.calendar}>
|
||||
<div className={styles.dayLabelContainer}>
|
||||
{/* Empty cell in the top-left corner */}
|
||||
<div className={styles.day} />
|
||||
<div className={styles.dayLabelContainer} />
|
||||
{/* Displaying the rest of the calendar */}
|
||||
<div ref={calendarRef} className={styles.timeAndGrid}>
|
||||
{/* <div className={styles.timeColumn}>
|
||||
<div className={styles.timeBlock}></div>
|
||||
{hoursOfDay.map((hour) => (
|
||||
<div key={hour} className={styles.timeBlock}>
|
||||
<div className={styles.timeLabelContainer}>
|
||||
<p>{hour % 12 === 0 ? 12 : hour % 12} {hour < 12 ? 'AM' : 'PM'}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div> */}
|
||||
<div className={styles.calendarGrid}>
|
||||
{/* Displaying day labels */}
|
||||
<div className={styles.timeBlock} />
|
||||
{daysOfWeek.map(day => (
|
||||
<div key={day} className={styles.day}>
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Displaying the rest of the calendar */}
|
||||
<div className={styles.timeAndGrid}>
|
||||
<div className={styles.timeColumn}>
|
||||
{hoursOfDay.map((hour) => (
|
||||
<div key={hour} className={styles.timeBlock}>
|
||||
<div className={styles.timeLabelContainer}>
|
||||
<p>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.calendarGrid}>
|
||||
{grid.map((row, rowIndex) => (
|
||||
row
|
||||
{grid.map((row, index) => (
|
||||
<React.Fragment key={index}>{row}</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{courseCells.map((block: CalendarGridCourse) => (
|
||||
<div
|
||||
key={`${block}`}
|
||||
style={{
|
||||
gridColumn: `${block.calendarGridPoint.dayIndex}`,
|
||||
gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
|
||||
}}
|
||||
>
|
||||
<CalendarCourseCell
|
||||
courseDeptAndInstr={block.componentProps.courseDeptAndInstr}
|
||||
status={block.componentProps.status}
|
||||
colors={block.componentProps.colors}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
))}
|
||||
<div className={styles.buttonContainer}>
|
||||
<div className={styles.divider} /> {/* First divider */}
|
||||
<button className={styles.calendarButton}>
|
||||
<img src={calIcon} className={styles.buttonIcon} alt='CAL' />
|
||||
Save as .CAL
|
||||
</button>
|
||||
<div className={styles.divider} /> {/* Second divider */}
|
||||
<button onClick={saveAsPNG} className={styles.calendarButton}>
|
||||
<img src={pngIcon} className={styles.buttonIcon} alt='PNG' />
|
||||
Save as .PNG
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Calendar;
|
||||
export default CalendarGrid;
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
.calendarCell {
|
||||
display: flex;
|
||||
width: 165px;
|
||||
height: 52.231px;
|
||||
width: 213.8px;
|
||||
height: 44.769px;
|
||||
min-width: 45px;
|
||||
min-height: 40px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
border: 1px solid #DADCE0;
|
||||
border: 1px solid #dadce0;
|
||||
}
|
||||
|
||||
.hourLine {
|
||||
width: 165px;
|
||||
width: 213.8px;
|
||||
height: 1px;
|
||||
border-radius: var(--border-radius-none, 0px);
|
||||
background: rgba(218, 220, 224, 0.25);
|
||||
|
||||
@@ -5,14 +5,10 @@ import styles from './CalendarGridCell.module.scss';
|
||||
* Component representing each 1 hour time block of a calendar
|
||||
* @param props
|
||||
*/
|
||||
const CalendarCell: React.FC = (props) => {
|
||||
return (
|
||||
const CalendarCell: React.FC = props => (
|
||||
<div className={styles.calendarCell}>
|
||||
<div className={styles.hourLine}>
|
||||
|
||||
</div>
|
||||
<div className={styles.hourLine} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CalendarCell;
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import { Status } from '@shared/types/Course';
|
||||
import Divider from '../Divider/Divider';
|
||||
import { Button } from '../Button/Button';
|
||||
import Text from '../Text/Text';
|
||||
import MenuIcon from '~icons/material-symbols/menu';
|
||||
import LogoIcon from '~icons/material-symbols/add-circle-outline';
|
||||
import UndoIcon from '~icons/material-symbols/undo';
|
||||
import RedoIcon from '~icons/material-symbols/redo';
|
||||
import SettingsIcon from '~icons/material-symbols/settings';
|
||||
import ScheduleTotalHoursAndCourses from '../ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
|
||||
import CourseStatus from '../CourseStatus/CourseStatus';
|
||||
|
||||
const CalendarHeader = () => (
|
||||
<div className='min-h-79px min-w-672px flex px-0 py-15'>
|
||||
<div className='flex flex-row gap-20'>
|
||||
<div className='flex gap-10'>
|
||||
<div className='flex gap-1'>
|
||||
<Button variant='single' icon={MenuIcon} color='ut-gray' />
|
||||
<div className='flex items-center'>
|
||||
<LogoIcon style={{ marginRight: '5px' }} />
|
||||
<div className='flex flex-col gap-1 whitespace-nowrap'>
|
||||
<Text className='leading-trim text-cap font-roboto text-base text-ut-burntorange font-medium'>
|
||||
UT Registration
|
||||
</Text>
|
||||
<Text className='leading-trim text-cap font-roboto text-base text-ut-orange font-medium'>
|
||||
Plus
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
|
||||
DATA UPDATED ON: 12:00 AM 02/01/2024
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row items-center space-x-8'>
|
||||
<div className='flex flex-row space-x-4'>
|
||||
<CourseStatus size='small' status={Status.WAITLISTED} />
|
||||
<CourseStatus size='small' status={Status.CLOSED} />
|
||||
<CourseStatus size='small' status={Status.CANCELLED} />
|
||||
</div>
|
||||
<div className='flex flex-row'>
|
||||
<Button variant='single' icon={UndoIcon} color='ut-black' />
|
||||
<Button variant='single' icon={RedoIcon} color='ut-black' />
|
||||
<Button variant='single' icon={SettingsIcon} color='ut-black' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Divider type='solid' />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default CalendarHeader;
|
||||
@@ -0,0 +1,36 @@
|
||||
import { UserSchedule } from '@shared/types/UserSchedule';
|
||||
import React, { useState } from 'react';
|
||||
import AddSchedule from '~icons/material-symbols/add';
|
||||
import List from '../List/List';
|
||||
import ScheduleListItem from '../ScheduleListItem/ScheduleListItem';
|
||||
import Text from '../Text/Text';
|
||||
|
||||
export type Props = {
|
||||
style?: React.CSSProperties;
|
||||
dummySchedules?: UserSchedule[];
|
||||
dummyActiveIndex?: number;
|
||||
};
|
||||
|
||||
export function CalendarSchedules(props: Props) {
|
||||
const [activeScheduleIndex, setActiveScheduleIndex] = useState(props.dummyActiveIndex || 0);
|
||||
const [schedules, setSchedules] = useState(props.dummySchedules || []);
|
||||
|
||||
const scheduleComponents = schedules.map((schedule, index) => (
|
||||
<ScheduleListItem active={index === activeScheduleIndex} name={schedule.name} />
|
||||
));
|
||||
|
||||
return (
|
||||
<div style={{ ...props.style }} className='items-center'>
|
||||
<div className='m0 m-b-2 w-full flex justify-between'>
|
||||
<Text variant='h3'>MY SCHEDULES</Text>
|
||||
<div className='cursor-pointer items-center justify-center btn-transition -ml-1.5 hover:text-zinc-400'>
|
||||
<Text variant='h3'>
|
||||
<AddSchedule />
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<List gap={10} draggableElements={scheduleComponents} itemHeight={30} listHeight={30} listWidth={240} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,14 @@
|
||||
import React from 'react';
|
||||
import { Course } from 'src/shared/types/Course';
|
||||
import clsx from 'clsx';
|
||||
import Text from '../Text/Text';
|
||||
|
||||
/**
|
||||
* Props for ConflictWithWarningProps
|
||||
*/
|
||||
export interface ConflictsWithWarningProps {
|
||||
ConflictingCourse: string;
|
||||
SectionNumber: string;
|
||||
className?: string;
|
||||
conflicts: Course[];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -15,29 +17,21 @@ export interface ConflictsWithWarningProps {
|
||||
*
|
||||
* @param props ConflictsWithWarningProps
|
||||
*/
|
||||
export default function ConflictsWithWarning( { ConflictingCourse, SectionNumber }: ConflictsWithWarningProps): JSX.Element {
|
||||
const UniqueCourseConflictText = `${ConflictingCourse} (${SectionNumber})`;
|
||||
|
||||
return (
|
||||
<div className="min-w-21 w-21 flex flex-col items-start gap-2.5 rounded bg-[#AF2E2D] p-2.5">
|
||||
<ConflictsWithoutWarningText>
|
||||
Conflicts With:
|
||||
</ConflictsWithoutWarningText>
|
||||
<ConflictsWithoutWarningText>
|
||||
{UniqueCourseConflictText}
|
||||
</ConflictsWithoutWarningText>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ConflictsWithoutWarningText( {children}: {children: string} ) {
|
||||
export default function ConflictsWithWarning({ className, conflicts }: ConflictsWithWarningProps): JSX.Element {
|
||||
return (
|
||||
<Text
|
||||
variant='mini'
|
||||
as='span'
|
||||
className='text-white'
|
||||
className={clsx(
|
||||
className,
|
||||
'min-w-21 w-21 flex flex-col items-start gap-2.5 rounded bg-[#AF2E2D] p-2.5 text-white'
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
<div>Conflicts With:</div>
|
||||
{conflicts.map(course => (
|
||||
<div>
|
||||
{`${course.department} ${course.number} (${course.uniqueId})`}
|
||||
</div>
|
||||
))}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
110
src/views/components/common/Dropdown/Dropdown.tsx
Normal file
110
src/views/components/common/Dropdown/Dropdown.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import { Disclosure, Transition } from '@headlessui/react';
|
||||
import { UserSchedule } from '@shared/types/UserSchedule';
|
||||
import React from 'react';
|
||||
import userScheduleHandler from 'src/pages/background/handler/userScheduleHandler';
|
||||
import DropdownArrowDown from '~icons/material-symbols/arrow-drop-down';
|
||||
import DropdownArrowUp from '~icons/material-symbols/arrow-drop-up';
|
||||
import List from '../List/List';
|
||||
import Text from '../Text/Text';
|
||||
|
||||
export type Props = {
|
||||
style?: React.CSSProperties;
|
||||
// Dummy value solely for storybook
|
||||
dummySchedules?: UserSchedule[];
|
||||
dummyActiveIndex?: number;
|
||||
dummyActiveSchedule?: UserSchedule;
|
||||
scheduleComponents?: any[];
|
||||
};
|
||||
|
||||
/**
|
||||
* This is a reusable dropdown component that can be used to toggle the visiblity of information
|
||||
*/
|
||||
export default function Dropdown(props: Props) {
|
||||
// Expand/Hide state for dropdown
|
||||
let [expanded, toggle] = React.useState(false);
|
||||
let [activeScheduleIndex, select] = React.useState(props.dummyActiveIndex);
|
||||
let [activeSchedule, selectFrom] = React.useState(props.dummyActiveSchedule);
|
||||
let [scheduleComponents, setScheduleComponents] = React.useState(props.scheduleComponents);
|
||||
|
||||
const schedules = props.dummySchedules;
|
||||
if (schedules == null) {
|
||||
// if no dummy values passed in
|
||||
// useSchedules hook here
|
||||
}
|
||||
|
||||
const toggleSwitch = () => {
|
||||
toggle(!expanded);
|
||||
};
|
||||
|
||||
// WIP function to swap schedules. Prefer to use the hook when in production
|
||||
const switchSchedule = (index: number) => {
|
||||
const scheduleToSwitchTo = schedules[index];
|
||||
|
||||
select(index);
|
||||
selectFrom(scheduleToSwitchTo);
|
||||
if (scheduleToSwitchTo != null && scheduleToSwitchTo.name != null) {
|
||||
userScheduleHandler.switchSchedule({
|
||||
data: {
|
||||
scheduleName: scheduleToSwitchTo.name,
|
||||
},
|
||||
sender: null,
|
||||
sendResponse: null,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ ...props.style, height: expanded && schedules ? `${40 * schedules.length + 54}px` : '72px' }}
|
||||
className='items-left absolute w-72 flex flex-col border'
|
||||
>
|
||||
<Disclosure>
|
||||
<Disclosure.Button>
|
||||
<div className='flex items-center border-none bg-white p-3 text-left'>
|
||||
<div className='flex-1'>
|
||||
<Text as='div' variant='h4' className='text-ut-burntorange mb-1 w-100%'>
|
||||
MAIN SCHEDULE:
|
||||
</Text>
|
||||
<div>
|
||||
<Text variant='h3' className='text-theme-black leading-[75%]!'>
|
||||
{activeSchedule ? activeSchedule.hours : 0} HOURS
|
||||
</Text>
|
||||
<Text variant='h4' className='ml-2.5 text-ut-black leading-[75%]!'>
|
||||
{activeSchedule ? activeSchedule.courses.length : 0} Courses
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<Text className='text-ut-burntorange text-2xl font-normal'>
|
||||
{expanded ? <DropdownArrowDown /> : <DropdownArrowUp />}
|
||||
</Text>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
||||
<Transition
|
||||
enter='transition duration-100 ease-out'
|
||||
enterFrom='transform scale-95 opacity-0'
|
||||
enterTo='transform scale-100 opacity-100'
|
||||
leave='transition duration-75 ease-out'
|
||||
leaveFrom='transform scale-100 opacity-100'
|
||||
leaveTo='transform scale-95 opacity-0'
|
||||
beforeEnter={() => {
|
||||
toggleSwitch();
|
||||
}}
|
||||
afterLeave={() => {
|
||||
toggleSwitch();
|
||||
}}
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<List
|
||||
draggableElements={scheduleComponents}
|
||||
itemHeight={30}
|
||||
listHeight={30}
|
||||
listWidth={240}
|
||||
gap={10}
|
||||
/>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</Disclosure>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -135,8 +135,7 @@ const List: React.FC<ListProps> = ({ draggableElements, itemHeight, listHeight,
|
||||
<div
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
style={{ width: `${listWidth}px` }}
|
||||
className=''
|
||||
style={{ width: `${listWidth}px`, marginBottom: `-${gap}px` }}
|
||||
>
|
||||
{items.map((item, index) => (
|
||||
<Draggable key={item.id} draggableId={item.id} index={index}>
|
||||
@@ -144,14 +143,15 @@ const List: React.FC<ListProps> = ({ draggableElements, itemHeight, listHeight,
|
||||
<div
|
||||
ref={draggableProvided.innerRef}
|
||||
{...draggableProvided.draggableProps}
|
||||
{...draggableProvided.dragHandleProps}
|
||||
style={{
|
||||
...draggableProvided.draggableProps.style,
|
||||
// if last item, don't add margin
|
||||
marginBottom: index === items.length - 1 ? '0px' : `${gap}px`,
|
||||
marginBottom: `${gap}px`,
|
||||
}}
|
||||
>
|
||||
{item.content}
|
||||
{React.cloneElement(item.content, {
|
||||
dragHandleProps: draggableProvided.dragHandleProps,
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import clsx from 'clsx';
|
||||
import React, { useState } from 'react';
|
||||
import { Course, Status } from '@shared/types/Course';
|
||||
import { CourseColors, pickFontColor } from '@shared/util/colors';
|
||||
import { StatusIcon } from '@shared/util/icons';
|
||||
import { CourseColors, getCourseColors, pickFontColor } from '@shared/util/colors';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
|
||||
import Text from '../Text/Text';
|
||||
|
||||
@@ -21,7 +21,12 @@ export interface PopupCourseBlockProps {
|
||||
*
|
||||
* @param props PopupCourseBlockProps
|
||||
*/
|
||||
export default function PopupCourseBlock({ className, course, colors, dragHandleProps }: PopupCourseBlockProps): JSX.Element {
|
||||
export default function PopupCourseBlock({
|
||||
className,
|
||||
course,
|
||||
colors,
|
||||
dragHandleProps,
|
||||
}: PopupCourseBlockProps): JSX.Element {
|
||||
// whiteText based on secondaryColor
|
||||
const fontColor = pickFontColor(colors.primaryColor);
|
||||
|
||||
@@ -41,10 +46,7 @@ export default function PopupCourseBlock({ className, course, colors, dragHandle
|
||||
>
|
||||
<DragIndicatorIcon className='h-6 w-6 text-white' />
|
||||
</div>
|
||||
<Text
|
||||
className={clsx('flex-1 py-3.5 text-ellipsis whitespace-nowrap overflow-hidden', fontColor)}
|
||||
variant='h1-course'
|
||||
>
|
||||
<Text className={clsx('flex-1 py-3.5 truncate', fontColor)} variant='h1-course'>
|
||||
<span className='px-0.5 font-450'>{course.uniqueId}</span> {course.department} {course.number} –{' '}
|
||||
{course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}
|
||||
</Text>
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
|
||||
import Text from '../Text/Text';
|
||||
|
||||
export type Props = {
|
||||
style?: React.CSSProperties;
|
||||
active?: boolean;
|
||||
name: string;
|
||||
dragHandleProps?: any;
|
||||
};
|
||||
|
||||
/**
|
||||
* This is a reusable dropdown component that can be used to toggle the visiblity of information
|
||||
*/
|
||||
export default function ScheduleListItem(props: Props) {
|
||||
const { dragHandleProps } = props;
|
||||
console.log(props);
|
||||
return (
|
||||
<div style={{ ...props.style }} className='items-center'>
|
||||
<li className='text-ut-burntorange w-100% flex cursor-pointer items-center self-stretch justify-left'>
|
||||
<div className='group flex justify-center'>
|
||||
<div
|
||||
className='flex cursor-move items-center self-stretch rounded rounded-r-0'
|
||||
{...dragHandleProps}
|
||||
>
|
||||
<DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
|
||||
</div>
|
||||
<div className='inline-flex items-center justify-center gap-1.5'>
|
||||
<div className='h-5.5 w-5.5 flex items-center justify-center border-2px border-current rounded-full btn-transition group-active:scale-95'>
|
||||
<div
|
||||
className={clsx(
|
||||
'bg-current h-3 w-3 rounded-full transition tansform scale-100 ease-out-expo duration-250',
|
||||
{
|
||||
'scale-0! opacity-0 ease-in-out! duration-200!': !props.active,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Text variant='p'>{props.name}</Text>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -15,27 +15,19 @@ export interface ScheduleTotalHoursAndCoursesProps {
|
||||
*
|
||||
* @param props ScheduleTotalHoursAndCoursesProps
|
||||
*/
|
||||
export default function ScheduleTotalHoursAndCoursess({ scheduleName, totalHours, totalCourses }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
|
||||
export default function ScheduleTotalHoursAndCourses({
|
||||
scheduleName,
|
||||
totalHours,
|
||||
totalCourses,
|
||||
}: ScheduleTotalHoursAndCoursesProps): JSX.Element {
|
||||
return (
|
||||
<div className="min-w-64 flex flex-wrap content-center items-baseline gap-2 uppercase">
|
||||
<Text
|
||||
className="text-[#BF5700]"
|
||||
variant='h1'
|
||||
as='span'
|
||||
>
|
||||
<div className='min-w-64 flex whitespace-nowrap content-center items-baseline gap-2 uppercase'>
|
||||
<Text className='text-[#BF5700]' variant='h1' as='span'>
|
||||
{`${scheduleName}: `}
|
||||
</Text>
|
||||
<Text
|
||||
variant='h3'
|
||||
as='div'
|
||||
className="flex flex-row items-center gap-2 text-[#1A2024]"
|
||||
>
|
||||
<Text variant='h3' as='div' className='flex flex-row items-center gap-2 text-[#1A2024]'>
|
||||
{`${totalHours} HOURS`}
|
||||
<Text
|
||||
variant='h4'
|
||||
as='span'
|
||||
className="text-[#333F48]"
|
||||
>
|
||||
<Text variant='h4' as='span' className='text-[#333F48]'>
|
||||
{`${totalCourses} courses`}
|
||||
</Text>
|
||||
</Text>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { background } from '@shared/messages';
|
||||
import { Course } from '@shared/types/Course';
|
||||
import { UserSchedule } from '@shared/types/UserSchedule';
|
||||
import React from 'react';
|
||||
import { Button } from '@views/components/common/Button/Button';
|
||||
import Card from '@views/components/common/Card/Card';
|
||||
import Icon from '@views/components/common/Icon/Icon';
|
||||
import Text from '@views/components/common/Text/Text';
|
||||
import React from 'react';
|
||||
import styles from './CourseButtons.module.scss';
|
||||
|
||||
type Props = {
|
||||
@@ -83,48 +83,43 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
|
||||
<Button
|
||||
onClick={openRateMyProfessorURL}
|
||||
disabled={!course.instructors.length}
|
||||
variant='primary'
|
||||
variant='filled'
|
||||
className={styles.button}
|
||||
color='ut-black'
|
||||
title='Search for this professor on RateMyProfessor'
|
||||
>
|
||||
<Text /* size='medium' weight='regular' */color='white'>
|
||||
RateMyProf
|
||||
</Text>
|
||||
<Text /* size='medium' weight='regular' */ color='white'>RateMyProf</Text>
|
||||
<Icon className={styles.icon} color='white' name='school' size='medium' />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={openSyllabiURL}
|
||||
variant='secondary'
|
||||
variant='filled'
|
||||
className={styles.button}
|
||||
color='ut-black'
|
||||
title='Search for syllabi for this course'
|
||||
>
|
||||
<Text /* size='medium' weight='regular' */ color='white'>
|
||||
Syllabi
|
||||
</Text>
|
||||
<Text /* size='medium' weight='regular' */ color='white'>Syllabi</Text>
|
||||
<Icon className={styles.icon} color='white' name='grading' size='medium' />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={openTextbookURL}
|
||||
variant='tertiary'
|
||||
variant='filled'
|
||||
className={styles.button}
|
||||
color='ut-black'
|
||||
title='Search for textbooks for this course'
|
||||
>
|
||||
<Text /* size='medium' weight='regular' color='white' */>
|
||||
Textbook
|
||||
</Text>
|
||||
<Text /* size='medium' weight='regular' color='white' */>Textbook</Text>
|
||||
<Icon className={styles.icon} color='white' name='collections_bookmark' size='medium' />
|
||||
</Button>
|
||||
<Button
|
||||
disabled={!activeSchedule}
|
||||
onClick={isCourseSaved ? handleRemoveCourse : handleSaveCourse}
|
||||
title={isCourseSaved ? 'Remove this course from your schedule' : 'Add this course to your schedule'}
|
||||
variant={isCourseSaved ? 'danger' : 'success'}
|
||||
variant='filled'
|
||||
className={styles.button}
|
||||
color='ut-black'
|
||||
>
|
||||
|
||||
<Text /* size='medium' weight='regular' color='white' */ >
|
||||
{isCourseSaved ? 'Remove' : 'Add'}
|
||||
</Text>
|
||||
<Text /* size='medium' weight='regular' color='white' */>{isCourseSaved ? 'Remove' : 'Add'}</Text>
|
||||
<Icon className={styles.icon} color='white' name={isCourseSaved ? 'remove' : 'add'} size='medium' />
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
@@ -5,8 +5,11 @@ import Card from '@views/components/common/Card/Card';
|
||||
import Icon from '@views/components/common/Icon/Icon';
|
||||
import Link from '@views/components/common/Link/Link';
|
||||
import Text from '@views/components/common/Text/Text';
|
||||
// import CourseButtons from './CourseButtons/CourseButtons';
|
||||
import { Button } from 'src/views/components/common/Button/Button';
|
||||
import CourseButtons from './CourseButtons/CourseButtons';
|
||||
import styles from './CourseHeader.module.scss';
|
||||
import CopyIcon from '~icons/material-symbols/content-copy';
|
||||
import CloseIcon from '~icons/material-symbols/close';
|
||||
|
||||
type Props = {
|
||||
course: Course;
|
||||
@@ -19,86 +22,112 @@ type Props = {
|
||||
* It displays the course name, unique id, instructors, and schedule, all formatted nicely.
|
||||
*/
|
||||
export default function CourseHeader({ course, activeSchedule, onClose }: Props) {
|
||||
const getBuildingUrl = (building?: string): string | undefined => {
|
||||
if (!building) return undefined;
|
||||
return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`;
|
||||
};
|
||||
// const getBuildingUrl = (building?: string): string | undefined => {
|
||||
// if (!building) return undefined;
|
||||
// return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`;
|
||||
// };
|
||||
|
||||
return (
|
||||
<Card className={styles.header}>
|
||||
<Icon className={styles.close} /* size='large' */ name='close' onClick={onClose} />
|
||||
<div className={styles.title}>
|
||||
<Text className={styles.courseName} /* size='large' weight='bold' color='black' */>
|
||||
{course.courseName} ({course.department} {course.number})
|
||||
<div className='mx-6 my-5'>
|
||||
<div className='flex items-center justify-start'>
|
||||
<Text variant='h1' className='shrink truncate'>
|
||||
{course.courseName}
|
||||
</Text>
|
||||
<Link
|
||||
url={course.url}
|
||||
className={styles.uniqueId}
|
||||
/* size='medium'
|
||||
weight='semi_bold' */
|
||||
color='burnt_orange'
|
||||
title='View course details on UT Course Schedule'
|
||||
>
|
||||
#{course.uniqueId}
|
||||
</Link>
|
||||
<Text variant='h1' className='ml-1 shrink-0'>
|
||||
{`(${course.department} ${course.number})`}
|
||||
</Text>
|
||||
<div className='ml-auto min-w-fit flex shrink-0 gap-0'>
|
||||
<Button icon={CopyIcon} variant='single' className='mr-1 px-2' color='ut-burntorange'>
|
||||
{course.uniqueId}
|
||||
</Button>
|
||||
<button className='btn bg-transparent p-0'>
|
||||
<CloseIcon className='h-7 w-7' />
|
||||
</button>
|
||||
</div>
|
||||
<Text /* size='medium' className={styles.instructors} */>
|
||||
{`with ${!course.instructors.length ? 'TBA' : ''}`}
|
||||
{course.instructors.map((instructor, index) => {
|
||||
const name = instructor.toString({
|
||||
format: 'first_last',
|
||||
case: 'capitalize',
|
||||
});
|
||||
|
||||
const url = instructor.getDirectoryUrl();
|
||||
const numInstructors = course.instructors.length;
|
||||
const isLast = course.instructors.length > 1 && index === course.instructors.length - 1;
|
||||
return (
|
||||
<span key={name}>
|
||||
{numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''}
|
||||
<Link
|
||||
key={name}
|
||||
/* size='medium'
|
||||
weight='normal' */
|
||||
url={url}
|
||||
title="View instructor's directory page"
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
{numInstructors > 2 && !isLast ? ', ' : ''}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</Text>
|
||||
{course.schedule.meetings.map(meeting => (
|
||||
<Text /* size='medium' */ className={styles.meeting} key={meeting.startTime}>
|
||||
<Text as='span' /* size='medium' weight='bold' */ color='black'>
|
||||
{meeting.getDaysString({
|
||||
format: 'long',
|
||||
separator: 'short',
|
||||
})}
|
||||
</Text>
|
||||
{' at '}
|
||||
<Text as='span' /* size='medium' */>
|
||||
{meeting.getTimeString({
|
||||
separator: 'to',
|
||||
capitalize: true,
|
||||
})}
|
||||
</Text>
|
||||
{' in '}
|
||||
<Link
|
||||
/* size='medium'
|
||||
weight='normal' */
|
||||
title='View building on UT Map'
|
||||
url={getBuildingUrl(meeting.location?.building)}
|
||||
disabled={!meeting.location?.building}
|
||||
>
|
||||
{meeting.location?.building ?? 'TBA'}
|
||||
</Link>
|
||||
</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text variant='p'>
|
||||
with{' '}
|
||||
{course.instructors.map(instructor => (
|
||||
<span className=''>{instructor.lastName}</span>
|
||||
))}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
// <Card className={styles.header}>
|
||||
// <Icon className={styles.close} /* size='large' */ name='close' onClick={onClose} />
|
||||
// <div className={styles.title}>
|
||||
// <Text className={styles.courseName} /* size='large' weight='bold' color='black' */>
|
||||
// {course.courseName} ({course.department} {course.number}) blahhhhh
|
||||
// </Text>
|
||||
// <Link
|
||||
// url={course.url}
|
||||
// className={styles.uniqueId}
|
||||
// /* size='medium'
|
||||
// weight='semi_bold' */
|
||||
// color='burnt_orange'
|
||||
// title='View course details on UT Course Schedule'
|
||||
// >
|
||||
// #{course.uniqueId}
|
||||
// </Link>
|
||||
// </div>
|
||||
// <Text /* size='medium' className={styles.instructors} */>
|
||||
// {`with ${!course.instructors.length ? 'TBA' : ''}`}
|
||||
// {course.instructors.map((instructor, index) => {
|
||||
// const name = instructor.toString({
|
||||
// format: 'first_last',
|
||||
// case: 'capitalize',
|
||||
// });
|
||||
|
||||
{/* <CourseButtons course={course} activeSchedule={activeSchedule} /> */}
|
||||
</Card>
|
||||
// const url = instructor.getDirectoryUrl();
|
||||
// const numInstructors = course.instructors.length;
|
||||
// const isLast = course.instructors.length > 1 && index === course.instructors.length - 1;
|
||||
// return (
|
||||
// <span key={name}>
|
||||
// {numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''}
|
||||
// <Link
|
||||
// key={name}
|
||||
// /* size='medium'
|
||||
// weight='normal' */
|
||||
// url={url}
|
||||
// title="View instructor's directory page"
|
||||
// >
|
||||
// {name}
|
||||
// </Link>
|
||||
// {numInstructors > 2 && !isLast ? ', ' : ''}
|
||||
// </span>
|
||||
// );
|
||||
// })}
|
||||
// </Text>
|
||||
// {course.schedule.meetings.map(meeting => (
|
||||
// <Text /* size='medium' */ className={styles.meeting} key={meeting.startTime}>
|
||||
// <Text as='span' /* size='medium' weight='bold' */ color='black'>
|
||||
// {meeting.getDaysString({
|
||||
// format: 'long',
|
||||
// separator: 'short',
|
||||
// })}
|
||||
// </Text>
|
||||
// {' at '}
|
||||
// <Text as='span' /* size='medium' */>
|
||||
// {meeting.getTimeString({
|
||||
// separator: 'to',
|
||||
// capitalize: true,
|
||||
// })}
|
||||
// </Text>
|
||||
// {' in '}
|
||||
// <Link
|
||||
// /* size='medium'
|
||||
// weight='normal' */
|
||||
// title='View building on UT Map'
|
||||
// url={getBuildingUrl(meeting.location?.building)}
|
||||
// disabled={!meeting.location?.building}
|
||||
// >
|
||||
// {meeting.location?.building ?? 'TBA'}
|
||||
// </Link>
|
||||
// </Text>
|
||||
// ))}
|
||||
|
||||
// <CourseButtons course={course} activeSchedule={activeSchedule} />
|
||||
// </Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,9 +3,9 @@ import { UserSchedule } from '@shared/types/UserSchedule';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Button } from '../../common/Button/Button';
|
||||
import Icon from '../../common/Icon/Icon';
|
||||
import Text from '../../common/Text/Text';
|
||||
import styles from './TableRow.module.scss';
|
||||
import ConflictsWithWarning from '../../common/ConflictsWithWarning/ConflictsWithWarning';
|
||||
import AddIcon from '~icons/material-symbols/add-circle';
|
||||
|
||||
interface Props {
|
||||
isSelected: boolean;
|
||||
@@ -54,7 +54,7 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
|
||||
return () => {
|
||||
element.classList.remove(styles.inActiveSchedule);
|
||||
};
|
||||
}, [activeSchedule, element.classList]);
|
||||
}, [activeSchedule, course, element.classList]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeSchedule || !course) {
|
||||
@@ -84,20 +84,14 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
|
||||
|
||||
return ReactDOM.createPortal(
|
||||
<>
|
||||
<Button className={styles.rowButton} onClick={onClick} variant='secondary'>
|
||||
<Icon name='bar_chart' color='white' size='medium' />
|
||||
</Button>
|
||||
{conflicts.length > 0 && (
|
||||
<div className={styles.conflictTooltip}>
|
||||
<div className={styles.body}>
|
||||
{conflicts.map(c => (
|
||||
<Text /* size='small' */ key={c.uniqueId}>
|
||||
{c.department} {c.number} ({c.uniqueId})
|
||||
</Text>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
icon={AddIcon}
|
||||
className={styles.rowButton}
|
||||
color='ut-burntorange'
|
||||
onClick={onClick}
|
||||
variant='single'
|
||||
/>
|
||||
{conflicts.length > 0 && <ConflictsWithWarning className={styles.conflictTooltip} conflicts={conflicts} />}
|
||||
</>,
|
||||
container
|
||||
);
|
||||
|
||||
102
src/views/hooks/useFlattenedCourseSchedule.ts
Normal file
102
src/views/hooks/useFlattenedCourseSchedule.ts
Normal file
@@ -0,0 +1,102 @@
|
||||
import { CalendarCourseCellProps } from 'src/views/components/common/CalendarCourseCell/CalendarCourseCell';
|
||||
import useSchedules from './useSchedules';
|
||||
|
||||
const dayToNumber: { [day: string]: number } = {
|
||||
Monday: 0,
|
||||
Tuesday: 1,
|
||||
Wednesday: 2,
|
||||
Thursday: 3,
|
||||
Friday: 4,
|
||||
};
|
||||
|
||||
interface CalendarGridPoint {
|
||||
dayIndex: number;
|
||||
startIndex: number;
|
||||
endIndex: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return type of useFlattenedCourseSchedule
|
||||
*/
|
||||
export interface CalendarGridCourse {
|
||||
calendarGridPoint: CalendarGridPoint;
|
||||
componentProps: CalendarCourseCellProps;
|
||||
}
|
||||
|
||||
const convertMinutesToIndex = (minutes: number): number => Math.floor(minutes - 420 / 30);
|
||||
|
||||
/**
|
||||
* Get the active schedule, and convert it to be render-able into a calendar.
|
||||
* @returns CalendarGridCourse
|
||||
*/
|
||||
export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
|
||||
const [activeSchedule] = useSchedules();
|
||||
const { courses } = activeSchedule;
|
||||
|
||||
return courses
|
||||
.flatMap(course => {
|
||||
const {
|
||||
status,
|
||||
department,
|
||||
instructors,
|
||||
schedule: { meetings },
|
||||
} = course;
|
||||
const courseDeptAndInstr = `${department} ${instructors[0].lastName}`;
|
||||
|
||||
if (meetings.length === 0) {
|
||||
// asynch, online course
|
||||
return [
|
||||
{
|
||||
calendarGridPoint: {
|
||||
dayIndex: 0,
|
||||
startIndex: 0,
|
||||
endIndex: 0,
|
||||
},
|
||||
componentProps: {
|
||||
courseDeptAndInstr,
|
||||
status,
|
||||
colors: {
|
||||
// TODO: figure out colors - these are defaults
|
||||
primaryColor: 'ut-gray',
|
||||
secondaryColor: 'ut-gray',
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// in-person
|
||||
return meetings.flatMap(meeting => {
|
||||
const { days, startTime, endTime, location } = meeting;
|
||||
const time = meeting.getTimeString({ separator: '-', capitalize: true });
|
||||
const timeAndLocation = `${time} - ${location ? location.building : 'WB'}`;
|
||||
|
||||
return days.map(d => ({
|
||||
calendarGridPoint: {
|
||||
dayIndex: dayToNumber[d],
|
||||
startIndex: convertMinutesToIndex(startTime),
|
||||
endIndex: convertMinutesToIndex(endTime),
|
||||
},
|
||||
componentProps: {
|
||||
courseDeptAndInstr,
|
||||
timeAndLocation,
|
||||
status,
|
||||
colors: {
|
||||
// TODO: figure out colors - these are defaults
|
||||
primaryColor: 'ut-orange',
|
||||
secondaryColor: 'ut-orange',
|
||||
},
|
||||
},
|
||||
}));
|
||||
});
|
||||
})
|
||||
.sort((a: CalendarGridCourse, b: CalendarGridCourse) => {
|
||||
if (a.calendarGridPoint.dayIndex !== b.calendarGridPoint.dayIndex) {
|
||||
return a.calendarGridPoint.dayIndex - b.calendarGridPoint.dayIndex;
|
||||
}
|
||||
if (a.calendarGridPoint.startIndex !== b.calendarGridPoint.startIndex) {
|
||||
return a.calendarGridPoint.startIndex - b.calendarGridPoint.startIndex;
|
||||
}
|
||||
return a.calendarGridPoint.endIndex - b.calendarGridPoint.endIndex;
|
||||
});
|
||||
}
|
||||
@@ -7,18 +7,9 @@ import { colors } from './src/shared/util/themeColors';
|
||||
|
||||
export default defineConfig({
|
||||
rules: [
|
||||
['btn-transition', { transition: 'color 180ms, border-color 150ms, background-color 150ms, transform 50ms' }],
|
||||
[
|
||||
'btn-shadow',
|
||||
{
|
||||
'box-shadow': '0px 1px 3px 1px var(--shadow-color-15), 0px 1px 2px 0px var(--shadow-color-30);',
|
||||
},
|
||||
],
|
||||
[
|
||||
'btn-shade',
|
||||
{
|
||||
'background-color': 'var(--bg-color-8)',
|
||||
},
|
||||
'btn-transition',
|
||||
{ transition: 'color 180ms, border-color 150ms, background-color 150ms, box-shadow 100ms, transform 50ms' },
|
||||
],
|
||||
[
|
||||
'ring-offset-0',
|
||||
@@ -29,7 +20,7 @@ export default defineConfig({
|
||||
],
|
||||
shortcuts: {
|
||||
focusable: 'outline-none ring-blue-500/50 dark:ring-blue-400/60 ring-0 focus-visible:ring-4',
|
||||
btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 btn-transition',
|
||||
btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 btn-transition btn-transition disabled:(cursor-not-allowed opacity-50) active:enabled:scale-96 focusable',
|
||||
},
|
||||
theme: {
|
||||
easing: {
|
||||
|
||||
Reference in New Issue
Block a user