Merge pull request #25 from DevOps-Cloud-Team5/SCRUM-17

allow attendence to be set and unset, clean up schedule page

Author: Imafe

src/pages/course/index.tsx

@@ -0,0 +1,92 @@
+import { useState, useEffect } from "react";
+import RootPage from "../root";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Cookies from "js-cookie";
+import "./profile.css"; // Import CSS file for additional styling
+
+import { backend_get, deleteAuthCookies } from "../../utils";
+import { useNavigate, useParams } from "react-router-dom";
+import { JwtPayload, jwtDecode } from "jwt-decode";
+import { CookieJWT } from "../../types/common";
+
+const Profile = () => {
+    const navigate = useNavigate();
+    const { id } = useParams();
+
+    const [profileData, setProfileData] = useState({
+        username: "",
+        email: "",
+        role: "",
+        first_name: "",
+        last_name: "",
+        avatarUrl: "https://randomuser.me/api/portraits/men/5.jpg"
+    });
+
+    const getProfileData = async () => {
+        let username = "";
+        if (id != undefined) username = id;
+        else {
+            const jwt_token = Cookies.get("token_access");
+            if (jwt_token == undefined) return { code: "missing access token" };
+            const decoded: CookieJWT = jwtDecode(jwt_token);
+            if (!("username" in decoded))
+                return { code: "broken access token" };
+            username = decoded["username"];
+        }
+        const resp = await backend_get("user/get/" + username, true);
+        return resp.json();
+    };
+
+    useEffect(() => {
+        const fetchUserProfile = async () => {
+            try {
+                const profile = await getProfileData(); // Assuming getUserProfile returns user profile data
+                if ("code" in profile) {
+                    deleteAuthCookies();
+                    navigate("/login");
+                    navigate(0);
+                    return;
+                }
+                // profile[0]["avaterUrl"] =
+                //     "https://randomuser.me/api/portraits/men/5.jpg";
+                setProfileData(profile);
+            } catch (error) {
+                console.error("Error fetching profile:", error);
+                // Show error on frontend
+            }
+        };
+
+        fetchUserProfile();
+    }, [navigate]);
+
+    return (
+        <RootPage>
+            <Container component="main" maxWidth="xs">
+                <div className="profile">
+                    <img
+                        className="avatar"
+                        src={profileData.avatarUrl}
+                        alt="User Avatar"
+                    />
+                    <div className="profile-info">
+                        <Typography component="h1" variant="h5">
+                            {profileData.first_name} {profileData.last_name}
+                        </Typography>
+                        <Typography component="p" variant="body1">
+                            Username: {profileData.username}
+                        </Typography>
+                        <Typography component="p" variant="body1">
+                            Email: {profileData.email}
+                        </Typography>
+                        <Typography component="p" variant="body1">
+                            Role: {profileData.role}
+                        </Typography>
+                    </div>
+                </div>
+            </Container>
+        </RootPage>
+    );
+};
+
+export default Profile;

src/pages/course/profile.css

@@ -0,0 +1,58 @@
+/* profile.css */
+
+/* body {
+    font-family: 'Arial', sans-serif;
+    background-color: #000; 
+    color: #fff;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+} */
+
+.profile {
+    background: rgba(
+        255,
+        255,
+        255,
+        0.1
+    ); /* Semi-transparent white for profile background */
+    backdrop-filter: blur(5px); /* Blur effect for the background */
+    border-radius: 15px;
+    display: flex;
+    align-items: center;
+    padding: 2em;
+    margin: 1em;
+    gap: 1em;
+}
+
+.avatar {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 3px solid #fff; /* White border for the avatar */
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); /* subtle glow to the avatar */
+}
+
+.profile-info {
+    color: #fff; /* Light text for readability */
+}
+
+.profile-info h1,
+.profile-info p {
+    margin: 0.3em 0; /* Add some vertical spacing between text elements */
+}
+
+.profile-info h1 {
+    color: #29b6f6; /* A brighter color for the user's name */
+    font-size: 1.5em;
+}
+
+.profile-info p {
+    font-size: 1em;
+    color: #bbb; /* Slightly dimmed color for less important text */
+}
+
+/* You can add more styles or customize the colors as you see fit */

src/pages/profile/profile.css

