Calender View move bug fix

anwendung/src/components/CalenderEntry.js

@@ -4,6 +4,6 @@ export class CalenderEntry
     {
         this.start_point = start_point;
         this.end_point = end_point;
-        this.parent = null;
+        this.colorID = 0;
     }
 }

anwendung/src/components/CalenderView.jsx

@@ -8,6 +8,7 @@ let entries = {mo: [], tu: [], we: [], th: [], fr: [], sa: []}
 //a variable that saves the currently grabbed resize bar
 let grabbed = null;
 let grabbedUp = false;
+let grabbed_in_list = null;
 
 //a variable the saves if the mouse is pressed or not
 let mouseDown = false;
@@ -24,6 +25,8 @@ let selectedListID = "";
 //variable for the hight of one cell / row. Important for resizing the calender view
 let cellHeight = 25;
 
+let colors = ["#f80000", "#414141"]
+
 export default function CalenderView(p)
 {
     //state to update the calender view
@@ -146,7 +149,7 @@ export default function CalenderView(p)
             //if a edge of an element was grabbed, resize it
             if (grabbed != null)
             {
-                size_grabbed(row, current_list);
+                size_grabbed(row, grabbed_in_list);
                 //if a whole element was grabbed, move it
             } else if (selectedElement != null)
             {
@@ -166,10 +169,12 @@ export default function CalenderView(p)
         //remove all selected elements
         if (grabbed != null)
         {
+            grabbed.colorID = 0;
             grabbed = null;
         }
         if (selectedElement != null)
         {
+            selectedElement.colorID = 0;
             selectedElement = null;
         }
 
@@ -261,6 +266,8 @@ export default function CalenderView(p)
                 //get the startRow of the entry
                 let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart);
 
+                grabbed_in_list = current_list;
+
                 //check if the upper or lower resize bar was grabbed
                 if (row === rowStart)
                 {
@@ -272,12 +279,30 @@ export default function CalenderView(p)
                     grabbed = find_current(row - 1, current_list);
                     grabbedUp = false;
                 }
+
+                grabbed.colorID = 1;
+
+                setT(!t);
             }
             //if a whole element was clicked to move
             else if (e.target.id === "entry")
             {
+                let rowStart = parseInt(window.getComputedStyle(e.target).gridRowStart);
+
                 selectedListID = e.currentTarget.id;
-                selectedElement = find_current(row, current_list);
+
+                if(rowStart === row)
+                {
+                    selectedElement = find_current(row + 1, current_list);
+                }
+                else
+                {
+                    selectedElement = find_current(row, current_list);
+                }
+
+                selectedElement.colorID = 1;
+
+                setT(!t);
 
                 selectedOffsetTop = row - parseInt(window.getComputedStyle(e.target).gridRowStart);
                 selectedOffsetBottom = parseInt(window.getComputedStyle(e.target).gridRowEnd) - row;
@@ -347,6 +372,7 @@ export default function CalenderView(p)
                                 gridRowEnd: d.end_point,
                                 gridColumnStart: 0,
                                 gridColumnEnd: 0,
+                                backgroundColor: colors[d.colorID],
                             }} id={"entry"}>
                                 {/*content of the entry / element*/}
                                 {/*upper resize bar*/}
@@ -369,7 +395,8 @@ export default function CalenderView(p)
                             {entries["tu"].map(d => (<div className={"entry"} style={{
                                 width: "100%",
                                 gridRowStart: d.start_point,
-                                gridRowEnd: d.end_point
+                                gridRowEnd: d.end_point,
+                                backgroundColor: colors[d.colorID]
                             }} id={"entry"}>
 
                                 <div className={"resize-grab"} id={"grab"}></div>
@@ -390,7 +417,8 @@ export default function CalenderView(p)
                             {entries["we"].map(d => (<div className={"entry"} style={{
                                 width: "100%",
                                 gridRowStart: d.start_point,
-                                gridRowEnd: d.end_point
+                                gridRowEnd: d.end_point,
+                                backgroundColor: colors[d.colorID]
                             }} id={"entry"}>
 
                                 <div className={"resize-grab"} id={"grab"}></div>
@@ -410,7 +438,8 @@ export default function CalenderView(p)
                             {entries["th"].map(d => (<div className={"entry"} style={{
                                 width: "100%",
                                 gridRowStart: d.start_point,
-                                gridRowEnd: d.end_point
+                                gridRowEnd: d.end_point,
+                                backgroundColor: colors[d.colorID]
                             }} id={"entry"}>
 
                                 <div className={"resize-grab"} id={"grab"}></div>
@@ -431,7 +460,8 @@ export default function CalenderView(p)
                             {entries["fr"].map(d => (<div className={"entry"} style={{
                                 width: "100%",
                                 gridRowStart: d.start_point,
-                                gridRowEnd: d.end_point
+                                gridRowEnd: d.end_point,
+                                backgroundColor: colors[d.colorID]
                             }} id={"entry"}>
                                 <div className={"resize-grab"} id={"grab"}></div>
                                 <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
@@ -451,7 +481,8 @@ export default function CalenderView(p)
                             {entries["sa"].map(d => (<div className={"entry"} style={{
                                 width: "100%",
                                 gridRowStart: d.start_point,
-                                gridRowEnd: d.end_point
+                                gridRowEnd: d.end_point,
+                                backgroundColor: colors[d.colorID]
                             }} id={"entry"}>
                                 <div className={"resize-grab"} id={"grab"}></div>
                                 <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>

anwendung/src/styles/globals.css

@@ -270,7 +270,6 @@ Calender View
 
 .entry
 {
-  background-color: #f80000;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
@@ -280,8 +279,8 @@ Calender View
   cursor: move;
   z-index: 10;
   overflow: hidden;
-  margin-top: 4px;
+  margin-top: 1px;
-  margin-bottom: 4px;
+  margin-bottom: 1px;
 }
 
 .entry .resize-grab