Skip to content

Commit

Permalink
Merge pull request #55 from SELab-2/frontend
Browse files Browse the repository at this point in the history
Frontend
  • Loading branch information
sPAICEcake authored Mar 13, 2024
2 parents f765375 + ca52e98 commit 5370e42
Show file tree
Hide file tree
Showing 36 changed files with 1,915 additions and 519 deletions.
8 changes: 8 additions & 0 deletions frontend/frontend/.vite/deps/_metadata.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"hash": "ea10a7bd",
"configHash": "baf76694",
"lockfileHash": "e3b0c442",
"browserHash": "89947c23",
"optimized": {},
"chunks": {}
}
3 changes: 3 additions & 0 deletions frontend/frontend/.vite/deps/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"type": "module"
}
546 changes: 303 additions & 243 deletions frontend/frontend/package-lock.json

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions frontend/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^5.0.8",
"@mui/icons-material": "^5.15.11",
"@mui/material": "^5.15.11",
"@mui/material": "^5.15.12",
"@mui/x-date-pickers": "^6.19.6",
"axios": "^1.6.7",
"dayjs": "^1.11.10",
"i18next": "^23.10.0",
"i18next-browser-languagedetector": "^7.2.0",
"i18next-http-backend": "^2.5.0",
Expand Down
File renamed without changes
8 changes: 6 additions & 2 deletions frontend/frontend/src/Theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ const theme = createTheme({
palette: {
primary: {
main: '#1E64C8',
light: '#D0E4FF',
dark: '#1E64C8',
contrastText: '#FCF8FD'
},
secondary: {
Expand All @@ -15,15 +17,17 @@ const theme = createTheme({
},
text: {
primary: '#47464A',
secondary: '#898991'
secondary: '#FCF8FD'
},
error: {
main: '#FF5445'
},
success: {
main: '#81A476'
}
},

},

});

export default theme;
22 changes: 13 additions & 9 deletions frontend/frontend/src/components/AssignmentListItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
import {useNavigate} from "react-router-dom";
import {t} from "i18next";

interface AssignmentListItemProps {
key: string;
id: string;
projectName: string;
dueDate?: Date;
status: boolean;
isStudent:boolean;
isStudent: boolean;
}

/*
Expand All @@ -20,16 +21,16 @@ interface AssignmentListItemProps {
* @param isStudent: boolean - if the user is a student or a teacher
*/

export function AssignmentListItem({key,projectName, dueDate, status,isStudent}:AssignmentListItemProps) {
export function AssignmentListItem({id, projectName, dueDate, status, isStudent}: AssignmentListItemProps) {
const navigate = useNavigate();
const handleProjectClick = () => {
console.log("Project clicked");
navigate(`/${key}`)
navigate(`/${id}`)
}

return (
<>
<ListItem key={projectName} sx={{margin:0}} disablePadding={true}>
<ListItem key={projectName} sx={{margin: 0}} disablePadding={true}>
<ListItemButton onClick={handleProjectClick} sx={{
width: "100%",
height: 30,
Expand All @@ -38,11 +39,14 @@ export function AssignmentListItem({key,projectName, dueDate, status,isStudent}:
justifyContent: "space-between",
paddingX: 1,
paddingY: 3,
borderRadius:2,
borderRadius: 2,
}}>
<ListItemText sx={{maxWidth:100}} primary={projectName}/>
<ListItemText sx={{maxWidth:110}} primary={dueDate? dueDate.toLocaleDateString() : t("no_deadline")}/>
{isStudent && <ListItemIcon sx={{minWidth:35}}>{status?<CheckCircleOutlineIcon sx={{color:"success.main"}}/>:<HighlightOffIcon sx={{color:"error.main"}}/>}</ListItemIcon>}
<ListItemText sx={{maxWidth: 100}} primary={projectName}/>
<ListItemText sx={{maxWidth: 110}}
primary={dueDate ? dueDate.toLocaleDateString() : t("no_deadline")}/>
{isStudent && <ListItemIcon sx={{minWidth: 35}}>{status ?
<CheckCircleOutlineIcon sx={{color: "success.main"}}/> :
<HighlightOffIcon sx={{color: "error.main"}}/>}</ListItemIcon>}

</ListItemButton>
</ListItem>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import {ListItem, ListItemButton, ListItemText, Divider} from "@mui/material";
import {useNavigate} from "react-router-dom";
import {t} from "i18next";
interface AssignmentListItemSubjectsPageProps {
key: string;
projectName: string;
dueDate?: Date;
submissions: number;
score: number;
isStudent: boolean;
}

/*
* This component is used to display a single assignment in the list of assignments
* @param key: string - the key of the assignment
* @param projectName: string - the name of the project
* @param dueDate: Date - the due date of the project
* @param submissions: number - number of submissions for the project
* @param score: number - assigned score on the project
* @param isStudent: boolean - if the user is a student or a teacher
*/

export function AssignmentListItemSubjectsPage({key,projectName, dueDate, submissions, score, isStudent}:AssignmentListItemSubjectsPageProps) {
const navigate = useNavigate();
const handleProjectClick = () => {
console.log("Project clicked");
navigate(`/${key}`)
}

return (
<>
<ListItem key={projectName} sx={{margin:0}} disablePadding={true}>
<ListItemButton onClick={handleProjectClick} sx={{
width: "100%",
height: 30,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
paddingX: 1,
paddingY: 3,
borderRadius:2,
}}>
{isStudent?
<>
<ListItemText sx={{maxWidth:100}} primary={projectName}/>
<ListItemText sx={{maxWidth:110}} primary={dueDate? dueDate.toLocaleDateString() : t("no_deadline")}/>
<ListItemText sx={{maxWidth:100}} primary={submissions + " indieningen"}/>
<ListItemText sx={{maxWidth:50}} primary={score + "/20"}/>
</>
:
<>
<ListItemText sx={{maxWidth:100}} primary={projectName}/>
<ListItemText sx={{maxWidth:110}} primary={dueDate? dueDate.toLocaleDateString() : t("no_deadline")}/>
<ListItemText sx={{maxWidth:40}} primary={"edit"}/>
</>
}
</ListItemButton>
</ListItem>
<Divider color={"text.main"}></Divider>
</>
);
}
167 changes: 89 additions & 78 deletions frontend/frontend/src/components/CourseCard.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {Box, Card, CardActionArea, CardContent, Divider, IconButton, Typography} from "@mui/material";
import {t} from "i18next";
import List from '@mui/material/List';
import { AssignmentListItem } from "./AssignmentListItem";
import {AssignmentListItem} from "./AssignmentListItem";
import {useNavigate} from "react-router-dom";
import ArchiveOutlinedIcon from '@mui/icons-material/ArchiveOutlined';
/*
Expand Down Expand Up @@ -53,106 +53,117 @@ export function CourseCard({courseId, archived, isStudent}: CourseCardProps) {
return (
<>
<Card elevation={1}
sx={{
width:{xs:"100%",md:"60%"},
minWidth: 300,
maxWidth:450,
backgroundColor: "background.default",
borderRadius:5,
padding:0,
margin:2,
}}
sx={{
width: {xs: "100%", md: "60%"},
minWidth: 350,
maxWidth: 420,
backgroundColor: "background.default",
borderRadius: 5,
padding: 0,
margin: 1,
}}
>
<CardContent sx={{margin:0,padding:0}}>
<CardContent sx={{margin: 0, padding: 0}}>
<CardActionArea onClick={handleCardClick}>
<Box aria-label={"courseHeader"}
sx={{backgroundColor: "secondary.main",
margin:0,
height: 50,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
padding:3,
}}>
<Box width={"50%"} height={"100%"} display={"flex"} flexDirection={"column"} justifyContent={"center"}>
<Typography variant={"h4"}>{course.name}</Typography>
<Typography variant={"subtitle1"}>{course.teacher}</Typography>
</Box>
<Box>
<Typography variant={"subtitle1"}>{t("students")}{course.students.length}</Typography>
<Box aria-label={"courseHeader"}
sx={{
backgroundColor: "secondary.main",
margin: 0,
height: 50,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
padding: 3,
}}>
<Box width={"50%"} height={"100%"} display={"flex"} flexDirection={"column"}
justifyContent={"center"}>
<Typography variant={"h4"}>{course.name}</Typography>
<Typography variant={"subtitle1"}>{course.teacher}</Typography>
</Box>
<Box>
<Typography variant={"subtitle1"}>{t("students")}{course.students.length}</Typography>
</Box>
</Box>
</Box>
</CardActionArea>
<Box aria-label={"assignmentList"}
sx={{backgroundColor: "background.default",
sx={{
backgroundColor: "background.default",
height: 150,
display: "flex",
flexDirection: "column",
padding:1,
borderRadius:2,
paddingBottom:0
padding: 1,
borderRadius: 2,
paddingBottom: 0
}}>
{isStudent?
<Box display={"flex"} flexDirection={"row"} justifyContent={"space-between"} pl={3} pr={3} >
<Typography width={30} >Project</Typography>
<Typography width={30}>Deadline</Typography>
<Typography width={30}>Status</Typography>
</Box> :
{isStudent ?
<Box display={"flex"} flexDirection={"row"} justifyContent={"space-between"} pl={3} pr={3}>
<Typography width={30}>Project</Typography>
<Typography width={30}>Deadline</Typography>
<Typography width={30}>Status</Typography>
</Box> :
<>
{archived?
<Box display={"flex"} flexDirection={"row"} justifyContent={"space-between"} pl={3} pr={3} width={{xs:"81%",sm:"85%"}}>
<Typography maxWidth={100} >Project</Typography>
<Typography minWidth={50}>Deadline</Typography>
</Box>
{archived ?
<Box display={"flex"} flexDirection={"row"} justifyContent={"space-between"} pl={3}
pr={3} width={{xs: "81%", sm: "85%"}}>
<Typography maxWidth={100}>Project</Typography>
<Typography minWidth={50}>Deadline</Typography>
</Box>
:
<Box display={"flex"} flexDirection={"row"} justifyContent={"space-between"} pl={3} pr={3} width={{xs:"71%",sm:"75%"}}>
<Typography maxWidth={100} >Project</Typography>
<Typography minWidth={50}>Deadline</Typography>
</Box>
}</>
<Box display={"flex"} flexDirection={"row"} justifyContent={"space-between"} pl={3}
pr={3} width={{xs: "71%", sm: "75%"}}>
<Typography maxWidth={100}>Project</Typography>
<Typography minWidth={50}>Deadline</Typography>
</Box>
}</>
}
<Divider color={"text.main"}></Divider>
<Box display={"flex"} flexDirection={"row"}>
{isStudent?
<Box sx={{width:"100%", height: 130, overflow:"auto"}}>
<List disablePadding={true}>
{assignments.map((assignment) => (
<AssignmentListItem key={assignment.id} projectName={assignment.name} dueDate={assignment.deadline} status={assignment.id==="assignment1"} isStudent={isStudent}/>
))}
</List>
</Box> :
<>{!archived?
<Box sx={{width: "90%", height: 130}}>
{isStudent ?
<Box sx={{width: "100%", height: 130, overflow: "auto"}}>
<List disablePadding={true}>
{assignments.map((assignment) => (
<AssignmentListItem key={assignment.id} projectName={assignment.name}
<AssignmentListItem key={assignment.id} id={assignment.id}
projectName={assignment.name}
dueDate={assignment.deadline}
status={assignment.id === "assignment1"}
isStudent={isStudent}/>
))}
</List>
</Box> :
<Box sx={{width: "100%", height: 130}}>
<List disablePadding={true}>
{assignments.map((assignment) => (
<AssignmentListItem key={assignment.id} projectName={assignment.name}
dueDate={assignment.deadline}
status={assignment.id === "assignment1"}
isStudent={isStudent}/>
))}
</List>
</Box>
<>{!archived ?
<Box sx={{width: "90%", height: 130}}>
<List disablePadding={true}>
{assignments.map((assignment) => (
<AssignmentListItem key={assignment.id} id={assignment.id}
projectName={assignment.name}
dueDate={assignment.deadline}
status={assignment.id === "assignment1"}
isStudent={isStudent}/>
))}
</List>
</Box> :
<Box sx={{width: "100%", height: 130}}>
<List disablePadding={true}>
{assignments.map((assignment) => (
<AssignmentListItem key={assignment.id} id={assignment.id}
projectName={assignment.name}
dueDate={assignment.deadline}
status={assignment.id === "assignment1"}
isStudent={isStudent}/>
))}
</List>
</Box>
}
{!archived &&
<Box display={"flex"} flexDirection={"column"} paddingRight={1}
sx={{flexGrow: 1, alignItems: "flex-end", alignSelf: "flex-end"}}>
<IconButton onClick={archive}
sx={{
backgroundColor: "secondary.main",
borderRadius: 2,
alignSelf: "flex-end"
}}><ArchiveOutlinedIcon/></IconButton>
</Box>}
{!archived &&
<Box display={"flex"} flexDirection={"column"} paddingRight={1}
sx={{flexGrow: 1, alignItems: "flex-end", alignSelf: "flex-end"}}>
<IconButton onClick={archive}
sx={{
backgroundColor: "secondary.main",
borderRadius: 2,
alignSelf: "flex-end"
}}><ArchiveOutlinedIcon/></IconButton>
</Box>}
</>
}
</Box>
Expand Down
Loading

0 comments on commit 5370e42

Please sign in to comment.