Simple Resize System

Man kann erstellte Termine nach oben und unter resizen

anwendung/src/components/CalenderView.jsx

@@ -2,27 +2,83 @@ import {useEffect, useState} from "react";
 import {CalenderEntry} from "@/components/CalenderEntry";
 
 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 y_target_offset = e.currentTarget.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;
+
+        if (grabbedStartRow > -1)
+        {
             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;
+        }
 
-                for(let r = row; r < row + 2; r++)
+        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")
         {
-                    for(let s = current.start_point; s < current.end_point; s++)
+            let entry = e.target.parentElement;
+            let rowStart= parseInt(window.getComputedStyle(entry).gridRowStart);
+
+            if(row === rowStart)
             {
-                        if (s === r)
+                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;
                             }
@@ -36,9 +92,9 @@ export default function CalenderView(p) {
                 }
             }
         }
+    }
 
-    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>

anwendung/src/styles/globals.css

@@ -211,6 +211,7 @@ Calender View
   justify-content: stretch;
   gap: 2px;
   padding: 2px;
+  user-select: none;
 }
 
 .calender-view .spalte
@@ -245,10 +246,17 @@ Calender View
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 2px;
+  padding: 0px 2px;
   align-items: center;
 }
 
+.entry .resize-grab
+{
+  height: 3px;
+  cursor: row-resize;
+  width: 100%;
+}
+
 .entry p
 {
   color: white;