Skip to content

Commit

Permalink
imports geoptimaliseerd en dubbele declaraties verwijderd. paginas mo…
Browse files Browse the repository at this point in the history 
…ete nu werkende zijn.
  • Loading branch information
@Bendemeurichy
Bendemeurichy committed Mar 13, 2024
1 parent ca52e98 commit ff3cbef
Show file tree
Hide file tree
Showing 6 changed files with 269 additions and 254 deletions.
74 changes: 43 additions & 31 deletions frontend/frontend/src/components/ItemList.tsx
View file
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
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
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
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

0 comments on commit ff3cbef

Please sign in to comment.