Skip to content

Commit

Permalink
Merge pull request #171 from SELab-2/mobile
Browse files Browse the repository at this point in the history 
mobile legends 💥
  • Loading branch information
@ReinhardDP
ReinhardDP committed May 18, 2024
2 parents d515b2d + a07295c commit 00df68f
Show file tree
Hide file tree
Showing 8 changed files with 684 additions and 788 deletions.
44 changes: 23 additions & 21 deletions frontend/app/[locale]/components/CourseBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ const CourseBanner = ({course_id}: CourseBannerProps) => {
if (error instanceof APIError) setError(error);
console.log(error);
}

};

fetchCourse();
Expand All @@ -48,50 +47,53 @@ const CourseBanner = ({course_id}: CourseBannerProps) => {
<Box
sx={{
backgroundColor: 'primary.main',
color: 'whiteS',
color: 'white',
display: 'flex',
justifyContent: 'center',
flexDirection: { xs: 'column', sm: 'row' },
justifyContent: 'space-between',
alignItems: 'center',
height: '150px',
height: { xs: 'auto', sm: '150px' },
padding: 2,
borderRadius: '16px',
textAlign: 'center',
}}
>
<Box
display="flex"
justifyContent="flex-start"
justifyContent={{ xs: 'center', sm: 'flex-start' }}
alignItems="center"
width={"calc(100% - 200px)"}
height={'100%'}
width={{ xs: '100%', sm: "calc(100% - 200px)" }}
height={{ xs: 'auto', sm: '100%' }}
textAlign={{ xs: 'center', sm: 'left' }}
>
<Typography
variant="h2"
textAlign="center"
noWrap={true}
padding={0}
variant="h4"
sx={{
color: 'white',
height: 'fit-content',
fontSize: { xs: '1.5rem', sm: '2rem', md: '2.5rem' },
whiteSpace: { xs: 'normal', sm: 'nowrap' },
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{course?.name + (course?.year === null ? "" : " " + course?.year)}
</Typography>
</Box>
{user?.role !== 3 ? (
<Box
height="100%"
display="flex"
flexDirection="column"
justifyContent="flex-start"
alignItems="flex-start"
textAlign="left"
paddingY={2}
justifyContent={{ xs: 'center', sm: 'flex-start' }}
alignItems="center"
paddingY={{ xs: 1, sm: 0 }}
width={{ xs: '100%', sm: 'auto' }}
>
<EditCourseButton course_id={course_id}/>
<EditCourseButton course_id={course_id} />
</Box>
): null}
) : null}
</Box>
)
)
);
}

export default CourseBanner
export default CourseBanner;
194 changes: 65 additions & 129 deletions frontend/app/[locale]/components/CourseCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,34 @@
"use client";
import React, {useEffect, useState} from 'react';
import {Card, CardContent, CardMedia, Typography, Box} from '@mui/material';
import {Course, getLastSubmissionFromProject, getProjectsFromCourse, Project, Submission,} from "@lib/api";
import {useTranslation} from "react-i18next";
import React, { useEffect, useState } from 'react';
import { Card, CardContent, CardMedia, Typography, Box } from '@mui/material';
import { Course, getLastSubmissionFromProject, getProjectsFromCourse, Project, Submission } from '@lib/api';
import { useTranslation } from 'react-i18next';
import ListView from '@app/[locale]/components/ListView';
import AccesAlarm from '@mui/icons-material/AccessAlarm';
import Person from '@mui/icons-material/Person';

