Draggable Objects
This commit is contained in:
brausjonas
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user