From b96ce074b35ea42e2d24d0c96516fbcddcdda61f Mon Sep 17 00:00:00 2001
From: brausjonas <brausjonas@gmail.com>
Date: Fri, 5 May 2023 15:01:20 +0200
Subject: [PATCH] Draggable Objects

---
 anwendung/src/components/CalenderView.jsx | 135 ++++++++++++++++------
 anwendung/src/styles/globals.css          |   3 +-
 2 files changed, 103 insertions(+), 35 deletions(-)

diff --git a/anwendung/src/components/CalenderView.jsx b/anwendung/src/components/CalenderView.jsx
index 213d8b4..0385373 100644
--- a/anwendung/src/components/CalenderView.jsx
+++ b/anwendung/src/components/CalenderView.jsx
@@ -2,13 +2,71 @@ import {useEffect, useState} from "react";
 import {CalenderEntry} from "@/components/CalenderEntry";
 
 let entries = {mo: [], tu: [], we: [], th: [], fr: [], sa: []}
-let grabbedStartRow = -1;
+let grabbed = null;
 let grabbedUp = false;
 let mouseDown = false;
 
+let selectedElement = null;
+let selectedOffsetTop = 0;
+let selectedOffsetBottom = 0;
+let selectedListID = "";
+
 export default function CalenderView(p) {
     const [t, setT] = useState(false)
 
+    function mouse_move(e)
+    {
+        if(mouseDown)
+        {
+            let y_window = e.clientY;
+            let y_target_offset = e.currentTarget.getBoundingClientRect().top;
+            let id = e.currentTarget.id;
+            let row = Math.floor((y_window - y_target_offset) / 10) + 1
+
+            if(grabbed != null)
+            {
+                if(grabbedUp)
+                {
+                    if (row < grabbed.end_point)
+                    {
+                        grabbed.start_point = row;
+                    }
+                }
+                else
+                {
+                    if(row > grabbed.start_point)
+                    {
+                        grabbed.end_point = row + 1;
+                    }
+                }
+            }
+            else if(selectedElement != null)
+            {
+                if (selectedListID !== id)
+                {
+                    let index = -1;
+                    let currentList = entries[selectedListID];
+                    let temp = [];
+                    for(let i = 0; i < currentList.length; i++)
+                    {
+                        if(selectedElement !== currentList[i])
+                        {
+                            temp.push(currentList[i]);
+                        }
+                    }
+                    entries[selectedListID] = temp;
+                    entries[id].push(selectedElement);
+                    selectedListID = id;
+                }
+
+                selectedElement.start_point = row - selectedOffsetTop;
+                selectedElement.end_point = row + selectedOffsetBottom;
+            }
+        }
+
+        setT(!t);
+    }
+
     function mouse_up(e)
     {
         mouseDown = false;
@@ -17,25 +75,13 @@ export default function CalenderView(p) {
         let row = Math.floor((y_window - y_target_offset) / 10) + 1
         let current_list = entries[e.currentTarget.id];
 
-        if (grabbedStartRow > -1)
+        if (grabbed != null)
         {
-            for(let i = 0; i < current_list.length; i++)
-            {
-                let current = current_list[i];
-                if(current.start_point === grabbedStartRow)
-                {
-                    if(grabbedUp)
-                    {
-                        current.start_point = row;
-                    }
-                    else
-                    {
-                        current.end_point = row;
-                    }
-                    break;
-                }
-            }
-            grabbedStartRow = -1;
+            grabbed = null;
+        }
+        if(selectedElement != null)
+        {
+            selectedElement = null;
         }
 
         setT(!t);
@@ -46,32 +92,53 @@ export default function CalenderView(p) {
         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 row = Math.floor((y_window - y_target_offset) / 10) + 1;
+        let current_list = entries[e.currentTarget.id];
 
         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)
             {
-                grabbedStartRow = rowStart;
                 grabbedUp = true;
             }
             else
             {
-                grabbedStartRow = rowStart;
                 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 <= 98 && row > 3) {
-                let current_list = entries[e.currentTarget.id];
                 let free = true;
                 for (let i = 0; i < current_list.length; i++) {
                     let current = current_list[i];
@@ -107,7 +174,7 @@ export default function CalenderView(p) {
     return (
         <div className={"calender-container"} id={t}>
             <div className={"calender-view"}>
-                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} id={"mo"}>
+                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"mo"}>
                     <div className={"wochen-tag font-small"}>Montag</div>
                     {entries["mo"].map(d => (<div className={"entry"} style={{
                         width: "100%",
@@ -120,13 +187,13 @@ export default function CalenderView(p) {
                         <div className={"resize-grab"} id={"grab"}></div>
                     </div>))}
                 </div>
-                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} id={"tu"}>
+                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"tu"}>
                     <div className={"wochen-tag font-small"}>Dienstag</div>
                     {entries["tu"].map(d => (<div className={"entry"} style={{
                         width: "100%",
                         gridRowStart: d.start_point,
                         gridRowEnd: d.end_point
-                    }}>
+                    }} id={"entry"}>
 
                         <div className={"resize-grab"} id={"grab"}></div>
                         <p>{internal_to_time(d.start_point)}</p>
@@ -134,13 +201,13 @@ export default function CalenderView(p) {
                         <div className={"resize-grab"} id={"grab"}></div>
                     </div>))}
                 </div>
-                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} id={"we"}>
+                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"we"}>
                     <div className={"wochen-tag font-small"}>Mittwoch</div>
                     {entries["we"].map(d => (<div className={"entry"} style={{
                         width: "100%",
                         gridRowStart: d.start_point,
                         gridRowEnd: d.end_point
-                    }}>
+                    }} id={"entry"}>
 
                         <div className={"resize-grab"} id={"grab"}></div>
                         <p>{internal_to_time(d.start_point)}</p>
@@ -148,13 +215,13 @@ export default function CalenderView(p) {
                         <div className={"resize-grab"} id={"grab"}></div>
                     </div>))}
                 </div>
-                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} id={"th"}>
+                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"th"}>
                     <div className={"wochen-tag font-small"}>Donnerstag</div>
                     {entries["th"].map(d => (<div className={"entry"} style={{
                         width: "100%",
                         gridRowStart: d.start_point,
                         gridRowEnd: d.end_point
-                    }}>
+                    }} id={"entry"}>
 
                         <div className={"resize-grab"} id={"grab"}></div>
                         <p>{internal_to_time(d.start_point)}</p>
@@ -162,26 +229,26 @@ export default function CalenderView(p) {
                         <div className={"resize-grab"} id={"grab"}></div>
                     </div>))}
                 </div>
