Merge pull request #22 from DevOps-Cloud-Team5/SCRUM-20-Main-page(student)

Scrum 20 main page(student)

Author: atwani21

src/mock_data.tsx

@@ -0,0 +1,6 @@
+export const sampleStudentData = {
+    id: 1,
+    name: "John Doe",
+    courses: ["Math", "Science", "History"]
+  };
+  

src/pages/schedule/index.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import Container from '@mui/material/Container';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Checkbox from '@mui/material/Checkbox';
+import { useParams } from 'react-router-dom';
+import { Course, AttendanceData } from '../../types/common';
+
+// Mock data for courses
+const mockCourses: Course[] = [
+  {
+    course_id: 'course1',
+    course_name: 'Mathematics',
+    schedule: ['Monday', 'Wednesday', 'Friday'],
+    enrolled_students: ['student1', 'student2', 'student3'],
+    teachers: ['teacher1', 'teacher2'],
+  },
+  {
+    course_id: 'course2',
+    course_name: 'Physics',
+    schedule: ['Tuesday', 'Thursday'],
+    enrolled_students: ['student2', 'student3', 'student4'],
+    teachers: ['teacher2', 'teacher3'],
+  },
+  {
+    course_id: 'course3',
+    course_name: 'Biology',
+    schedule: ['Monday', 'Wednesday'],
+    enrolled_students: ['student1', 'student3', 'student4'],
+    teachers: ['teacher1', 'teacher3'],
+  },
+];
+
+const initialAttendanceData: AttendanceData = {};
+
+// Initialize attendance data for each course and each day
+mockCourses.forEach(course => {
+  course.schedule.forEach(day => {
+    initialAttendanceData[day] = initialAttendanceData[day] || {};
+    initialAttendanceData[day][course.course_id] = false;
+  });
+});
+
+const AttendancePage: React.FC = () => {
+  const { studentId } = useParams<{ studentId: string }>();
+  const [attendance, setAttendance] = useState<AttendanceData>(initialAttendanceData);
+
+  const handleAttendanceChange = (courseId: string, day: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setAttendance(prevAttendance => ({
+      ...prevAttendance,
+      [day]: {
+        ...prevAttendance[day],
+        [courseId]: event.target.checked,
+      }
+    }));
+    // You can send the updated attendance for the specific course and day to the backend here
+  };
+
+  const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <h1>Attendance</h1>
+      {daysOfWeek.map(day => (
+        <div key={day}>
+          <h2>{day}</h2>
+          <List>
+            {mockCourses
+              .filter(course => course.schedule.includes(day))
+              .map(course => (
+                <ListItem key={course.course_id}>
+                  <ListItemText primary={course.course_name} />
+                  <Checkbox
+                    checked={attendance[day][course.course_id] || false}
+                    onChange={handleAttendanceChange(course.course_id, day)}
+                    sx={{
+                        '& .MuiSvgIcon-root': { // Overrides the color of the checkbox icon
+                          color: 'white'
+                        }
+                      }}
+                  />
+                </ListItem>
+              ))}
+          </List>
+        </div>
+      ))}
+    </Container>
+  );
+};
+
+export default AttendancePage;

src/pages/schedule/main.css

@@ -5,7 +5,7 @@ import HomePage from "../pages/home";
 import Profile from "../pages/profile";
 import People from "../pages/people";
 import Courses from "../pages/courses";
-
+import Schedule from "../pages/schedule"
 import { IsAdmin, isLoggedIn } from "../utils";
 import CreateUser from "../pages/create_user";
 import ResetPassword from "../pages/reset_password";
@@ -54,6 +54,10 @@ const AppRouter = createBrowserRouter([
         path: "/courses",
         element: isLoggedIn() ? <Courses /> : <Navigate to="/login" replace />
     },
+    {
+        path: "/schedule",
+        element: isLoggedIn() ? <Schedule /> : <Navigate to="/login" replace />
+    },
     {
         path: "/reset_password",
         element: isLoggedIn() ? (

src/routes/index.tsx

@@ -27,3 +27,8 @@ export interface CookieJWT {
     email: string;
     role: string;
 }
+export interface AttendanceData {
+    [day: string]: {
+      [courseId: string]: boolean;
+    };
+  }