Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kleine errors opgelost #56

Merged
merged 1 commit into from
Mar 13, 2024
+269 −254
Merged

Kleine errors opgelost #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 43 additions & 31 deletions frontend/frontend/src/components/ItemList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,52 @@
import { Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody,useTheme, ThemeProvider } from '@mui/material';
import {Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from '@mui/material';
import theme from '../Theme';

interface Item {
opdracht: string;
deadline: string;
status: string;
score: string;
opdracht: string;
deadline: string;
status: string;
score: string;
}

interface ItemListProps {
itemList: Item[];
itemList: Item[];
}

export const ItemList: React.FC<ItemListProps> = ({ itemList }) => {
return (
<TableContainer component={Paper} variant="outlined">
<Table>
<TableHead>
<TableRow>
<TableCell style={{ backgroundColor: theme.palette.secondary.main, color: theme.palette.secondary.contrastText }}>Opdracht</TableCell>
<TableCell style={{ backgroundColor: theme.palette.secondary.main, color: theme.palette.secondary.contrastText }}>Deadline</TableCell>
<TableCell style={{ backgroundColor: theme.palette.secondary.main, color: theme.palette.secondary.contrastText }}>Status</TableCell>
<TableCell style={{ backgroundColor: theme.palette.secondary.main, color: theme.palette.secondary.contrastText }}>Score</TableCell>
</TableRow>
</TableHead>
<TableBody>
{itemList.map((item, index) => (
<TableRow key={index}>
<TableCell>{item.opdracht}</TableCell>
<TableCell>{item.deadline}</TableCell>
<TableCell>{item.status}</TableCell>
<TableCell>{item.score}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
export const ItemList: React.FC<ItemListProps> = ({itemList}) => {
return (
<TableContainer component={Paper} variant="outlined">
<Table>
<TableHead>
<TableRow>
<TableCell style={{
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText
}}>Opdracht</TableCell>
<TableCell style={{
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText
}}>Deadline</TableCell>
<TableCell style={{
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText
}}>Status</TableCell>
<TableCell style={{
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText
}}>Score</TableCell>
</TableRow>
</TableHead>
<TableBody>
{itemList.map((item, index) => (
<TableRow key={index}>
<TableCell>{item.opdracht}</TableCell>
<TableCell>{item.deadline}</TableCell>
<TableCell>{item.status}</TableCell>
<TableCell>{item.score}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
26 changes: 14 additions & 12 deletions frontend/frontend/src/components/StudentScoreListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {ListItem, ListItemText, Divider, TextField, IconButton} from "@mui/material";
import {Divider, IconButton, ListItem, ListItemText, TextField} from "@mui/material";
import DownloadIcon from '@mui/icons-material/Download';
import {t} from "i18next";

//TODO: take care of internationalization

interface StudentScoreListItemProps {
key: string;
Expand All @@ -15,10 +16,10 @@ interface StudentScoreListItemProps {
* @param submissionFiles: string[] - a list of all files submitted by this student
*/

export function StudentScoreListItem({key, studentName, submissionFiles}:StudentScoreListItemProps) {
export function StudentScoreListItem({key, studentName, submissionFiles}: StudentScoreListItemProps) {
return (
<>
<ListItem key={studentName} sx={{margin:0}} disablePadding={true}>
<ListItem key={studentName} sx={{margin: 0}} disablePadding={true}>
<ListItem sx={{
width: "100%",
height: 30,
Expand All @@ -27,18 +28,19 @@ export function StudentScoreListItem({key, studentName, submissionFiles}:Student
justifyContent: "space-between",
paddingX: 1,
paddingY: 3,
borderRadius:2,
borderRadius: 2,
}}>
<>
<ListItemText sx={{maxWidth:100}} primary={studentName}/>
<ListItemText sx={{maxWidth:110}} primary={submissionFiles.length? submissionFiles.length + " indieningen" : "geen indieningen"}/>
<ListItem sx={{maxWidth:100}}>
<TextField hiddenLabel defaultValue="0" variant="filled" size="small" />
<ListItemText sx={{maxWidth:100}} primary="/20"/>
<ListItemText sx={{maxWidth: 100}} primary={studentName}/>
<ListItemText sx={{maxWidth: 110}}
primary={submissionFiles.length ? submissionFiles.length + " indieningen" : "geen indieningen"}/>
<ListItem sx={{maxWidth: 100}}>
<TextField hiddenLabel defaultValue="0" variant="filled" size="small"/>
<ListItemText sx={{maxWidth: 100}} primary="/20"/>
</ListItem>
<ListItem sx={{maxWidth:100}}>
<ListItem sx={{maxWidth: 100}}>
<IconButton edge="end" aria-label="download">
<DownloadIcon />
<DownloadIcon/>
</IconButton>
</ListItem>
</>
Expand Down
76 changes: 37 additions & 39 deletions frontend/frontend/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,12 @@ import ErrorPage from "./pages/ErrorPage.tsx";
import {MainPage} from "./pages/mainPage/MainPage.tsx";
import {Helmet, HelmetProvider} from "react-helmet-async";

import { SubjectsStudentPage } from "./pages/subjectsPage/SubjectsStudentPage.tsx";
import { SubjectsTeacherPage } from "./pages/subjectsPage/SubjectsTeacherPage.tsx";
import { ProjectScoresPage } from "./pages/scoresPage/ProjectScoresPage.tsx";
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 {SubjectsStudentPage} from "./pages/SubjectsPage/SubjectsStudentPage.tsx";
import {SubjectsTeacherPage} from "./pages/SubjectsPage/SubjectsTeacherPage.tsx";
import {ProjectScoresPage} from "./pages/scoresPage/ProjectScoresPage.tsx";
import {AssignmentStudentPage} from "./pages/assignmentPage/assignmentStudentPage";
import {AssignmentTeacherPage} from "./pages/assignmentPage/assignmentTeacherPage.tsx";
import {GroupsPage} from "./pages/groupsPage/groupsPage.tsx";
import {LocalizationProvider} from "@mui/x-date-pickers";
import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs/AdapterDayjs';

Expand All @@ -25,37 +23,37 @@ import {SimpleRequestsPage} from "./pages/simpleRequestsPage/SimpleRequestsPage.


const router = createBrowserRouter([
{
path: "/",
element: <MainPage />,
errorElement: <ErrorPage />,
},
{
path: "/subjects_student/:courseId",
element: <SubjectsStudentPage />,
},
{

path: "/subjects_teacher/:courseId",
element: <SubjectsTeacherPage />,
},
{
path: "/scores",
element: <ProjectScoresPage />,
},
{
path: "/",
element: <MainPage/>,
errorElement: <ErrorPage/>,
},
{
path: "/subjects_student/:courseId",
element: <SubjectsStudentPage/>,
},
{

path: "/assignment_student",
element: <AssignmentStudentPage />,
},
{
path: "/assignment_teacher",
element: <AssignmentTeacherPage/>,
},
{
path: "/groups",
element: <GroupsPage/>,
},
{
path: "/subjects_teacher/:courseId",
element: <SubjectsTeacherPage/>,
},
{
path: "/scores",
element: <ProjectScoresPage/>,
},
{
path: "/assignment_student",
element: <AssignmentStudentPage/>,
},
{
path: "/assignment_teacher",
element: <AssignmentTeacherPage/>,
},
{
path: "/groups",
element: <GroupsPage/>,
},
{
path: "/subjects_student",
element: <SubjectsStudentPage/>,
},
Expand All @@ -65,7 +63,7 @@ const router = createBrowserRouter([
path: "/submission/:project",
element: <SubmissionPage/>,
},
{
{
path: "/test_requests",
element: <SimpleRequestsPage/>,
}
Expand Down
121 changes: 61 additions & 60 deletions frontend/frontend/src/pages/assignmentPage/assignmentStudentPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Header} from "../../components/Header.tsx";
import { AssignmentListItem } from "../../components/AssignmentListItem.tsx";
import {Box,List, Button, Stack, Typography, Card, Divider} from "@mui/material";
import {AssignmentListItem} from "../../components/AssignmentListItem.tsx";
import {Box, Button, Card, Divider, List, Stack, Typography} 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."

Expand Down Expand Up @@ -53,74 +53,75 @@ const assignments = [
];



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>
<Header variant={"default"} title={"Naam Opdracht"}></Header>
<Stack marginTop={15} direction={"column"} spacing={4}
sx={{width: "100%", height: "100%", backgroundColor: "background.default"}}>

{/*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>
{/*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>
</Card>

{/*Indieningen*/ }
<Card elevation={1} sx={{
color:"text.primary",
{/*Opgave*/}
<Card elevation={1} sx={{
color: "text.primary",
padding: '20px',
backgroundColor: "background.default",
borderRadius:5,
padding: '20px'
borderRadius: 5,
}}
>
<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>
>
<Stack direction={"column"}>
<Typography sx={{textDecoration: 'underline'}}>Opgave</Typography>
<Typography>{text}</Typography>
</Stack>
</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>
{/*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 id={assignment.id} projectName={assignment.name}
dueDate={assignment.deadline}
status={assignment.id === "assignment1"}
isStudent={false}/>

</>
))}
</List>
</Card>

</Stack>
{/*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>
</>
);
}
Loading
Loading