Input Form new Design
This commit is contained in:
brausjonas
@@ -1,6 +1,7 @@
|
||||
import Button from "@/components/Button";
|
||||
import {useRouter} from "next/router";
|
||||
import {useEffect, useState} from "react";
|
||||
import Background from "@/components/Background";
|
||||
|
||||
let userInfo = []
|
||||
|
||||
@@ -13,13 +14,11 @@ export default function InputForm(p) {
|
||||
this.checked = false;
|
||||
}
|
||||
|
||||
setChecked(checked)
|
||||
{
|
||||
setChecked(checked) {
|
||||
this.checked = checked;
|
||||
}
|
||||
|
||||
setModule(module)
|
||||
{
|
||||
setModule(module) {
|
||||
this.module = module;
|
||||
}
|
||||
}
|
||||
@@ -103,13 +102,12 @@ export default function InputForm(p) {
|
||||
}
|
||||
}
|
||||
|
||||
if(!found) {
|
||||
if (!found) {
|
||||
userInfo.push(new UserInfo(user.id, module));
|
||||
}
|
||||
}
|
||||
|
||||
function onCheckBoxClicked(user, e)
|
||||
{
|
||||
function onCheckBoxClicked(user, e) {
|
||||
onModuleClicked(user, "");
|
||||
|
||||
let found = false;
|
||||
@@ -122,7 +120,7 @@ export default function InputForm(p) {
|
||||
}
|
||||
}
|
||||
|
||||
if(!found) {
|
||||
if (!found) {
|
||||
let temp = new UserInfo(user.id, "");
|
||||
temp.setChecked(e.target.checked);
|
||||
userInfo.push(temp);
|
||||
@@ -131,19 +129,38 @@ export default function InputForm(p) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputForm round-border">
|
||||
<h3>SemesterName</h3>
|
||||
<input className="courseNameInput" value={courseName} onChange={(e) => setCourseName(e.target.value)}/>
|
||||
<Background/>
|
||||
<div className="inputForm box-shadow">
|
||||
<p style={{
|
||||
fontSize: "18px",
|
||||
color: "#777777",
|
||||
fontWeight: 500,
|
||||
width: 150
|
||||
}}>SemesterName</p>
|
||||
<input className="courseNameInput box-shadow" value={courseName}
|
||||
onChange={(e) => setCourseName(e.target.value)}/>
|
||||
<div className="semesterRangeInput">
|
||||
<div className="semesterDateLables">
|
||||
<p className="semesterDateLable">Semesterstart</p>
|
||||
<p className="semesterDateLable">Semesterende</p>
|
||||
<p className="semesterDateLable" style={{
|
||||
fontSize: " 18px",
|
||||
color: "#777777",
|
||||
fontWeight: 500,
|
||||
width: 150
|
||||
}}>Semesterstart</p>
|
||||
<p className="semesterDateLable" style={{
|
||||
fontSize: " 18px",
|
||||
color: "#777777",
|
||||
fontWeight: 500,
|
||||
width: 150
|
||||
}}>Semesterende</p>
|
||||
</div>
|
||||
<div className="semesterDateInputPair">
|
||||
<input type="date" id="start" name="trip-start" value={startDate}
|
||||
<input type="date" id="start" className={"box-shadow selector"} value={startDate}
|
||||
style={{padding: 5}}
|
||||
onChange={(e) => setStartDate(e.target.value)}/>
|
||||
<p className="inputFieldSeperator">-</p>
|
||||
<input type="date" id="start" name="trip-start" value={endDate}
|
||||
<input type="date" id="start" className={"box-shadow selector"} value={endDate}
|
||||
style={{padding: 5}}
|
||||
onChange={(e) => setEndDate(e.target.value)}/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -151,19 +168,57 @@ export default function InputForm(p) {
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Dozent</th>
|
||||
<th>Modul</th>
|
||||
<th style={{
|
||||
fontSize: " 18px",
|
||||
color: "#777777",
|
||||
fontWeight: 500,
|
||||
}}>Wählen
|
||||
</th>
|
||||
<th style={{
|
||||
fontSize: " 18px",
|
||||
color: "#777777",
|
||||
fontWeight: 500,
|
||||
}}>Freischalten
|
||||
</th>
|
||||
<th style={{
|
||||
fontSize: " 18px",
|
||||
color: "#777777",
|
||||
fontWeight: 500,
|
||||
textAlign: "center"
|
||||
}}>Dozent
|
||||
</th>
|
||||
<th style={{
|
||||
fontSize: " 18px",
|
||||
color: "#777777",
|
||||
fontWeight: 500,
|
||||
textAlign: "center",
|
||||
}}>Modul
|
||||
</th>
|
||||
</tr>
|
||||
{users.map(user => (
|
||||
<tr>
|
||||
<td><input type="checkbox" onChange={(e) => {
|
||||
|
||||
<td><div style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
}}><input type="checkbox" onChange={(e) => {
|
||||
onCheckBoxClicked(user, e);
|
||||
}}/></td>
|
||||
<td>{user.firstName + " " + user.lastName}</td>
|
||||
<select id={"userSelect"} name={"userSelect"} multiple={false} style={{
|
||||
}}/></div></td>
|
||||
|
||||
<td><div style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
}}><input type="checkbox" onChange={(e) => {
|
||||
onCheckBoxClicked(user, e);
|
||||
}}/></div></td>
|
||||
<td style={{}}>{user.firstName + " " + user.lastName}</td>
|
||||
<select id={"userSelect"} name={"userSelect"} className={"box-shadow selector"}
|
||||
multiple={false} style={{
|
||||
maxHeight: 80,
|
||||
border: "1px solid black"
|
||||
marginTop: 10,
|
||||
padding: "5px 2px"
|
||||
}} onChange={(e) => {
|
||||
onModuleClicked(user, e.target.value)
|
||||
}}>
|
||||
@@ -179,10 +234,10 @@ export default function InputForm(p) {
|
||||
</table>
|
||||
</div>
|
||||
<div id="buttons">
|
||||
<Button color="red" width="100px" height="30px" text="Abbrechen" onClick={() => {
|
||||
<Button color="rgba(54,54,54,0.64)" width="100px" height="30px" text="Abbrechen" onClick={() => {
|
||||
router.back()
|
||||
}}/>
|
||||
<Button color="green" width="100px" height="30px" text="Speichern" onClick={() => {
|
||||
<Button color="#77932b" width="100px" height="30px" text="Speichern" onClick={() => {
|
||||
onCreateClicked()
|
||||
}}/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user