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

Calender View Timeline

Browse Source 
Lines with time stamps are shown on the columns
This commit is contained in:
brausjonas
2023-05-05 19:45:17 +02:00
parent 9d05046106
commit c9c8222c8c
2 changed files with 53 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/CalenderView.jsx
+30 -14
View File
@@ -181,7 +181,7 @@ export default function CalenderView(p) {
}
let temp = []
for (let i = 0; i < 96; i++) {
for (let i = 2; i <= 96; i += 2) {
temp.push(i);
}
@@ -198,7 +198,9 @@ export default function CalenderView(p) {
</div>
</div>
<div className={"calender-container"}>
<div className={"calender-view"}>
<div className={"calender-view content"}>
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
id={"mo"}>
@@ -211,8 +213,7 @@ export default function CalenderView(p) {
gridColumnEnd: 0
}} 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>
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div>
</div>))}
</div>
@@ -226,8 +227,7 @@ export default function CalenderView(p) {
}} 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>
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div>
</div>))}
</div>
@@ -242,8 +242,7 @@ export default function CalenderView(p) {
}} 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>
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div>
</div>))}
</div>
@@ -257,8 +256,7 @@ export default function CalenderView(p) {
}} 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>
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div>
</div>))}
</div>
@@ -272,8 +270,7 @@ export default function CalenderView(p) {
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>
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div>
</div>))}
</div>
@@ -287,13 +284,32 @@ export default function CalenderView(p) {
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>
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div>
</div>))}
</div>
</div>
<div className={"overlay"} style={{backgroundColor: "rgba(0, 0, 0, 0)"}}>
{temp.map(i => (<div style={{
width: "100%",
height: 20,
borderBottom: "0.4px solid #363636",
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
}} className={"no-pointer-events"}>
<p style={{color: "gray", marginTop: 10, marginRight: 60, fontSize: 5, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 10, marginRight: 60, fontSize: 5, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 10, marginRight: 60, fontSize: 5, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 10, marginRight: 60, fontSize: 5, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 10, marginRight: 60, fontSize: 5, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 10, marginRight: 60, fontSize: 5, textAlign: "center"}}>{internal_to_time(i+1)}</p>
</div>))}
</div>
</div>
</div>