Merge branch 'frontend' into mainpage

frontend/frontend/.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "ea10a7bd",
+  "configHash": "baf76694",
+  "lockfileHash": "e3b0c442",
+  "browserHash": "89947c23",
+  "optimized": {},
+  "chunks": {}
+}

frontend/frontend/.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

frontend/frontend/src/main.tsx

@@ -8,22 +8,40 @@ import ErrorPage from "./pages/ErrorPage.tsx";
 
 import {MainPage} from "./pages/mainPage/MainPage.tsx";
 import {Helmet, HelmetProvider} from "react-helmet-async";
+import { SubjectsStudentPage } from "./pages/subjects_page/SubjectsStudentPage.tsx";
+import { AssignmentStudentPage } from "./pages/assignmentPage/assignmentStudentPage";
+import { AssignmentTeacherPage } from "./pages/assignmentPage/assignmentTeacherPage.tsx";
+import { GroupsPage } from "./pages/groupsPage/groupsPage.tsx";
 import {SubjectsStudentPage} from "./pages/subjects_page/SubjectsStudentPage.tsx";
 
 import {LocalizationProvider} from "@mui/x-date-pickers";
 import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs/AdapterDayjs';
 
 import {SimpleRequestsPage} from "./pages/simpleRequestsPage/SimpleRequestsPage.tsx";
 
