Calender Side Bar on Click

This commit is contained in:
brausjonas
2023-06-08 22:50:33 +02:00
parent 2abef513fe
commit 8eed2746e9
5 changed files with 29609 additions and 345 deletions
+20 -7
View File
@@ -17,23 +17,34 @@ export default function BasicDateCalendar(p) {
generateCalendar(startString, endString)
check = false
}
return (
<div className={"Allround"}>
<div className={"Down"}>
{result.map((monthResult, index = 0) => (
<div key={months} className={"A box-shadow"} >
{result.map((monthResult, index) => (
<div className={"A box-shadow"} onClick={() => p.onMonthClick(
(parseInt(startParts[1]) + index),
startParts
)} >
<p style={{
textAlign : "center",
marginBottom : 10,
fontSize: 19
fontSize: 19,
pointerEvents: "none"
}}>{getMonthName(index)}</p>
<div className={"Days"}>
<div className={"Days"} style={{
pointerEvents: "none"
}}>
{weekdays.map((weekday) => (
<p key={weekday}>{weekday}</p>
<p key={weekday} style={{
pointerEvents: "none"
}}>{weekday}</p>
))}
{freeSpaces(index)}
{monthResult.map((date) => (
<p key={date}>{date}</p>
<p key={date} style={{
pointerEvents: "none"
}}>{date}</p>
))}
</div>
</div>
@@ -122,7 +133,9 @@ function freeSpaces(index)
{
let arrayTest = []
for (let i = 0; i < calculatedDay[index]; i++) {
arrayTest.push(<p></p>)
arrayTest.push(<p style={{
pointerEvents: "none"
}}></p>)
}
return arrayTest
}
+51 -66
View File
@@ -5,6 +5,7 @@ import Background from "@/components/Background";
import WeekSelector from "@/components/WeekSelector";
import {baseURL} from "@/components/Constants";
import {ErrorType} from "@/components/ErrorType";
import BasicDateCalendar from "@/components/CalendarSideBar";
let cellHeight = 20;
@@ -33,43 +34,31 @@ export default function CalenderView(p) {
fetch(url).then(r => r.json()).then(en => {
for(let i = 0; i < en.length; i++)
{
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)
{
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)
{
if ((elem.timestart - 1) / 4 < 8) {
errorState = ErrorType.TooEarly
isDayOkay[i] = false
break
}
else if((elem.timeend - 1) / 4 > 17)
{
} 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)
{
} 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)
{
} 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++)
{
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
@@ -77,8 +66,7 @@ export default function CalenderView(p) {
}
}
if (min - elem.timeend < 3)
{
if (min - elem.timeend < 3) {
errorState = ErrorType.NotEnoughLunchTime
isDayOkay[i] = false
break
@@ -164,8 +152,7 @@ export default function CalenderView(p) {
if (selectedElement != null) {
let id = selectedElement.id;
if((selectedElement.timestart - 1) / 4 >= 7 && (selectedElement.timeend - 1) / 4 <= 18)
{
if ((selectedElement.timestart - 1) / 4 >= 7 && (selectedElement.timeend - 1) / 4 <= 18) {
let url = baseURL + "/entries?sessionid=" + localStorage.getItem("sessionid");
let json = {
"id": id,
@@ -201,15 +188,12 @@ export default function CalenderView(p) {
if (row - 1 > selectedElement.timestart) {
let free = true;
for(let i = 0; i < entries[currentColumnID].length; i++)
{
if(entries[currentColumnID][i] != null && selectedElement !== entries[currentColumnID][i])
{
for (let i = 0; i < entries[currentColumnID].length; i++) {
if (entries[currentColumnID][i] != null && selectedElement !== entries[currentColumnID][i]) {
if (row <= entries[currentColumnID][i].timeend &&
row >= entries[currentColumnID][i].timestart ||
row > entries[currentColumnID][i].timeend &&
selectedElement.timestart < entries[currentColumnID][i].timestart)
{
selectedElement.timestart < entries[currentColumnID][i].timestart) {
free = false;
break;
}
@@ -220,26 +204,21 @@ export default function CalenderView(p) {
selectedElement.timeend = row + 1;
}
}
} else if (row + 2 < selectedElement.timeend)
{
} else if (row + 2 < selectedElement.timeend) {
let free = true;
for(let i = 0; i < entries[currentColumnID].length; i++)
{
if(entries[currentColumnID][i] != null && selectedElement !== entries[currentColumnID][i])
{
for (let i = 0; i < entries[currentColumnID].length; i++) {
if (entries[currentColumnID][i] != null && selectedElement !== entries[currentColumnID][i]) {
if (row < entries[currentColumnID][i].timeend &&
row >= entries[currentColumnID][i].timestart ||
row < entries[currentColumnID][i].timestart &&
selectedElement.timeend > entries[currentColumnID][i].timestart)
{
selectedElement.timeend > entries[currentColumnID][i].timestart) {
free = false;
break;
}
}
}
if(free)
{
if (free) {
selectedElement.timestart = row;
}
}
@@ -259,8 +238,7 @@ export default function CalenderView(p) {
if (!currentId.includes("e")) {
if (!currentId.includes("grab")) {
if (!checkForElementAtRow(row + 2, currentColumnID)) {
if((row - 1) / 4 >= 7 && (row + 2) / 4 <= 18)
{
if ((row - 1) / 4 >= 7 && (row + 2) / 4 <= 18) {
pushEntry(currentColumnID, row)
}
}
@@ -291,42 +269,29 @@ export default function CalenderView(p) {
readEntries()
}
function getEntryColor(userCreatedByID, columnID)
{
function getEntryColor(userCreatedByID, columnID) {
let id = localStorage.getItem("userid");
if(id == userCreatedByID)
{
if(isDayOkay[columnID])
{
if (id == userCreatedByID) {
if (isDayOkay[columnID]) {
return "#77932b";
}
else
{
} else {
return "#e5a10e";
}
}
else
{
} else {
return "#a2a2a2";
}
}
function getResizeBarColor(userCreatedByID, columnID)
{
function getResizeBarColor(userCreatedByID, columnID) {
let id = localStorage.getItem("userid");
if(id == userCreatedByID)
{
if(isDayOkay[columnID])
{
if (id == userCreatedByID) {
if (isDayOkay[columnID]) {
return "#5a6c20";
}
else
{
} else {
return "#c08809";
}
}
else{
} else {
return "#a2a2a2";
}
}
@@ -391,9 +356,28 @@ export default function CalenderView(p) {
temp.push(i);
}
function onMonthClick(monthIndex, startParts)
{
monthIndex--
let date = new Date(parseInt(startParts[2]), monthIndex, 1)
let start = new Date(date.getFullYear(), 0, 0)
currentWeekStartDay = Math.round((date - start) / (1000 * 60 * 60 * 24))
currentWeekStartDay = currentWeekStartDay - new Date(date.getFullYear(), 0, currentWeekStartDay).getUTCDay()
currentYear = date.getFullYear()
readEntries()
}
return (
<div style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
}}>
<div>
<BasicDateCalendar startyear={2023} startday={34} endyear={2024} endday={100} onMonthClick={onMonthClick}/>
</div>
<div style={{
display: "flex",
height: "100vh",
@@ -673,5 +657,6 @@ export default function CalenderView(p) {
</div>
</div>
</div>
</div>
)
}
-11
View File
@@ -15,18 +15,7 @@ export default function planning(p)
<Logout/>
<Back onClick={() => router.back()}/>
<Background/>
<div style={{
display : "flex",
flexDirection : "row",
justifyContent : "space-around",
alignItems : "center"
}}>
<BasicDateCalendar startyear={2023} startday={1} endyear={2024} endday={100}/>
<CalenderView/>
<div style={{
width : 250
}}></div>
</div>
</div>
)
}
Binary file not shown.
File diff suppressed because it is too large Load Diff