jonas/TIF22A_AnwProjekt_B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Input Form new Design

Browse Source
This commit is contained in:
brausjonas
2023-05-24 12:47:15 +02:00
parent 2fba6b4354
commit 6c13caca85
8 changed files with 1313 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/Background.jsx
+33
View File
@@ -0,0 +1,33 @@
import React from "react";
export default function Background()
{
return (
<div style={{
position: "absolute",
width: "100%",
height: "100%",
overflow: "clip",
pointerEvents: "none"
}}>
<div style={{
position: "absolute",
transform: "skew(20deg)",
width: "100%",
height: "100%",
zIndex: -10,
backgroundColor: "#f2f2f2",
borderTopLeftRadius: 400,
borderBottomRightRadius: 800,
}}></div>
<div style={{
position: "absolute",
width: "100%",
height: "100%",
zIndex: -11,
backgroundColor: "#346991",
}}></div>
</div>
);
}
anwendung/src/components/InputForm.jsx
+80 -25
View File
@@ -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>