Calender Side Bar on Click
This commit is contained in:
@@ -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
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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
Reference in New Issue
Block a user