-
-
 const router = createBrowserRouter([
-    {
-        path: "/",
-        element: <MainPage/>,
-        errorElement: <ErrorPage/>,
-    },
-    {
+  {
+    path: "/",
+    element: <MainPage />,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "/subjects_student",
+    element: <SubjectsStudentPage />,
+  },
+  {
+    path: "/assignment_student",
+    element: <AssignmentStudentPage />,
+  },
+  {
+    path: "/assignment_teacher",
+    element: <AssignmentTeacherPage/>,
+  },
+  {
+    path: "/groups",
+    element: <GroupsPage/>,
+  },
+   {
         path: "/subjects_student",
         element: <SubjectsStudentPage/>,
     },

frontend/frontend/src/pages/assignmentPage/assignmentStudentPage.tsx

@@ -0,0 +1,126 @@
+import {Header} from "../../components/Header.tsx";
+import { AssignmentListItem } from "../../components/AssignmentListItem.tsx";
+import {Box,List, Button, Stack, Typography, Card, Divider} from "@mui/material";
+
+const text = "Lorem ipsum dolor sit amet consectetur. Nisi magna dolor et nisi nibh et velit phasellus. Aliquam semper justo posuere suspendisse amet amet nam nec. Tellus magna in proin tempor hac sit. Faucibus laoreet nulla commodo quis. Porttitor sit facilisis sit dignissim quis. Malesuada etiam tempor donec et ante. Aliquam massa donec augue aliquam semper amet blandit sed faucibus. Et elementum duis adipiscing turpis mi. Senectus eu rutrum accumsan convallis metus mattis risus. Quam eget sapien tellus aliquam facilisi sit volutpat. Scelerisque auctor purus nam sit lacus amet ullamcorper amet. Turpis nulla quis in pretium. Maecenas aliquam ac ullamcorper suspendisse morbi cras. Mi nibh aliquet massa sit eget tristique a. Posuere pretium auctor tellus massa et eu egestas. Sit lorem proin aenean tortor morbi condimentum. Leo eu enim cursus tempus sed viverra laoreet. Nisl ornare velit molestie suspendisse. Hendrerit nibh mauris vulputate sit vitae. Tellus quisque non nibh proin nunc lacus scelerisque dui. Aliquam fermentum libero aliquet volutpat at. Vestibulum ultrices nec felis leo nibh viverra. Hendrerit ut nunc porta egestas sit velit dictumst dis porta. Donec quam aliquam commodo mattis purus. Tellus nulla lectus fusce in fames scelerisque at."
+
+const assignments = [
+    {
+        id: '1',
+        name: '#1',
+        deadline: new Date(2024, 11, 17)
+    },
+    {
+        id: '2',
+        name: '#2',
+        deadline: new Date(2024, 10, 25)
+    },
+    {
+        id: '3',
+        name: '#3',
+        deadline: new Date(2024, 9, 30)
+    },
+    {
+        id: '4',
+        name: '#4',
+        deadline: new Date(2024, 8, 12)
+    },
+    {
+        id: '5',
+        name: '#5',
+        deadline: new Date(2024, 7, 8)
+    },
+    {
+        id: '6',
+        name: '#6',
+        deadline: new Date(2024, 6, 15)
+    },
+    {
+        id: '7',
+        name: '#7',
+        deadline: new Date(2024, 5, 20)
+    },
+    {
+        id: '8',
+        name: '#8',
+        deadline: new Date(2024, 4, 10)
+    },
+    {
+        id: '9',
+        name: '#9',
+        deadline: new Date(2024, 3, 28)
+    }
+];
+
+
+
+export function AssignmentStudentPage() {
+    return (
+        <>
+        <Header variant={"default"} title={"Naam Opdracht"}></Header>
+        <Stack marginTop={15} direction={"column"} spacing={4} sx={{width:"100%" ,height:"100%", backgroundColor:"background.default"}}>
+
+            {/*deadline and groep button */ }
+            <Stack direction={"row"}>
+                <Typography color="text.primary">Deadline: 02/04/2024</Typography>
+                <div style={{ flexGrow: 1 }} />
+                <Button sx={{ bgcolor: 'secondary.main', textTransform: 'none' }}>
+                    <Typography color="secondary.contrastText">groep</Typography>
+                </Button>
+            </Stack>
+
+            {/*Opgave*/ }
+            <Card elevation={1} sx={{
+                color:"text.primary", 
+                padding: '20px',
+                backgroundColor: "background.default",
+                borderRadius:5,
+                }}
+            >
+                <Stack direction={"column"}>
+                    <Typography sx={{ textDecoration: 'underline' }}>Opgave</Typography>
+                    <Typography>{text}</Typography>
+                </Stack>
+            </Card>
+
+            {/*Indieningen*/ }
+            <Card elevation={1} sx={{ 
+                    color:"text.primary", 
+                    backgroundColor: "background.default",
+                    borderRadius:5,
+                    padding: '20px' 
+                }}
+            >
+                <Box display={"flex"} flexDirection={"row"} justifyContent={"space-between"} paddingLeft={0} paddingRight={10}>
+                    <Typography width={30}>Indiening</Typography>
+                    <Typography width={30}>Datum</Typography>
+                </Box>
+                <List disablePadding={true}>
+                    {assignments.map((assignment) => (
+                        <>
+                            <Divider color={"text.main"}></Divider>
+                            <AssignmentListItem key={assignment.id} projectName={assignment.name}
+                                                dueDate={assignment.deadline}
+                                                status={assignment.id === "assignment1"}
+                                                isStudent={false}/>
+
+                        </>
+                    ))}
+                </List>
+            </Card>
+
+            {/*Upload knop*/ }
+            <Stack direction={"row"}>
+                <Button sx={{ bgcolor: 'primary.main', textTransform: 'none' }}>
+                    <Typography color="primary.contrastText">Uploaden</Typography>
+                </Button>
+                <div style={{ flexGrow: 1 }} />
+                <Button sx={{ bgcolor: 'success.main', textTransform: 'none' }}>
+                    <Typography color="primary.contrastText">Uploaden Geslaagd</Typography>
+                </Button>
+            </Stack>
+
+        </Stack>
+        </>
+    );
+}

frontend/frontend/src/pages/assignmentPage/assignmentTeacherPage.tsx

@@ -0,0 +1,136 @@
+import {Header} from "../../components/Header.tsx";
+import {Grid ,TextField,Box,List, Button, Stack, Typography, Card, Divider, ListItem, ListItemText} from "@mui/material";
+import UploadIcon from '@mui/icons-material/Upload';
+import SaveIcon from '@mui/icons-material/Save';
+import AddIcon from '@mui/icons-material/Add';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+const text = "Lorem ipsum dolor sit amet consectetur. Nisi magna dolor et nisi nibh et velit phasellus. Aliquam semper justo posuere suspendisse amet amet nam nec. Tellus magna in proin tempor hac sit. Faucibus laoreet nulla commodo quis. Porttitor sit facilisis sit dignissim quis. Malesuada etiam tempor donec et ante. Aliquam massa donec augue aliquam semper amet blandit sed faucibus. Et elementum duis adipiscing turpis mi. Senectus eu rutrum accumsan convallis metus mattis risus. Quam eget sapien tellus aliquam facilisi sit volutpat. Scelerisque auctor purus nam sit lacus amet ullamcorper amet. Turpis nulla quis in pretium. Maecenas aliquam ac ullamcorper suspendisse morbi cras. Mi nibh aliquet massa sit eget tristique a. Posuere pretium auctor tellus massa et eu egestas. Sit lorem proin aenean tortor morbi condimentum. Leo eu enim cursus tempus sed viverra laoreet. Nisl ornare velit molestie suspendisse. Hendrerit nibh mauris vulputate sit vitae. Tellus quisque non nibh proin nunc lacus scelerisque dui. Aliquam fermentum libero aliquet volutpat at. Vestibulum ultrices nec felis leo nibh viverra. Hendrerit ut nunc porta egestas sit velit dictumst dis porta. Donec quam aliquam commodo mattis purus. Tellus nulla lectus fusce in fames scelerisque at."
+
+const restrictions = [
+    {
+        type: 'bestandstype',
+        details: '.pdf .zip',
+    },
+    {
+        type: 'bestandsgrootte',
+        details: '< 0.25 gb',
+    },
+    {
+        type: 'docker test',
+        details: 'filename',
+    },
+]
+
+interface restrictionProps {
+    type: string,
+    details: string,
+}
+
+export function Restriction({type,details}:restrictionProps) {
+    return (
+        <>
+            <ListItem>
+                <ListItemText>{type}</ListItemText>
+                <ListItemText>{details}</ListItemText>
+            </ListItem>
+        </>
+    );
+}
+
+
+export function AssignmentTeacherPage() {
+    return (
+        <>
+        <Header variant={"default"} title={"Naam Project"}></Header>
+        <Stack marginTop={15} direction={"column"} spacing={4} sx={{width:"100%" ,height:"100%", backgroundColor:"background.default"}}>
+
+            {/*opdracht and upload button*/ }
+            <Stack direction={"row"}>
+                    <Grid container spacing={2} alignItems="center">
+                        <Grid item>
+                            <Typography variant="h6" sx={{ textDecoration: 'underline' }} color="text.primary">
+                                Naam Opdracht:
+                            </Typography>
+                        </Grid>
+                        <Grid item>
+                            <TextField variant="outlined" />
+                        </Grid>
+                    </Grid>
+                    <div style={{ flexGrow: 1 }} />
+                    <Button sx={{ bgcolor: 'secondary.main', textTransform: 'none' }}>
+                        <Typography color="secondary.contrastText">upload opgavebestand</Typography>
+                        <UploadIcon></UploadIcon>
+                    </Button>
+            </Stack>
+
+
+            <Grid container spacing={2} alignItems="center">
+                <Grid item>
+                    <Typography variant="h6" sx={{ textDecoration: 'underline' }} color="text.primary">
+                        Deadline:
+                    </Typography>
+                </Grid>
+                <Grid item>
+                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                        <DatePicker />
+                    </LocalizationProvider>
+                </Grid>
+            </Grid>
+
+            {/*Opgave*/ }
+            <Card elevation={1} sx={{
+                color:"text.primary", 
+                padding: '20px',
+                backgroundColor: "background.default",
+                borderRadius:5,
+                }}
+            >
+                <Stack direction={"column"}>
+                    <Typography sx={{ textDecoration: 'underline' }}>Opgave</Typography>
+                    <Typography>{text}</Typography>
+                </Stack>
+            </Card>
+
+            {/*Restricties*/ }
+            <Card elevation={1} sx={{ 
+                    color:"text.primary", 
+                    backgroundColor: "background.default",
+                    borderRadius:5,
+                    padding: '20px' 
+                }}
+            >
+                <List>
+                    <ListItem>
+                        <ListItemText><strong>Type restrictie</strong></ListItemText>
+                        <ListItemText><strong>Details</strong></ListItemText>
+                    </ListItem>
+                    <Divider/>
+
+                    {restrictions.map((res) =>
+                        <Restriction type={res.type} details={res.details}></Restriction>
+                    )}
+
+                </List>
+
+                <Button sx={{ bgcolor: 'secondary.main'}}>
+                    <AddIcon sx={{ color: "secondary.contrastText" }}></AddIcon>
+                </Button>
+
+            </Card>
+
+            <Stack direction={"row"}>
+                <Button sx={{ bgcolor: 'secondary.main', textTransform: 'none' }}>
+                    <Typography color="secondary.contrastText">groepen</Typography>
+                </Button>
+                <div style={{ flexGrow: 1 }} />
+                <Button sx={{ bgcolor: 'secondary.main', textTransform: 'none' }}>
+                <   SaveIcon sx={{ color: "secondary.contrastText" }} ></SaveIcon>
+                </Button>
+            </Stack>
+        </Stack>    
+        </>
+    );
+}