Skip to content

Commit a3aa043

Browse files
ImafeImafe
committed
fully link schedule page to the backend and pimp the page
1 parent 842c50a commit a3aa043

File tree

5 files changed

+90
-52
lines changed

5 files changed

+90
-52
lines changed

‎src/pages/courses/index.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,11 @@ const Courses = () => {
2929
const [course_data, setCourseData] = useState<Course[]>();
3030

3131
const alternatingColor = [
32-
"rgba(255, 255, 255, 0.5)",
33-
"rgba(255, 255, 255, 0.3)"
32+
"#424242",
33+
"#595959"
3434
];
3535

36+
3637
useEffect(() => {
3738
sendRequest({
3839
method: "GET",
@@ -143,9 +144,7 @@ const Courses = () => {
143144
key={course.id}
144145
style={{
145146
backgroundColor:
146-
alternatingColor[
147-
index % alternatingColor.length
148-
]
147+
alternatingColor[index%2]
149148
}}
150149
>
151150
<td>

‎src/pages/people/index.tsx

+6-7
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
55
import { deleteAuthCookies, backend_get, IsAdmin } from "../../utils";
66
import { useNavigate } from "react-router-dom";
77
import { User } from "../../types/common";
8-
import { Button, IconButton, Typography } from "@mui/material";
8+
import { Button, IconButton, Typography, capitalize } from "@mui/material";
99
import { styled } from "@mui/material/styles";
1010
import MoreVertIcon from "@mui/icons-material/MoreVert";
1111
import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
@@ -15,10 +15,11 @@ const People = () => {
1515
const navigate = useNavigate();
1616
const [allUsers, setAllUsers] = useState<User[]>();
1717
const alternatingColor = [
18-
"rgba(255, 255, 255, 0.5)",
19-
"rgba(255, 255, 255, 0.3)"
18+
"#424242",
19+
"#595959"
2020
];
2121

22+
2223
const getUserRole = async (role: string) => {
2324
const resp = await backend_get("user/getrole/" + role, true);
2425
return resp.json();
@@ -135,9 +136,7 @@ const People = () => {
135136
key={user.id}
136137
style={{
137138
backgroundColor:
138-
alternatingColor[
139-
index % alternatingColor.length
140-
]
139+
alternatingColor[index%2]
141140
}}
142141
>
143142
<td className="avatar-column">
@@ -159,7 +158,7 @@ const People = () => {
159158
{`${user.first_name} ${user.last_name}`}
160159
</Button>
161160
</td>
162-
<td style={{ fontSize: "1em" }}>{user.role}</td>
161+
<td style={{ fontSize: "1em" }}>{capitalize(user.role)}</td>
163162
{IsAdmin() ? (
164163
<td className="actions-icon">
165164
<IconButton>

‎src/pages/schedule/index.tsx

+65-40
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,21 @@ import { useNavigate, useParams } from "react-router-dom";
99
import { ScheduleLecture, AttendanceData, Empty } from "../../types/common";
1010
import { backend_post, useAxiosRequest } from "../../utils";
1111
import moment from "moment";
12-
import { Button } from "@mui/material";
12+
import { Button, Divider, capitalize } from "@mui/material";
1313
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
1414
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
15+
import "./schedule.css";
1516

1617
const AttendancePage: React.FC = () => {
1718
const navigate = useNavigate();
1819
const { response, error, loading, sendRequest } = useAxiosRequest<Empty, ScheduleLecture[]>();
1920
const [lectures, setLectures] = useState<ScheduleLecture[][]>();
2021
const [schedule_date, setScheduleDate] = useState<moment.Moment>( moment() );
22+
const alternatingColor = [
23+
"#424242",
24+
"#595959"
25+
];
26+
2127

2228
const updateSchedule = () => {
2329
sendRequest({
@@ -27,9 +33,7 @@ const AttendancePage: React.FC = () => {
2733
});
2834
}
2935

30-
useEffect(() => {
31-
updateSchedule()
32-
}, [sendRequest]);
36+
useEffect(() => { updateSchedule() }, [sendRequest]);
3337

3438
useEffect(() => {
3539
if (response) {
@@ -76,50 +80,71 @@ const AttendancePage: React.FC = () => {
7680
const dayConvert = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
7781
const monthConvert = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "Octobor", "November", "December"]
7882

83+
const convertToScheduleTime = (time : string) => {
84+
return moment(Date.parse(time)).format("HH:mm")
85+
}
86+
7987
return (
8088
<RootPage>
8189
<Container
8290
component="main"
83-
maxWidth="xs"
91+
maxWidth="md"
8492
sx={{ marginBottom: "5%" }}
93+
className="mainComponent"
8594
>
86-
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "10px" }}>
87-
<div>
88-
<h2>{`Week ${schedule_date.week()} overview`}</h2>
89-
<h3>{`${monthConvert[schedule_date.month()]} ${schedule_date.year()}`}</h3>
90-
</div>
91-
<div>
92-
<Button variant="contained" style={{ minWidth: "1em", width: "auto", height: "2.5em" }} onClick={goBackWeek}>
93-
<ArrowBackIcon />
94-
</Button>
95-
<Button variant="contained" style={{ minWidth: "1em", width: "auto", height: "2.5em" }} onClick={goForwardWeek}>
96-
<ArrowForwardIcon />
97-
</Button>
95+
<div style={{ marginLeft: "2%", marginRight: "2%" }}>
96+
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "10px" }}>
97+
<div>
98+
<h2>{`Week ${schedule_date.week()} overview`}</h2>
99+
<h3>{`${monthConvert[schedule_date.month()]} ${schedule_date.year()}`}</h3>
100+
</div>
101+
<div>
102+
<Button variant="contained" style={{ minWidth: "1em", width: "auto", height: "2.5em" }} onClick={goBackWeek}>
103+
<ArrowBackIcon />
104+
</Button>
105+
<Button variant="contained" style={{ minWidth: "1em", width: "auto", height: "2.5em" }} onClick={goForwardWeek}>
106+
<ArrowForwardIcon />
107+
</Button>
108+
</div>
98109
</div>
99-
</div>
100110

101-
{lectures?.map((day, index) => (
102-
<div key={dayConvert[index]}>
103-
<h2>{dayConvert[index]}</h2>
104-
<List>
105-
{day.map((lecture) => (
106-
<ListItem key={lecture.id}>
107-
<ListItemText primary={lecture.course} />
108-
<Checkbox
109-
checked={lecture.attended_student}
110-
onChange={handleAttendanceChange(lecture.id)}
111-
sx={{ "& .MuiSvgIcon-root": { color: "white" } }}
112-
/>
113-
<Checkbox
114-
checked={lecture.attended_teacher}
115-
disabled={true}
116-
sx={{ "& .MuiSvgIcon-root": { color: "white" } }}
117-
/>
118-
</ListItem>
119-
))}
120-
</List>
121-
</div>
122-
))}
111+
<Divider style={{ marginBottom: "3%" }} />
112+
113+
{lectures?.map((day : ScheduleLecture[], dayIndex) => (
114+
<div key={dayConvert[dayIndex]} style={{ background: alternatingColor[dayIndex%2], paddingTop: "0", marginTop: "0" }}>
115+
<h2 style={{ paddingLeft: "2%", paddingTop: "1%", paddingBottom: "0", marginBottom: "0", marginTop: "0" }}>
116+
{dayConvert[dayIndex]}
117+
</h2>
118+
119+
{(day.length != 0) ? <Divider variant="middle" style={{ marginTop: "1.5%" }} /> : null}
120+
121+
<List>
122+
{day.map((lecture, lectureIndex) => (
123+
<ListItem key={lecture.id} style={{ marginTop: "-0.5%", marginBottom: "-1%" }}>
124+
<div style={{ marginRight: "3%" }}>
125+
<ListItemText primary={convertToScheduleTime(lecture.start_time)} />
126+
<ListItemText primary={convertToScheduleTime(lecture.end_time)} />
127+
</div>
128+
<ListItemText primary={lecture.course} secondary={capitalize(lecture.lecture_type)}/>
129+
130+
<Checkbox
131+
checked={lecture.attended_student}
132+
onChange={handleAttendanceChange(lecture.id)}
133+
sx={{ "& .MuiSvgIcon-root": { color: "white" } }}
134+
/>
135+
<Checkbox
136+
checked={lecture.attended_teacher}
137+
disabled={true}
138+
sx={{ "& .MuiSvgIcon-root": { color: "white" } }}
139+
/>
140+
</ListItem>
141+
))
142+
}
143+
</List>
144+
<Divider/>
145+
</div>
146+
))}
147+
</div>
123148
</Container>
124149
</RootPage>
125150
);

‎src/pages/schedule/main.css

Whitespace-only changes.

‎src/pages/schedule/schedule.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.mainComponent {
2+
background: rgba(
3+
255,
4+
255,
5+
255,
6+
0.1
7+
); /* Semi-transparent white for profile background */
8+
backdrop-filter: blur(5px); /* Blur effect for the background */
9+
border-radius: 15px;
10+
display: flex;
11+
align-items: center;
12+
padding: 2em;
13+
margin: 1em;
14+
gap: 1em;
15+
}

0 commit comments

Comments
 (0)