Calender Side Bar on Click
This commit is contained in:
brausjonas
@@ -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,52 +34,39 @@ 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++)
|
||||
{
|
||||
if(en[i][j2] != null && (en[i][j2].timestart - 1) / 4 >= 11 && (en[i][j2].timestart - 1) / 4 <= 14) {
|
||||
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)
|
||||
{
|
||||
if (min - elem.timeend < 3) {
|
||||
errorState = ErrorType.NotEnoughLunchTime
|
||||
isDayOkay[i] = false
|
||||
break
|
||||
@@ -90,7 +78,7 @@ export default function CalenderView(p) {
|
||||
}
|
||||
}
|
||||
|
||||
if(daySum / 4 > 8) {
|
||||
if (daySum / 4 > 8) {
|
||||
errorState = ErrorType.TooLong
|
||||
isDayOkay[i] = false
|
||||
}
|
||||
@@ -98,7 +86,7 @@ export default function CalenderView(p) {
|
||||
|
||||
setEntries(en)
|
||||
})
|
||||
}catch (e) {
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
}
|
||||
@@ -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,45 +188,37 @@ 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])
|
||||
{
|
||||
if(row <= entries[currentColumnID][i].timeend &&
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(free) {
|
||||
if (free) {
|
||||
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])
|
||||
{
|
||||
if(row < entries[currentColumnID][i].timeend &&
|
||||
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,14 +238,13 @@ 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)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let parentID = parseInt(e.target.parentElement.id.replace("e", ""));
|
||||
if(currentUserID == getElementInColumn(parentID, currentColumnID).usercreatedbyid) {
|
||||
if (currentUserID == getElementInColumn(parentID, currentColumnID).usercreatedbyid) {
|
||||
grabbedDown = currentId.includes("down")
|
||||
selectedElement = getElementInColumn(parentID, currentColumnID);
|
||||
}
|
||||
@@ -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,283 +356,303 @@ 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",
|
||||
height: "100vh",
|
||||
flexDirection: "column",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<WeekSelector year={currentYear} startday={currentWeekStartDay} onFunctionLeft={() => onWeekLeft()}
|
||||
onFunctionRight={() => onWeekRight()}/>
|
||||
<div id={update} style={{
|
||||
<div>
|
||||
<BasicDateCalendar startyear={2023} startday={34} endyear={2024} endday={100} onMonthClick={onMonthClick}/>
|
||||
</div>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
height: "100vh",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "white",
|
||||
gap: 5,
|
||||
}}>
|
||||
<div style={{borderRadius: 10, padding: 10, backgroundColor: "#f1f1f1"}} className={"box-shadow"}>
|
||||
<div>
|
||||
<div className={"wochen-tag-container"}>
|
||||
<div
|
||||
className={"wochen-tag font-big"}>Montag {new Date(currentYear, 0, currentWeekStartDay).getDate()}.
|
||||
</div>
|
||||
<div
|
||||
className={"wochen-tag font-big"}>Dienstag {new Date(currentYear, 0, currentWeekStartDay + 1).getDate()}.
|
||||
</div>
|
||||
<div
|
||||
className={"wochen-tag font-big"}>Mittwoch {new Date(currentYear, 0, currentWeekStartDay + 2).getDate()}.
|
||||
</div>
|
||||
<div
|
||||
className={"wochen-tag font-big"}>Donnerstag {new Date(currentYear, 0, currentWeekStartDay + 3).getDate()}.
|
||||
</div>
|
||||
<div
|
||||
className={"wochen-tag font-big"}>Freitag {new Date(currentYear, 0, currentWeekStartDay + 4).getDate()}.
|
||||
</div>
|
||||
<div
|
||||
className={"wochen-tag font-big"}>Samstag {new Date(currentYear, 0, currentWeekStartDay + 5).getDate()}.
|
||||
<WeekSelector year={currentYear} startday={currentWeekStartDay} onFunctionLeft={() => onWeekLeft()}
|
||||
onFunctionRight={() => onWeekRight()}/>
|
||||
<div id={update} style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "white",
|
||||
gap: 5,
|
||||
}}>
|
||||
<div style={{borderRadius: 10, padding: 10, backgroundColor: "#f1f1f1"}} className={"box-shadow"}>
|
||||
<div>
|
||||
<div className={"wochen-tag-container"}>
|
||||
<div
|
||||
className={"wochen-tag font-big"}>Montag {new Date(currentYear, 0, currentWeekStartDay).getDate()}.
|
||||
</div>
|
||||
<div
|
||||
className={"wochen-tag font-big"}>Dienstag {new Date(currentYear, 0, currentWeekStartDay + 1).getDate()}.
|
||||
</div>
|
||||
<div
|
||||
className={"wochen-tag font-big"}>Mittwoch {new Date(currentYear, 0, currentWeekStartDay + 2).getDate()}.
|
||||
</div>
|
||||
<div
|
||||
className={"wochen-tag font-big"}>Donnerstag {new Date(currentYear, 0, currentWeekStartDay + 3).getDate()}.
|
||||
</div>
|
||||
<div
|
||||
className={"wochen-tag font-big"}>Freitag {new Date(currentYear, 0, currentWeekStartDay + 4).getDate()}.
|
||||
</div>
|
||||
<div
|
||||
className={"wochen-tag font-big"}>Samstag {new Date(currentYear, 0, currentWeekStartDay + 5).getDate()}.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"calender-container"} ref={scrollRef}>
|
||||
<div className={"calender-container"} ref={scrollRef}>
|
||||
|
||||
<div className={"calender-view content"} style={{height: cellHeight * 96 + 10}}>
|
||||
<div className={"calender-view content"} style={{height: cellHeight * 96 + 10}}>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"0"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
<div className={"spalte"}
|
||||
id={"0"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
{entries[0].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: getEntryColor(d.usercreatedbyid, 0)
|
||||
}} id={d.id + "e"}>
|
||||
<div className={"resize-grab"} id={"grabup"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 0)
|
||||
}}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>{d.info}</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 0)
|
||||
}}></div>
|
||||
</div>))}
|
||||
{entries[0].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: getEntryColor(d.usercreatedbyid, 0)
|
||||
}} id={d.id + "e"}>
|
||||
<div className={"resize-grab"} id={"grabup"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 0)
|
||||
}}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>{d.info}</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 0)
|
||||
}}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"1"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
{entries[1].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: getEntryColor(d.usercreatedbyid, 1)
|
||||
}} id={d.id + "e"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grabup"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 1)
|
||||
}}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>{d.info}</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 1)
|
||||
}}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"2"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
|
||||
{entries[2].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: getEntryColor(d.usercreatedbyid, 2)
|
||||
}} id={d.id + "e"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grabup"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 2)
|
||||
}}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>{d.info}</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 2)
|
||||
}}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"3"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
{entries[3].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: getEntryColor(d.usercreatedbyid, 3)
|
||||
}} id={d.id + "e"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grabup"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 3)
|
||||
}}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>{d.info}</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 3)
|
||||
}}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"4"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
|
||||
{entries[4].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: getEntryColor(d.usercreatedbyid, 4)
|
||||
}} id={d.id + "e"}>
|
||||
<div className={"resize-grab"} id={"grabup"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 4)
|
||||
}}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>{d.info}</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 4)
|
||||
}}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"5"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
|
||||
{entries[5].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: getEntryColor(d.usercreatedbyid, 5)
|
||||
}} id={d.id + "e"}>
|
||||
<div className={"resize-grab"} id={"grabup"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 5)
|
||||
}}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>{d.info}</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 5)
|
||||
}}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"1"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
{entries[1].map(d => (d != null && <div className={"entry"} style={{
|
||||
<div className={"overlay"} style={{backgroundColor: "rgba(0, 0, 0, 0)"}}>
|
||||
{/*maps a list of internal time stamps to lines and time stamps*/}
|
||||
{temp.map(i => (<div style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: getEntryColor(d.usercreatedbyid, 1)
|
||||
}} id={d.id + "e"}>
|
||||
height: cellHeight * 2,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
alignItems: "center",
|
||||
}} className={"no-pointer-events"}>
|
||||
<div style={{
|
||||
borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
|
||||
}}><p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p></div>
|
||||
|
||||
<div className={"resize-grab"} id={"grabup"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 1)
|
||||
}}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>{d.info}</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 1)
|
||||
}}></div>
|
||||
<div style={{
|
||||
borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
|
||||
}}><p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p></div>
|
||||
<div style={{
|
||||
borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
|
||||
}}><p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p></div>
|
||||
<div style={{
|
||||
borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
|
||||
}}><p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p></div>
|
||||
<div style={{
|
||||
borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
|
||||
}}><p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p></div>
|
||||
<div style={{
|
||||
borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
|
||||
}}><p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"2"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
|
||||
{entries[2].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: getEntryColor(d.usercreatedbyid, 2)
|
||||
}} id={d.id + "e"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grabup"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 2)
|
||||
}}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>{d.info}</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 2)
|
||||
}}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"3"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
{entries[3].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: getEntryColor(d.usercreatedbyid, 3)
|
||||
}} id={d.id + "e"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grabup"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 3)
|
||||
}}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>{d.info}</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 3)
|
||||
}}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"4"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
|
||||
{entries[4].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: getEntryColor(d.usercreatedbyid, 4)
|
||||
}} id={d.id + "e"}>
|
||||
<div className={"resize-grab"} id={"grabup"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 4)
|
||||
}}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>{d.info}</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 4)
|
||||
}}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"5"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
|
||||
{entries[5].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: getEntryColor(d.usercreatedbyid, 5)
|
||||
}} id={d.id + "e"}>
|
||||
<div className={"resize-grab"} id={"grabup"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 5)
|
||||
}}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>{d.info}</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 5)
|
||||
}}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"overlay"} style={{backgroundColor: "rgba(0, 0, 0, 0)"}}>
|
||||
{/*maps a list of internal time stamps to lines and time stamps*/}
|
||||
{temp.map(i => (<div style={{
|
||||
width: "100%",
|
||||
height: cellHeight * 2,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
alignItems: "center",
|
||||
}} className={"no-pointer-events"}>
|
||||
<div style={{
|
||||
borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
|
||||
}}><p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p></div>
|
||||
|
||||
<div style={{
|
||||
borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
|
||||
}}><p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p></div>
|
||||
<div style={{
|
||||
borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
|
||||
}}><p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p></div>
|
||||
<div style={{
|
||||
borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
|
||||
}}><p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p></div>
|
||||
<div style={{
|
||||
borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
|
||||
}}><p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p></div>
|
||||
<div style={{
|
||||
borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
|
||||
}}><p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p></div>
|
||||
</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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user