-                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} id={"fr"}>
+                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"fr"}>
                     <div className={"wochen-tag font-small"}>Freitag</div>
                     {entries["fr"].map(d => (<div className={"entry"} style={{
                         width: "100%",
                         gridRowStart: d.start_point,
                         gridRowEnd: d.end_point
-                    }}>
+                    }} id={"entry"}>
                         <div className={"resize-grab"} id={"grab"}></div>
                         <p>{internal_to_time(d.start_point)}</p>
                         <p>{internal_to_time(d.end_point)}</p>
                         <div className={"resize-grab"} id={"grab"}></div>
                     </div>))}
                 </div>
-                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} id={"sa"}>
+                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"sa"}>
                     <div className={"wochen-tag font-small"}>Samstag</div>
                     {entries["sa"].map(d => (<div className={"entry"} style={{
                         width: "100%",
                         gridRowStart: d.start_point,
                         gridRowEnd: d.end_point
-                    }}>
+                    }} id={"entry"}>
                         <div className={"resize-grab"} id={"grab"}></div>
                         <p>{internal_to_time(d.start_point)}</p>
                         <p>{internal_to_time(d.end_point)}</p>
diff --git a/anwendung/src/styles/globals.css b/anwendung/src/styles/globals.css
index aa72904..ca3baea 100644
--- a/anwendung/src/styles/globals.css
+++ b/anwendung/src/styles/globals.css
@@ -248,12 +248,13 @@ Calender View
   justify-content: space-between;
   padding: 0px 2px;
   align-items: center;
+  cursor: move;
 }
 
 .entry .resize-grab
 {
   height: 3px;
-  cursor: row-resize;
+  cursor: ns-resize;
   width: 100%;
 }