jonas/TIF22A_AnwProjekt_B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draggable Objects

Browse Source
This commit is contained in:
brausjonas
2023-05-05 15:01:20 +02:00
parent 1ebcecf640
commit b96ce074b3
2 changed files with 103 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/CalenderView.jsx
+101 -34
View File
@@ -2,13 +2,71 @@ import {useEffect, useState} from "react";
import {CalenderEntry} from "@/components/CalenderEntry"; 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 grabbed = null;
let grabbedUp = false; let grabbedUp = false;
let mouseDown = false; let mouseDown = false;
let selectedElement = null;
let selectedOffsetTop = 0;
let selectedOffsetBottom = 0;
let selectedListID = "";
export default function CalenderView(p) { export default function CalenderView(p) {
const [t, setT] = useState(false) 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) function mouse_up(e)
{ {
mouseDown = false; mouseDown = false;
@@ -17,25 +75,13 @@ export default function CalenderView(p) {
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]; let current_list = entries[e.currentTarget.id];
if (grabbedStartRow > -1) if (grabbed != null)
{ {
for(let i = 0; i < current_list.length; i++) grabbed = null;
{ }
let current = current_list[i]; if(selectedElement != null)
if(current.start_point === grabbedStartRow) {
{ selectedElement = null;
if(grabbedUp)
{
current.start_point = row;
}
else
{
current.end_point = row;
}
break;
}
}
grabbedStartRow = -1;
} }
setT(!t); setT(!t);
@@ -46,32 +92,53 @@ export default function CalenderView(p) {
mouseDown = true; mouseDown = true;
let y_window = e.clientY; let y_window = e.clientY;
let y_target_offset = e.currentTarget.getBoundingClientRect().top; 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") if(e.target.id === "grab")
{ {
let entry = e.target.parentElement; let entry = e.target.parentElement;
let rowStart= parseInt(window.getComputedStyle(entry).gridRowStart); 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) if(row === rowStart)
{ {
grabbedStartRow = rowStart;
grabbedUp = true; grabbedUp = true;
} }
else else
{ {
grabbedStartRow = rowStart;
grabbedUp = false; grabbedUp = false;
} }
} }
else if(e.target.id === "entry") 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 else
{ {
if (row <= 98 && row > 3) { if (row <= 98 && row > 3) {
let current_list = entries[e.currentTarget.id];
let free = true; let free = true;
for (let i = 0; i < current_list.length; i++) { for (let i = 0; i < current_list.length; i++) {
let current = current_list[i]; let current = current_list[i];
@@ -107,7 +174,7 @@ export default function CalenderView(p) {
return ( return (
<div className={"calender-container"} id={t}> <div className={"calender-container"} id={t}>
<div className={"calender-view"}> <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> <div className={"wochen-tag font-small"}>Montag</div>
{entries["mo"].map(d => (<div className={"entry"} style={{ {entries["mo"].map(d => (<div className={"entry"} style={{
width: "100%", width: "100%",
@@ -120,13 +187,13 @@ export default function CalenderView(p) {
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </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> <div className={"wochen-tag font-small"}>Dienstag</div>
{entries["tu"].map(d => (<div className={"entry"} style={{ {entries["tu"].map(d => (<div className={"entry"} style={{
width: "100%", width: "100%",
gridRowStart: d.start_point, gridRowStart: d.start_point,
gridRowEnd: d.end_point gridRowEnd: d.end_point
}}> }} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
<p>{internal_to_time(d.start_point)}</p> <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 className={"resize-grab"} id={"grab"}></div>
</div>))} </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> <div className={"wochen-tag font-small"}>Mittwoch</div>
{entries["we"].map(d => (<div className={"entry"} style={{ {entries["we"].map(d => (<div className={"entry"} style={{
width: "100%", width: "100%",
gridRowStart: d.start_point, gridRowStart: d.start_point,
gridRowEnd: d.end_point gridRowEnd: d.end_point
}}> }} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
<p>{internal_to_time(d.start_point)}</p> <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 className={"resize-grab"} id={"grab"}></div>
</div>))} </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> <div className={"wochen-tag font-small"}>Donnerstag</div>
{entries["th"].map(d => (<div className={"entry"} style={{ {entries["th"].map(d => (<div className={"entry"} style={{
width: "100%", width: "100%",
gridRowStart: d.start_point, gridRowStart: d.start_point,
gridRowEnd: d.end_point gridRowEnd: d.end_point
}}> }} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
<p>{internal_to_time(d.start_point)}</p> <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 className={"resize-grab"} id={"grab"}></div>
</div>))} </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> <div className={"wochen-tag font-small"}>Freitag</div>
{entries["fr"].map(d => (<div className={"entry"} style={{ {entries["fr"].map(d => (<div className={"entry"} style={{
width: "100%", width: "100%",
gridRowStart: d.start_point, gridRowStart: d.start_point,
gridRowEnd: d.end_point gridRowEnd: d.end_point
}}> }} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
<p>{internal_to_time(d.start_point)}</p> <p>{internal_to_time(d.start_point)}</p>
<p>{internal_to_time(d.end_point)}</p> <p>{internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </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> <div className={"wochen-tag font-small"}>Samstag</div>
{entries["sa"].map(d => (<div className={"entry"} style={{ {entries["sa"].map(d => (<div className={"entry"} style={{
width: "100%", width: "100%",
gridRowStart: d.start_point, gridRowStart: d.start_point,
gridRowEnd: d.end_point gridRowEnd: d.end_point
}}> }} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
<p>{internal_to_time(d.start_point)}</p> <p>{internal_to_time(d.start_point)}</p>
<p>{internal_to_time(d.end_point)}</p> <p>{internal_to_time(d.end_point)}</p>
anwendung/src/styles/globals.css
+2 -1
View File
@@ -248,12 +248,13 @@ Calender View
justify-content: space-between; justify-content: space-between;
padding: 0px 2px; padding: 0px 2px;
align-items: center; align-items: center;
cursor: move;
} }
.entry .resize-grab .entry .resize-grab
{ {
height: 3px; height: 3px;
cursor: row-resize; cursor: ns-resize;
width: 100%; width: 100%;
} }