chore: merge and fix conflicts
This commit is contained in:
Razboy20
215
.eslintrc
Normal file
215
.eslintrc
Normal file
@@ -0,0 +1,215 @@
|
|||||||
|
{
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es6": true,
|
||||||
|
"node": true,
|
||||||
|
"webextensions": true
|
||||||
|
},
|
||||||
|
"ignorePatterns": [
|
||||||
|
"*.html",
|
||||||
|
"tsconfig.json"
|
||||||
|
],
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:react/recommended",
|
||||||
|
"plugin:react-hooks/recommended",
|
||||||
|
"plugin:storybook/recommended",
|
||||||
|
"airbnb-base",
|
||||||
|
"airbnb/rules/react",
|
||||||
|
"airbnb-typescript",
|
||||||
|
"@unocss",
|
||||||
|
"prettier",
|
||||||
|
],
|
||||||
|
"plugins": [
|
||||||
|
"import",
|
||||||
|
"jsdoc",
|
||||||
|
"react-prefer-function-component"
|
||||||
|
],
|
||||||
|
"globals": {
|
||||||
|
"Atomics": "readonly",
|
||||||
|
"SharedArrayBuffer": "readonly",
|
||||||
|
"debugger": true,
|
||||||
|
"browser": true,
|
||||||
|
"context": true,
|
||||||
|
"JSX": true
|
||||||
|
},
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"parserOptions": {
|
||||||
|
"project": "./tsconfig.json",
|
||||||
|
"ecmaVersion": 2022,
|
||||||
|
"sourceType": "module",
|
||||||
|
"ecmaFeatures": {
|
||||||
|
"jsx": true,
|
||||||
|
"modules": true,
|
||||||
|
"experimentalObjectRestSpread": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"settings": {
|
||||||
|
"react": {
|
||||||
|
"version": "detect"
|
||||||
|
},
|
||||||
|
"jsdoc": {
|
||||||
|
"mode": "typescript"
|
||||||
|
},
|
||||||
|
"import/parsers": {
|
||||||
|
"@typescript-eslint/parser": [
|
||||||
|
".ts",
|
||||||
|
".tsx"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"import/resolver": {
|
||||||
|
"typescript": {
|
||||||
|
"alwaysTryTypes": true,
|
||||||
|
"project": "./tsconfig.json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"prefer-const": [
|
||||||
|
"off",
|
||||||
|
{
|
||||||
|
"destructuring": "any",
|
||||||
|
"ignoreReadBeforeAssign": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"no-inner-declarations": "off",
|
||||||
|
"sort-imports": "off",
|
||||||
|
"no-case-declarations": "off",
|
||||||
|
"no-unreachable": "warn",
|
||||||
|
"no-constant-condition": "error",
|
||||||
|
"space-before-function-paren": "off",
|
||||||
|
"no-undef": "off",
|
||||||
|
"no-return-await": "off",
|
||||||
|
"@typescript-eslint/return-await": "off",
|
||||||
|
"@typescript-eslint/no-shadow": [
|
||||||
|
"off"
|
||||||
|
],
|
||||||
|
"@typescript-eslint/no-use-before-define": [
|
||||||
|
"off"
|
||||||
|
],
|
||||||
|
"class-methods-use-this": "off",
|
||||||
|
"react-hooks/exhaustive-deps": "warn",
|
||||||
|
"@typescript-eslint/lines-between-class-members": "off",
|
||||||
|
"no-param-reassign": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"props": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"no-console": "off",
|
||||||
|
"consistent-return": "off",
|
||||||
|
"react/destructuring-assignment": "off",
|
||||||
|
"import/prefer-default-export": "off",
|
||||||
|
"no-promise-executor-return": "off",
|
||||||
|
"import/no-cycle": "off",
|
||||||
|
"import/no-extraneous-dependencies": "off",
|
||||||
|
"react/jsx-props-no-spreading": "off",
|
||||||
|
"keyword-spacing": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"before": true,
|
||||||
|
"after": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"no-continue": "off",
|
||||||
|
"space-before-blocks": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"functions": "always",
|
||||||
|
"keywords": "always",
|
||||||
|
"classes": "always"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"react/jsx-filename-extension": [
|
||||||
|
1,
|
||||||
|
{
|
||||||
|
"extensions": [
|
||||||
|
".tsx"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"react/no-deprecated": "warn",
|
||||||
|
"react/prop-types": "off",
|
||||||
|
"react-prefer-function-component/react-prefer-function-component": [
|
||||||
|
"warn",
|
||||||
|
{
|
||||||
|
"allowComponentDidCatch": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"react/function-component-definition": "off",
|
||||||
|
"react/button-has-type": "off",
|
||||||
|
"jsdoc/require-param-type": "off",
|
||||||
|
"jsdoc/require-returns-type": "off",
|
||||||
|
"jsdoc/newline-after-description": "off",
|
||||||
|
"react/require-default-props": "off",
|
||||||
|
"jsdoc/require-jsdoc": [
|
||||||
|
"warn",
|
||||||
|
{
|
||||||
|
"enableFixer": false,
|
||||||
|
"publicOnly": true,
|
||||||
|
"checkConstructors": false,
|
||||||
|
"require": {
|
||||||
|
"ArrowFunctionExpression": true,
|
||||||
|
"ClassDeclaration": true,
|
||||||
|
"ClassExpression": true,
|
||||||
|
"FunctionExpression": true
|
||||||
|
},
|
||||||
|
"contexts": [
|
||||||
|
"MethodDefinition:not([key.name=\"componentDidMount\"]):not([key.name=\"render\"])",
|
||||||
|
"ArrowFunctionExpression",
|
||||||
|
"ClassDeclaration",
|
||||||
|
"ClassExpression",
|
||||||
|
"ClassProperty:not([key.name=\"state\"]):not([key.name=\"componentDidMount\"])",
|
||||||
|
"FunctionDeclaration",
|
||||||
|
"FunctionExpression",
|
||||||
|
"TSDeclareFunction",
|
||||||
|
"TSEnumDeclaration",
|
||||||
|
"TSInterfaceDeclaration",
|
||||||
|
"TSMethodSignature",
|
||||||
|
"TSModuleDeclaration",
|
||||||
|
"TSTypeAliasDeclaration"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"@typescript-eslint/no-explicit-any": "off",
|
||||||
|
"@typescript-eslint/no-unused-vars": "warn",
|
||||||
|
"@typescript-eslint/naming-convention": "off",
|
||||||
|
"@typescript-eslint/space-before-function-paren": "off",
|
||||||
|
"@typescript-eslint/ban-ts-comment": "off",
|
||||||
|
"@typescript-eslint/no-empty-interface": "warn",
|
||||||
|
"import/no-restricted-paths": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"zones": [
|
||||||
|
{
|
||||||
|
"target": "./src/background",
|
||||||
|
"from": "./src/views",
|
||||||
|
"message": "You cannot import into the `background` directory from the `views` directory (i.e. content script files) because it will break the build!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"target": "./src/views",
|
||||||
|
"from": "./src/background",
|
||||||
|
"message": "You cannot import into the `views` directory from the `background` directory (i.e. background script files) because it will break the build!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"target": "./src/shared",
|
||||||
|
"from": "./",
|
||||||
|
"except": [
|
||||||
|
"./src/shared",
|
||||||
|
"./node_modules"
|
||||||
|
],
|
||||||
|
"message": "You cannot import into `shared` from an external directory."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"import/extensions": "off",
|
||||||
|
"no-restricted-syntax": [
|
||||||
|
"error",
|
||||||
|
"ForInStatement",
|
||||||
|
"LabeledStatement",
|
||||||
|
"WithStatement"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
@@ -4942,12 +4942,8 @@ packages:
|
|||||||
resolution: {integrity: sha512-2wMrkCj3SSb5hrx9TKs5jZa34QIRkHv9FotbJutAPo7o8hx+XXn56ogzdoUrcFPJZJUx2R2nyOVbSlGMIjtFtw==}
|
resolution: {integrity: sha512-2wMrkCj3SSb5hrx9TKs5jZa34QIRkHv9FotbJutAPo7o8hx+XXn56ogzdoUrcFPJZJUx2R2nyOVbSlGMIjtFtw==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@unocss/reset@0.58.5:
|
/@unocss/rule-utils@0.58.5:
|
||||||
resolution: {integrity: sha512-2wMrkCj3SSb5hrx9TKs5jZa34QIRkHv9FotbJutAPo7o8hx+XXn56ogzdoUrcFPJZJUx2R2nyOVbSlGMIjtFtw==}
|
resolution: {integrity: sha512-w0sGJoeUGwMWLVFLEE9PDiv/fQcQqZnTIIQLYNCjTdqXDRlwTp9ACW0h47x/hAAIXdOtEOOBuTfjGD79GznUmA==}
|
||||||
dev: false
|
|
||||||
|
|
||||||
/@unocss/rule-utils@0.58.4:
|
|
||||||
resolution: {integrity: sha512-52Jp4I+joGTaDm7ehB/7uZ2kJL+9BZcYRDUVk4IDacDH5W9yxf1F75LzYT8jJVWXD/HIhiS0r9V6qhcBq2OWZw==}
|
|
||||||
engines: {node: '>=14'}
|
engines: {node: '>=14'}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@unocss/core': 0.58.5
|
'@unocss/core': 0.58.5
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
67
src/stories/components/CalendarCourseCell.stories.tsx
Normal file
67
src/stories/components/CalendarCourseCell.stories.tsx
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
import { Course, Status } from '@shared/types/Course';
|
||||||
|
import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
|
||||||
|
import { CourseSchedule } from '@shared/types/CourseSchedule';
|
||||||
|
import Instructor from '@shared/types/Instructor';
|
||||||
|
import type { Meta, StoryObj } from '@storybook/react';
|
||||||
|
import CalendarCourseCell from '@views/components/common/CalendarCourseCell/CalendarCourseCell';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: 'Components/Common/CalendarCourseCell',
|
||||||
|
component: CalendarCourseCell,
|
||||||
|
parameters: {
|
||||||
|
layout: 'centered',
|
||||||
|
},
|
||||||
|
tags: ['autodocs'],
|
||||||
|
argTypes: {
|
||||||
|
course: { control: 'object' },
|
||||||
|
meetingIdx: { control: 'number' },
|
||||||
|
color: { control: 'color' },
|
||||||
|
},
|
||||||
|
render: (args: any) => (
|
||||||
|
<div className='w-45'>
|
||||||
|
<CalendarCourseCell {...args} />
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
} 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',
|
||||||
|
},
|
||||||
|
};
|
||||||
18
src/stories/components/CalendarGrid.stories.tsx
Normal file
18
src/stories/components/CalendarGrid.stories.tsx
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
// Calendar.stories.tsx
|
||||||
|
import type { Meta, StoryObj } from '@storybook/react';
|
||||||
|
import Calendar from '@views/components/common/CalendarGrid/CalendarGrid';
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: 'Components/Common/Calendar',
|
||||||
|
component: Calendar,
|
||||||
|
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>;
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
|
export const Default: Story = {};
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
@use 'sass:color';
|
|
||||||
@use 'src/views/styles/colors.module.scss';
|
|
||||||
|
|
||||||
.button {
|
|
||||||
padding: 0px 16px;
|
|
||||||
height: 40px;
|
|
||||||
margin: 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.1s ease-in-out;
|
|
||||||
font-family: 'Roboto';
|
|
||||||
font-size: 18px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: normal;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #fff;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: scale(0.96);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
cursor: not-allowed !important;
|
|
||||||
opacity: 0.5 !important;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.filled {
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
color: var(--color-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.outline {
|
|
||||||
background-color: var(--color-secondary);
|
|
||||||
color: var(--color-primary);
|
|
||||||
border: 1px solid var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.single {
|
|
||||||
background-color: var(--color-secondary);
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
import type { Course } from '@shared/types/Course';
|
||||||
|
import { Status } from '@shared/types/Course';
|
||||||
|
import type { CourseMeeting } from '@shared/types/CourseMeeting';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meetingIdx }: CalendarCourseBlockProps) => {
|
||||||
|
let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
|
||||||
|
let rightIcon: React.ReactNode | null = null;
|
||||||
|
if (course.status === Status.WAITLISTED) {
|
||||||
|
rightIcon = <WaitlistIcon className='h-5 w-5' />;
|
||||||
|
} else if (course.status === Status.CLOSED) {
|
||||||
|
rightIcon = <ClosedIcon className='h-5 w-5' />;
|
||||||
|
} else if (course.status === Status.CANCELLED) {
|
||||||
|
rightIcon = <CancelledIcon className='h-5 w-5' />;
|
||||||
|
}
|
||||||
|
|
||||||
|
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}
|
||||||
|
</Text>
|
||||||
|
<Text variant='h3-course' className='leading-[75%]!'>
|
||||||
|
{`${meeting.getTimeString({ separator: '–', capitalize: true })}${
|
||||||
|
meeting.location ? ` – ${meeting.location.building}` : ''
|
||||||
|
}`}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
{rightIcon && (
|
||||||
|
<div className='h-fit flex items-center justify-center justify-self-start rounded bg-slate-700 p-0.5 text-white'>
|
||||||
|
{rightIcon}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CalendarCourseBlock;
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
@use 'sass:color';
|
||||||
|
@use 'src/views/styles/colors.module.scss';
|
||||||
|
|
||||||
|
.dayLabelContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 13px;
|
||||||
|
min-width: 40px;
|
||||||
|
min-height: 13px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
flex: 1 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendarGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-template-rows: repeat(13, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendarRow {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar {
|
||||||
|
// display: grid;
|
||||||
|
// grid-template-columns: auto repeat(5, 1fr);
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day {
|
||||||
|
gap: 5px;
|
||||||
|
color: colors.$burnt_orange;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14.22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeAndGrid {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeColumn {
|
||||||
|
display: flex;
|
||||||
|
min-height: 573px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex: 1 0 0;
|
||||||
|
border-radius: var(--border-radius-none, 0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeBlock {
|
||||||
|
display: flex;
|
||||||
|
width: 50px;
|
||||||
|
height: 40.279px;
|
||||||
|
min-width: 50px;
|
||||||
|
max-width: 50px;
|
||||||
|
min-height: 40px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
.timeLabelContainer {
|
||||||
|
display: flex;
|
||||||
|
max-height: 20px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 17px;
|
||||||
|
flex: 1 0 0;
|
||||||
|
align-self: stretch;
|
||||||
|
border-radius: var(--border-radius-none, 0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #1A2024;
|
||||||
|
text-align: left;
|
||||||
|
height: 6.6px;
|
||||||
|
align-self: stretch;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
/* Type scale/small */
|
||||||
|
font-family: "Roboto Flex";
|
||||||
|
font-size: 14.22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
47
src/views/components/common/CalendarGrid/CalendarGrid.tsx
Normal file
47
src/views/components/common/CalendarGrid/CalendarGrid.tsx
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
import { DAY_MAP } from '@shared/types/CourseMeeting';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import CalendarCell from '../CalendarGridCell/CalendarGridCell';
|
||||||
|
import styles from './CalendarGrid.module.scss';
|
||||||
|
|
||||||
|
const daysOfWeek = Object.values(DAY_MAP).filter(d => d !== 'Saturday' && d !== 'Sunday');
|
||||||
|
const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
|
||||||
|
const grid = Array.from({ length: 5 }, () =>
|
||||||
|
Array.from({ length: 13 }, (_, columnIndex) => <CalendarCell key={columnIndex} />)
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Grid of CalendarGridCell components forming the user's course schedule calendar view
|
||||||
|
* @param props
|
||||||
|
*/
|
||||||
|
const Calendar: React.FC = props => (
|
||||||
|
<div className={styles.calendar}>
|
||||||
|
<div className={styles.dayLabelContainer}>
|
||||||
|
{/* Empty cell in the top-left corner */}
|
||||||
|
<div className={styles.day} />
|
||||||
|
{/* Displaying day labels */}
|
||||||
|
{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)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default Calendar;
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
.calendarCell {
|
||||||
|
display: flex;
|
||||||
|
width: 165px;
|
||||||
|
height: 52.231px;
|
||||||
|
min-width: 45px;
|
||||||
|
min-height: 40px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
border: 1px solid #dadce0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hourLine {
|
||||||
|
width: 165px;
|
||||||
|
height: 1px;
|
||||||
|
border-radius: var(--border-radius-none, 0px);
|
||||||
|
background: rgba(218, 220, 224, 0.25);
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import styles from './CalendarGridCell.module.scss';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Component representing each 1 hour time block of a calendar
|
||||||
|
* @param props
|
||||||
|
*/
|
||||||
|
const CalendarCell: React.FC = props => (
|
||||||
|
<div className={styles.calendarCell}>
|
||||||
|
<div className={styles.hourLine} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default CalendarCell;
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
import { Course } from '@shared/types/Course';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import Spinner from '@views/components/common/Spinner/Spinner';
|
||||||
|
import Text from '@views/components/common/Text/Text';
|
||||||
|
import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
|
||||||
|
import { SiteSupport } from '@views/lib/getSiteSupport';
|
||||||
|
import Card from '../../../common/Card/Card';
|
||||||
|
import styles from './CourseDescription.module.scss';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
course: Course;
|
||||||
|
};
|
||||||
|
|
||||||
|
enum LoadStatus {
|
||||||
|
LOADING = 'LOADING',
|
||||||
|
DONE = 'DONE',
|
||||||
|
ERROR = 'ERROR',
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
export default function CourseDescription({ course }: Props) {
|
||||||
|
const [description, setDescription] = useState<string[]>([]);
|
||||||
|
const [status, setStatus] = useState<LoadStatus>(LoadStatus.LOADING);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchDescription(course)
|
||||||
|
.then(description => {
|
||||||
|
setStatus(LoadStatus.DONE);
|
||||||
|
setDescription(description);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setStatus(LoadStatus.ERROR);
|
||||||
|
});
|
||||||
|
}, [course]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className={styles.container}>
|
||||||
|
{status === LoadStatus.ERROR && (
|
||||||
|
<Text color='speedway_brick' size='medium' weight='bold' align='center'>
|
||||||
|
Please refresh the page and log back in using your UT EID and password
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
{status === LoadStatus.LOADING && <Spinner className={styles.spinner} />}
|
||||||
|
{status === LoadStatus.DONE && (
|
||||||
|
<ul className={styles.description}>
|
||||||
|
{description.map(paragraph => (
|
||||||
|
<li key={paragraph}>
|
||||||
|
<DescriptionLine line={paragraph} />
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LineProps {
|
||||||
|
line: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DescriptionLine({ line }: LineProps) {
|
||||||
|
const lowerCaseLine = line.toLowerCase();
|
||||||
|
|
||||||
|
const className = clsx({
|
||||||
|
[styles.prerequisite]: lowerCaseLine.includes('prerequisite'),
|
||||||
|
[styles.onlyOne]:
|
||||||
|
lowerCaseLine.includes('may be') || lowerCaseLine.includes('only one') || lowerCaseLine.includes('may not'),
|
||||||
|
[styles.restriction]: lowerCaseLine.includes('restrict'),
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Text className={className} size='medium'>
|
||||||
|
{line}
|
||||||
|
</Text>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchDescription(course: Course): Promise<string[]> {
|
||||||
|
if (!course.description?.length) {
|
||||||
|
const response = await fetch(course.url);
|
||||||
|
const text = await response.text();
|
||||||
|
const doc = new DOMParser().parseFromString(text, 'text/html');
|
||||||
|
|
||||||
|
const scraper = new CourseCatalogScraper(SiteSupport.COURSE_CATALOG_DETAILS);
|
||||||
|
course.description = scraper.getDescription(doc);
|
||||||
|
}
|
||||||
|
return course.description;
|
||||||
|
}
|
||||||
@@ -8,16 +8,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $weight in '100' '300' '400' '500' '700' '900' {
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Roboto';
|
|
||||||
src: url('@public/fonts/roboto-#{$weight}.woff2') format('woff2');
|
|
||||||
font-display: auto;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: #{$weight};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Roboto Flex';
|
font-family: 'Roboto Flex';
|
||||||
src: url('@public/fonts/roboto-flex.woff2') format('woff2');
|
src: url('@public/fonts/roboto-flex.woff2') format('woff2');
|
||||||
|
|||||||
Reference in New Issue
Block a user