Valditions Displayed

anwendung/src/components/CalenderView.jsx

@@ -22,7 +22,7 @@ let grabbedDown;
 
 let isDayOkay = [true, true, true, true, true, true]
 
-let errorState = ErrorType.Okay
+let errorState = [ErrorType.Okay, ErrorType.Okay, ErrorType.Okay, ErrorType.Okay, ErrorType.Okay, ErrorType.Okay]
 let grayedOut = [false, false, false, false, false, false]
 
 export default function CalenderView(p) {
@@ -55,16 +55,21 @@ export default function CalenderView(p) {
                             let elem = en[i][j]
 
                             if ((elem.timestart - 1) / 4 < 8) {
-                                errorState = ErrorType.TooEarly
+                                errorState[i] = ErrorType.TooEarly
                                 isDayOkay[i] = false
                                 break
                             } else if ((elem.timeend - 1) / 4 > 17) {
-                                errorState = ErrorType.TooLate
+                                errorState[i] = ErrorType.TooLate
                                 isDayOkay[i] = false
                                 break
-                            } else {
+                            }
+                            else if(new Date(currentYear, 0, elem.daynumber).getUTCDay() === 5) {
+                                errorState[i] = ErrorType.Saturday
+                                isDayOkay[i] = false
+                            }
+                            else {
                                 if ((elem.timestart - 1) / 4 <= 11 && (elem.timeend - 1) / 4 >= 14) {
-                                    errorState = ErrorType.NotEnoughLunchTime
+                                    errorState[i] = ErrorType.NotEnoughLunchTime
                                     isDayOkay[i] = false
                                     break
                                 } else if ((elem.timeend - 1) / 4 >= 11 && (elem.timeend - 1) / 4 <= 14) {
@@ -79,11 +84,14 @@ export default function CalenderView(p) {
                                     }
 
                                     if (min - elem.timeend < 3) {
-                                        errorState = ErrorType.NotEnoughLunchTime
+                                        errorState[i] = ErrorType.NotEnoughLunchTime
                                         isDayOkay[i] = false
                                         break
                                     }
                                 }
+
+                                console.log("test")
+                                errorState[i] = ErrorType.Okay
                             }
 
                             daySum += elem.timeend - elem.timestart
@@ -91,7 +99,7 @@ export default function CalenderView(p) {
                     }
 
                     if (daySum / 4 > 8) {
-                        errorState = ErrorType.TooLong
+                        errorState[i] = ErrorType.TooLong
                         isDayOkay[i] = false
                     }
                 }
@@ -275,6 +283,7 @@ export default function CalenderView(p) {
             let parentID = parseInt(e.target.id.replace("e", ""));
             if (currentUserID == getElementInColumn(parentID, currentColumnID).usercreatedbyid && currentId.includes("e")) {
                 let id = parseInt(currentId.replace("e", ""))
+                errorState[currentColumnID] = ErrorType.Okay
                 deleteEntry(id)
             }
         }
@@ -285,6 +294,12 @@ export default function CalenderView(p) {
         let date = new Date(currentYear, 0, currentWeekStartDay + 5)
         setHighlightMonth(date.getMonth())
         setHighlightYear(date.getFullYear())
+
+        for(let i = 0; i < errorState.length; i++)
+        {
+            errorState[i] = ErrorType.Okay
+        }
+
         readEntries()
     }
 
@@ -293,6 +308,12 @@ export default function CalenderView(p) {
         let date = new Date(currentYear, 0, currentWeekStartDay + 5)
         setHighlightMonth(date.getMonth())
         setHighlightYear(date.getFullYear())
+
+        for(let i = 0; i < errorState.length; i++)
+        {
+            errorState[i] = ErrorType.Okay
+        }
+
         readEntries()
     }
 
@@ -406,17 +427,18 @@ export default function CalenderView(p) {
         currentYear = date.getFullYear()
         setHighlightMonth(date.getMonth())
         setHighlightYear(currentYear)
+
+        for(let i = 0; i < errorState.length; i++)
+        {
+            errorState[i] = ErrorType.Okay
+        }
+
         readEntries()
     }
 
     return (
 
-        <div style={{
+        <div className={"calender-direction-wrapper"}>
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "center",
-            alignItems: "center"
-        }}>
             <div>
                 <BasicDateCalendar startyear={startYearCalenderSideBar} startday={startDayCalenderSideBar}
                                    endyear={endYearCalenderSideBar} endday={endDayCalenderSideBar}
@@ -425,14 +447,14 @@ export default function CalenderView(p) {
             </div>
             <div style={{
                 display: "flex",
-                height: "100vh",
+                height: "73vh",
                 flexDirection: "column",
                 justifyContent: "center",
                 alignItems: "center",
-            }}>
+            }} id={update}>
                 <WeekSelector year={currentYear} startday={currentWeekStartDay} onFunctionLeft={() => onWeekLeft()}
                               onFunctionRight={() => onWeekRight()}/>
-                <div id={update} style={{
+                <div style={{
                     display: "flex",
                     flexDirection: "row",
                     justifyContent: "center",
@@ -702,6 +724,35 @@ export default function CalenderView(p) {
                     </div>
                 </div>
             </div>
+            <div className={"error-bar"}>
+                {errorState.map((e, index) => (
+                    <div style={{
+                        width: "90%",
+                        backgroundColor: e === ErrorType.Okay ? "white" : "#e5a10e",
+                        borderRadius: 15,
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "center",
+                        gap: 10,
+                        alignItems: "center",
+                        minHeight: 120,
+                        maxHeight: 120,
+                        padding: 10
+                    }} className={"box-shadow"}>
+                        <p style={{
+                            borderRadius: 15,
+                            backgroundColor: "#346991",
+                            width: "90%",
+                            paddingTop: 1,
+                            paddingBottom: 1,
+                            color: "white",
+                            textAlign: "center"
+                        }}>{new Date(currentYear, 0, currentWeekStartDay + index).toLocaleDateString()}</p>
+                        <p style={{
+                            textAlign: "center"
+                        }}>{e}</p>
+                    </div>))}
+            </div>
         </div>
     )
 }

anwendung/src/components/ErrorType.js

@@ -1,7 +1,8 @@
 export const ErrorType = {
     Okay: "Okay",
-    TooLong: "TooLong",
+    TooLong: "Zu lang, maximal 8h pro Tag!",
-    TooEarly: "TooEarly",
+    TooEarly: "Wenn möglich nicht vor 8:00",
-    TooLate: "TooLate",
+    TooLate: "Wenn möglich nicht nach 17:00",
-    NotEnoughLunchTime: "NotEnoughLunchTime"
+    NotEnoughLunchTime: "Mind. 45min Pause zwischen 11:00 - 14:00",
+    Saturday: "Wenn möglich nicht am Samstag"
 }

anwendung/src/styles/calendarSideBar.css

@@ -31,10 +31,22 @@
     width: 20%;
 }
 
-.Allround
+@media only screen and  (min-width: 1650px)
 {
-    position: relative;
+    .Allround
-    max-height : 72vh;
+    {
-    overflow-y: scroll;
+        position: relative;
-    overflow-anchor: none;
+        max-height : 73vh;
+        overflow-y: scroll;
+        overflow-anchor: none;
+    }
+
+}
+
+@media only screen and (max-width: 1650px)
+{
+    .Allround
+    {
+        display: none;
+    }
 }

anwendung/src/styles/globals.css

@@ -169,7 +169,6 @@ weekSelector
     width: 900px;
     margin-left: 20px;
     margin-right: 20px;
-    padding: 0px 20px;
     align-items: center;
     justify-content: center;
     font-weight: bold;
@@ -178,6 +177,7 @@ weekSelector
 }
 
 .weekSelector {
+    height: 13vh;
     display: flex;
     padding: 5px 5px;
     background-color: rgba(0, 0, 0, 0);
@@ -249,6 +249,37 @@ Popup
 Calender View
  */
 
+@media (max-width: 1300px) {
+    .error-bar
+    {
+        display: none;
+    }
+}
+
+@media (min-width: 1300px) {
+    .error-bar
+    {
+        width: 250px;
+        border-radius: 15px;
+        height: 73vh;
+        max-height: 73vh;
+        overflow-y: scroll;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        gap: 10px;
+    }
+}
+
+.calender-direction-wrapper
+{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
 
 .calender-container {
     position: relative;