Skip to content

Commit

Permalink
Merge pull request #54 from SELab-2/scoresEnVakken
Browse files Browse the repository at this point in the history
Scores en vakken
  • Loading branch information
mathis2003 authored Mar 13, 2024
2 parents 548e8a3 + d53efa9 commit 5e8a6bf
Show file tree
Hide file tree
Showing 11 changed files with 420 additions and 38 deletions.
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>
</>
);
}
50 changes: 50 additions & 0 deletions frontend/frontend/src/components/StudentScoreListItem.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import {ListItem, ListItemText, Divider, TextField, IconButton} from "@mui/material";
import DownloadIcon from '@mui/icons-material/Download';
import {t} from "i18next";

interface StudentScoreListItemProps {
key: string;
studentName: string;
submissionFiles: string[];
}

/*
* This component is used to display a single assignment in the list of assignments
* @param key: string - the key of the studentOnProject
* @param studentName: string - the name of the student
* @param submissionFiles: string[] - a list of all files submitted by this student
*/

export function StudentScoreListItem({key, studentName, submissionFiles}:StudentScoreListItemProps) {
return (
<>
<ListItem key={studentName} sx={{margin:0}} disablePadding={true}>
<ListItem sx={{
width: "100%",
height: 30,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
paddingX: 1,
paddingY: 3,
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"/>
</ListItem>
<ListItem sx={{maxWidth:100}}>
<IconButton edge="end" aria-label="download">
<DownloadIcon />
</IconButton>
</ListItem>
</>
</ListItem>
</ListItem>
<Divider color={"text.main"}></Divider>
</>
);
}
2 changes: 2 additions & 0 deletions frontend/frontend/src/i18n/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const english = {
archived: "Archived",
students: "Students: ",
no_deadline: "No deadline",
current_projects: "Current projects",
};
const dutch = {
logo: "./src/assets/logo_UGent_NL_RGB_2400_wit.png",
Expand All @@ -21,6 +22,7 @@ const dutch = {
archived: "Gearchiveerd",
students: "Studenten: ",
no_deadline: "Geen deadline",
current_projects: "Huidige projecten",
};

i18n.use(initReactI18next).use(LanguageDetector).init({ fallbackLng: "en",
Expand Down
16 changes: 15 additions & 1 deletion frontend/frontend/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ 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";
Expand All @@ -22,10 +26,19 @@ const router = createBrowserRouter([
errorElement: <ErrorPage />,
},
{
path: "/subjects_student",
path: "/subjects_student/:courseId",
element: <SubjectsStudentPage />,
},
{

path: "/subjects_teacher/:courseId",
element: <SubjectsTeacherPage />,
},
{
path: "/scores",
element: <ProjectScoresPage />,
},

path: "/assignment_student",
element: <AssignmentStudentPage />,
},
Expand All @@ -45,6 +58,7 @@ const router = createBrowserRouter([
path: "/test_requests",
element: <SimpleRequestsPage/>,
}

]);

ReactDOM.createRoot(document.getElementById("root")!).render(
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export function ArchivedProjectsView() {
return (
<>

</>
);
}
101 changes: 101 additions & 0 deletions frontend/frontend/src/pages/SubjectsPage/ProjectsView.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import {Box, Typography} from "@mui/material";
import List from '@mui/material/List';
import {AssignmentListItemSubjectsPage} from "../../components/AssignmentListItemSubjectsPage.tsx";

interface ProjectsViewProps {
courseId: string;
isStudent: boolean;
}

interface Course {
id: string;
name: string;
teacher: string;
students: string[];
//list of assignment ids
assignments: string[];
archived: boolean;
}

interface Assignment {
id: string;
name: string;
deadline?: Date;
submissions: number;
score: number;
}

export function ProjectsView({courseId, isStudent}: ProjectsViewProps) {
const course = getCourse(courseId);
const assignments = course.assignments.map((assignmentId) => getAssignment(assignmentId));

return (
<>
<Box aria-label={"courseHeader"}
sx={{backgroundColor: "secondary.main",
margin:0,
height: 50,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
padding:3,
}}>
{isStudent?
<>
<Typography variant={"h4"}>Project</Typography>
<Typography variant={"h4"}>Deadline</Typography>
<Typography variant={"h4"}>Submissions</Typography>
<Typography variant={"h4"}>Score</Typography>
</>
:
<>
<Typography variant={"h4"}>Project</Typography>
<Typography variant={"h4"}>Deadline</Typography>
<Typography variant={"h4"}>Edit</Typography>
</>
}
</Box>
<Box aria-label={"assignmentList"}
sx={{backgroundColor: "background.default",
height: 400,
display: "flex",
flexDirection: "column",
padding:1,
borderRadius:2,
paddingBottom:0
}}>
<Box display={"flex"} flexDirection={"row"}>
<Box sx={{width:"100%", height: 380, overflow:"auto"}}>
<List disablePadding={true}>
{assignments.map((assignment) => (
<AssignmentListItemSubjectsPage key={assignment.id} projectName={assignment.name} dueDate={assignment.deadline} submissions={assignment.submissions} score={assignment.score} isStudent={isStudent}/>
))}
</List>
</Box>
</Box>
</Box>
</>
);
}

//TODO: use api to get data, for now use mock data
function getCourse(courseId: string): Course {
return {
id: courseId,
name: "courseName",
teacher: "teacher",
students: ["student1", "student2"],
archived: false,
assignments: ["assignment1", "assignment2", "assignment3", "assignment4", "assignment5", "assignment6", "assignment7", "assignment8", "assignment9"]
}
}

function getAssignment(assignmentId: string): Assignment {
return {
id: assignmentId,
name: "assignmentName",
deadline: new Date(2022, 11, 17),
submissions: 2,
score: 10
}
}
22 changes: 22 additions & 0 deletions frontend/frontend/src/pages/SubjectsPage/SubjectsStudentPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Header } from "../../components/Header";
import { Box, Stack } from "@mui/material";
import TabSwitcher from "../../components/TabSwitcher.tsx";
import {ArchivedProjectsView} from "./ArchivedProjectsView.tsx";
import {ProjectsView} from "./ProjectsView.tsx";
import { useParams } from "react-router-dom";

export function SubjectsStudentPage() {
let { courseId } = useParams();
courseId = String(courseId);
return (
<>
<Stack direction={"column"} spacing={10} sx={{width:"100%" ,height:"100%", backgroundColor:"background.default"}}>
<Header variant={"default"} title={"Naam Vak"} />
<Box sx={{ width: '100%', height:"70%", marginTop:10 }}>
<TabSwitcher titles={["current_projects","archived"]}
nodes={[<ProjectsView courseId={courseId} isStudent={true} />,<ArchivedProjectsView/>]}/>
</Box>
</Stack>
</>
);
}
22 changes: 22 additions & 0 deletions frontend/frontend/src/pages/SubjectsPage/SubjectsTeacherPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Header } from "../../components/Header";
import { Box, Stack } from "@mui/material";
import TabSwitcher from "../../components/TabSwitcher.tsx";
import {ArchivedProjectsView} from "./ArchivedProjectsView.tsx";
import {ProjectsView} from "./ProjectsView.tsx";
import { useParams } from "react-router-dom";

export function SubjectsTeacherPage() {
let { courseId } = useParams();
courseId = String(courseId);
return (
<>
<Stack direction={"column"} spacing={10} sx={{width:"100%" ,height:"100%", backgroundColor:"background.default"}}>
<Header variant={"default"} title={"Naam Vak"} />
<Box sx={{ width: '100%', height:"70%", marginTop:10 }}>
<TabSwitcher titles={["current_projects","archived"]}
nodes={[<ProjectsView courseId={courseId} isStudent={false} />,<ArchivedProjectsView/>]}/>
</Box>
</Stack>
</>
);
}
30 changes: 30 additions & 0 deletions frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { Header } from "../../components/Header";
import { Box, Button, Stack } from "@mui/material";
import { useParams } from "react-router-dom";
import { StudentsView } from "./StudentsView.tsx";
import SaveIcon from '@mui/icons-material/Save';
import CloseIcon from '@mui/icons-material/Close';

export function ProjectScoresPage() {
let { projectId } = useParams();
projectId = String(projectId);
return (
<>
<Stack direction={"column"} spacing={10} sx={{width:"100%" ,height:"100%", backgroundColor:"background.default"}}>
<Header variant={"default"} title={"Project 1: Scores"} />
<Box sx={{ width: '100%', height:"auto", marginTop:10, boxShadow: 3, borderRadius: 3 }}>
<StudentsView projectId={projectId} />
</Box>
<Box display="flex" flexDirection="row" sx={{ width: '100%', height:"auto", marginTop:10 }}>
<Box display="flex" flexDirection="row" sx={{ width: '50%', height:"auto" }}>
<Button variant="contained" color="secondary">Exporteer Indieningen</Button>
</Box>
<Box display="flex" flexDirection="row-reverse" sx={{ width: '50%', height:"auto" }}>
<Button variant="contained" startIcon={<SaveIcon />}/>
<Button variant="contained" color="secondary" startIcon={<CloseIcon />}/>
</Box>
</Box>
</Stack>
</>
);
}
Loading

0 comments on commit 5e8a6bf

Please sign in to comment.