Valditions Displayed
This commit is contained in:
brausjonas
@@ -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={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<div className={"calender-direction-wrapper"}>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
export const ErrorType = {
|
||||
Okay: "Okay",
|
||||
TooLong: "TooLong",
|
||||
TooEarly: "TooEarly",
|
||||
TooLate: "TooLate",
|
||||
NotEnoughLunchTime: "NotEnoughLunchTime"
|
||||
TooLong: "Zu lang, maximal 8h pro Tag!",
|
||||
TooEarly: "Wenn möglich nicht vor 8:00",
|
||||
TooLate: "Wenn möglich nicht nach 17:00",
|
||||
NotEnoughLunchTime: "Mind. 45min Pause zwischen 11:00 - 14:00",
|
||||
Saturday: "Wenn möglich nicht am Samstag"
|
||||
}
|
||||
@@ -31,10 +31,22 @@
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.Allround
|
||||
@media only screen and (min-width: 1650px)
|
||||
{
|
||||
position: relative;
|
||||
max-height : 72vh;
|
||||
overflow-y: scroll;
|
||||
overflow-anchor: none;
|
||||
.Allround
|
||||
{
|
||||
position: relative;
|
||||
max-height : 73vh;
|
||||
overflow-y: scroll;
|
||||
overflow-anchor: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1650px)
|
||||
{
|
||||
.Allround
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user