Merge branch 'hackathon' of https://github.com/ut-developers/UT-Registration-Plus into hackathon
This commit is contained in:
Abhinav Chadaga
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: {},
|
||||
};
|
||||
@@ -3,6 +3,7 @@ import { CourseMeeting } from 'src/shared/types/CourseMeeting';
|
||||
import { UserSchedule } from 'src/shared/types/UserSchedule';
|
||||
import CoursePopup from 'src/views/components/injected/CoursePopup/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: {
|
||||
|
||||
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>;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user