brausjonas
bc88f54dc1
Beim Setzen neuer Termine wird die Überschneidung mit einem bereits vorhandenem termin durch das verhindern des setzens blockiert
102 lines
4.5 KiB
React
102 lines
4.5 KiB
React
import {useEffect, useState} from "react";
|
|
import {CalenderEntry} from "@/components/CalenderEntry";
|
|
|
|
let entries = {mo:[], tu:[], we:[], th:[], fr:[], sa:[]}
|
|
|
|
export default function CalenderView(p) {
|
|
const [t, setT] = useState(false)
|
|
|
|
function mouse_click(e) {
|
|
let y_window = e.clientY;
|
|
let y_target_offset = e.target.getBoundingClientRect().top;
|
|
let row = Math.floor((y_window - y_target_offset) / 10)+1
|
|
if(row <= 98 && row > 3) {
|
|
let current_list = entries[e.currentTarget.id];
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
function internal_to_time(internal)
|
|
{
|
|
internal -= 4
|
|
internal /= 4
|
|
let integer = Math.floor(internal)
|
|
let decimal = internal.toFixed(2);
|
|
let minutes = Math.floor((decimal - integer) * 60);
|
|
let minutes_string = minutes.toString().length === 1 ? "0" + minutes : minutes
|
|
return integer + ":" + minutes_string;
|
|
}
|
|
|
|
return (
|
|
<div className={"calender-container"} id={t}>
|
|
<div className={"calender-view"}>
|
|
<div className={"spalte"} onClick={mouse_click} 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}}>
|
|
<p>{internal_to_time(d.start_point)}</p>
|
|
<p>{internal_to_time(d.end_point)}</p>
|
|
</div>))}
|
|
</div>
|
|
<div className={"spalte"} onClick={mouse_click} 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}}>
|
|
|
|
<p>{internal_to_time(d.start_point)}</p>
|
|
<p>{internal_to_time(d.end_point)}</p>
|
|
</div>))}
|
|
</div>
|
|
<div className={"spalte"} onClick={mouse_click} 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}}>
|
|
|
|
<p>{internal_to_time(d.start_point)}</p>
|
|
<p>{internal_to_time(d.end_point)}</p>
|
|
</div>))}
|
|
</div>
|
|
<div className={"spalte"} onClick={mouse_click} 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}}>
|
|
|
|
<p>{internal_to_time(d.start_point)}</p>
|
|
<p>{internal_to_time(d.end_point)}</p>
|
|
</div>))}
|
|
</div>
|
|
<div className={"spalte"} onClick={mouse_click} 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}}>
|
|
<p>{internal_to_time(d.start_point)}</p>
|
|
<p>{internal_to_time(d.end_point)}</p>
|
|
</div>))}
|
|
</div>
|
|
<div className={"spalte"} onClick={mouse_click} 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}}>
|
|
<p>{internal_to_time(d.start_point)}</p>
|
|
<p>{internal_to_time(d.end_point)}</p>
|
|
</div>))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |