Simple Resize System

Man kann erstellte Termine nach oben und unter resizen

anwendung/src/components/CalenderView.jsx

@@ -1,44 +1,100 @@
 import {useEffect, useState} from "react";
 import {CalenderEntry} from "@/components/CalenderEntry";
 
-let entries = {mo:[], tu:[], we:[], th:[], fr:[], sa:[]}
+let entries = {mo: [], tu: [], we: [], th: [], fr: [], sa: []}
+let grabbedStartRow = -1;
+let grabbedUp = false;
+let mouseDown = false;
 
 export default function CalenderView(p) {
     const [t, setT] = useState(false)
 
-    function mouse_click(e) {
+    function mouse_up(e)
+    {
+        mouseDown = false;
         let y_window = e.clientY;
-        let y_target_offset = e.target.getBoundingClientRect().top;
-        let row = Math.floor((y_window - y_target_offset) / 10)+1
-        if(row <= 98 && row > 3) {
-            let current_list = entries[e.currentTarget.id];
-            let free = true;
+        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 (grabbedStartRow > -1)
+        {
             for(let i = 0; i < current_list.length; i++)
             {
                 let current = current_list[i];
-
-                for(let r = row; r < row + 2; r++)
+                if(current.start_point === grabbedStartRow)
                 {
-                    for(let s = current.start_point; s < current.end_point; s++)
+                    if(grabbedUp)
                     {
-                        if (s === r)
-                        {
-                            free = false;
-                            break;
+                        current.start_point = row;
+                    }
+                    else
+                    {
+                        current.end_point = row;
+                    }
+                    break;
+                }
+            }
+            grabbedStartRow = -1;
+        }
+
+        setT(!t);
+    }
+
+    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
+
+        if(e.target.id === "grab")
+        {
+            let entry = e.target.parentElement;
+            let rowStart= parseInt(window.getComputedStyle(entry).gridRowStart);
+
+            if(row === rowStart)
+            {
+                grabbedStartRow = rowStart;
+                grabbedUp = true;
+            }
+            else
+            {
+                grabbedStartRow = rowStart;
+                grabbedUp = false;
+            }
+        }
+        else if(e.target.id === "entry")
+        {
+
+        }
+        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];
+
+                    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);
+                if (free) {
+                    current_list.push(new CalenderEntry(row, row + 2));
+                    setT(!t);
+                }
             }
         }
     }
 
-    function internal_to_time(internal)
-    {
+    function internal_to_time(internal) {
         internal -= 4
         internal /= 4
         let integer = Math.floor(internal)
@@ -51,49 +107,85 @@ export default function CalenderView(p) {
     return (
         <div className={"calender-container"} id={t}>
             <div className={"calender-view"}>
-                <div className={"spalte"} onClick={mouse_click} id={"mo"}>
+                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} id={"mo"}>
                     <div className={"wochen-tag font-small"}>Montag</div>
-                    {entries["mo"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point, gridRowEnd: d.end_point}}>
+                    {entries["mo"].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"} onClick={mouse_click} id={"tu"}>
+                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} 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}}>
+                    {entries["tu"].map(d => (<div className={"entry"} style={{
+                        width: "100%",
+                        gridRowStart: d.start_point,
+                        gridRowEnd: d.end_point
+                    }}>
 
+                        <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"} onClick={mouse_click} id={"we"}>
+                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} 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}}>
+                    {entries["we"].map(d => (<div className={"entry"} style={{
+                        width: "100%",
+                        gridRowStart: d.start_point,
+                        gridRowEnd: d.end_point
+                    }}>
 
+                        <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"} onClick={mouse_click} id={"th"}>
+                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} 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}}>
+                    {entries["th"].map(d => (<div className={"entry"} style={{
+                        width: "100%",
+                        gridRowStart: d.start_point,
+                        gridRowEnd: d.end_point
+                    }}>
 
+                        <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"} onClick={mouse_click} id={"fr"}>
+                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} 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}}>
+                    {entries["fr"].map(d => (<div className={"entry"} style={{
+                        width: "100%",
+                        gridRowStart: d.start_point,
+                        gridRowEnd: d.end_point
+                    }}>
+                        <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"} onClick={mouse_click} id={"sa"}>
+                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} 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}}>
+                    {entries["sa"].map(d => (<div className={"entry"} style={{
+                        width: "100%",
+                        gridRowStart: d.start_point,
+                        gridRowEnd: d.end_point
+                    }}>
+                        <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>