fix: build errors and restructure Calendar page
This commit is contained in:
knownotunknown
doprz
@@ -1,44 +0,0 @@
|
||||
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,34 +0,0 @@
|
||||
.component {
|
||||
display: flex;
|
||||
padding: 7px 7px 9px 7px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 5px;
|
||||
flex: 1 0 0;
|
||||
align-self: stretch;
|
||||
border-radius: 4px;
|
||||
background: #cbd5e1;
|
||||
.content {
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
.course-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
width: 154px;
|
||||
.course {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.time-and-location {
|
||||
font-size: 11px;
|
||||
line-height: 11px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Course } from 'src/shared/types/Course';
|
||||
import { CourseMeeting } from 'src/shared/types/CourseMeeting';
|
||||
import styles from './CalendarCourseMeeting.module.scss';
|
||||
|
||||
/**
|
||||
* Props for the CalendarCourseMeeting component.
|
||||
*/
|
||||
export interface CalendarCourseMeetingProps {
|
||||
/** 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;
|
||||
/** The icon to display on the right side of the course. This is optional. */
|
||||
rightIcon?: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* `CalendarCourseMeeting` is a functional component that displays a course meeting.
|
||||
*
|
||||
* @example
|
||||
* <CalendarCourseMeeting course={course} meeting={meeting} color="red" rightIcon={<Icon />} />
|
||||
*/
|
||||
const CalendarCourseMeeting: React.FC<CalendarCourseMeetingProps> = ({
|
||||
course,
|
||||
meetingIdx,
|
||||
}: CalendarCourseMeetingProps) => {
|
||||
let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
|
||||
return (
|
||||
<div className={styles.component}>
|
||||
<div className={styles.content}>
|
||||
<div className={styles['course-detail']}>
|
||||
<div className={styles.course}>
|
||||
{course.department} {course.number} - {course.instructors[0].lastName}
|
||||
</div>
|
||||
<div className={styles['time-and-location']}>
|
||||
{`${meeting.getTimeString({ separator: '-', capitalize: true })}${
|
||||
meeting.location ? ` - ${meeting.location.building}` : ''
|
||||
}`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CalendarCourseMeeting;
|
||||
@@ -1,85 +0,0 @@
|
||||
import { Status } from '@shared/types/Course';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
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 CalendarCourseCellProps {
|
||||
courseDeptAndInstr: string;
|
||||
timeAndLocation?: string;
|
||||
status: Status;
|
||||
colors: CourseColors;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
|
||||
courseDeptAndInstr,
|
||||
timeAndLocation,
|
||||
status,
|
||||
colors,
|
||||
className,
|
||||
}: CalendarCourseCellProps) => {
|
||||
let rightIcon: React.ReactNode | null = null;
|
||||
if (status === Status.WAITLISTED) {
|
||||
rightIcon = <WaitlistIcon className='h-5 w-5' />;
|
||||
} else if (status === Status.CLOSED) {
|
||||
rightIcon = <ClosedIcon className='h-5 w-5' />;
|
||||
} else if (status === Status.CANCELLED) {
|
||||
rightIcon = <CancelledIcon className='h-5 w-5' />;
|
||||
}
|
||||
|
||||
// whiteText based on secondaryColor
|
||||
const fontColor = pickFontColor(colors.primaryColor);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx('w-full flex justify-center rounded p-2', fontColor, className)}
|
||||
style={{
|
||||
backgroundColor: colors.primaryColor,
|
||||
}}
|
||||
>
|
||||
<<<<<<< HEAD
|
||||
<div className='flex flex-1 flex-col gap-1'>
|
||||
<Text variant='h1-course' className='leading-[75%]!'>
|
||||
{courseDeptAndInstr}
|
||||
</Text>
|
||||
{timeAndLocation && (
|
||||
<Text variant='h3-course' className='leading-[75%]!'>
|
||||
{timeAndLocation}
|
||||
=======
|
||||
<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>
|
||||
{meeting && (
|
||||
<Text variant='h3-course' className='-mb-0.5'>
|
||||
{`${meeting.getTimeString({ separator: '–', capitalize: true })}${
|
||||
meeting.location ? ` – ${meeting.location.building}` : ''
|
||||
}`}
|
||||
>>>>>>> 73fe14e (fix calendar course cell spacing)
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
{rightIcon && (
|
||||
<div
|
||||
className='h-fit flex items-center justify-center justify-self-start rounded p-0.5 text-white'
|
||||
style={{
|
||||
backgroundColor: colors.secondaryColor,
|
||||
}}
|
||||
>
|
||||
{rightIcon}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CalendarCourseBlock;
|
||||
@@ -1,127 +0,0 @@
|
||||
.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(6, 1fr);
|
||||
grid-template-rows: repeat(13, 1fr);
|
||||
}
|
||||
|
||||
.calendarRow {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
position: relative; // Ensuring that child elements can be positioned in relation to this.
|
||||
}
|
||||
|
||||
.day {
|
||||
gap: 5px;
|
||||
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 {
|
||||
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: auto;
|
||||
height: auto;
|
||||
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;
|
||||
border-radius: var(--border-radius-none, 0px);
|
||||
}
|
||||
|
||||
p {
|
||||
color: #1a2024;
|
||||
text-align: left;
|
||||
height: 6.6px;
|
||||
align-self: stretch;
|
||||
margin-top: -10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 0;
|
||||
|
||||
/* Type scale/small */
|
||||
font-family: 'Roboto Flex';
|
||||
font-size: 14.22px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.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,132 +0,0 @@
|
||||
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.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
|
||||
const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
|
||||
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
|
||||
*/
|
||||
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} />
|
||||
{/* 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>
|
||||
))}
|
||||
{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 CalendarGrid;
|
||||
@@ -1,18 +0,0 @@
|
||||
.calendarCell {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
|
||||
.hourLine {
|
||||
width: 213.8px;
|
||||
height: 1px;
|
||||
border-radius: var(--border-radius-none, 0px);
|
||||
background: rgba(218, 220, 224, 0.25);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
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;
|
||||
@@ -1,54 +0,0 @@
|
||||
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;
|
||||
@@ -1,36 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user