Skip to content

Commit

Permalink
Updated UI of course list item
Browse files Browse the repository at this point in the history
  • Loading branch information
@ImJustChew
ImJustChew committed Nov 2, 2023
1 parent 91f22da commit 2b108da
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 39 deletions.
115 changes: 87 additions & 28 deletions src/components/Courses/CourseListItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
import { CourseDefinition } from '@/config/supabase';
import useDictionary from '@/dictionaries/useDictionary';
import { useSettings } from '@/hooks/contexts/settings';
import { Button, Chip } from '@mui/joy';
import { Button, Chip, Tooltip } from '@mui/joy';
import Link from 'next/link';
import { FC, useMemo } from 'react';
import { Users } from 'react-feather';
import { FC, PropsWithChildren, useMemo } from 'react';
import { Minus, Plus, Users } from 'react-feather';
import {getGECType} from '@/helpers/courses';

const HighlightItem: FC<PropsWithChildren<{}>> = ({ children }) => {
return <div className='flex flex-row items-center justify-center min-w-[65px] space-x-2 px-2 py-2 rounded-md bg-indigo-50 text-indigo-900 dark:bg-indigo-950 dark:text-indigo-100'>
{children}
</div>
}

const CourseListItem: FC<{ course: CourseDefinition }> = ({ course }) => {
const { courses, setCourses } = useSettings();
Expand All @@ -15,53 +22,105 @@ const CourseListItem: FC<{ course: CourseDefinition }> = ({ course }) => {
<div className="grid grid-cols-1 lg:grid-rows-none lg:grid-cols-[auto_224px]">
<div className='flex-1 space-y-4'>
<div className="mb-3 space-y-1">
<Link className="font-semibold text-lg text-fuchsia-800 dark:text-fuchsia-500" href={'courses/'+course.raw_id}>{course.department} {course.course}-{course.class} {course.name_zh} - {(course.teacher_zh ?? []).join(',')}</Link>
<Link className="font-semibold text-lg text-[#AF7BE4]" href={'courses/'+course.raw_id}>{course.department} {course.course}-{course.class} {course.name_zh} - {(course.teacher_zh ?? []).join(',')}</Link>
<h3 className="text-sm text-gray-800 dark:text-gray-300 mt-0 break-words">{course.name_en} - <span className='w-max'>{(course.teacher_en ?? []).join(',')}</span></h3>
</div>
<div className="space-y-1 text-black">
<div className="space-y-1 text-black dark:text-neutral-200">
<p className='text-sm'>{course.課程限制說明}</p>
<p className='text-sm'>{course.備註}</p>
<p className='text-sm'>{course.擋修說明}</p>

<div className="space-x-2 justify-end">
{course.備註?.includes('X-Class') && <Chip
{course.擋修說明 &&
<Tooltip
placement='bottom-start'
title={<p dangerouslySetInnerHTML={{ __html: course.擋修說明}}></p>}
>
<p className='text-sm underline text-orange-600'>有儅修</p>
</Tooltip>}
</div>
<div className="space-x-2 justify-end mt-4">
{course.tags.includes('X-Class') &&
<Chip
color="danger"
disabled={false}
size="md"
variant="outlined"
>X-Class</Chip>}
{course.language == '英' ? <Chip
{course.language == '英' ?
<Chip
color="primary"
disabled={false}
size="md"
variant="outlined"
>English</Chip> :
<Chip
color="success"
disabled={false}
size="md"
variant="outlined"
>國語</Chip>}
</div>
<div>
>
English
</Chip> :
<Chip
color="success"
disabled={false}
size="md"
variant="outlined"
>
國語
</Chip>}
{(course.ge_target?.trim() || "").length > 0 &&
<Chip
color="primary"
disabled={false}
size="md"
variant="outlined"
>{course.ge_target} 通識課</Chip>}
{getGECType(course.ge_type || "") && <Chip
color="warning"
disabled={false}
size="md"
variant="outlined"
>
核通 {getGECType(course.ge_type!)}
</Chip>}
</div>
</div>
</div>
<div className='flex flex-col space-y-3'>
<p>{course.credits} {dict.course.credits}</p>
<p>{course.semester} 學期</p>
{course.venues?
course.venues.map((vn, i) => <p className='text-blue-600 font-mono'>{vn} <span className='text-black'>{course.times![i]}</span></p>) :
course.venues.map((vn, i) => <p className='text-blue-600 dark:text-blue-400'>{vn} <span className='text-black dark:text-white'>{course.times![i]}</span></p>) :
<p>No Venues</p>
}
{course.capacity && <div className="flex flex-row space-x-1 mb-2">
<Users className='w-5 h-5'/>
<span className="">{course.capacity}{course.reserve == 0 ? '' : ` / ${course.reserve}R`}</span>
</div>}
<div className='flex flex-row space-x-1 text-sm'>
<HighlightItem>
<span className="">
{course.capacity ?? '-'}
{(course.reserve ?? 0) > 0 && <>
<br/>
{`保 ${course.reserve}`}
</>}
</span>

<Users className='w-5 h-5'/>
</HighlightItem>
<HighlightItem>
<span className="">{course.credits}</span>
<span className="">{dict.course.credits}</span>
</HighlightItem>
{course.tags.includes('16周') && <HighlightItem>
<span className="">16 週</span>
</HighlightItem>}
{course.tags.includes('18周') && <HighlightItem>
<span className="">18 週</span>
</HighlightItem>}
</div>
{isCourseSelected ?
<Button color="danger" variant="outlined" onClick={() => setCourses(courses => courses.filter(m => m != course.raw_id))}>
<Button
color="danger"
variant="outlined"
onClick={() => setCourses(courses => courses.filter(m => m != course.raw_id))}
startDecorator={<Minus/>}
>
{dict.course.item.remove_from_semester}
</Button> :
<Button variant="outlined" onClick={() => setCourses(courses => [...courses, course.raw_id ?? ""])}>
<Button
variant="outlined"
onClick={() => setCourses(courses => [...courses, course.raw_id ?? ""])}
startDecorator={<Plus/>}
>
{dict.course.item.add_to_semester}
</Button>}
</div>
Expand Down
7 changes: 7 additions & 0 deletions src/helpers/courses.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export const getGECType = (ge_type: string) => {
//核心通識Core GE courses 1, 核心通識Core GE courses 2 <- return this number
if(ge_type.includes('核心通識Core GE courses')){
return parseInt(ge_type.slice(-1));
}
else return null;
}
74 changes: 63 additions & 11 deletions src/types/supabase.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -458,36 +458,60 @@ export interface Database {
cds_courses: {
Row: {
class: number | null
course: number | null
course: string | null
credits: number | null
cross_discipline: string[] | null
department: string | null
first_specialization: string[] | null
id: number
language: string | null
name_en: string | null
name_zh: string | null
teacher_en: string[] | null
note: string | null
raw_id: string
second_specialization: string[] | null
semester: string | null
teacher_zh: string[] | null
times: string[] | null
venues: string[] | null
}
Insert: {
class?: number | null
course?: number | null
course?: string | null
credits?: number | null
cross_discipline?: string[] | null
department?: string | null
id?: number
first_specialization?: string[] | null
id: number
language?: string | null
name_en?: string | null
name_zh?: string | null
teacher_en?: string[] | null
note?: string | null
raw_id: string
second_specialization?: string[] | null
semester?: string | null
teacher_zh?: string[] | null
times?: string[] | null
venues?: string[] | null
}
Update: {
class?: number | null
course?: number | null
course?: string | null
credits?: number | null
cross_discipline?: string[] | null
department?: string | null
first_specialization?: string[] | null
id?: number
language?: string | null
name_en?: string | null
name_zh?: string | null
teacher_en?: string[] | null
note?: string | null
raw_id?: string
second_specialization?: string[] | null
semester?: string | null
teacher_zh?: string[] | null
times?: string[] | null
venues?: string[] | null
}
Relationships: []
}
Expand All @@ -512,14 +536,15 @@ export interface Database {
raw_1_2_specialization: string | null
raw_cross_discipline: string | null
raw_extra_selection: string | null
raw_id: string | null
raw_id: string
raw_teacher_en: string | null
raw_teacher_zh: string | null
raw_time: string | null
raw_venue: string | null
reserve: number | null
second_specialization: string[] | null
semester: string | null
tags: string[]
teacher_en: string[] | null
teacher_zh: string[] | null
times: string[] | null
Expand Down Expand Up @@ -552,14 +577,15 @@ export interface Database {
raw_1_2_specialization?: string | null
raw_cross_discipline?: string | null
raw_extra_selection?: string | null
raw_id?: string | null
raw_id: string
raw_teacher_en?: string | null
raw_teacher_zh?: string | null
raw_time?: string | null
raw_venue?: string | null
reserve?: number | null
second_specialization?: string[] | null
semester?: string | null
tags?: string[]
teacher_en?: string[] | null
teacher_zh?: string[] | null
times?: string[] | null
Expand Down Expand Up @@ -590,14 +616,15 @@ export interface Database {
raw_1_2_specialization?: string | null
raw_cross_discipline?: string | null
raw_extra_selection?: string | null
raw_id?: string | null
raw_id?: string
raw_teacher_en?: string | null
raw_teacher_zh?: string | null
raw_time?: string | null
raw_venue?: string | null
reserve?: number | null
second_specialization?: string[] | null
semester?: string | null
tags?: string[]
teacher_en?: string[] | null
teacher_zh?: string[] | null
times?: string[] | null
Expand Down Expand Up @@ -1226,6 +1253,30 @@ export interface Database {
}
Returns: number
}
search_cds_courses: {
Args: {
keyword: string
}
Returns: {
class: number | null
course: string | null
credits: number | null
cross_discipline: string[] | null
department: string | null
first_specialization: string[] | null
id: number
language: string | null
name_en: string | null
name_zh: string | null
note: string | null
raw_id: string
second_specialization: string[] | null
semester: string | null
teacher_zh: string[] | null
times: string[] | null
venues: string[] | null
}[]
}
search_courses: {
Args: {
keyword: string
Expand All @@ -1250,14 +1301,15 @@ export interface Database {
raw_1_2_specialization: string | null
raw_cross_discipline: string | null
raw_extra_selection: string | null
raw_id: string | null
raw_id: string
raw_teacher_en: string | null
raw_teacher_zh: string | null
raw_time: string | null
raw_venue: string | null
reserve: number | null
second_specialization: string[] | null
semester: string | null
tags: string[]
teacher_en: string[] | null
teacher_zh: string[] | null
times: string[] | null
Expand Down

0 comments on commit 2b108da

Please sign in to comment.