First Prototype Frontend (Not Finished)

anwendung/package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "autoprefixer": "10.4.14",
-    "daisyui": "^2.51.6",
     "next": "13.3.4",
     "postcss": "8.4.23",
     "react": "18.2.0",

anwendung/src/components/InputForm.jsx

@@ -2,15 +2,33 @@ import CourseNameInput from "@/components/CourseNameInput";
 import SemesterRangeInput from "@/components/SemesterRangeInput";
 import InputFormButtons from "@/components/InputFormButtons";
 import DozentSelector from "@/components/DozentSelector";
+import Button from "@/components/Button";
+import {useRouter} from "next/router";
 
 export default function InputForm() {
+
+    const router = useRouter();
+
     return (
         <>
             <div className="inputForm round-border">
                 <CourseNameInput/>
-                <SemesterRangeInput/>
+                <div className="semesterRangeInput">
+                    <div className="semesterDateLables">
+                        <p className="semesterDateLable">Semesterstart</p>
+                        <p className="semesterDateLable">Semesterende</p>
+                    </div>
+                    <div className="semesterDateInputPair">
+                        <input type="date" id="start" name="trip-start"/>
+                        <p className="inputFieldSeperator">-</p>
+                        <input type="date" id="start" name="trip-start"/>
+                    </div>
+                </div>
                 <DozentSelector/>
-                <InputFormButtons/>
+                <div id="buttons">
+                    <Button color="red" width="100px" height="30px" text="Abbrechen" onClick={() => {router.back()}}/>
+                    <Button color="green" width="100px" height="30px" text="Erstellen"/>
+                </div>
             </div>
         </>
     )

anwendung/src/components/InputFormButtons.jsx

@@ -1,12 +0,0 @@
-import Button from './Button';
-
-export default function InputFormButtons() {
-    return (
-        <>
-            <div id="buttons">
-                <Button color="red" width="100px" height="30px" text="Abbrechen"/>
-                <Button color="green" width="100px" height="30px" text="Erstellen"/>
-            </div>
-        </>
-    );
-}

anwendung/src/components/Login.jsx

@@ -1,57 +1,63 @@
 import {useState} from "react";
 import Button from "@/components/Button";
+import {NextResponse} from "next/server";
+import Link from "next/link";
+import {useRouter} from "next/router";
 
 export default function Login() {
 
-        let url = "http://localhost:8080/users"
+    let url = "http://localhost:8080/users"
 
-        async function on_login_click() {
+    async function on_login_click() {
-            url += "?mail=" + inputUserName + "&password=" + inputPassword;
+        url += "?mail=" + inputUserName + "&password=" + inputPassword;
 
-            let response = await fetch(url, {
+        let response = await fetch(url, {
-                method: "GET",
+            method: "GET",
-            });
+        });
 
-            let reader = response.body.getReader();
+        let reader = response.body.getReader();
-            let value = String.fromCharCode.apply(null, ((await reader.read()).value))
+        let value = String.fromCharCode.apply(null, ((await reader.read()).value))
-            if(value != "failed")
+        if (value != "failed") {
-            {
+            localStorage.setItem("sessionid", value);
-                localStorage.setItem("sessionid", value)
+
-            }
+            await router.push("/semesteroverview")
-            else
+
-            {
+        } else {
-                setInputPassword("");
+            setInputPassword("");
-                setInputUserName("");
+            setInputUserName("");
-                setHint("wrong login credentials")
+            setHint("wrong login credentials")
-                setBackgroundColor("rgb(171,89,89)")
-            }
         }
+    }
 
-        const [inputUserName, setInputUserName] = useState("")
+    const [inputUserName, setInputUserName] = useState("")
-        const [inputPassword, setInputPassword] = useState("")
+    const [inputPassword, setInputPassword] = useState("")
-        const [hint, setHint] = useState("type here")
+    const [hint, setHint] = useState("type here")
-        const [backgroundColor, setBackgroundColor] = useState("rgb(255, 255, 255)")
+    const [backgroundColor, setBackgroundColor] = useState("rgb(255, 255, 255)")
+    const router = useRouter()
 
-        return (
+    return (
-            <div className="border">
+        <div className="border">
-                <login className={"login-container"}>
+            <login className={"login-container"}>
-                    <p className={"font-big-fat placement"}>Login</p>
+                <p className={"font-big-fat placement"}>Login</p>
-                    <div className={"placement"}>
+                <div className={"placement"}>
-                        <br/>
+                    <br/>
-                        <p className={"font-kinda-big"}>Username</p>
+                    <p className={"font-kinda-big"}>Username</p>
-                        <input type="text" value={inputUserName} onChange={e => setInputUserName(e.target.value)} placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
+                    <input type="text" value={inputUserName} onChange={e => setInputUserName(e.target.value)}
-                            style={{
+                           placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
-                                backgroundColor: backgroundColor
+                           style={{
-                            }}/>
+                               backgroundColor: backgroundColor
-                        <br/>
+                           }}/>
-                        <p className={"font-kinda-big"}>Password</p>
+                    <br/>
-                        <input type="password" value={inputPassword} onChange={e => setInputPassword(e.target.value)} placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
+                    <p className={"font-kinda-big"}>Password</p>
-                               style={{
+                    <input type="password" value={inputPassword} onChange={e => setInputPassword(e.target.value)}
-                                   backgroundColor: backgroundColor
+                           placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
-                               }}/>
+                           style={{
-                    </div>
+                               backgroundColor: backgroundColor
-                    <Button text={"Login"} color={"#e2001a"} width={"25px"} onClick={() => on_login_click()}/>
+                           }}/>
-                </login>
+                </div>
-            </div>
+                <Button text={"Login"} color={"#e2001a"} width={"25px"} onClick={() => on_login_click()}/>
-        );
+
-    }
+            </login>
+        </div>
+    );
+}

anwendung/src/components/SemesterRangeInput.jsx

@@ -1,17 +1,8 @@
 export default function SemesterRangeInput(){
+
     return(
         <>
-            <div className="semesterRangeInput">
+
-                <div className="semesterDateLables">
-                    <p className="semesterDateLable">Semesterstart</p>
-                    <p className="semesterDateLable">Semesterende</p>
-                </div>
-                <div className="semesterDateInputPair">
-                    <input className="semesterDateInput"/>
-                    <p className="inputFieldSeperator">-</p>
-                    <input className="semesterDateInput"/>
-                </div>
-            </div>
         </>
     )
 }

anwendung/src/components/SemesterTile.jsx

@@ -0,0 +1,12 @@
+import StatusBar from "@/components/StatusBar";
+import React from "react";
+
+export default function SemesterTile(p)
+{
+    return (
+        <div onClick={() => p.onClick()} className={"semester-tile"}>
+            <p>{p.text}</p>
+            <StatusBar progress={0}/>
+        </div>
+    )
+}

anwendung/src/components/StatusBar.jsx

@@ -12,9 +12,9 @@ export default function StatusBar(p)
     return (
         <div className={"step-container"}>
             <div className={"steps"}>
-                <span className={"step " + classNames[index] + " " + actives[0]}>1</span>
+                <span className={"step " + classNames[0] + " " + actives[0]}>1</span>
-                <span className={"step " + classNames[index] + " " + actives[1]}>2</span>
+                <span className={"step " + classNames[1] + " " + actives[1]}>2</span>
-                <span className={"step " + classNames[index] + " " + actives[2]}>3</span>
+                <span className={"step " + classNames[2] + " " + actives[2]}>3</span>
                 <div className={"progress-bar " + classNames[index]}
                      style={{
                          width: p.progress + "%"

anwendung/src/pages/createSemester.js

@@ -0,0 +1,10 @@
+import InputForm from "@/components/InputForm";
+
+export default function CreateSemester(p)
+{
+    return (
+        <div className={"normal-centered"}>
+            <InputForm/>
+        </div>
+    )
+}

anwendung/src/pages/index.js

@@ -20,7 +20,7 @@ export default function Home(p) {
 
     return (
 
-        <div className={"login-window"}>
+        <div className={"normal-centered"}>
             <Login/>
         </div>
 

anwendung/src/pages/semesteroverview.js

@@ -0,0 +1,45 @@
+import Button from "@/components/Button";
+import {useEffect, useState} from "react";
+import SemesterTile from "@/components/SemesterTile";
+import InputForm from "@/components/InputForm";
+import {useRouter} from "next/router";
+
+export default function SemesterOverview(p)
+{
+    async function getSemesters()
+    {
+        let urlTest = "http://localhost:8080/semester/all?sessionid=" + localStorage.getItem("sessionid");
+
+        await fetch(urlTest).then(response => response.json()).then(s => {
+            setEntries(s)
+        })
+    }
+
+    function onClickSemester(e)
+    {
+        localStorage.setItem("currentsid", e.id)
+        // router.push("/createSemester")
+    }
+
+    function onClickNewSemester()
+    {
+        router.push("/createSemester")
+    }
+
+    useEffect(() => {
+        getSemesters();
+    })
+
+    const [entries, setEntries] = useState([])
+    const router = useRouter()
+
+    return (
+        <div className={"semester-overview"}>
+            {
+                entries.map(e => (<SemesterTile text={e.name} onClick={() => onClickSemester(e)}/>))
+            }
+            <Button color={"#818181"} text={"+"} width={240} height={160} fontColor={"black"} fontSize={50}
+            onClick={() => onClickNewSemester()}/>
+        </div>
+    )
+}

anwendung/src/styles/globals.css

@@ -12,7 +12,7 @@
 Page Layouts
  */
 
-.login-window
+.normal-centered
 {
   height: 100vh;
   display: flex;
@@ -21,6 +21,18 @@ Page Layouts
   align-items: center;
 }
 
+.semester-overview
+{
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  align-content: center;
+  gap: 10px;
+}
+
 body
 {
   height: 100vh;
@@ -31,7 +43,7 @@ Button
  */
 .round-border
 {
-  border-radius: 5px;
+  border-radius: 10px;
   border-width: 0;
 }
 
@@ -349,7 +361,6 @@ input {
   border: solid;
   display: flex;
   flex-direction: column;
-
 }
 
 #buttons {
@@ -431,3 +442,37 @@ Login
    font-size: 0.875rem/* 14px */;
    line-height: 2rem/* 32px */;
  }
+
+/**
+SemesterTile
+ */
+
+.semester-tile
+{
+  background-color: #797979;
+  width: 240px;
+  height: 160px;
+  color: white;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  gap: 10px;
+}
+
+.semester-tile:hover
+{
+  background-color: #5d606e;
+}
+
+.semester-tile p
+{
+  pointer-events: none;
+}
+
+.semester-tile .step-container
+{
+  pointer-events: none;
+}

backend/src/main/java/com/example/backend/anwprj/DataBaseHandler.java

@@ -269,6 +269,26 @@ public class DataBaseHandler
         }
     }
 
+    public Semester[] getAllSemesters()
+    {
+        try
+        {
+            ResultSet rs = st.executeQuery("select * from semester");
+            List<Semester> semestersList = new ArrayList<>();
+            Semester s = null;
+            while((s = resultSetToSemester(rs)) != null)
+            {
+                semestersList.add(s);
+            }
+
+            return semestersList.toArray(new Semester[0]);
+        }
+        catch(Exception e)
+        {
+            return null;
+        }
+    }
+
     public Semester updateSemester(Semester semester)
     {
         try

backend/src/main/java/com/example/backend/anwprj/controller/SemesterController.java

@@ -9,6 +9,8 @@ import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.Arrays;
+
 @RestController
 public class SemesterController
 {
@@ -82,6 +84,23 @@ public class SemesterController
         return new ResponseEntity<>(HttpStatus.FORBIDDEN);
     }
 
+    @CrossOrigin
+    @GetMapping("/semester/all")
+    public ResponseEntity<Semester[]> getSemester(@RequestParam(name="sessionid") String sessionid)
+    {
+        User u = UserSessionIDHandler.getUserBySessionID(sessionid);
+
+        if(u != null)
+        {
+            if(u.getPermissions() == UserPermissions.admin.getValue())
+            {
+                return new ResponseEntity<>(db.getAllSemesters(), HttpStatus.OK);
+            }
+        }
+
+        return null;
+    }
+
     @CrossOrigin
     @PutMapping("/semester")
     public ResponseEntity<Semester> updateSemester(@RequestBody Semester semester, @RequestParam(name="sessionid") String sessionID)