const CourseCard = ({params: {course}}: { params: { course: Course } }) => {
const [projects, setProjects] = useState<Project[]>([]);
const [last_submission, setSubmission] =
useState<Submission>({
submission_id: 0,
group_id: 0,
submission_nr: 0,
file: '',
timestamp: '',
output_test: '',
});
const [hover, setHover] = useState(false);

const {t} = useTranslation()

useEffect(() => {
const fetchProjects = async () => {
try {
setProjects(await getProjectsFromCourse(course.course_id));
const fetched_submissions = new Map<number, Submission>();
for (let i = 0; i < projects.length; i++) {
const project = projects[i];
setSubmission(await getLastSubmissionFromProject(project.project_id));
if (last_submission.group_id !== null) {
fetched_submissions.set(project.project_id, last_submission);
}
}
} catch (error) {
console.log(error);
}

};
const CourseCard = ({ params: { course } }: { params: { course: Course } }) => {
const [projects, setProjects] = useState<Project[]>([]);
const [lastSubmission, setLastSubmission] = useState<Submission | null>(null);
const { t } = useTranslation();

useEffect(() => {
const fetchProjects = async () => {
try {
const fetchedProjects = await getProjectsFromCourse(course.course_id);
setProjects(fetchedProjects);

// Fetch last submission for each project
const promises = fetchedProjects.map(async (project) => {
const lastSubmission = await getLastSubmissionFromProject(project.project_id);
return { projectId: project.project_id, lastSubmission };
});
const projectSubmissions = await Promise.all(promises);
setLastSubmission(projectSubmissions);
} catch (error) {
console.error(error);
}
};
fetchProjects();
}, [course.course_id]);

Expand All @@ -50,99 +39,46 @@ const CourseCard = ({params: {course}}: { params: { course: Course } }) => {
];
const headers_backend = ['name', 'deadline', '']


return (
<Card
sx={{
width: 600,
height: 450,
margin: '16px',
borderRadius: '8px',
border: hover? 1 : 'none', // Conditional border
transition: 'border 0.1s ease-in-out',
borderColor: 'secondary.main',
boxShadow: hover? 6 : 2, // Conditional shadow
}}
>
<CardMedia
sx={{
height: 75,
backgroundColor: 'secondary.main',
}}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<Box
display={'flex'}
justifyContent="flex-start"
alignItems="center"
height={'100%'}
width={'100%'}
onClick={() => window.location.href = `/course/${course.course_id}`}
sx={{
cursor: 'pointer',
}}
>
<Typography
variant="h5"
component="div"
justifyContent={'center'}
margin={2}
>
{course.name}
</Typography>
</Box>
</CardMedia>
<CardContent
sx={{
height: 300,
width: '100%',
}}
>
<Typography
variant="h6"
component="div"
justifyContent={'center'}
>
{t('projects')}
</Typography>
{
projects.length == 0 ? (
<Box
height={'100%'}
width={'100%'}
display={'flex'}
justifyContent={'center'}
alignItems={'center'}
>
<Typography
variant={'h4'}
alignContent={'center'}
alignItems={'center'}
sx= {{
color: 'text.disabled'
}}
>
{t('no_projects')}
</Typography>
</Box>
) : (
<ListView
admin={false}
headers={headers}
headers_backend={headers_backend}
sortable={[true, true, false]}
get={'projects'}
get_id={course.course_id}
search={false}
page_size={3}
/>
)
}
</CardContent>
</Card>
);
return (
<Card sx={{ width: '100%', margin: '16px', borderRadius: '8px' }}>
<CardMedia sx={{ height: 150, backgroundColor: 'secondary.main' }}>
<Box
display="flex"
justifyContent="center"
alignItems="center"
height="100%"
onClick={() => window.location.href = `/course/${course.course_id}`}
sx={{ cursor: 'pointer' }}
>
<Typography variant="h5" component="div">
{course.name}
</Typography>
</Box>
</CardMedia>
<CardContent>
<Typography variant="h6" component="div" marginBottom={2}>
{t('projects')}
</Typography>
{projects.length === 0 ? (
<Typography variant="h4" color="text.disabled" align="center">
{t('no_projects')}
</Typography>
) : (
<ListView
admin={false}
headers={headers}
headers_backend={headers_backend}
sortable={[true, true, false]}
get="projects"
get_id={course.course_id}
search={false}
pageSize={3}
lastSubmissions={lastSubmission}
/>
)}
</CardContent>
</Card>
);
};


export default CourseCard;
Loading

0 comments on commit 00df68f

Please sign in to comment.