CalenderView Tage Always on top
Tage in der Kalender werden nicht mit gescrolled
This commit is contained in:
brausjonas
@@ -14,43 +14,30 @@ let selectedListID = "";
|
||||
export default function CalenderView(p) {
|
||||
const [t, setT] = useState(false)
|
||||
|
||||
function mouse_move(e)
|
||||
{
|
||||
if(mouseDown)
|
||||
{
|
||||
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)
|
||||
{
|
||||
if (grabbed != null) {
|
||||
if (grabbedUp) {
|
||||
if (row < grabbed.end_point - 1) {
|
||||
grabbed.start_point = row;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if(row > grabbed.start_point)
|
||||
{
|
||||
} else {
|
||||
if (row > grabbed.start_point) {
|
||||
grabbed.end_point = row + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
else if(selectedElement != null)
|
||||
{
|
||||
if (selectedListID !== id)
|
||||
{
|
||||
} 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])
|
||||
{
|
||||
for (let i = 0; i < currentList.length; i++) {
|
||||
if (selectedElement !== currentList[i]) {
|
||||
temp.push(currentList[i]);
|
||||
}
|
||||
}
|
||||
@@ -67,20 +54,17 @@ export default function CalenderView(p) {
|
||||
setT(!t);
|
||||
}
|
||||
|
||||
function mouse_up(e)
|
||||
{
|
||||
function mouse_up(e) {
|
||||
mouseDown = false;
|
||||
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 (grabbed != null)
|
||||
{
|
||||
if (grabbed != null) {
|
||||
grabbed = null;
|
||||
}
|
||||
if(selectedElement != null)
|
||||
{
|
||||
if (selectedElement != null) {
|
||||
selectedElement = null;
|
||||
}
|
||||
|
||||
@@ -95,37 +79,27 @@ export default function CalenderView(p) {
|
||||
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 rowStart= parseInt(window.getComputedStyle(entry).gridRowStart);
|
||||
let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart);
|
||||
|
||||
for(let i = 0; i < current_list.length; i++)
|
||||
{
|
||||
for (let i = 0; i < current_list.length; i++) {
|
||||
let current = current_list[i];
|
||||
if(current.start_point === row || current.end_point === row+1)
|
||||
{
|
||||
if (current.start_point === row || current.end_point === row + 1) {
|
||||
grabbed = current;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(row === rowStart)
|
||||
{
|
||||
if (row === rowStart) {
|
||||
grabbedUp = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
grabbedUp = false;
|
||||
}
|
||||
}
|
||||
else if(e.target.id === "entry")
|
||||
{
|
||||
for(let i = 0; i < current_list.length; i++)
|
||||
{
|
||||
} 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)
|
||||
{
|
||||
if (current.start_point <= row && current.end_point >= row) {
|
||||
selectedElement = current;
|
||||
selectedListID = e.currentTarget.id;
|
||||
break;
|
||||
@@ -135,10 +109,8 @@ export default function CalenderView(p) {
|
||||
|
||||
selectedOffsetTop = row - parseInt(window.getComputedStyle(e.target).gridRowStart);
|
||||
selectedOffsetBottom = parseInt(window.getComputedStyle(e.target).gridRowEnd) - row;
|
||||
}
|
||||
else
|
||||
{
|
||||
if (row <= 98 && row > 3) {
|
||||
} else {
|
||||
if (row < 96) {
|
||||
let free = true;
|
||||
for (let i = 0; i < current_list.length; i++) {
|
||||
let current = current_list[i];
|
||||
@@ -162,7 +134,7 @@ export default function CalenderView(p) {
|
||||
}
|
||||
|
||||
function internal_to_time(internal) {
|
||||
internal -= 4
|
||||
internal -= 1
|
||||
internal /= 4
|
||||
let integer = Math.floor(internal)
|
||||
let decimal = internal.toFixed(2);
|
||||
@@ -172,88 +144,108 @@ 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} onMouseMove={mouse_move} id={"mo"}>
|
||||
<div className={"wochen-tag font-small"}>Montag</div>
|
||||
{entries["mo"].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} 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>
|
||||
<div className={"wochen-tag-container"}>
|
||||
<div className={"wochen-tag font-small"}>Montag</div>
|
||||
<div className={"wochen-tag font-small"}>Dienstag</div>
|
||||
<div className={"wochen-tag font-small"}>Mittwoch</div>
|
||||
<div className={"wochen-tag font-small"}>Donnerstag</div>
|
||||
<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-view"}>
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"mo"}>
|
||||
|
||||
<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} 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>
|
||||
<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} 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"}>
|
||||
{entries["mo"].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} onMouseMove={mouse_move}
|
||||
id={"tu"}>
|
||||
|
||||
<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} 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} 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>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</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>
|
||||
<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} onMouseMove={mouse_move}
|
||||
id={"we"}>
|
||||
|
||||
|
||||
{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>
|
||||
<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} onMouseMove={mouse_move}
|
||||
id={"th"}>
|
||||
|
||||
{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>
|
||||
<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} onMouseMove={mouse_move}
|
||||
id={"fr"}>
|
||||
|
||||
|
||||
{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} onMouseMove={mouse_move}
|
||||
id={"sa"}>
|
||||
|
||||
|
||||
{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>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user