Calender View Delete Elements

Calender View Delete Elements with Right click
This commit is contained in:
brausjonas
2023-05-05 18:08:45 +02:00
parent 4f981e37a1
commit 54394cc726
2 changed files with 92 additions and 52 deletions
+91 -51
View File
@@ -14,6 +14,10 @@ let selectedListID = "";
export default function CalenderView(p) {
const [t, setT] = useState(false)
useEffect(() => {
window.addEventListener("contextmenu", (e) => (e.preventDefault()))
})
function mouse_move(e) {
if (mouseDown) {
let y_window = e.clientY;
@@ -22,13 +26,17 @@ export default function CalenderView(p) {
let row = Math.floor((y_window - y_target_offset) / 10) + 1
if (grabbed != null) {
if (grabbedUp) {
if (row < grabbed.end_point - 1) {
grabbed.start_point = row;
}
} else {
if (row > grabbed.start_point) {
grabbed.end_point = row + 1;
if (row >= 0 && row <= 96) {
if (grabbedUp) {
if (row < grabbed.end_point - 1) {
grabbed.start_point = row;
}
} else {
if (row > grabbed.start_point) {
grabbed.end_point = row + 1;
}
}
}
} else if (selectedElement != null) {
@@ -46,8 +54,10 @@ export default function CalenderView(p) {
selectedListID = id;
}
selectedElement.start_point = row - selectedOffsetTop;
selectedElement.end_point = row + selectedOffsetBottom;
if (row - selectedOffsetTop > 0 && row + selectedOffsetBottom <= 97) {
selectedElement.start_point = row - selectedOffsetTop;
selectedElement.end_point = row + selectedOffsetBottom;
}
}
}
@@ -73,61 +83,91 @@ export default function CalenderView(p) {
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;
let current_list = entries[e.currentTarget.id];
if (e.target.id === "grab") {
let entry = e.target.parentElement;
let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart);
if (e.button === 2) {
let current = null;
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) {
grabbedUp = true;
} else {
grabbedUp = false;
}
} else if (e.target.id === "entry") {
for (let i = 0; i < current_list.length; i++) {
let current = current_list[i];
current = current_list[i];
if (current.start_point <= row && current.end_point >= row) {
selectedElement = current;
selectedListID = e.currentTarget.id;
break;
}
current = null;
}
selectedOffsetTop = row - parseInt(window.getComputedStyle(e.target).gridRowStart);
selectedOffsetBottom = parseInt(window.getComputedStyle(e.target).gridRowEnd) - row;
} else {
if (row < 96) {
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(current != null)
{
let temp = []
for(let i = 0; i < current_list.length; i++)
{
if(current_list[i] !== current)
{
temp.push(current_list[i]);
}
}
if (free) {
current_list.push(new CalenderEntry(row, row + 2));
setT(!t);
entries[e.currentTarget.id] = temp;
}
} else {
mouseDown = true;
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) {
grabbedUp = true;
} else {
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 < 96) {
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);
}
}
}
}
@@ -144,7 +184,7 @@ export default function CalenderView(p) {
}
return (
<div>
<div id={t}>
<div className={"wochen-tag-container"}>
<div className={"wochen-tag font-small"}>Montag</div>
<div className={"wochen-tag font-small"}>Dienstag</div>
@@ -153,7 +193,7 @@ export default function CalenderView(p) {
<div className={"wochen-tag font-small"}>Freitag</div>
<div className={"wochen-tag font-small"}>Samstag</div>
</div>
<div className={"calender-container"} id={t}>
<div className={"calender-container"}>
<div className={"calender-view"}>
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
id={"mo"}>