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 = [] let temp = []
for (let i = 0; i < 96; i++) { for (let i = 2; i <= 96; i += 2) {
temp.push(i); temp.push(i);
} }
@@ -198,7 +198,9 @@ export default function CalenderView(p) {
</div> </div>
</div> </div>
<div className={"calender-container"}> <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} <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
id={"mo"}> id={"mo"}>
@@ -211,8 +213,7 @@ export default function CalenderView(p) {
gridColumnEnd: 0 gridColumnEnd: 0
}} id={"entry"}> }} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
<p>{internal_to_time(d.start_point)}</p> <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
<p>{internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </div>))}
</div> </div>
@@ -226,8 +227,7 @@ export default function CalenderView(p) {
}} id={"entry"}> }} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
<p>{internal_to_time(d.start_point)}</p> <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
<p>{internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </div>))}
</div> </div>
@@ -242,8 +242,7 @@ export default function CalenderView(p) {
}} id={"entry"}> }} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
<p>{internal_to_time(d.start_point)}</p> <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
<p>{internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </div>))}
</div> </div>
@@ -257,8 +256,7 @@ export default function CalenderView(p) {
}} id={"entry"}> }} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
<p>{internal_to_time(d.start_point)}</p> <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
<p>{internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </div>))}
</div> </div>
@@ -272,8 +270,7 @@ export default function CalenderView(p) {
gridRowEnd: d.end_point gridRowEnd: d.end_point
}} id={"entry"}> }} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
<p>{internal_to_time(d.start_point)}</p> <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
<p>{internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </div>))}
</div> </div>
@@ -287,13 +284,32 @@ export default function CalenderView(p) {
gridRowEnd: d.end_point gridRowEnd: d.end_point
}} id={"entry"}> }} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
<p>{internal_to_time(d.start_point)}</p> <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
<p>{internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </div>))}
</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>
</div> </div>
anwendung/src/styles/globals.css
+23 -3
View File
@@ -194,6 +194,24 @@ Calender View
{ {
max-height: 300px; max-height: 300px;
overflow-y: scroll; overflow-y: scroll;
display: grid;
}
.content
{
grid-area: 1 / 1;
}
.overlay
{
padding: 2px 0 0 0;
grid-area: 1 / 1;
pointer-events: none;
}
.no-pointer-events
{
pointer-events: none;
} }
.wochen-tag-container .wochen-tag-container
@@ -213,7 +231,7 @@ Calender View
Test Test
*/ */
width: 500px; width: 500px;
height: 1000px; height: 965px;
/* /*
End Test End Test
*/ */
@@ -224,6 +242,7 @@ Calender View
justify-content: stretch; justify-content: stretch;
gap: 2px; gap: 2px;
user-select: none; user-select: none;
padding: 2px 0 0 0;
} }
.calender-view .spalte .calender-view .spalte
@@ -261,11 +280,12 @@ Calender View
padding: 0px 2px; padding: 0px 2px;
align-items: center; align-items: center;
cursor: move; cursor: move;
z-index: 10;
} }
.entry .resize-grab .entry .resize-grab
{ {
height: 3px; height: 5px;
cursor: ns-resize; cursor: ns-resize;
width: 100%; width: 100%;
} }
@@ -273,7 +293,7 @@ Calender View
.entry p .entry p
{ {
color: white; color: white;
font-size: 5px; font-size: 6px;
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }