Merge branch 'frontend' into frontend_visuals

frontend/frontend/src/components/DeadlineCalendar.tsx

@@ -99,10 +99,24 @@ function DeadlineMenu({ assignments, selectedDay }: DeadlineMenuProps) {
             width={'100%'}
             alignItems={'center'}
         >
-            <Typography>
+            <Typography color={'text.primary'}>
                 {t('deadlines_on')}: {selectedDay?.format('DD/MM/YYYY')}
             </Typography>
-            <List>
+            <List sx={{ width: '100%' }}>
+                {assignments.filter((assignment: project) => {
+                    return dayjs(assignment.deadline).isSame(selectedDay, 'day')
+                }).length === 0 && (
+                    <ListItem>
+                        <ListItemText>
+                            <Typography
+                                textAlign={'center'}
+                                color={'text.primary'}
+                            >
+                                {t('no_deadline') + 's'}
+                            </Typography>
+                        </ListItemText>
+                    </ListItem>
+                )}
                 {assignments
                     .filter((assignment: project) =>
                         dayjs(assignment.deadline).isSame(selectedDay, 'day')
@@ -121,6 +135,7 @@ function DeadlineMenu({ assignments, selectedDay }: DeadlineMenuProps) {
                                 }
                             >
                                 <ListItemText primary={assignment.titel} />
+
                             </ListItemButton>
                         </ListItem>
                     ))}

frontend/frontend/src/components/GroupAccessComponent.tsx

@@ -1,8 +1,6 @@
 import { Button } from './CustomComponents'
-import { Box, Typography } from '@mui/material'
+import { Box } from '@mui/material'
 import { t } from 'i18next'
