Calender View Delete Elements

Calender View Delete Elements with Right click

anwendung/src/components/CalenderView.jsx

@@ -14,6 +14,10 @@ let selectedListID = "";
 export default function CalenderView(p) {
     const [t, setT] = useState(false)
 
+    useEffect(() => {
+        window.addEventListener("contextmenu", (e) => (e.preventDefault()))
+    })
+
     function mouse_move(e) {
         if (mouseDown) {
             let y_window = e.clientY;
@@ -22,13 +26,17 @@ export default function CalenderView(p) {
             let row = Math.floor((y_window - y_target_offset) / 10) + 1
 
             if (grabbed != null) {
-                if (grabbedUp) {
+
-                    if (row < grabbed.end_point - 1) {
+                if (row >= 0 && row <= 96) {
-                        grabbed.start_point = row;
+                    if (grabbedUp) {
-                    }
+
-                } else {
+                        if (row < grabbed.end_point - 1) {
-                    if (row > grabbed.start_point) {
+                            grabbed.start_point = row;
-                        grabbed.end_point = row + 1;
+                        }
+                    } else {
+                        if (row > grabbed.start_point) {
+                            grabbed.end_point = row + 1;
+                        }
                     }
                 }
             } else if (selectedElement != null) {
@@ -46,8 +54,10 @@ export default function CalenderView(p) {
                     selectedListID = id;
                 }
 
-                selectedElement.start_point = row - selectedOffsetTop;
+                if (row - selectedOffsetTop > 0 && row + selectedOffsetBottom <= 97) {
-                selectedElement.end_point = row + selectedOffsetBottom;
+                    selectedElement.start_point = row - selectedOffsetTop;
+                    selectedElement.end_point = row + selectedOffsetBottom;
+                }
             }
         }
 
@@ -73,61 +83,91 @@ export default function CalenderView(p) {
 
     function mouse_down(e) {
 
-        mouseDown = true;
         let y_window = e.clientY;
         let y_target_offset = e.currentTarget.getBoundingClientRect().top;
         let row = Math.floor((y_window - y_target_offset) / 10) + 1;
         let current_list = entries[e.currentTarget.id];
 
-        if (e.target.id === "grab") {
+        if (e.button === 2) {
-            let entry = e.target.parentElement;
-            let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart);
 
+            let current = null;
             for (let i = 0; i < current_list.length; i++) {
-                let current = current_list[i];
+                current = current_list[i];
-                if (current.start_point === row || current.end_point === row + 1) {
-                    grabbed = current;
-                    break;
-                }
-            }
-
-            if (row === rowStart) {
-                grabbedUp = true;
-            } else {
-                grabbedUp = false;
-            }
-        } else if (e.target.id === "entry") {
-            for (let i = 0; i < current_list.length; i++) {
-                let current = current_list[i];
                 if (current.start_point <= row && current.end_point >= row) {
-                    selectedElement = current;
-                    selectedListID = e.currentTarget.id;
                     break;
                 }
+                current = null;
             }
 
-
+            if(current != null)
-            selectedOffsetTop = row - parseInt(window.getComputedStyle(e.target).gridRowStart);
+            {
-            selectedOffsetBottom = parseInt(window.getComputedStyle(e.target).gridRowEnd) - row;
+                let temp = []
-        } else {
+                for(let i = 0; i < current_list.length; i++)
-            if (row < 96) {
+                {
-                let free = true;
+                    if(current_list[i] !== current)
-                for (let i = 0; i < current_list.length; i++) {
+                    {
-                    let current = current_list[i];
+                        temp.push(current_list[i]);
-
-                    for (let r = row; r < row + 2; r++) {
-                        for (let s = current.start_point; s < current.end_point; s++) {
-                            if (s === r) {
-                                free = false;
-                                break;
-                            }
-                        }
                     }
                 }
 
-                if (free) {
+                entries[e.currentTarget.id] = temp;
-                    current_list.push(new CalenderEntry(row, row + 2));
+            }
-                    setT(!t);
+
+        } else {
+
+
+            mouseDown = true;
+
+            if (e.target.id === "grab") {
+                let entry = e.target.parentElement;
+                let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart);
+
+                for (let i = 0; i < current_list.length; i++) {
+                    let current = current_list[i];
+                    if (current.start_point === row || current.end_point === row + 1) {
+                        grabbed = current;
+                        break;
+                    }
+                }
+
+                if (row === rowStart) {
+                    grabbedUp = true;
+                } else {
+                    grabbedUp = false;
+                }
+            } else if (e.target.id === "entry") {
+                for (let i = 0; i < current_list.length; i++) {
+                    let current = current_list[i];
+                    if (current.start_point <= row && current.end_point >= row) {
+                        selectedElement = current;
+                        selectedListID = e.currentTarget.id;
+                        break;
+                    }
+                }
+
+
+                selectedOffsetTop = row - parseInt(window.getComputedStyle(e.target).gridRowStart);
+                selectedOffsetBottom = parseInt(window.getComputedStyle(e.target).gridRowEnd) - row;
+            } else {
+                if (row < 96) {
+                    let free = true;
+                    for (let i = 0; i < current_list.length; i++) {
+                        let current = current_list[i];
+
+                        for (let r = row; r < row + 2; r++) {
+                            for (let s = current.start_point; s < current.end_point; s++) {
+                                if (s === r) {
+                                    free = false;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+
+                    if (free) {
+                        current_list.push(new CalenderEntry(row, row + 2));
+                        setT(!t);
+                    }
                 }
             }
         }
@@ -144,7 +184,7 @@ export default function CalenderView(p) {
     }
 
     return (
-        <div>
+        <div id={t}>
             <div className={"wochen-tag-container"}>
                 <div className={"wochen-tag font-small"}>Montag</div>
                 <div className={"wochen-tag font-small"}>Dienstag</div>
@@ -153,7 +193,7 @@ export default function CalenderView(p) {
                 <div className={"wochen-tag font-small"}>Freitag</div>
                 <div className={"wochen-tag font-small"}>Samstag</div>
             </div>
-            <div className={"calender-container"} id={t}>
+            <div className={"calender-container"}>
                 <div className={"calender-view"}>
                     <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
                          id={"mo"}>

anwendung/src/styles/globals.css

@@ -252,7 +252,7 @@ Calender View
 
 .entry
 {
-  background-color: #dc910b;
+  background-color: #f80000;
   border-radius: 5px;
   display: flex;
   flex-direction: column;