Vorbereitung Progessbar

Semester Tiles angepasst für Progessbar implementierung

anwendung/src/components/SemesterTile.jsx

@@ -23,17 +23,20 @@ export default function SemesterTile(p)
     return (
         <div
             style={{
-                backgroundColor: color
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                backgroundColor: "rgba(0,0,0,0)"
             }}
-            onClick={(e) => p.onClick(e)} className={"semester-tile box-shadow"}>
-            <p style={{
+            onClick={(e) => p.onClick(e)}>
+            <p className={"semester-tile-p"} style={{
                 lineHeight: "80%"
             }}>{p.text}</p>
-            <p style={{
+            <p className={"semester-tile-p"} style={{
                 lineHeight: "80%",
                 color: "gray"
             }}>{p.text2}</p>
-            <StatusBar progress={0}/>
             <div style={{
                 display: editable ? "flex" : "none",
                 flexDirection: "row",
@@ -41,8 +44,7 @@ export default function SemesterTile(p)
                 alignItems: "center",
                 gap: 5
             }}>
-                <Button icon={deleteItem} width={30} height={30} color={"#ffffff"} onClick={p.onButtonDeleteClick}/>
-                <Button icon={editItem} width={30} height={30} color={"#ffffff"} onClick={p.onButtonEditClick}/>
+
             </div>
         </div>
     )

anwendung/src/pages/semesteroverview.js

@@ -8,56 +8,47 @@ import Background from "@/components/Background";
 import Logout from "@/components/Logout";
 import {baseURL} from "@/components/Constants";
 import HelpButton from "@/components/HelpButton";
+import StatusBar from "@/components/StatusBar";
+import {deleteItem, editItem} from "@/components/Icons";
 
-export default function SemesterOverview(p)
-{
-    async function getSemesters()
-    {
+export default function SemesterOverview(p) {
+    async function getSemesters() {
         let urlTest = baseURL + "/semester/all?sessionid=" + localStorage.getItem("sessionid");
 
 
-            await fetch(urlTest).then(response => response.json()).then(s => {
-                setEntries(s)
-            })
+        await fetch(urlTest).then(response => response.json()).then(s => {
+            setEntries(s)
+        })
 
     }
 
-    function onClickSemester(e, m)
-    {
-        if(m.target === m.currentTarget)
-        {
+    function onClickSemester(e, m) {
+        if (m.target === m.currentTarget) {
             localStorage.setItem("currentsid", e.id)
             router.push("/planning")
         }
 
     }
 
-    function onClickNewSemester()
-    {
+    function onClickNewSemester() {
         localStorage.setItem("currentsid", 0);
         router.push("/createSemester");
     }
 
 
-    function togglePopup()
-    {
-        if(modalDisplay === "block")
-        {
+    function togglePopup() {
+        if (modalDisplay === "block") {
             setModalDisplay("none");
-        }
-        else
-        {
+        } else {
             setModalDisplay("block");
         }
     }
 
-    function funcButtonAbort()
-    {
+    function funcButtonAbort() {
         togglePopup();
     }
 
-    async function funcButtonDelete()
-    {
+    async function funcButtonDelete() {
         let id = localStorage.getItem("currentsid");
         let url = baseURL + "/semester?sessionid=" + localStorage.getItem("sessionid") + "&id=" + id;
         await fetch(url, {
@@ -68,8 +59,7 @@ export default function SemesterOverview(p)
         getSemesters();
     }
 
-    async function funcButtonEdit(e, m)
-    {
+    async function funcButtonEdit(e, m) {
 
         localStorage.setItem("currentsid", e.id);
         let semester = e;
@@ -84,7 +74,11 @@ export default function SemesterOverview(p)
 
         await router.push({
             pathname: "/createSemester",
-            query: {courseName: semester.name, startDate: startDate.toISOString().slice(0, 10), endDate: endDate.toISOString().slice(0, 10)},
+            query: {
+                courseName: semester.name,
+                startDate: startDate.toISOString().slice(0, 10),
+                endDate: endDate.toISOString().slice(0, 10)
+            },
         });
         getSemesters();
     }
@@ -106,19 +100,42 @@ export default function SemesterOverview(p)
             <HelpButton/>
             <Background/>
             {
-                entries.map(e => (<SemesterTile text={e.name} onClick={(f) => onClickSemester(e, f)} onButtonDeleteClick={() => {
-                        localStorage.setItem("currentsid", e.id)
-                        setModalHint(e.name + " Löschen?");
-                        togglePopup();
-                }} onButtonEditClick={(m) => {
-                    localStorage.setItem("currentsid", e.id)
-                    funcButtonEdit(e, m);
-                }}/>))
+                entries.map(e => (
+                    <div className={"semester-tile box-shadow"}>
+                        <SemesterTile text={e.name} onClick={(f) => onClickSemester(e, f)} onButtonDeleteClick={() => {
+                            localStorage.setItem("currentsid", e.id)
+                            setModalHint(e.name + " Löschen?");
+                            togglePopup();
+                        }} onButtonEditClick={(m) => {
+                            localStorage.setItem("currentsid", e.id)
+                            funcButtonEdit(e, m);
+                        }}/>
+                        <StatusBar progress={0}/>
+                        <div style={
+                            {
+                                display:"flex",
+                                justifyContent:"center",
+                                alignItems:"center"
+                            }
+                        }>
+                            <Button icon={deleteItem} width={30} height={30} color={"#ffffff"}
+                                    onClick={(m) => {
+                                        localStorage.setItem("currentsid", e.id)
+                                        setModalHint(e.name + " Löschen?");
+                                        togglePopup()
+                                    }}/>
+                            <Button icon={editItem} width={30} height={30} color={"#ffffff"}
+                                    onClick={(m) => {
+                                        localStorage.setItem("currentsid", e.id)
+                                        funcButtonEdit(e, m)
+                                    }}/>
+                        </div>
+                    </div>))
             }
             <Button color={"#dcdcdc"} text={"+"} width={240} height={160} fontColor={"black"} fontSize={50}
-            onClick={() => onClickNewSemester()}/>
+                    onClick={() => onClickNewSemester()}/>
             <PopUp hint={modalHint} text1={"Abbrechen"} text2={"Löschen"} displayState={modalDisplay}
-            function1={funcButtonAbort} function2={funcButtonDelete}/>
+                   function1={funcButtonAbort} function2={funcButtonDelete}/>
         </div>
     )
 }

anwendung/src/pages/semesteroverviewLecturer.js

@@ -9,6 +9,7 @@ import Logout from "@/components/Logout";
 import {baseURL} from "@/components/Constants"
 import Back from "@/components/Back";
 import HelpButton from "@/components/HelpButton";
+import StatusBar from "@/components/StatusBar";
 
 export default function SemesteroverviewLecturer(p) {
     function getModules() {
@@ -66,9 +67,12 @@ export default function SemesteroverviewLecturer(p) {
             <Background/>
             <HelpButton/>
             {entries.map((e, index) => (
+                <div className={"semester-tile box-shadow"}>
                 <SemesterTile
                     editable = {false} text={semesterNames[index]} text2={e.name} onClick={(f) => onClickSemester(e, f)} color={e.activated==1?"#ffffff":"#aaaaaa"}
                 />
+                    <StatusBar progress={0}/>
+                </div>
             ))}
         </div>
     );

anwendung/src/styles/globals.css

@@ -561,13 +561,14 @@ SemesterTile
     justify-content: center;
     font-size: 20px;
     gap: 10px;
+    background-color: white;
 }
 
 .semester-tile:hover {
     background-color: #e1e1e1;
 }
 
-.semester-tile p {
+.semester-tile-p {
     pointer-events: none;
     font-weight: bold;
     font-size: 23px;