Calender View Delete Elements
Calender View Delete Elements with Right click
This commit is contained in:
@@ -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"}>
|
||||
|
||||
@@ -252,7 +252,7 @@ Calender View
|
||||
|
||||
.entry
|
||||
{
|
||||
background-color: #dc910b;
|
||||
background-color: #f80000;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user