Skip to content
This repository has been archived by the owner on Sep 27, 2024. It is now read-only.

Commit

Permalink
project view page for student
Browse files Browse the repository at this point in the history
  • Loading branch information
@ALBERICLOOS
ALBERICLOOS committed Mar 18, 2024
1 parent d069a18 commit e921e74
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 51 deletions.
96 changes: 48 additions & 48 deletions frontend/src/components/ViewProjectStudent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,51 @@ import {JSX} from "react";
import FieldWithLabel from "./FieldWithLabel.tsx";
import {FaCheck, FaUpload} from "react-icons/fa";
import {FaDownload} from "react-icons/fa6";
import {ProjectStatus} from "../pages/student/ProjectView.tsx";

export default function ViewProjectStudent(): JSX.Element {
export default function ViewProjectStudent(props: {
projectName: string,
courseName: string,
deadline: string,
status: ProjectStatus,
description: string,
requiredFiles: string[],
groupMembers: { name: string, email: string, lastSubmission: boolean }[],
maxGroupMembers: number,
submission: string | null
}): JSX.Element {
return (
<>
<FieldWithLabel fieldLabel={"Naam"} fieldBody={"Markov Decision Making"} arrow={true}></FieldWithLabel>
<FieldWithLabel fieldLabel={"Vak"} fieldBody={"Automaten, berekenbaarheid en complexiteit"}
arrow={true}></FieldWithLabel>
<FieldWithLabel fieldLabel={"Deadline"} fieldBody={"17:00 - 23/02/2024"} arrow={true}></FieldWithLabel>
<FieldWithLabel fieldLabel={"Naam"} fieldBody={props.projectName} arrow={true}/>
<FieldWithLabel fieldLabel={"Vak"} fieldBody={props.courseName} arrow={true}/>
<FieldWithLabel fieldLabel={"Deadline"} fieldBody={props.deadline} arrow={true}/>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">{"> "}Status: </label>
</div>
<div className="field-body field">
<label className={"has-text-danger"}>Failed</label>
{props.status == ProjectStatus.FAILED &&
<label className={"has-text-danger"}>{props.status}</label>}
{props.status == ProjectStatus.SUCCESS &&
<label className={"has-text-success"}>{props.status}</label>}
</div>
</div>
<FieldWithLabel fieldLabel={"Beschrijving"}
fieldBody={"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel arcu sit amet quam scelerisque vestibulum. Nulla lectus ipsum, convallis ut odio sit amet, auctor dictum felis. Phasellus libero sapien, tempus eu fringilla eu, facilisis vel purus. Quisque odio elit, viverra id tortor eu, blandit luctus turpis. Vestibulum libero felis, condimentum finibus posuere sed, lobortis non tellus. Phasellus laoreet, metus a semper vulputate, mi dui lobortis augue, quis fringilla ipsum felis eu mauris. Donec sem dolor, porta ultrices venenatis eget, ullamcorper id turpis. Nulla quis lacinia sapien. Mauris dignissim nisi id quam vulputate molestie. Fusce eleifend sagittis dolor sit amet aliquam. Aenean in sapien diam. Donec iaculis nunc eu enim pulvinar ultricies. Suspendisse potenti. Etiam quis viverra nunc. Nulla tempus in erat vitae tincidunt. Vestibulum et iaculis nulla. "}
arrow={false}></FieldWithLabel>
<FieldWithLabel fieldLabel={"Beschrijving"} fieldBody={props.description} arrow={false}/>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">Indiening moet bevatten:</label>
<label className="label">Indiening(zip) moet bevatten:</label>
</div>
<div className="field-body">
<div className="field"> {/*Deze moet blijven, anders gaan de elementen in elkaar*/}
<li>Diagram.dgr</li>
<li>verslag.pdf</li>
{props.requiredFiles.map((file, index) => {
return <li key={index}>{file}</li>
})}
</div>
</div>
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">Groepsleden(3/4): </label>
<label className="label">Groepsleden({props.groupMembers.length}/{props.maxGroupMembers}): </label>
</div>
<div className="field-body field">
<table className={"table is-fullwidth"}>
Expand All @@ -46,56 +58,44 @@ export default function ViewProjectStudent(): JSX.Element {
</tr>
</thead>
<tbody>
<tr>
<td>Jan</td>
<td>[email protected]</td>
<td> -</td>
</tr>
<tr>
<td>Peter</td>
<td>[email protected]</td>
<td> -</td>
</tr>
<tr>
<td>Erik</td>
<td>[email protected]</td>
<td><FaCheck/></td>
</tr>
{props.groupMembers.map((member, index) => {
return (<tr key={index}>
<td>{member.name}</td>
<td>{member.email}</td>
<td>{member.lastSubmission ? <FaCheck/> : "-"}</td>
</tr>)
})}
</tbody>
</table>
</div>
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">Indiening(zip)</label>
<label className="label">Indiening(zip): </label>
</div>
<div className="field-body">
<div className="field"> {/* Deze moet blijven */}
<li className={"mb-3"}>
<label className={"mr-3"}>My_files.zip </label>
<button className="button">
<FaDownload/>
</button>
</li>
<ul className="field"> {/* Deze moet blijven */}
{props.submission != null &&
<li className={"mb-3"}>
<label className={"mr-3"}>{props.submission}</label>
<button className="button">
<FaDownload/>
</button>
</li>
}
<li>
<div className="field is-horizontal">
<div className="field-label">
<label className="file-label">
<input className="file-input" type="file" name="resume"/>
<span className="file-cta">
<label className="file-label">
<input className="file-input" type="file" name="resume"/>
<span className="file-cta">
<span className="file-icon"><FaUpload/></span>
<span className="file-label">Kies een bestand</span>
</span>
<span className="file-name">This_is_the_file.zip</span>
</label>
</div>
<div className="field-body">
<button className="button"><FaDownload/></button>
</div>

<span className="file-name">This_is_the_file.zip</span>
</label>
</div>
</li>
</div>
</ul>
</div>
</div>
<div className="columns is-mobile is-centered column is-half">
Expand Down
29 changes: 26 additions & 3 deletions frontend/src/pages/student/ProjectView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,42 @@ import {Header} from "../../components/Header.tsx";
import {Sidebar} from "../../components/Sidebar.tsx";
import ViewProjectStudent from "../../components/ViewProjectStudent.tsx";

export enum ProjectStatus {

Check warning on line 6 in frontend/src/pages/student/ProjectView.tsx

View workflow job for this annotation

GitHub Actions / lint 

Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components
FAILED = "Failed",
SUCCESS = "Succes",
}

export default function ProjectView(): JSX.Element {

const projectName: string = "Markov Decision Diagram"
const courseName: string = "Automaten, berekenbaarheid en complexiteit"
const deadline: string = "17:00 - 23/02/2024"
const status: ProjectStatus = ProjectStatus.FAILED
const description: string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel arcu sit amet quam scelerisque vestibulum. Nulla lectus ipsum, convallis ut odio sit amet, auctor dictum felis. Phasellus libero sapien, tempus eu fringilla eu, facilisis vel purus. Quisque odio elit, viverra id tortor eu, blandit luctus turpis. Vestibulum libero felis, condimentum finibus posuere sed, lobortis non tellus. Phasellus laoreet, metus a semper vulputate, mi dui lobortis augue, quis fringilla ipsum felis eu mauris. Donec sem dolor, porta ultrices venenatis eget, ullamcorper id turpis. Nulla quis lacinia sapien. Mauris dignissim nisi id quam vulputate molestie. Fusce eleifend sagittis dolor sit amet aliquam. Aenean in sapien diam. Donec iaculis nunc eu enim pulvinar ultricies. Suspendisse potenti. Etiam quis viverra nunc. Nulla tempus in erat vitae tincidunt. Vestibulum et iaculis nulla."
const requiredFiles: string[] = ["Diagram.dgr", "verslag.pdf"]
const groupMembers: { name: string, email: string, lastSubmission: boolean }[] = [
{name: "jan", email: "[email protected]", lastSubmission: false},
{name: "erik", email: "[email protected]", lastSubmission: false},
{name: "peter", email: "[email protected]", lastSubmission: true}]
const maxGroupMembers: number = 4
const submission: string | null = "submission.zip"
return (
<>
<div className={"main-header"}>
<Header page_title={"PROJECTNAAM"}/>
<Header page_title={projectName}/>
</div>
<div className={"main-content is-flex is-flex-direction-row"}>
<div className={"side-bar is-flex is-justify-content-center"}>
<Sidebar/>
</div>
<div className={"student-main mt-6 mr-6"}>
<ViewProjectStudent/>
<ViewProjectStudent projectName={projectName} courseName={courseName} deadline={deadline}
status={status}
description={description}
requiredFiles={requiredFiles}
groupMembers={groupMembers}
maxGroupMembers={maxGroupMembers}
submission={submission}
/>
</div>
</div>
</>
Expand Down

0 comments on commit e921e74

Please sign in to comment.