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

Calender View move bug fix

Browse Source
This commit is contained in:
brausjonas
2023-05-07 18:06:21 +02:00
parent 67563b798d
commit 57ebdf002d
3 changed files with 41 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/CalenderEntry.js
+1 -1
View File
@@ -4,6 +4,6 @@ export class CalenderEntry
{
this.start_point = start_point;
this.end_point = end_point;
this.parent = null;
this.colorID = 0;
}
}
anwendung/src/components/CalenderView.jsx
+38 -7
View File
@@ -8,6 +8,7 @@ let entries = {mo: [], tu: [], we: [], th: [], fr: [], sa: []}
//a variable that saves the currently grabbed resize bar
let grabbed = null;
let grabbedUp = false;
let grabbed_in_list = null;
//a variable the saves if the mouse is pressed or not
let mouseDown = false;
@@ -24,6 +25,8 @@ let selectedListID = "";
//variable for the hight of one cell / row. Important for resizing the calender view
let cellHeight = 25;
let colors = ["#f80000", "#414141"]
export default function CalenderView(p)
{
//state to update the calender view
@@ -146,7 +149,7 @@ export default function CalenderView(p)
//if a edge of an element was grabbed, resize it
if (grabbed != null)
{
size_grabbed(row, current_list);
size_grabbed(row, grabbed_in_list);
//if a whole element was grabbed, move it
} else if (selectedElement != null)
{
@@ -166,10 +169,12 @@ export default function CalenderView(p)
//remove all selected elements
if (grabbed != null)
{
grabbed.colorID = 0;
grabbed = null;
}
if (selectedElement != null)
{
selectedElement.colorID = 0;
selectedElement = null;
}
@@ -261,6 +266,8 @@ export default function CalenderView(p)
//get the startRow of the entry
let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart);
grabbed_in_list = current_list;
//check if the upper or lower resize bar was grabbed
if (row === rowStart)
{
@@ -272,12 +279,30 @@ export default function CalenderView(p)
grabbed = find_current(row - 1, current_list);
grabbedUp = false;
}
grabbed.colorID = 1;
setT(!t);
}
//if a whole element was clicked to move
else if (e.target.id === "entry")
{
let rowStart = parseInt(window.getComputedStyle(e.target).gridRowStart);
selectedListID = e.currentTarget.id;
selectedElement = find_current(row, current_list);
if(rowStart === row)
{
selectedElement = find_current(row + 1, current_list);
}
else
{
selectedElement = find_current(row, current_list);
}
selectedElement.colorID = 1;
setT(!t);
selectedOffsetTop = row - parseInt(window.getComputedStyle(e.target).gridRowStart);
selectedOffsetBottom = parseInt(window.getComputedStyle(e.target).gridRowEnd) - row;
@@ -347,6 +372,7 @@ export default function CalenderView(p)
gridRowEnd: d.end_point,
gridColumnStart: 0,
gridColumnEnd: 0,
backgroundColor: colors[d.colorID],
}} id={"entry"}>
{/*content of the entry / element*/}
{/*upper resize bar*/}
@@ -369,7 +395,8 @@ export default function CalenderView(p)
{entries["tu"].map(d => (<div className={"entry"} style={{
width: "100%",
gridRowStart: d.start_point,
gridRowEnd: d.end_point
gridRowEnd: d.end_point,
backgroundColor: colors[d.colorID]
}} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div>
@@ -390,7 +417,8 @@ export default function CalenderView(p)
{entries["we"].map(d => (<div className={"entry"} style={{
width: "100%",
gridRowStart: d.start_point,
gridRowEnd: d.end_point
gridRowEnd: d.end_point,
backgroundColor: colors[d.colorID]
}} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div>
@@ -410,7 +438,8 @@ export default function CalenderView(p)
{entries["th"].map(d => (<div className={"entry"} style={{
width: "100%",
gridRowStart: d.start_point,
gridRowEnd: d.end_point
gridRowEnd: d.end_point,
backgroundColor: colors[d.colorID]
}} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div>
@@ -431,7 +460,8 @@ export default function CalenderView(p)
{entries["fr"].map(d => (<div className={"entry"} style={{
width: "100%",
gridRowStart: d.start_point,
gridRowEnd: d.end_point
gridRowEnd: d.end_point,
backgroundColor: colors[d.colorID]
}} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div>
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
@@ -451,7 +481,8 @@ export default function CalenderView(p)
{entries["sa"].map(d => (<div className={"entry"} style={{
width: "100%",
gridRowStart: d.start_point,
gridRowEnd: d.end_point
gridRowEnd: d.end_point,
backgroundColor: colors[d.colorID]
}} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div>
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
anwendung/src/styles/globals.css
+2 -3
View File
@@ -270,7 +270,6 @@ Calender View
.entry
{
background-color: #f80000;
border-radius: 10px;
display: flex;
flex-direction: column;
@@ -280,8 +279,8 @@ Calender View
cursor: move;
z-index: 10;
overflow: hidden;
margin-top: 4px;
margin-bottom: 4px;
margin-top: 1px;
margin-bottom: 1px;
}
.entry .resize-grab