Can Delete Semester on Right click menu

anwendung/src/components/PopUp.jsx

@@ -3,41 +3,21 @@ import {useState} from "react";
 
 let shown = false;
 
-export default function PopUp() {
-    const [displayState, setDisplayState] = useState("none");
+export default function PopUp(p) {
 
-    function toggleModal() {
-        shown = !shown;
-        if (shown)
-        {
-            setDisplayState("block");
-        }
-        else
-        {
-            setDisplayState("none");
-        }
-        console.log("test");
-    }
-
-    function on_abgeben_pressed()
-    {
-
-    }
 
     return (
         <>
-            <Button text={"Abgeben"} onClick={toggleModal}/>
-
             <div style={{
-                display: displayState
+                display: p.displayState
             }}>
 
                 <div className={"modal-container"}>
                     <div className={"modal"}>
-                        <p className={"font-middle"}>Kalender wirklich abgeben?</p>
+                        <p className={"font-middle"}>{p.hint}</p>
                         <div>
-                            <Button text={"Abbrechen"} color={"#363636"}  onClick={toggleModal}/>
-                            <Button text={"Abgeben"} color={"#7a7a7a"}  onClick={on_abgeben_pressed}/>
+                            <Button text={p.text1} color={"#363636"}  onClick={p.function1}/>
+                            <Button text={p.text2} color={"#7a7a7a"}  onClick={p.function2}/>
                         </div>
                     </div>
                 </div>

anwendung/src/components/SemesterTile.jsx

@@ -1,10 +1,15 @@
 import StatusBar from "@/components/StatusBar";
-import React from "react";
+import React, {useEffect} from "react";
 
 export default function SemesterTile(p)
 {
+    useEffect(() =>
+    {
+        window.addEventListener("contextmenu", (e) => (e.preventDefault()))
+    })
+
     return (
-        <div onClick={() => p.onClick()} className={"semester-tile"}>
+        <div onMouseDown={(e) => p.onClick(e)} className={"semester-tile"}>
             <p>{p.text}</p>
             <StatusBar progress={0}/>
         </div>

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>
     )
 }