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>
anwendung/src/pages/index.js
+10 -26
View File
@@ -12,6 +12,7 @@ import Login from "@/components/Login";
import Test from "@/components/Test";
import BasicDateCalendar from "@/components/CalendarSideBar";
import {randomInt} from "next/dist/shared/lib/bloom-filter/utils";
import Background from "@/components/Background";
const inter = Inter({subsets: ['latin']})
@@ -22,32 +23,15 @@ export default function Home(p) {
<div className={"normal-centered"}>
<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>
<Background/>
<h1 style={{
fontSize: 40,
fontWeight: "bold",
color: "#77932b",
marginBottom: "5%",
textShadow: "2px 2px 2px rgba(0, 0, 0, 0.2)",
textAlign: "center"
}}>Willkommen in deinem Vorlesungsplaner</h1>
<Login/>
</div>
)
anwendung/src/pages/semesteroverview.js
+2 -26
View File
@@ -4,6 +4,7 @@ import SemesterTile from "@/components/SemesterTile";
import InputForm from "@/components/InputForm";
import {useRouter} from "next/router";
import PopUp from "@/components/PopUp";
import Background from "@/components/Background";
export default function SemesterOverview(p)
{
@@ -91,32 +92,7 @@ export default function SemesterOverview(p)
return (
<div className={"semester-overview"}>
<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>
<Background/>
{
entries.map(e => (<SemesterTile text={e.name} onClick={(f) => onClickSemester(e, f)} onButtonDeleteClick={() => {
localStorage.setItem("currentsid", e.id)
anwendung/src/styles/globals.css
+27 -6
View File
@@ -354,16 +354,36 @@ input {
.courseNameInput {
width: 300px;
padding: 5px;
border: none;
background-color: white;
border-radius: 5px;
font-family: Arial, serif;
}
.selector
{
border-width: 0;
border-radius: 10px;
}
.semesterDateInput {
width: 150px;
padding: 5px;
border: none;
background-color: white;
border-radius: 5px;
font-family: Arial, serif;
}
.semesterDateLables, .semesterDateInputPair {
display: flex;
flex-direction: row;
justify-content: left;
padding: 0;
border: none;
background-color: white;
border-radius: 5px;
}
.inputFieldSeperator {
@@ -372,8 +392,7 @@ input {
}
.semesterDateLable {
width: 150px;
margin-right: 40px;
margin-right: 32px;
}
.semesterRangeInput {
@@ -384,9 +403,11 @@ input {
width: 600px;
height: 600px;
padding: 20px;
border: solid;
/*border: solid;*/
border-radius: 10px;
display: flex;
flex-direction: column;
background-color: white;
}
#buttons {
@@ -394,11 +415,12 @@ input {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 10px;
}
.dozentSelector {
height: 350px;
border: solid;
/*border: solid;*/
margin-top: 20px;
width: 500px;
padding: 10px;
@@ -439,9 +461,8 @@ Login
.input {
padding: 5px;
border: none;
background-color: #e9e9e9;
background-color: white;
border-radius: 5px;
font-family: Arial, serif;
font-size: 16px;
}
backend/database.mv.db
BIN
View File
Binary file not shown.
backend/database.trace.db
+1134
View File
File diff suppressed because it is too large Load Diff
backend/pom.xml
+27
View File
@@ -27,6 +27,12 @@
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<version>2.1.214</version>
</dependency>
</dependencies>
<build>
@@ -35,6 +41,27 @@
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>install-file</goal>
</goals>
<configuration>
<groupId>com.example</groupId>
<artifactId>example</artifactId>
<version>1.0</version>
<packaging>jar</packaging>
<file>${basedir}/H2JDBCDriver/h2-2.1.214.jar</file>
<generatePom>true</generatePom>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>