Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Schedules Page Improvements #144

Merged
merged 7 commits into from
Apr 1, 2024
Merged

Schedules Page Improvements #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6bfa8a1
Add units to summary
Mar 28, 2024
9a3a1d0
Toggle schedules top bar
Mar 28, 2024
d080d17
Merge branch 'main' into xavier/schedules-page-improvements
Apr 1, 2024
3509eec
Merge branch 'main' into xavier/schedules-page-improvements
Apr 1, 2024
67682f3
Added showSchedules so that one can easily see who is teaching it nex…
Apr 1, 2024
1a4517f
parseFloat instead of parseInt because some courses have half units
Apr 1, 2024
155faa6
Apparently the order of lines matters to ESLint
Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions frontend/src/app/ui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export interface UIState {
loginModalShown: boolean;
loginModalOpen: boolean;
};
schedulesTopbarOpen: boolean;
}

const initialState: UIState = {
Expand All @@ -16,6 +17,7 @@ const initialState: UIState = {
loginModalShown: false,
loginModalOpen: false,
},
schedulesTopbarOpen: false,
};

export const uiSlice = createSlice({
Expand All @@ -35,6 +37,9 @@ export const uiSlice = createSlice({
state.session.loginModalShown = true;
state.session.loginModalOpen = false;
},
toggleSchedulesTopbarOpen: (state) => {
state.schedulesTopbarOpen = !state.schedulesTopbarOpen;
},
},
});

Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/CourseList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ const CourseList = ({ courseIDs, children }: Props) => {
key={course.courseID}
showFCEs={true}
showCourseInfo={true}
showSchedules={true}
/>
))}
</div>
Expand Down
43 changes: 31 additions & 12 deletions frontend/src/components/ScheduleData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import {
selectSelectedCoursesInActiveSchedule,
userSchedulesSlice,
} from "../app/userSchedules";
import { FlushedButton } from "./Buttons";
import { uiSlice } from "../app/ui";
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid";

type ScheduleDataProps = {
scheduled: string[];
Expand All @@ -25,6 +28,8 @@ const ScheduleData = ({ scheduled }: ScheduleDataProps) => {
selectFCEResultsForCourses(scheduled || [])
);

const open = useAppSelector((state) => state.ui.schedulesTopbarOpen);

if (!loggedIn) {
return (
<div className="bg-white text-gray-700 z-10">
Expand Down Expand Up @@ -68,26 +73,40 @@ const ScheduleData = ({ scheduled }: ScheduleDataProps) => {
<div>
<div className="text-a-600 text-lg">
Total Workload{" "}
<span className="ml-4">
{scheduledResults.reduce((acc, curr) => acc + parseFloat(curr.units), 0)} units,
{message === "" ? "" : "*"}
</span>
<span className="ml-4">
{roundTo(aggregatedSelectedData.workload, 2)} hrs/week
{message === "" ? "" : "*"}
</span>
<button className="absolute right-3 z-40 md:right-2">
<FlushedButton
onClick={() => dispatch(uiSlice.actions.toggleSchedulesTopbarOpen())}
>
<div className="hidden items-center md:flex">
<div className="mr-1">Hide</div>
{(open ? <ChevronDownIcon className="h-5 w-5" /> : <ChevronUpIcon className="h-5 w-5" />)}
</div>
</FlushedButton>
</button>
</div>
</div>
</div>
<div className="mt-3 w-full overflow-x-auto">
{(open && <div className="mt-3 w-full overflow-x-auto">
<table className="w-full min-w-fit table-auto overflow-x-scroll">
<thead>
<tr className="text-left">
<th />
<th className="whitespace-nowrap pr-4 font-semibold">
Course ID
</th>
<th className="whitespace-nowrap pr-4 font-semibold">
Course Name
</th>
<th className="whitespace-nowrap pr-4 font-semibold">Units</th>
<th className="whitespace-nowrap pr-4 font-semibold">Workload</th>
<tr className="text-left">
<th />
<th className="whitespace-nowrap pr-4 font-semibold">
Course ID
</th>
<th className="whitespace-nowrap pr-4 font-semibold">
Course Name
</th>
<th className="whitespace-nowrap pr-4 font-semibold">Units</th>
<th className="whitespace-nowrap pr-4 font-semibold">Workload</th>
</tr>
</thead>
<tbody className="text-gray-700">
Expand Down Expand Up @@ -118,7 +137,7 @@ const ScheduleData = ({ scheduled }: ScheduleDataProps) => {
})}
</tbody>
</table>
</div>
</div>)}
<div className="text-gray-500 mt-2 text-sm">
{message === "" ? "" : `*${message}`}
</div>
Expand Down
Loading