Input Form new Design

anwendung/src/components/Background.jsx

@@ -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

@@ -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;
         }
     }
@@ -108,8 +107,7 @@ export default function InputForm(p) {
         }
     }
 
-    function onCheckBoxClicked(user, e)
+    function onCheckBoxClicked(user, e) {
-    {
         onModuleClicked(user, "");
 
         let found = false;
@@ -131,19 +129,38 @@ export default function InputForm(p) {
 
     return (
         <>
-            <div className="inputForm round-border">
+            <Background/>
-                <h3>SemesterName</h3>
+            <div className="inputForm box-shadow">
-                <input className="courseNameInput" value={courseName} onChange={(e) => setCourseName(e.target.value)}/>
+                <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" style={{
-                        <p className="semesterDateLable">Semesterende</p>
+                            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 style={{
-                            <th>Dozent</th>
+                                fontSize: " 18px",
-                            <th>Modul</th>
+                                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>
+                                }}/></div></td>
-                                <td>{user.firstName + " " + user.lastName}</td>
+
-                                <select id={"userSelect"} name={"userSelect"} multiple={false} style={{
+                                <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

@@ -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={{
+            <Background/>
-                position: "absolute",
+            <h1 style={{
-                width: "100%",
+                fontSize: 40,
-                height: "100%",
+                fontWeight: "bold",
-                overflow: "clip",
+                color: "#77932b",
-                pointerEvents: "none"
+                marginBottom: "5%",
-            }}>
+                textShadow: "2px 2px 2px rgba(0, 0, 0, 0.2)",
-                <div style={{
+                textAlign: "center"
-                    position: "absolute",
+            }}>Willkommen in deinem Vorlesungsplaner</h1>
-                    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>
             <Login/>
         </div>
     )

anwendung/src/pages/semesteroverview.js

@@ -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={{
+            <Background/>
-                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>
             {
                 entries.map(e => (<SemesterTile text={e.name} onClick={(f) => onClickSemester(e, f)} onButtonDeleteClick={() => {
                         localStorage.setItem("currentsid", e.id)

anwendung/src/styles/globals.css

@@ -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: 32px;
-    margin-right: 40px;
 }
 
 .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/pom.xml

@@ -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>