-import Switch from '@mui/material/Switch'
-import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 interface GroupAccessComponentProps {
@@ -20,17 +18,12 @@ export function GroupAccessComponent({
     courseid,
 }: GroupAccessComponentProps) {
     const navigate = useNavigate()
-    const [allowGroups, setAllowGroups] = useState(false)
 
     // Handle click event to navigate to the groups page
     const handleClick = () => {
         navigate(`/course/${courseid}/assignment/${assignmentid}/groups`)
     }
 
-    useEffect(() => {
-        //set max group size to 1 if groups are not allowed and register all students to a group of their own
-    }, [allowGroups])
-
     return (
         <>
             <Box
@@ -42,20 +35,7 @@ export function GroupAccessComponent({
                 marginBottom={2}
             >
                 {/* Button to navigate to groups page */}
-                {allowGroups ? (
-                    <Button onClick={handleClick}>{t('groups')}</Button>
-                ) : (
-                    // Show text indicating groups are not allowed
-                    <Typography color={'text.primary'} variant={'body1'}>
-                        {t('groups')}
-                    </Typography>
-                )}
-                {/* Switch to toggle group access */}
-                <Switch
-                    checked={allowGroups}
-                    onChange={() => setAllowGroups(!allowGroups)}
-                    color={'primary'}
-                />
+                <Button onClick={handleClick}>{t('groups')}</Button>
             </Box>
         </>
     )

frontend/frontend/src/components/Header.tsx

@@ -120,7 +120,8 @@ export const Header = ({ variant, title }: Props) => {
                                 </IconButton>
                             </Tooltip>
                             {/* Back Button (if variant is not default) */}
-                            {!(variant === 'default' || variant === 'main') && (
+                            {(variant === 'not_main' ||
+                                variant === 'editable') && (
                                 <Tooltip title={t('back')}>
                                     <IconButton
                                         onClick={handleBack}

frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx

@@ -17,7 +17,7 @@ import dayjs from 'dayjs'
 import { EvenlySpacedRow } from './CustomComponents.tsx'
 
 interface SubmissionListItemTeacherPageProps {
-    relative_group_id: string
+    group_name: string
     group_id: string
     assignment_id: string
     course_id: string
@@ -34,7 +34,7 @@ export interface Score {
  * @param {SubmissionListItemTeacherPageProps} props - Props for SubmissionListItemTeacherPage component
  */
 export function SubmissionListItemTeacherPage({
-    relative_group_id,
+    group_name,
     group_id,
     assignment_id,
     course_id,
@@ -63,34 +63,40 @@ export function SubmissionListItemTeacherPage({
                     submissionsResponse.data[
                         submissionsResponse.data.length - 1
                     ]
-                const lastSubmissionResponse = await instance.get(
-                    `indieningen/${lastSubmission.indiening_id}/`
-                )
-                //Get the submission file
-                const newSubmission: Submission = lastSubmissionResponse.data
-                newSubmission.filename =
-                    lastSubmissionResponse.data.bestand.replace(/^.*[\\/]/, '')
-                newSubmission.bestand = await instance
-                    .get(
-                        `/indieningen/${lastSubmission.indiening_id}/indiening_bestand`,
-                        {
-                            responseType: 'blob',
-                        }
+                if (lastSubmission) {
+                    const lastSubmissionResponse = await instance.get(
+                        `indieningen/${lastSubmission.indiening_id}/`
                     )
-                    .then((res) => {
-                        let filename = 'indiening.zip'
-                        if (newSubmission.filename) {
-                            filename = newSubmission.filename
-                        }
-                        const blob = new Blob([res.data], {
-                            type: res.headers['content-type'],
+                    //Get the submission file
+                    const newSubmission: Submission =
+                        lastSubmissionResponse.data
+                    newSubmission.filename =
+                        lastSubmissionResponse.data.bestand.replace(
+                            /^.*[\\/]/,
+                            ''
+                        )
+                    newSubmission.bestand = await instance
+                        .get(
+                            `/indieningen/${lastSubmission.indiening_id}/indiening_bestand`,
+                            {
+                                responseType: 'blob',
+                            }
+                        )
+                        .then((res) => {
+                            let filename = 'indiening.zip'
+                            if (newSubmission.filename) {
+                                filename = newSubmission.filename
+                            }
+                            const blob = new Blob([res.data], {
+                                type: res.headers['content-type'],
+                            })
+                            const file: File = new File([blob], filename, {
+                                type: res.headers['content-type'],
+                            })
+                            return file
                         })
-                        const file: File = new File([blob], filename, {
-                            type: res.headers['content-type'],
-                        })
-                        return file
-                    })
-                setSubmitted(newSubmission)
+                    setSubmitted(newSubmission)
+                }
                 if (lastSubmission) {
                     const scoreResponse = await instance.get(
                         `/scores/?indiening=${lastSubmission.indiening_id}`

frontend/frontend/src/i18n/en.ts

@@ -105,9 +105,14 @@ const english = {
     join_group: 'Join',
     leave: 'Leave',
     acces: 'This gives you access to the course.',
+    copy_invite: 'Copy invitation link',
     deadlines_on: 'Deadlines on',
+    no_assignmentfile: 'No assignment file',
     email: 'email',
-    copy_invite: 'Copy invitation link',
+    n_of_members: 'Max Amount Of Members',
+    existing_submissions:
+        'This could impact existing submissions. Are you sure?',
+    divide_groups: 'Divide Groups',
     noGroup: "You don't seem to be in a group yet.",
     contactTeacher: 'Please contact your teacher.',
     chooseGroup: 'Join a group before submitting.',

frontend/frontend/src/i18n/nl.ts

@@ -105,9 +105,14 @@ const dutch = {
     join_group: 'Wordt lid',
     leave: 'Verlaat',
     acces: 'Dit geeft je toegang tot het vak.',
+    copy_invite: 'Kopieer uitnodigingslink',
+    no_assignmentfile: 'Geen opdrachtbestand',
     deadlines_on: 'Deadlines op',
     email: 'email',
-    copy_invite: 'Kopieer uitnodigingslink',
+    n_of_members: 'Max Aantal Leden',
+    existing_submissions:
+        'Dit kan invloed hebben op bestaande indieningen. Weet je het zeker?',
+    divide_groups: 'Verdeel Groepen',
     noGroup: 'Je lijkt nog geen groep te hebben.',
     chooseGroup: 'Kies een groep voor je indient',
     contactTeacher: 'Gelieve contact op te nemen met je lesgever.',

frontend/frontend/src/pages/FourOFourPage.tsx

@@ -0,0 +1,106 @@
+import { Box, Typography } from '@mui/material'
+import { t } from 'i18next'
+
+export default function FourOFourPage() {
+    return (
+        <>
+            <Box
+                position="fixed"
+                top={0}
+                left={0}
+                height="100%"
+                width="100%"
+                component="div"
+                sx={{
+                    backgroundColor: 'secondary.main',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    display: 'flex',
+                    backgroundSize: 'cover',
+                }}
+            >
+                <Box
+                    className="background-image"
+                    component="div"
+                    height="100%"
+                    width="100%"
+                    top={0}
+                    left={0}
+                    sx={{
+                        backgroundImage: `url(/assets/ufo-logo-3375276369.png)`,
+                        opacity: 0.2,
+                        position: 'fixed',
+                        backgroundSize: 'cover',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        flexDirection: 'column',
+                        padding: 0,
+                        margin: 0,
+                        zIndex: -1,
+                    }}
+                />
+                <Box
+                    component="div"
+                    className="contentContainer"
+                    display="flex"
+                    position={'relative'}
+                    flexDirection="column"
+                    alignItems="center"
+                    justifyContent={'center'}
+                    alignSelf={'center'}
+                    maxWidth="60%"
+                    maxHeight="60%"
+                >
+                    <Box
+                        component="div"
+                        className="upperContainer"
+                        display="flex"
+                        flexDirection="row"
+                        alignItems="center"
+                        justifyContent={'center'}
+                        alignSelf={'center'}
+                    >
+                        <Box
+                            component="img"
+                            src={t('logo_blue')}
+                            alt="logo"
+                            sx={{
+                                maxHeight: '20%',
+                                maxWidth: '30%',
+                            }}
+                        />
+                        <Box
+                            component="div"
+                            display="flex"
+                            flexDirection="column"
+                            maxWidth={'40%'}
+                            maxHeight={'30%'}
+                        >
+                            <Typography
+                                variant="h4"
+                                sx={{
+                                    color: 'error.main',
+                                    maxWidth: '100%',
+                                    maxHeight: '50%',
+                                }}
+                            >
+                                {"404"}
+                            </Typography>
+                            <Typography
+                                variant={'h5'}
+                                sx={{
+                                    color: 'error.main',
+                                    maxWidth: '100%',
+                                    maxHeight: '50%',
+                                }}
+                            >
+                                {"Error: Page not found"}
+                            </Typography>
+                        </Box>
+                    </Box>
+                </Box>
+            </Box>
+        </>
+    )
+}