add teacher project view and create project teacher view

frontend/src/components/ViewProjectTeaderComponent.tsx

@@ -17,18 +17,21 @@ export function ViewProjectTeaderComponent(props: {
     deadline: Value, setDeadline: React.Dispatch<React.SetStateAction<Value>>, // TODO dit aanpassen naar Date of iets anders
     description: string, setDescription: React.Dispatch<React.SetStateAction<string>>,
     requiredFiles: string, setRequiredFiles: React.Dispatch<React.SetStateAction<string>>,
+    otherFilesAllow: boolean, setOtherFilesAllow: React.Dispatch<React.SetStateAction<boolean>>,
+    groupProject: boolean, setGroupProject: React.Dispatch<React.SetStateAction<boolean>>
 }): JSX.Element {
 
     // helpers
-    const [showCalender, setCalender] = useState(false);
-    const [showGroup, setGroup] = useState(false);
+    const [showCalender, setCalender] = useState(props.deadline !== null);
+    const [showGroup, setGroup] = useState(props.groupProject);
 
     const expandDeadline = () => {
         setCalender(!showCalender);
     };
 
-    const expandGroup = () => {
+    const expandGroup = (checked: boolean) => {
         setGroup(!showGroup);
+        props.setGroupProject(checked);
     };
 
     const hours_array = Array.from({length: 24}, (_, index) => index.toString().padStart(2, '0'));
@@ -64,7 +67,7 @@ export function ViewProjectTeaderComponent(props: {
                 </div>
                 <div className="field-body">
                     <label>
-                        <input type="checkbox" onChange={expandDeadline}/>
+                        <input type="checkbox" onChange={expandDeadline} checked={showCalender}/>
                         {showCalender &&
                             <>
                                 <Calendar onChange={e => props.setDeadline(e)} value={props.deadline}/>
@@ -126,7 +129,8 @@ export function ViewProjectTeaderComponent(props: {
                         <br/>
                         <div className="field is-horizontal">
                             <div className="field-label">
-                                <input type="checkbox"/> {/*TODO doe iets*/}
+                                <input type="checkbox" onChange={e => props.setOtherFilesAllow(e.target.checked)}
+                                       checked={props.otherFilesAllow}/>
                             </div>
                             <div className="field-body">
                                 <label className="label is-fullwidth">ook andere files toegelaten</label>
@@ -141,7 +145,8 @@ export function ViewProjectTeaderComponent(props: {
                 </div>
                 <div className="field-body">
                     <label>
-                        <input type="checkbox" onChange={expandGroup}/>
+                        <input type="checkbox" onChange={e => expandGroup(e.target.checked)}
+                               checked={props.groupProject}/>
                         {showGroup &&
                             <>
                                 <div className="field is-horizontal">

frontend/src/pages/teacher/CreateProject.tsx

@@ -0,0 +1,27 @@
+import {useState} from "react";
+import {ViewProjectTeaderComponent} from "../../components/ViewProjectTeaderComponent.tsx";
+
+export function CreateProject() {
+    const [projectName, setProjectName] = useState('');
+    const [courseName, setCourseName] = useState('');
+    const [hours, setHours] = useState(''); //TODO aanpassen naar number
+    const [minutes, setMinutes] = useState(''); //TODO aanpassen naar number
+    type ValuePiece = Date | null; // nodig voor de deadline
+    type Value = ValuePiece | [ValuePiece, ValuePiece]; // nodig voor de deadline
+    const [deadlineValue, deadlineChange] = useState<Value>(null); // default waarde is null
+    const [description, setDescription] = useState('');
+    const [requiredFiles, setRequiredFiles] = useState('');
+    const [otherFilesAllow, setOtherFilesAllow] = useState(false);
+    const [groupProject, setGroupProject] = useState(false);
+    return (
+        <ViewProjectTeaderComponent projectName={projectName} setProjectName={setProjectName} courseName={courseName}
+                                    setCourseName={setCourseName} hours={hours} setHours={setHours} minutes={minutes}
+                                    setMinutes={setMinutes}
+                                    deadline={deadlineValue}
+                                    setDeadline={deadlineChange} description={description}
+                                    setDescription={setDescription} requiredFiles={requiredFiles}
+                                    setRequiredFiles={setRequiredFiles}
+                                    otherFilesAllow={otherFilesAllow} setOtherFilesAllow={setOtherFilesAllow}
+                                    groupProject={groupProject} setGroupProject={setGroupProject}/>
+    )
+}

frontend/src/pages/teacher/ProjectViewTeacher.tsx

@@ -0,0 +1,46 @@
+import {Header} from "../../components/Header.tsx";
+import {Sidebar} from "../../components/Sidebar.tsx";
+import {useState} from "react";
+import {ViewProjectTeaderComponent} from "../../components/ViewProjectTeaderComponent.tsx";
+
+export default function ProjecctViewTeacher() {
+    const [projectName, setProjectName] = useState<string>("Markov Decision Diagram")
+    const [courseName, setCourseName] = useState<string>("Automaten, berekenbaarheid en complexiteit")
+    const [hours, setHours] = useState('23'); //TODO aanpassen naar number
+    const [minutes, setMinutes] = useState('59'); //TODO aanpassen naar number
+    type ValuePiece = Date | null; // nodig voor de deadline
+    type Value = ValuePiece | [ValuePiece, ValuePiece]; // nodig voor de deadline
+    const [deadlineValue, deadlineChange] = useState<Value>(new Date('2024-03-23'));
+    const [description, setDescription] = useState('"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, setRequiredFiles] = useState('Diagram.dgr,verslag.pdf');
+    const [otherFilesAllow, setOtherFilesAllow] = useState(true);
+    const [groupProject, setGroupProject] = useState(true);
+    return (
+        <>
+            <div className={"main-header"}>
+                <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"}>
+
+                    <ViewProjectTeaderComponent projectName={projectName} setProjectName={setProjectName}
+                                                courseName={courseName}
+                                                setCourseName={setCourseName} hours={hours} setHours={setHours}
+                                                minutes={minutes}
+                                                setMinutes={setMinutes}
+                                                deadline={deadlineValue}
+                                                setDeadline={deadlineChange} description={description}
+                                                setDescription={setDescription} requiredFiles={requiredFiles}
+                                                setRequiredFiles={setRequiredFiles}
+                                                otherFilesAllow={otherFilesAllow}
+                                                setOtherFilesAllow={setOtherFilesAllow}
+                                                groupProject={groupProject} setGroupProject={setGroupProject}/>
+
+                </div>
+            </div>
+        </>
+    )
+}