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

Calender Validation Not Shown Explicit Error message

Browse Source 
Die Fehlermeldung wird bereits in einem Feld gespeichert, jedoch noch nicht abgespeichert
PUUUUSH
This commit is contained in:
brausjonas
2023-06-08 02:29:00 +02:00
parent 76ff99a365
commit 964934690b
2 changed files with 144 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/CalenderView.jsx
+137 -46
View File
@@ -4,6 +4,7 @@ import {list} from "postcss";
import Background from "@/components/Background"; import Background from "@/components/Background";
import WeekSelector from "@/components/WeekSelector"; import WeekSelector from "@/components/WeekSelector";
import {baseURL} from "@/components/Constants"; import {baseURL} from "@/components/Constants";
import {ErrorType} from "@/components/ErrorType";
let cellHeight = 20; let cellHeight = 20;
@@ -15,6 +16,10 @@ let currentYear;
let selectedElement; let selectedElement;
let grabbedDown; let grabbedDown;
let isDayOkay = [true, true, true, true, true, true]
let errorState = ErrorType.Okay
export default function CalenderView(p) { export default function CalenderView(p) {
const [entries, setEntries] = useState([[], [], [], [], [], []]) const [entries, setEntries] = useState([[], [], [], [], [], []])
@@ -26,6 +31,71 @@ export default function CalenderView(p) {
"&daynumber=" + currentWeekStartDay + "&yearnumber=" + currentYear + "&sessionid=" + localStorage.getItem("sessionid"); "&daynumber=" + currentWeekStartDay + "&yearnumber=" + currentYear + "&sessionid=" + localStorage.getItem("sessionid");
try { try {
fetch(url).then(r => r.json()).then(en => { fetch(url).then(r => r.json()).then(en => {
for(let i = 0; i < en.length; i++)
{
isDayOkay[i] = true
let maxLunchBreak = 0
let daySum = 0
for(let j = 0; j < en[i].length; j++)
{
if(en[i][j] != null)
{
let elem = en[i][j]
if((elem.timestart - 1) / 4 < 8)
{
errorState = ErrorType.TooEarly
isDayOkay[i] = false
break
}
else if((elem.timeend - 1) / 4 > 17)
{
errorState = ErrorType.TooLate
isDayOkay[i] = false
break
}
else
{
if((elem.timestart - 1) / 4 <= 11 && (elem.timeend - 1) / 4 >= 14)
{
errorState = ErrorType.NotEnoughLunchTime
isDayOkay[i] = false
break
}
else if((elem.timeend - 1) / 4 >= 11 && (elem.timeend - 1) / 4 <= 14)
{
let min = 24 * 3
for(let j2 = 0; j2 < en[i].length; j2++)
{
if(en[i][j2] != null && (en[i][j2].timestart - 1) / 4 >= 11 && (en[i][j2].timestart - 1) / 4 <= 14) {
if (en[i][j2].timestart < min && en[i][j2].timestart >= elem.timeend) {
min = en[i][j2].timestart
}
}
}
if (min - elem.timeend < 3)
{
errorState = ErrorType.NotEnoughLunchTime
isDayOkay[i] = false
break
}
}
}
daySum += elem.timeend - elem.timestart
}
}
if(daySum / 4 > 8) {
errorState = ErrorType.TooLong
isDayOkay[i] = false
}
}
setEntries(en) setEntries(en)
}) })
}catch (e) { }catch (e) {
@@ -94,24 +164,27 @@ export default function CalenderView(p) {
if (selectedElement != null) { if (selectedElement != null) {
let id = selectedElement.id; let id = selectedElement.id;
let url = baseURL + "/entries?sessionid=" + localStorage.getItem("sessionid"); if((selectedElement.timestart - 1) / 4 >= 7 && (selectedElement.timeend - 1) / 4 <= 18)
let json = { {
"id": id, let url = baseURL + "/entries?sessionid=" + localStorage.getItem("sessionid");
"daynumber": 0, let json = {
"yearnumber": 0, "id": id,
"semesterid": 0, "daynumber": 0,
"usercreatedbyid": 0, "yearnumber": 0,
"timestart": selectedElement.timestart, "semesterid": 0,
"timeend": selectedElement.timeend, "usercreatedbyid": 0,
"info": "" "timestart": selectedElement.timestart,
"timeend": selectedElement.timeend,
"info": ""
}
fetch(url, {
method: "PUT",
headers: {"Content-Type": "application/json"},
body: JSON.stringify(json)
}).then(r => {
readEntries()
})
} }
fetch(url, {
method: "PUT",
headers: {"Content-Type": "application/json"},
body: JSON.stringify(json)
}).then(r => {
readEntries()
})
selectedElement = null; selectedElement = null;
} }
@@ -186,7 +259,10 @@ export default function CalenderView(p) {
if (!currentId.includes("e")) { if (!currentId.includes("e")) {
if (!currentId.includes("grab")) { if (!currentId.includes("grab")) {
if (!checkForElementAtRow(row + 2, currentColumnID)) { if (!checkForElementAtRow(row + 2, currentColumnID)) {
pushEntry(currentColumnID, row) if((row - 1) / 4 >= 7 && (row + 2) / 4 <= 18)
{
pushEntry(currentColumnID, row)
}
} }
} else { } else {
let parentID = parseInt(e.target.parentElement.id.replace("e", "")); let parentID = parseInt(e.target.parentElement.id.replace("e", ""));
@@ -215,12 +291,20 @@ export default function CalenderView(p) {
readEntries() readEntries()
} }
function getEntryColor(userCreatedByID) function getEntryColor(userCreatedByID, columnID)
{ {
let id = localStorage.getItem("userid"); let id = localStorage.getItem("userid");
if(id == userCreatedByID) if(id == userCreatedByID)
{ {
return "#77932b"; if(isDayOkay[columnID])
{
return "#77932b";
}
else
{
return "#e5a10e";
}
} }
else else
{ {
@@ -228,12 +312,19 @@ export default function CalenderView(p) {
} }
} }
function getResizeBarColor(userCreatedByID) function getResizeBarColor(userCreatedByID, columnID)
{ {
let id = localStorage.getItem("userid"); let id = localStorage.getItem("userid");
if(id == userCreatedByID) if(id == userCreatedByID)
{ {
return "#5a6c20"; if(isDayOkay[columnID])
{
return "#5a6c20";
}
else
{
return "#c08809";
}
} }
else{ else{
return "#a2a2a2"; return "#a2a2a2";
@@ -358,17 +449,17 @@ export default function CalenderView(p) {
width: "100%", width: "100%",
gridRowStart: d.timestart, gridRowStart: d.timestart,
gridRowEnd: d.timeend, gridRowEnd: d.timeend,
backgroundColor: getEntryColor(d.usercreatedbyid) backgroundColor: getEntryColor(d.usercreatedbyid, 0)
}} id={d.id + "e"}> }} id={d.id + "e"}>
<div className={"resize-grab"} id={"grabup"} style={{ <div className={"resize-grab"} id={"grabup"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid) backgroundColor: getResizeBarColor(d.usercreatedbyid, 0)
}}></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>{d.info}</p> <p>{d.info}</p>
</div> </div>
<div className={"resize-grab"} id={"grabdown"} style={{ <div className={"resize-grab"} id={"grabdown"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid) backgroundColor: getResizeBarColor(d.usercreatedbyid, 0)
}}></div> }}></div>
</div>))} </div>))}
</div> </div>
@@ -384,18 +475,18 @@ export default function CalenderView(p) {
width: "100%", width: "100%",
gridRowStart: d.timestart, gridRowStart: d.timestart,
gridRowEnd: d.timeend, gridRowEnd: d.timeend,
backgroundColor: getEntryColor(d.usercreatedbyid) backgroundColor: getEntryColor(d.usercreatedbyid, 1)
}} id={d.id + "e"}> }} id={d.id + "e"}>
<div className={"resize-grab"} id={"grabup"} style={{ <div className={"resize-grab"} id={"grabup"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid) backgroundColor: getResizeBarColor(d.usercreatedbyid, 1)
}}></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>{d.info}</p> <p>{d.info}</p>
</div> </div>
<div className={"resize-grab"} id={"grabdown"} style={{ <div className={"resize-grab"} id={"grabdown"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid) backgroundColor: getResizeBarColor(d.usercreatedbyid, 1)
}}></div> }}></div>
</div>))} </div>))}
</div> </div>
@@ -412,18 +503,18 @@ export default function CalenderView(p) {
width: "100%", width: "100%",
gridRowStart: d.timestart, gridRowStart: d.timestart,
gridRowEnd: d.timeend, gridRowEnd: d.timeend,
backgroundColor: getEntryColor(d.usercreatedbyid) backgroundColor: getEntryColor(d.usercreatedbyid, 2)
}} id={d.id + "e"}> }} id={d.id + "e"}>
<div className={"resize-grab"} id={"grabup"} style={{ <div className={"resize-grab"} id={"grabup"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid) backgroundColor: getResizeBarColor(d.usercreatedbyid, 2)
}}></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>{d.info}</p> <p>{d.info}</p>
</div> </div>
<div className={"resize-grab"} id={"grabdown"} style={{ <div className={"resize-grab"} id={"grabdown"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid) backgroundColor: getResizeBarColor(d.usercreatedbyid, 2)
}}></div> }}></div>
</div>))} </div>))}
</div> </div>
@@ -439,18 +530,18 @@ export default function CalenderView(p) {
width: "100%", width: "100%",
gridRowStart: d.timestart, gridRowStart: d.timestart,
gridRowEnd: d.timeend, gridRowEnd: d.timeend,
backgroundColor: getEntryColor(d.usercreatedbyid) backgroundColor: getEntryColor(d.usercreatedbyid, 3)
}} id={d.id + "e"}> }} id={d.id + "e"}>
<div className={"resize-grab"} id={"grabup"} style={{ <div className={"resize-grab"} id={"grabup"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid) backgroundColor: getResizeBarColor(d.usercreatedbyid, 3)
}}></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>{d.info}</p> <p>{d.info}</p>
</div> </div>
<div className={"resize-grab"} id={"grabdown"} style={{ <div className={"resize-grab"} id={"grabdown"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid) backgroundColor: getResizeBarColor(d.usercreatedbyid, 3)
}}></div> }}></div>
</div>))} </div>))}
</div> </div>
@@ -467,17 +558,17 @@ export default function CalenderView(p) {
width: "100%", width: "100%",
gridRowStart: d.timestart, gridRowStart: d.timestart,
gridRowEnd: d.timeend, gridRowEnd: d.timeend,
backgroundColor: getEntryColor(d.usercreatedbyid) backgroundColor: getEntryColor(d.usercreatedbyid, 4)
}} id={d.id + "e"}> }} id={d.id + "e"}>
<div className={"resize-grab"} id={"grabup"} style={{ <div className={"resize-grab"} id={"grabup"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid) backgroundColor: getResizeBarColor(d.usercreatedbyid, 4)
}}></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>{d.info}</p> <p>{d.info}</p>
</div> </div>
<div className={"resize-grab"} id={"grabdown"} style={{ <div className={"resize-grab"} id={"grabdown"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid) backgroundColor: getResizeBarColor(d.usercreatedbyid, 4)
}}></div> }}></div>
</div>))} </div>))}
</div> </div>
@@ -494,17 +585,17 @@ export default function CalenderView(p) {
width: "100%", width: "100%",
gridRowStart: d.timestart, gridRowStart: d.timestart,
gridRowEnd: d.timeend, gridRowEnd: d.timeend,
backgroundColor: getEntryColor(d.usercreatedbyid) backgroundColor: getEntryColor(d.usercreatedbyid, 5)
}} id={d.id + "e"}> }} id={d.id + "e"}>
<div className={"resize-grab"} id={"grabup"} style={{ <div className={"resize-grab"} id={"grabup"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid) backgroundColor: getResizeBarColor(d.usercreatedbyid, 5)
}}></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>{d.info}</p> <p>{d.info}</p>
</div> </div>
<div className={"resize-grab"} id={"grabdown"} style={{ <div className={"resize-grab"} id={"grabdown"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid) backgroundColor: getResizeBarColor(d.usercreatedbyid, 5)
}}></div> }}></div>
</div>))} </div>))}
</div> </div>
@@ -522,7 +613,7 @@ export default function CalenderView(p) {
alignItems: "center", alignItems: "center",
}} className={"no-pointer-events"}> }} className={"no-pointer-events"}>
<div style={{ <div style={{
borderBottom: "1px solid #363636", borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
}}><p style={{ }}><p style={{
color: "gray", color: "gray",
marginTop: cellHeight - 3, marginTop: cellHeight - 3,
@@ -532,7 +623,7 @@ export default function CalenderView(p) {
}}>{internal_to_time(i + 1)}</p></div> }}>{internal_to_time(i + 1)}</p></div>
<div style={{ <div style={{
borderBottom: "1px solid #363636", borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
}}><p style={{ }}><p style={{
color: "gray", color: "gray",
marginTop: cellHeight - 3, marginTop: cellHeight - 3,
@@ -541,7 +632,7 @@ export default function CalenderView(p) {
textAlign: "center" textAlign: "center"
}}>{internal_to_time(i + 1)}</p></div> }}>{internal_to_time(i + 1)}</p></div>
<div style={{ <div style={{
borderBottom: "1px solid #363636", borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
}}><p style={{ }}><p style={{
color: "gray", color: "gray",
marginTop: cellHeight - 3, marginTop: cellHeight - 3,
@@ -550,7 +641,7 @@ export default function CalenderView(p) {
textAlign: "center" textAlign: "center"
}}>{internal_to_time(i + 1)}</p></div> }}>{internal_to_time(i + 1)}</p></div>
<div style={{ <div style={{
borderBottom: "1px solid #363636", borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
}}><p style={{ }}><p style={{
color: "gray", color: "gray",
marginTop: cellHeight - 3, marginTop: cellHeight - 3,
@@ -559,7 +650,7 @@ export default function CalenderView(p) {
textAlign: "center" textAlign: "center"
}}>{internal_to_time(i + 1)}</p></div> }}>{internal_to_time(i + 1)}</p></div>
<div style={{ <div style={{
borderBottom: "1px solid #363636", borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
}}><p style={{ }}><p style={{
color: "gray", color: "gray",
marginTop: cellHeight - 3, marginTop: cellHeight - 3,
@@ -568,7 +659,7 @@ export default function CalenderView(p) {
textAlign: "center" textAlign: "center"
}}>{internal_to_time(i + 1)}</p></div> }}>{internal_to_time(i + 1)}</p></div>
<div style={{ <div style={{
borderBottom: "1px solid #363636", borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
}}><p style={{ }}><p style={{
color: "gray", color: "gray",
marginTop: cellHeight - 3, marginTop: cellHeight - 3,
anwendung/src/components/ErrorType.js
+7
View File
@@ -0,0 +1,7 @@
export const ErrorType = {
Okay: "Okay",
TooLong: "TooLong",
TooEarly: "TooEarly",
TooLate: "TooLate",
NotEnoughLunchTime: "NotEnoughLunchTime"
}