@@ -1,17 +1,3 @@
-/* profile.css */
-
-/* body {
-    font-family: 'Arial', sans-serif;
-    background-color: #000; 
-    color: #fff;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-} */
-
 .profile {
     background: rgba(
         255,

src/pages/schedule/index.tsx

@@ -12,8 +12,14 @@ import moment from "moment";
 import { Button, Divider, capitalize } from "@mui/material";
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import "./schedule.css"; 
 
+// Set monday to the first day of the week
+moment.updateLocale('en', { week: { dow : 1, }});
+
 const AttendancePage: React.FC = () => {
     const navigate = useNavigate();
     const { response, error, loading, sendRequest } = useAxiosRequest<Empty, ScheduleLecture[]>();
@@ -46,21 +52,29 @@ const AttendancePage: React.FC = () => {
         }
     }, [response]);
 
-    const setStudentAttendence = (lecture_id : number) => {
+    const setStudentAttendence = (lecture_id : number, attended : boolean) => {
         const new_lectures = lectures?.map(
             (lectures : ScheduleLecture[]) => 
                 lectures.map(
-                    (lecture : ScheduleLecture) => (lecture.id == lecture_id ? { ...lecture, attended_student: true } : lecture))
+                    (lecture : ScheduleLecture) => (lecture.id == lecture_id ? { ...lecture, attended_student: attended } : lecture))
                 )
         setLectures(new_lectures)
     }
 
     const handleAttendanceChange =
-        (lecture_id: number) =>
+        (lecture: ScheduleLecture) =>
         (event: React.ChangeEvent<HTMLInputElement>) => {
-            backend_post(`lecture/${lecture_id}/student_att`, "", true)
+            var url = `lecture/${lecture.id}/student_set_att`
+            var attended = true
+
+            if (lecture.attended_student == true) {
+                url = `lecture/${lecture.id}/student_unset_att`
+                attended = false
+            }
+
+            backend_post(url, "", true)
             .then((resp) => { 
-                    if (resp.status == 200) setStudentAttendence(lecture_id)
+                    if (resp.status == 200) setStudentAttendence(lecture.id, attended)
                 }
             )
             .catch((error) => console.log(error));
@@ -84,6 +98,18 @@ const AttendancePage: React.FC = () => {
         return moment(Date.parse(time)).format("HH:mm")
     }
 
+    const getCheckboxColor = (lecture : ScheduleLecture, attended_box : boolean) => {
+        if(lecture.attended_student && lecture.attended_teacher) return "green"
+        if (attended_box == false) return "rgb(224, 6, 31)"
+        return "white"
+    }
+
+    // Get date of a specific weekday in the current week
+    const getDateDay = (dayIndex : number) => {
+        const new_date = schedule_date.weekday(dayIndex)
+        return new_date.date()
+    }
+
     return (
         <RootPage>
             <Container
@@ -113,29 +139,52 @@ const AttendancePage: React.FC = () => {
                     {lectures?.map((day : ScheduleLecture[], dayIndex) => (
                         <div key={dayConvert[dayIndex]} style={{ background: alternatingColor[dayIndex%2], paddingTop: "0", marginTop: "0" }}>
                             <h2 style={{ paddingLeft: "2%", paddingTop: "1%", paddingBottom: "0", marginBottom: "0", marginTop: "0" }}>
-                                {dayConvert[dayIndex]}
+                                {`${getDateDay(dayIndex)} ${dayConvert[dayIndex]}`}
                             </h2>
 
                             {(day.length != 0) ? <Divider variant="middle" style={{ marginTop: "1.5%" }} /> : null}
 
                             <List>
                                 {day.map((lecture, lectureIndex) => (
                                     <ListItem key={lecture.id} style={{ marginTop: "-0.5%", marginBottom: "-1%" }}>
-                                        <div style={{ marginRight: "3%" }}>
+                                        <div style={{ marginRight: "1%" }}>
                                             <ListItemText primary={convertToScheduleTime(lecture.start_time)} />
                                             <ListItemText primary={convertToScheduleTime(lecture.end_time)} />
                                         </div>
-                                        <ListItemText primary={lecture.course} secondary={capitalize(lecture.lecture_type)}/>
+                                        <Button 
+                                            variant="string" 
+                                            color="inherit"
+                                            disableTouchRipple 
+                                            onClick={() => navigate(`/course/${lecture.course}`)
+                                        }
+                                            sx={{ 
+                                                textTransform: 'none', 
+                                                textAlign: 'left', "&.MuiButtonBase-root:hover": { 
+                                                    bgcolor: "transparent", 
+                                                    textDecoration: "underline" 
+                                                    } 
+                                                }}
+                                        >
+                                            <ListItemText primary={lecture.course_name} secondary={capitalize(lecture.lecture_type)}/>
+                                        </Button>
+
+                                        <ListItemText primary={""}/>
 
                                         <Checkbox
-                                            checked={lecture.attended_student}
-                                            onChange={handleAttendanceChange(lecture.id)}
-                                            sx={{ "& .MuiSvgIcon-root": { color: "white" } }}
+                                            indeterminateIcon={<CheckBoxOutlineBlankIcon />}
+                                            icon={<IndeterminateCheckBoxIcon />}
+                                            indeterminate={lecture.attended_student == null}
+                                            checked={lecture.attended_student == true}
+                                            onChange={handleAttendanceChange(lecture)}
+                                            sx={{ "& .MuiSvgIcon-root": { color: getCheckboxColor(lecture, lecture.attended_student) } }}
                                         />
                                         <Checkbox
-                                            checked={lecture.attended_teacher}
+                                            indeterminateIcon={<CheckBoxOutlineBlankIcon />}
+                                            icon={<IndeterminateCheckBoxIcon />}
+                                            indeterminate={lecture.attended_teacher == null}
+                                            checked={lecture.attended_teacher == true}
                                             disabled={true}
-                                            sx={{ "& .MuiSvgIcon-root": { color: "white" } }}
+                                            sx={{ "& .MuiSvgIcon-root": { color: getCheckboxColor(lecture, lecture.attended_teacher) } }}
                                         />
                                     </ListItem>
                                     ))

src/types/common.ts

@@ -16,9 +16,10 @@ export interface ScheduleLecture {
     start_time: string,
     end_time: string,
     lecture_type: string,
+    course_name: string,
     course: number,
-    attended_student: boolean,
-    attended_teacher: boolean
+    attended_student: boolean | null,
+    attended_teacher: boolean | null
 }
 
 export interface User {