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

Commit

Permalink
add project page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ALBERICLOOS
ALBERICLOOS committed Mar 9, 2024
1 parent b46719e commit 5f8e97f
Showing 1 changed file with 97 additions and 24 deletions.
121 changes: 97 additions & 24 deletions frontend/src/components/CreateProject.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,28 @@ 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";


export function CreateProject(): JSX.Element {
// of je de kalender moet tonen
const [showDate, setShowDate] = useState(false);
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);

//info van de kalender: https://www.npmjs.com/package/react-calendar
const handleCheckboxChange = () => {
setShowDate(!showDate);
const expandDeadline = () => {
setCalender(!showCalender);
};
type ValuePiece = Date | null;
type Value = ValuePiece | [ValuePiece, ValuePiece];

// waardes van de deadline
const [calenderValue, handleCalenderChange] = useState<Value>(new Date());
const expandGroup = () => {
setGroup(!showGroup);
};

// waarde van de description
const [description, setDescription] = useState("");
//helper
const hours = Array.from({length: 24}, (_, index) =>
index.toString().padStart(2, '0')
);
const hours = Array.from({length: 24}, (_, index) => index.toString().padStart(2, '0'));
const minutes = Array.from({length: 60}, (_, index) => index.toString().padStart(2, '0'));

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

return (
<>
Expand Down Expand Up @@ -57,11 +53,11 @@ export function CreateProject(): JSX.Element {
<label className="label">Deadline:</label>
</div>
<div className="field-body">
<label className="checkbox">
<input type="checkbox" onChange={handleCheckboxChange}/>
{showDate &&
<label>
<input type="checkbox" onChange={expandDeadline}/>
{showCalender &&
<>
<Calendar onChange={handleCalenderChange} value={calenderValue}/>
<Calendar onChange={e => deadlineChange(e)} value={deadlineValue}/>
<div className="is-horizontal">
<div className="field">
<SelectionBox options={hours}/>
Expand All @@ -83,14 +79,91 @@ export function CreateProject(): JSX.Element {
<div className="field-body">
<div className="field">
<div style={{width: "33%"}}>
<textarea className="textarea" placeholder="Geef een korte beschrijving van het project"
<textarea className="textarea" placeholder="Optionele beschrijving van het project"
value={description}
onChange={e => setDescription(e.target.value)}/>
</div>
</div>
</div>
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">Docker file:</label>
</div>
<div className="field-body">
<div className="field">
<div className="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>
</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">
<label className="checkbox">
<input type="checkbox"/>
</label>
</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">
<div className="field is-horizontal">
<div className="field-label">
<label className="checkbox">
<input type="checkbox"/>
</label>
</div>
<div className="field-body">
<label className="label is-fullwidth">random</label>
</div>
</div>
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="checkbox">
<input type="checkbox"/>
</label>
</div>
<div className="field-body">

<label className="label is-fullwidth">studenten kiezen zelf</label>
</div>
</div>
</>
}
</label>
</div>
</div>
</>
)
;
Expand Down

0 comments on commit 5f8e97f

Please sign in to comment.