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>
anwendung/src/styles/globals.css
+23 -3
View File
@@ -194,6 +194,24 @@ Calender View
{
max-height: 300px;
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
@@ -213,7 +231,7 @@ Calender View
Test
*/
width: 500px;
height: 1000px;
height: 965px;
/*
End Test
*/
@@ -224,6 +242,7 @@ Calender View
justify-content: stretch;
gap: 2px;
user-select: none;
padding: 2px 0 0 0;
}
.calender-view .spalte
@@ -261,11 +280,12 @@ Calender View
padding: 0px 2px;
align-items: center;
cursor: move;
z-index: 10;
}
.entry .resize-grab
{
height: 3px;
height: 5px;
cursor: ns-resize;
width: 100%;
}
@@ -273,7 +293,7 @@ Calender View
.entry p
{
color: white;
font-size: 5px;
font-size: 6px;
cursor: default;
pointer-events: none;
}