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

New Calender View Design

Browse Source
This commit is contained in:
brausjonas
2023-05-26 14:24:38 +02:00
parent cf7201bc80
commit edaba10719
6 changed files with 219413 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/CalenderView.jsx
+36 -38
View File
@@ -211,7 +211,6 @@ export default function CalenderView(p) {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
gap: 15
}}> }}>
<WeekSelector year={currentYear} startday={currentWeekStartDay} onFunctionLeft={() => onWeekLeft()} <WeekSelector year={currentYear} startday={currentWeekStartDay} onFunctionLeft={() => onWeekLeft()}
onFunctionRight={() => onWeekRight()}/> onFunctionRight={() => onWeekRight()}/>
@@ -223,8 +222,8 @@ export default function CalenderView(p) {
gap: 5 gap: 5
}}> }}>
<div style={{border: "5px solid #363636", borderRadius: 10}}> <div style={{ borderRadius: 10, padding: 10, backgroundColor: "#f1f1f1"}} className={"box-shadow"}>
<div style={{backgroundColor: "#363636"}}> <div>
<div className={"wochen-tag-container"}> <div className={"wochen-tag-container"}>
<div className={"wochen-tag font-big"}>Montag</div> <div className={"wochen-tag font-big"}>Montag</div>
<div className={"wochen-tag font-big"}>Dienstag</div> <div className={"wochen-tag font-big"}>Dienstag</div>
@@ -254,9 +253,7 @@ export default function CalenderView(p) {
<div></div> <div></div>
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}> <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p> <p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
<p>Moduel etc.</p> <p>Modul</p>
<p>Mehr Infos</p>
<p>Raum</p>
</div> </div>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </div>))}
@@ -279,9 +276,7 @@ export default function CalenderView(p) {
<div></div> <div></div>
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}> <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p> <p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
<p>Moduel etc.</p> <p>Modul</p>
<p>Mehr Infos</p>
<p>Raum</p>
</div> </div>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </div>))}
@@ -305,9 +300,7 @@ export default function CalenderView(p) {
<div></div> <div></div>
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}> <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p> <p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
<p>Moduel etc.</p> <p>Modul</p>
<p>Mehr Infos</p>
<p>Raum</p>
</div> </div>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </div>))}
@@ -331,8 +324,6 @@ export default function CalenderView(p) {
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}> <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p> <p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
<p>Moduel etc.</p> <p>Moduel etc.</p>
<p>Mehr Infos</p>
<p>Raum</p>
</div> </div>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </div>))}
@@ -355,9 +346,7 @@ export default function CalenderView(p) {
<div></div> <div></div>
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}> <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p> <p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
<p>Moduel etc.</p> <p>Modul</p>
<p>Mehr Infos</p>
<p>Raum</p>
</div> </div>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </div>))}
@@ -380,9 +369,7 @@ export default function CalenderView(p) {
<div></div> <div></div>
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}> <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p> <p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
<p>Moduel etc.</p> <p>Modul</p>
<p>Mehr Infos</p>
<p>Raum</p>
</div> </div>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
</div>))} </div>))}
@@ -395,55 +382,66 @@ export default function CalenderView(p) {
{temp.map(i => (<div style={{ {temp.map(i => (<div style={{
width: "100%", width: "100%",
height: cellHeight * 2, height: cellHeight * 2,
borderBottom: "1px solid #363636",
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
justifyContent: "space-around", justifyContent: "space-around",
alignItems: "center", alignItems: "center",
}} className={"no-pointer-events"}> }} className={"no-pointer-events"}>
<div style={{
borderBottom: "1px solid #363636",
}}><p style={{
color: "gray",
marginTop: cellHeight - 3,
marginRight: 120,
fontSize: 12,
textAlign: "center"
}}>{internal_to_time(i + 1)}</p></div>
<p style={{ <div style={{
borderBottom: "1px solid #363636",
}}><p style={{
color: "gray", color: "gray",
marginTop: cellHeight - 3, marginTop: cellHeight - 3,
marginRight: 120, marginRight: 120,
fontSize: 12, fontSize: 12,
textAlign: "center" textAlign: "center"
}}>{internal_to_time(i + 1)}</p> }}>{internal_to_time(i + 1)}</p></div>
<p style={{ <div style={{
borderBottom: "1px solid #363636",
}}><p style={{
color: "gray", color: "gray",
marginTop: cellHeight - 3, marginTop: cellHeight - 3,
marginRight: 120, marginRight: 120,
fontSize: 12, fontSize: 12,
textAlign: "center" textAlign: "center"
}}>{internal_to_time(i + 1)}</p> }}>{internal_to_time(i + 1)}</p></div>
<p style={{ <div style={{
borderBottom: "1px solid #363636",
}}><p style={{
color: "gray", color: "gray",
marginTop: cellHeight - 3, marginTop: cellHeight - 3,
marginRight: 120, marginRight: 120,
fontSize: 12, fontSize: 12,
textAlign: "center" textAlign: "center"
}}>{internal_to_time(i + 1)}</p> }}>{internal_to_time(i + 1)}</p></div>
<p style={{ <div style={{
borderBottom: "1px solid #363636",
}}><p style={{
color: "gray", color: "gray",
marginTop: cellHeight - 3, marginTop: cellHeight - 3,
marginRight: 120, marginRight: 120,
fontSize: 12, fontSize: 12,
textAlign: "center" textAlign: "center"
}}>{internal_to_time(i + 1)}</p> }}>{internal_to_time(i + 1)}</p></div>
<p style={{ <div style={{
borderBottom: "1px solid #363636",
}}><p style={{
color: "gray", color: "gray",
marginTop: cellHeight - 3, marginTop: cellHeight - 3,
marginRight: 120, marginRight: 120,
fontSize: 12, fontSize: 12,
textAlign: "center" textAlign: "center"
}}>{internal_to_time(i + 1)}</p> }}>{internal_to_time(i + 1)}</p></div>
<p style={{
color: "gray",
marginTop: cellHeight - 3,
marginRight: 120,
fontSize: 12,
textAlign: "center"
}}>{internal_to_time(i + 1)}</p>
</div>))} </div>))}
</div> </div>
</div> </div>
anwendung/src/components/DateElement.jsx
+1 -1
View File
@@ -13,7 +13,7 @@ export default function DateElement(p){
let endDateString = `${endDate.getDate()}.${endDate.getMonth()+1}.${endDate.getFullYear()}`; let endDateString = `${endDate.getDate()}.${endDate.getMonth()+1}.${endDate.getFullYear()}`;
return ( return (
<> <>
<div className="dateElement round-border"> <div className="dateElement round-border box-shadow">
<p>{startDateString} - {endDateString}</p> <p>{startDateString} - {endDateString}</p>
</div> </div>
</> </>
anwendung/src/pages/planning.js
+2
View File
@@ -1,11 +1,13 @@
import CalenderView from "@/components/CalenderView"; import CalenderView from "@/components/CalenderView";
import Background from "@/components/Background"; import Background from "@/components/Background";
import Logout from "@/components/Logout";
export default function planning(p) export default function planning(p)
{ {
return ( return (
<> <>
<Logout/>
<Background/> <Background/>
<CalenderView/> <CalenderView/>
</> </>
anwendung/src/styles/globals.css
+11 -9
View File
@@ -165,19 +165,22 @@ weekSelector
.dateElement { .dateElement {
display: flex; display: flex;
max-width: 250px;
width: 250px;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
height: 50px; padding: 20px 20px;
width: 200px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #77932b;
font-weight: bold; font-weight: bold;
color: white; color: black;
} }
.weekSelector { .weekSelector {
display: flex; display: flex;
padding: 5px 5px;
background-color: rgba(0, 0, 0, 0);
border-radius: 10px;
} }
/* /*
@@ -278,26 +281,24 @@ Calender View
width: 1000px; width: 1000px;
gap: 5px; gap: 5px;
padding: 0 0 5px 0; padding: 0 0 5px 0;
background-color: #363636;
} }
.calender-view { .calender-view {
width: 1000px; width: 1000px;
height: 2400px; height: 2400px;
background-color: #363636;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
justify-content: stretch; justify-content: stretch;
gap: 5px; gap: 5px;
user-select: none; user-select: none;
padding: 2px 0 0 0; padding: 0;
} }
.calender-view .spalte { .calender-view .spalte {
border-radius: 10px; border-radius: 10px;
width: 400px; width: 400px;
background-color: white; background-color: #ffffff;
display: grid; display: grid;
padding: 0 3px; padding: 0 3px;
grid-template-columns: 100%; grid-template-columns: 100%;
@@ -332,9 +333,10 @@ Calender View
} }
.entry .resize-grab { .entry .resize-grab {
height: 5px; height: 6px;
cursor: ns-resize; cursor: ns-resize;
width: 100%; width: 100%;
background-color: #5a6c20;
} }
backend/database.mv.db
BIN
View File
Binary file not shown.
backend/database.trace.db
+219363
View File
File diff suppressed because it is too large Load Diff