diff --git a/anwendung/src/components/CalenderView.jsx b/anwendung/src/components/CalenderView.jsx index 0641daf..c78a7fa 100644 --- a/anwendung/src/components/CalenderView.jsx +++ b/anwendung/src/components/CalenderView.jsx @@ -1,6 +1,7 @@ import {useEffect, useState} from "react"; import {CalenderEntry} from "@/components/CalenderEntry"; import Button from "@/components/Button"; +import {list} from "postcss"; //all entries of the current week let entries = {mo: [], tu: [], we: [], th: [], fr: [], sa: []} @@ -34,6 +35,30 @@ export default function CalenderView(p) window.addEventListener("contextmenu", (e) => (e.preventDefault())) }) + function does_element_overlap(entry, start, end, search_list) + { + let current = null; + for(let i = 0; i < search_list.length; i++) + { + current = search_list[i]; + if(current !== entry) + { + if (start > current.start_point && start < current.end_point) + { + return true; + } else if (end > current.start_point && end < current.end_point) + { + return true; + } else if (start <= current.start_point && end >= current.end_point) + { + return true; + } + } + } + + return false; + } + //function to delete an elemente and resize the corresponding list in the entries dictionary function delete_element(index, element) { @@ -50,22 +75,29 @@ export default function CalenderView(p) } //resize a grabbed element to the row paramter - function size_grabbed(row) + function size_grabbed(row, current_list) { if (row >= 0 && row <= 96) { if (grabbedUp) { + console.log(grabbed.start_point) if (row < grabbed.end_point - 1) { - grabbed.start_point = row; + if(!does_element_overlap(grabbed, row, grabbed.end_point, current_list)) + { + grabbed.start_point = row; + } } } else { if (row > grabbed.start_point) { - grabbed.end_point = row + 1; + if(!does_element_overlap(grabbed, grabbed.start_point, row + 1, current_list)) + { + grabbed.end_point = row + 1; + } } } } @@ -77,15 +109,21 @@ export default function CalenderView(p) { if (selectedListID !== id) { - delete_element(selectedListID, selectedElement); - entries[id].push(selectedElement); - selectedListID = id; + if(!does_element_overlap(selectedElement, row - selectedOffsetTop, row + selectedOffsetBottom, entries[id])) + { + delete_element(selectedListID, selectedElement); + entries[id].push(selectedElement); + selectedListID = id; + } } if (row - selectedOffsetTop > 0 && row + selectedOffsetBottom <= 97) { - selectedElement.start_point = row - selectedOffsetTop; - selectedElement.end_point = row + selectedOffsetBottom; + if(!does_element_overlap(selectedElement, row - selectedOffsetTop, row + selectedOffsetBottom, entries[id])) + { + selectedElement.start_point = row - selectedOffsetTop; + selectedElement.end_point = row + selectedOffsetBottom; + } } } @@ -103,11 +141,12 @@ export default function CalenderView(p) let id = e.currentTarget.id; //calcultes the current row the cursor hovers let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1 + let current_list = entries[e.currentTarget.id]; //if a edge of an element was grabbed, resize it if (grabbed != null) { - size_grabbed(row); + size_grabbed(row, current_list); //if a whole element was grabbed, move it } else if (selectedElement != null) { @@ -164,7 +203,7 @@ export default function CalenderView(p) { let current = list[i]; - for (let r = row; r < row + 2; r++) + for (let r = row; r < row + 3; r++) { for (let s = current.start_point; s < current.end_point; s++) { @@ -222,14 +261,15 @@ export default function CalenderView(p) //get the startRow of the entry let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart); - grabbed = find_current(row, current_list); - //check if the upper or lower resize bar was grabbed if (row === rowStart) { + //+ / - 1 to avoid select the wrong element when overlapping + grabbed = find_current(row + 1, current_list); grabbedUp = true; } else { + grabbed = find_current(row - 1, current_list); grabbedUp = false; } } diff --git a/anwendung/src/pages/index.js b/anwendung/src/pages/index.js index 934cbc5..d45797d 100644 --- a/anwendung/src/pages/index.js +++ b/anwendung/src/pages/index.js @@ -6,6 +6,7 @@ import {arrowLeft, arrowRight} from "@/components/Icons"; import WeekSelector from "@/components/WeekSelector"; import PopUp from "@/components/PopUp"; import CalenderView from "@/components/CalenderView"; +import DateElement from "@/components/DateElement"; const inter = Inter({subsets: ['latin']}) diff --git a/anwendung/src/styles/globals.css b/anwendung/src/styles/globals.css index 627e681..e9174e5 100644 --- a/anwendung/src/styles/globals.css +++ b/anwendung/src/styles/globals.css @@ -18,6 +18,7 @@ body { ) rgb(var(--background-start-rgb)); display: flex; + flex-direction: column; align-items: center; justify-content: center; } @@ -230,14 +231,8 @@ Calender View .calender-view { - /* - Test - */ width: 1000px; height: 2400px; - /* - End Test - */ background-color: #363636; display: flex; flex-direction: row; @@ -285,6 +280,8 @@ Calender View cursor: move; z-index: 10; overflow: hidden; + margin-top: 4px; + margin-bottom: 4px; } .entry .resize-grab