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

Project react #66

Merged
merged 9 commits into from
Mar 11, 2024
Merged

Project react #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c1613ab
add custom inputfield
ALBERICLOOS Mar 9, 2024
ef257fe
add deadline calender
ALBERICLOOS Mar 9, 2024
be5572f
add description
ALBERICLOOS Mar 9, 2024
b46719e
add states to description
ALBERICLOOS Mar 9, 2024
5f8e97f
add project page
ALBERICLOOS Mar 9, 2024
5e8e210
add field with label help component
ALBERICLOOS Mar 10, 2024
d6df5c2
add project view for student
ALBERICLOOS Mar 10, 2024
648d133
add indiening files to createproject for teacher
ALBERICLOOS Mar 10, 2024
b8c8dcc
Pr review update
ALBERICLOOS Mar 11, 2024
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
95 changes: 86 additions & 9 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"dependencies": {
"bulma": "^0.9.4",
"react": "^18.2.0",
"react-calendar": "^4.8.0",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1",
"react-router-dom": "^6.22.2"
Expand All @@ -29,4 +30,4 @@
"typescript": "^5.2.2",
"vite": "^5.1.4"
}
}
}
169 changes: 169 additions & 0 deletions frontend/src/components/CreateProject.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
import {JSX, useState} from "react";
import Inputfield from "./Inputfield.tsx";
import {SelectionBox} from "./SelectionBox.tsx";
import Calendar from "react-calendar";
import 'react-calendar/dist/Calendar.css';
import {FaUpload} from "react-icons/fa";
import "../assets/styles/small_components.css";


export function CreateProject(): JSX.Element {
const [showCalender, setCalender] = useState(false);
type ValuePiece = Date | null; // nodig voor de deadline
type Value = ValuePiece | [ValuePiece, ValuePiece]; // nodig voor de deadline
const [deadlineValue, deadlineChange] = useState<Value>(new Date());
const [description, setDescription] = useState('');
const [showGroup, setGroup] = useState(false);

const expandDeadline = () => {
setCalender(!showCalender);
};

const expandGroup = () => {
setGroup(!showGroup);
};

const hours = Array.from({length: 24}, (_, index) => index.toString().padStart(2, '0'));
const minutes = Array.from({length: 60}, (_, index) => index.toString().padStart(2, '0'));


return (
<>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">Project naam:</label>
</div>
<div className="field-body field">
<Inputfield placeholder="Geef een naam in"/>
</div>
ALBERICLOOS marked this conversation as resolved.
Show resolved Hide resolved
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">Vak:</label>
</div>
<div className="field-body field">
<SelectionBox options={["vak1", "vak2", "vak3"]}/>
</div>
ALBERICLOOS marked this conversation as resolved.
Show resolved Hide resolved
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">Deadline:</label>
</div>
<div className="field-body">
<label>
<input type="checkbox" onChange={expandDeadline}/>
{showCalender &&
<>
<Calendar onChange={e => deadlineChange(e)} value={deadlineValue}/>
<div className="is-horizontal field">
<SelectionBox options={hours}/>
<label className={"title ml-3 mr-3"}>:</label>
<SelectionBox options={minutes}/>
</div>
</>
}
</label>
</div>
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">Beschrijving:</label>
</div>
<div className="field-body field">
<div style={{width: "33%"}}> {/* Deze moet er blijven, anders doet css raar*/}
<textarea className="textarea" placeholder="Optionele beschrijving van het project"
value={description}
onChange={e => setDescription(e.target.value)}/>
</div>
</div>
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">Docker file:</label>
</div>
<div className="field-body field file has-name">
<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">
C:\home\files\docker_file.dockerfile
</span>
</label>
</div>
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">Indiening files:</label>
</div>
<div className="field-body field">
<div className="field"> {/* Deze moet er blijven, anders doet css raar*/}
<label>Specifieer welke files de ingediende zip moet bevatten. Splits per komma.</label>
<br/>
<Inputfield placeholder="vb: diagram.dgr,verslag.pdf,textbestand.txt"/>
<br/>
<div className="field is-horizontal">
<div className="field-label">
<input type="checkbox"/> {/*TODO doe iets*/}
</div>
<div className="field-body">
<label className="label is-fullwidth">ook andere files toegelaten</label>
</div>
</div>
</div>
</div>
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">Groepswerk:</label>
</div>
<div className="field-body">
<label>
<input type="checkbox" onChange={expandGroup}/>
{showGroup &&
<>
<div className="field is-horizontal">
<div className="field-label">
<input type="checkbox"/>
</div>
<div className="field-body">
<label className="label is-fullwidth">verwisselingen toestaan</label>
</div>
</div>
<br/>
<div className="field-label">
<label className="label is-fullwidth">Groepsindeling (kies 1 van
onderstaande):</label>
</div>
<br/>
<div className="field-body field is-horizontal">
<div className="field-label">
<input type="checkbox"/>
</div>
<div className="field-body">
<label className="label is-fullwidth">random</label>
</div>
</div>
<div className="field is-horizontal">
<div className="field-label">
<input type="checkbox"/>
</div>
<div className="field-body">
<label className="label is-fullwidth">studenten kiezen zelf</label>
</div>
</div>
</>
}
</label>
</div>
</div>
</>
)
;
}
Loading