Can Delete Semester on Right click menu

anwendung/src/pages/semesteroverview.js

@@ -3,6 +3,7 @@ import {useEffect, useState} from "react";
 import SemesterTile from "@/components/SemesterTile";
 import InputForm from "@/components/InputForm";
 import {useRouter} from "next/router";
+import PopUp from "@/components/PopUp";
 
 export default function SemesterOverview(p)
 {
@@ -15,10 +16,18 @@ export default function SemesterOverview(p)
         })
     }
 
-    function onClickSemester(e)
+    function onClickSemester(e, f)
     {
         localStorage.setItem("currentsid", e.id)
-        // router.push("/createSemester")
+        if(f.button === 0)
+        {
+            // router.push("/createSemester")
+        }
+        else
+        {
+            setModalHint(e.name + " Löschen?");
+            togglePopup();
+        }
     }
 
     function onClickNewSemester()
@@ -26,20 +35,53 @@ export default function SemesterOverview(p)
         router.push("/createSemester")
     }
 
+
+    function togglePopup()
+    {
+        if(modalDisplay === "block")
+        {
+            setModalDisplay("none");
+        }
+        else
+        {
+            setModalDisplay("block");
+        }
+    }
+
+    function funcButtonAbort()
+    {
+        togglePopup();
+    }
+
+    async function funcButtonDelete()
+    {
+        let id = localStorage.getItem("currentsid");
+        let url = "http://localhost:8080/semester?sessionid=" + localStorage.getItem("sessionid") + "&id=" + id;
+        await fetch(url, {
+            method: "DELETE"
+        });
+
+        togglePopup();
+    }
+
     useEffect(() => {
         getSemesters();
     })
 
     const [entries, setEntries] = useState([])
+    const [modalDisplay, setModalDisplay] = useState("none");
+    const [modalHint, setModalHint] = useState("");
     const router = useRouter()
 
     return (
         <div className={"semester-overview"}>
             {
-                entries.map(e => (<SemesterTile text={e.name} onClick={() => onClickSemester(e)}/>))
+                entries.map(e => (<SemesterTile text={e.name} onClick={(f) => onClickSemester(e, f)}/>))
             }
             <Button color={"#818181"} text={"+"} width={240} height={160} fontColor={"black"} fontSize={50}
             onClick={() => onClickNewSemester()}/>
+            <PopUp hint={modalHint} text1={"Abbrechen"} text2={"Löschen"} displayState={modalDisplay}
+            function1={funcButtonAbort} function2={funcButtonDelete}/>
         </div>
     )
 }