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

Calender View 15 Minuten Takt

Browse Source 
Beim Setzen neuer Termine wird die Überschneidung mit einem bereits vorhandenem termin durch das verhindern des setzens blockiert
This commit is contained in:
brausjonas
2023-05-05 12:47:44 +02:00
parent 88fe8b84e3
commit bc88f54dc1
2 changed files with 38 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/CalenderView.jsx
+34 -11
View File
@@ -9,15 +9,38 @@ export default function CalenderView(p) {
function mouse_click(e) { function mouse_click(e) {
let y_window = e.clientY; let y_window = e.clientY;
let y_target_offset = e.target.getBoundingClientRect().top; let y_target_offset = e.target.getBoundingClientRect().top;
let row = Math.floor((y_window - y_target_offset) / 3) + 1 let row = Math.floor((y_window - y_target_offset) / 10)+1
let current_list = entries[e.currentTarget.id]; if(row <= 98 && row > 3) {
current_list.push(new CalenderEntry(row - 10, row + 5)); let current_list = entries[e.currentTarget.id];
setT(!t); 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) function internal_to_time(internal)
{ {
internal /= 15 internal -= 4
internal /= 4
let integer = Math.floor(internal) let integer = Math.floor(internal)
let decimal = internal.toFixed(2); let decimal = internal.toFixed(2);
let minutes = Math.floor((decimal - integer) * 60); let minutes = Math.floor((decimal - integer) * 60);
@@ -30,14 +53,14 @@ export default function CalenderView(p) {
<div className={"calender-view"}> <div className={"calender-view"}>
<div className={"spalte"} onClick={mouse_click} id={"mo"}> <div className={"spalte"} onClick={mouse_click} id={"mo"}>
<div className={"wochen-tag font-small"}>Montag</div> <div className={"wochen-tag font-small"}>Montag</div>
{entries["mo"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point+10, gridRowEnd: d.end_point+10}}> {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.start_point)}</p>
<p>{internal_to_time(d.end_point)}</p> <p>{internal_to_time(d.end_point)}</p>
</div>))} </div>))}
</div> </div>
<div className={"spalte"} onClick={mouse_click} id={"tu"}> <div className={"spalte"} onClick={mouse_click} id={"tu"}>
<div className={"wochen-tag font-small"}>Dienstag</div> <div className={"wochen-tag font-small"}>Dienstag</div>
{entries["tu"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point+10, gridRowEnd: d.end_point+10}}> {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.start_point)}</p>
<p>{internal_to_time(d.end_point)}</p> <p>{internal_to_time(d.end_point)}</p>
@@ -45,7 +68,7 @@ export default function CalenderView(p) {
</div> </div>
<div className={"spalte"} onClick={mouse_click} id={"we"}> <div className={"spalte"} onClick={mouse_click} id={"we"}>
<div className={"wochen-tag font-small"}>Mittwoch</div> <div className={"wochen-tag font-small"}>Mittwoch</div>
{entries["we"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point+10, gridRowEnd: d.end_point+10}}> {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.start_point)}</p>
<p>{internal_to_time(d.end_point)}</p> <p>{internal_to_time(d.end_point)}</p>
@@ -53,7 +76,7 @@ export default function CalenderView(p) {
</div> </div>
<div className={"spalte"} onClick={mouse_click} id={"th"}> <div className={"spalte"} onClick={mouse_click} id={"th"}>
<div className={"wochen-tag font-small"}>Donnerstag</div> <div className={"wochen-tag font-small"}>Donnerstag</div>
{entries["th"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point+10, gridRowEnd: d.end_point+10}}> {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.start_point)}</p>
<p>{internal_to_time(d.end_point)}</p> <p>{internal_to_time(d.end_point)}</p>
@@ -61,14 +84,14 @@ export default function CalenderView(p) {
</div> </div>
<div className={"spalte"} onClick={mouse_click} id={"fr"}> <div className={"spalte"} onClick={mouse_click} id={"fr"}>
<div className={"wochen-tag font-small"}>Freitag</div> <div className={"wochen-tag font-small"}>Freitag</div>
{entries["fr"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point+10, gridRowEnd: d.end_point+10}}> {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.start_point)}</p>
<p>{internal_to_time(d.end_point)}</p> <p>{internal_to_time(d.end_point)}</p>
</div>))} </div>))}
</div> </div>
<div className={"spalte"} onClick={mouse_click} id={"sa"}> <div className={"spalte"} onClick={mouse_click} id={"sa"}>
<div className={"wochen-tag font-small"}>Samstag</div> <div className={"wochen-tag font-small"}>Samstag</div>
{entries["sa"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point+10, gridRowEnd: d.end_point+10}}> {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.start_point)}</p>
<p>{internal_to_time(d.end_point)}</p> <p>{internal_to_time(d.end_point)}</p>
</div>))} </div>))}
anwendung/src/styles/globals.css
+4 -4
View File
@@ -199,7 +199,7 @@ Calender View
Test Test
*/ */
width: 500px; width: 500px;
height: 1110px; height: 1000px;
/* /*
End Test End Test
*/ */
@@ -220,7 +220,7 @@ Calender View
background-color: white; background-color: white;
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-rows: repeat(370, 3px); grid-template-rows: repeat(100, 10px);
} }
.spalte .wochen-tag .spalte .wochen-tag
@@ -235,7 +235,7 @@ Calender View
justify-content: center; justify-content: center;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 10; grid-row-end: 4;
} }
.entry .entry
@@ -252,5 +252,5 @@ Calender View
.entry p .entry p
{ {
color: white; color: white;
font-size: 10px; font-size: 5px;
} }