Calender Side Bar on Click
This commit is contained in:
brausjonas
@@ -17,23 +17,34 @@ export default function BasicDateCalendar(p) {
|
|||||||
generateCalendar(startString, endString)
|
generateCalendar(startString, endString)
|
||||||
check = false
|
check = false
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={"Allround"}>
|
<div className={"Allround"}>
|
||||||
<div className={"Down"}>
|
<div className={"Down"}>
|
||||||
{result.map((monthResult, index = 0) => (
|
{result.map((monthResult, index) => (
|
||||||
<div key={months} className={"A box-shadow"} >
|
<div className={"A box-shadow"} onClick={() => p.onMonthClick(
|
||||||
|
(parseInt(startParts[1]) + index),
|
||||||
|
startParts
|
||||||
|
)} >
|
||||||
<p style={{
|
<p style={{
|
||||||
textAlign : "center",
|
textAlign : "center",
|
||||||
marginBottom : 10,
|
marginBottom : 10,
|
||||||
fontSize: 19
|
fontSize: 19,
|
||||||
|
pointerEvents: "none"
|
||||||
}}>{getMonthName(index)}</p>
|
}}>{getMonthName(index)}</p>
|
||||||
<div className={"Days"}>
|
<div className={"Days"} style={{
|
||||||
|
pointerEvents: "none"
|
||||||
|
}}>
|
||||||
{weekdays.map((weekday) => (
|
{weekdays.map((weekday) => (
|
||||||
<p key={weekday}>{weekday}</p>
|
<p key={weekday} style={{
|
||||||
|
pointerEvents: "none"
|
||||||
|
}}>{weekday}</p>
|
||||||
))}
|
))}
|
||||||
{freeSpaces(index)}
|
{freeSpaces(index)}
|
||||||
{monthResult.map((date) => (
|
{monthResult.map((date) => (
|
||||||
<p key={date}>{date}</p>
|
<p key={date} style={{
|
||||||
|
pointerEvents: "none"
|
||||||
|
}}>{date}</p>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -122,7 +133,9 @@ function freeSpaces(index)
|
|||||||
{
|
{
|
||||||
let arrayTest = []
|
let arrayTest = []
|
||||||
for (let i = 0; i < calculatedDay[index]; i++) {
|
for (let i = 0; i < calculatedDay[index]; i++) {
|
||||||
arrayTest.push(<p></p>)
|
arrayTest.push(<p style={{
|
||||||
|
pointerEvents: "none"
|
||||||
|
}}></p>)
|
||||||
}
|
}
|
||||||
return arrayTest
|
return arrayTest
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import Background from "@/components/Background";
|
|||||||
import WeekSelector from "@/components/WeekSelector";
|
import WeekSelector from "@/components/WeekSelector";
|
||||||
import {baseURL} from "@/components/Constants";
|
import {baseURL} from "@/components/Constants";
|
||||||
import {ErrorType} from "@/components/ErrorType";
|
import {ErrorType} from "@/components/ErrorType";
|
||||||
|
import BasicDateCalendar from "@/components/CalendarSideBar";
|
||||||
|
|
||||||
let cellHeight = 20;
|
let cellHeight = 20;
|
||||||
|
|
||||||
@@ -33,52 +34,39 @@ export default function CalenderView(p) {
|
|||||||
fetch(url).then(r => r.json()).then(en => {
|
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
|
isDayOkay[i] = true
|
||||||
let maxLunchBreak = 0
|
let maxLunchBreak = 0
|
||||||
let daySum = 0
|
let daySum = 0
|
||||||
for(let j = 0; j < en[i].length; j++)
|
for (let j = 0; j < en[i].length; j++) {
|
||||||
{
|
if (en[i][j] != null) {
|
||||||
if(en[i][j] != null)
|
|
||||||
{
|
|
||||||
let elem = en[i][j]
|
let elem = en[i][j]
|
||||||
|
|
||||||
if((elem.timestart - 1) / 4 < 8)
|
if ((elem.timestart - 1) / 4 < 8) {
|
||||||
{
|
|
||||||
errorState = ErrorType.TooEarly
|
errorState = ErrorType.TooEarly
|
||||||
isDayOkay[i] = false
|
isDayOkay[i] = false
|
||||||
break
|
break
|
||||||
}
|
} else if ((elem.timeend - 1) / 4 > 17) {
|
||||||
else if((elem.timeend - 1) / 4 > 17)
|
|
||||||
{
|
|
||||||
errorState = ErrorType.TooLate
|
errorState = ErrorType.TooLate
|
||||||
isDayOkay[i] = false
|
isDayOkay[i] = false
|
||||||
break
|
break
|
||||||
}
|
} else {
|
||||||
else
|
if ((elem.timestart - 1) / 4 <= 11 && (elem.timeend - 1) / 4 >= 14) {
|
||||||
{
|
|
||||||
if((elem.timestart - 1) / 4 <= 11 && (elem.timeend - 1) / 4 >= 14)
|
|
||||||
{
|
|
||||||
errorState = ErrorType.NotEnoughLunchTime
|
errorState = ErrorType.NotEnoughLunchTime
|
||||||
isDayOkay[i] = false
|
isDayOkay[i] = false
|
||||||
break
|
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
|
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] != 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) {
|
if (en[i][j2].timestart < min && en[i][j2].timestart >= elem.timeend) {
|
||||||
min = en[i][j2].timestart
|
min = en[i][j2].timestart
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (min - elem.timeend < 3)
|
if (min - elem.timeend < 3) {
|
||||||
{
|
|
||||||
errorState = ErrorType.NotEnoughLunchTime
|
errorState = ErrorType.NotEnoughLunchTime
|
||||||
isDayOkay[i] = false
|
isDayOkay[i] = false
|
||||||
break
|
break
|
||||||
@@ -90,7 +78,7 @@ export default function CalenderView(p) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(daySum / 4 > 8) {
|
if (daySum / 4 > 8) {
|
||||||
errorState = ErrorType.TooLong
|
errorState = ErrorType.TooLong
|
||||||
isDayOkay[i] = false
|
isDayOkay[i] = false
|
||||||
}
|
}
|
||||||
@@ -98,7 +86,7 @@ export default function CalenderView(p) {
|
|||||||
|
|
||||||
setEntries(en)
|
setEntries(en)
|
||||||
})
|
})
|
||||||
}catch (e) {
|
} catch (e) {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -164,8 +152,7 @@ export default function CalenderView(p) {
|
|||||||
if (selectedElement != null) {
|
if (selectedElement != null) {
|
||||||
let id = selectedElement.id;
|
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 url = baseURL + "/entries?sessionid=" + localStorage.getItem("sessionid");
|
||||||
let json = {
|
let json = {
|
||||||
"id": id,
|
"id": id,
|
||||||
@@ -201,45 +188,37 @@ export default function CalenderView(p) {
|
|||||||
if (row - 1 > selectedElement.timestart) {
|
if (row - 1 > selectedElement.timestart) {
|
||||||
|
|
||||||
let free = true;
|
let free = true;
|
||||||
for(let i = 0; i < entries[currentColumnID].length; i++)
|
for (let i = 0; i < entries[currentColumnID].length; i++) {
|
||||||
{
|
if (entries[currentColumnID][i] != null && selectedElement !== entries[currentColumnID][i]) {
|
||||||
if(entries[currentColumnID][i] != null && selectedElement !== entries[currentColumnID][i])
|
if (row <= entries[currentColumnID][i].timeend &&
|
||||||
{
|
|
||||||
if(row <= entries[currentColumnID][i].timeend &&
|
|
||||||
row >= entries[currentColumnID][i].timestart ||
|
row >= entries[currentColumnID][i].timestart ||
|
||||||
row > entries[currentColumnID][i].timeend &&
|
row > entries[currentColumnID][i].timeend &&
|
||||||
selectedElement.timestart < entries[currentColumnID][i].timestart)
|
selectedElement.timestart < entries[currentColumnID][i].timestart) {
|
||||||
{
|
|
||||||
free = false;
|
free = false;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(free) {
|
if (free) {
|
||||||
selectedElement.timeend = row + 1;
|
selectedElement.timeend = row + 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else if (row + 2 < selectedElement.timeend)
|
} else if (row + 2 < selectedElement.timeend) {
|
||||||
{
|
|
||||||
let free = true;
|
let free = true;
|
||||||
for(let i = 0; i < entries[currentColumnID].length; i++)
|
for (let i = 0; i < entries[currentColumnID].length; i++) {
|
||||||
{
|
if (entries[currentColumnID][i] != null && selectedElement !== entries[currentColumnID][i]) {
|
||||||
if(entries[currentColumnID][i] != null && selectedElement !== entries[currentColumnID][i])
|
if (row < entries[currentColumnID][i].timeend &&
|
||||||
{
|
|
||||||
if(row < entries[currentColumnID][i].timeend &&
|
|
||||||
row >= entries[currentColumnID][i].timestart ||
|
row >= entries[currentColumnID][i].timestart ||
|
||||||
row < entries[currentColumnID][i].timestart &&
|
row < entries[currentColumnID][i].timestart &&
|
||||||
selectedElement.timeend > entries[currentColumnID][i].timestart)
|
selectedElement.timeend > entries[currentColumnID][i].timestart) {
|
||||||
{
|
|
||||||
free = false;
|
free = false;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(free)
|
if (free) {
|
||||||
{
|
|
||||||
selectedElement.timestart = row;
|
selectedElement.timestart = row;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -259,14 +238,13 @@ export default function CalenderView(p) {
|
|||||||
if (!currentId.includes("e")) {
|
if (!currentId.includes("e")) {
|
||||||
if (!currentId.includes("grab")) {
|
if (!currentId.includes("grab")) {
|
||||||
if (!checkForElementAtRow(row + 2, currentColumnID)) {
|
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)
|
pushEntry(currentColumnID, row)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
let parentID = parseInt(e.target.parentElement.id.replace("e", ""));
|
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")
|
grabbedDown = currentId.includes("down")
|
||||||
selectedElement = getElementInColumn(parentID, currentColumnID);
|
selectedElement = getElementInColumn(parentID, currentColumnID);
|
||||||
}
|
}
|
||||||
@@ -291,42 +269,29 @@ export default function CalenderView(p) {
|
|||||||
readEntries()
|
readEntries()
|
||||||
}
|
}
|
||||||
|
|
||||||
function getEntryColor(userCreatedByID, columnID)
|
function getEntryColor(userCreatedByID, columnID) {
|
||||||
{
|
|
||||||
let id = localStorage.getItem("userid");
|
let id = localStorage.getItem("userid");
|
||||||
if(id == userCreatedByID)
|
if (id == userCreatedByID) {
|
||||||
{
|
if (isDayOkay[columnID]) {
|
||||||
if(isDayOkay[columnID])
|
|
||||||
{
|
|
||||||
return "#77932b";
|
return "#77932b";
|
||||||
}
|
} else {
|
||||||
else
|
|
||||||
{
|
|
||||||
return "#e5a10e";
|
return "#e5a10e";
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
} else {
|
||||||
else
|
|
||||||
{
|
|
||||||
return "#a2a2a2";
|
return "#a2a2a2";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getResizeBarColor(userCreatedByID, columnID)
|
function getResizeBarColor(userCreatedByID, columnID) {
|
||||||
{
|
|
||||||
let id = localStorage.getItem("userid");
|
let id = localStorage.getItem("userid");
|
||||||
if(id == userCreatedByID)
|
if (id == userCreatedByID) {
|
||||||
{
|
if (isDayOkay[columnID]) {
|
||||||
if(isDayOkay[columnID])
|
|
||||||
{
|
|
||||||
return "#5a6c20";
|
return "#5a6c20";
|
||||||
}
|
} else {
|
||||||
else
|
|
||||||
{
|
|
||||||
return "#c08809";
|
return "#c08809";
|
||||||
}
|
}
|
||||||
}
|
} else {
|
||||||
else{
|
|
||||||
return "#a2a2a2";
|
return "#a2a2a2";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -391,283 +356,303 @@ export default function CalenderView(p) {
|
|||||||
temp.push(i);
|
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 (
|
return (
|
||||||
|
|
||||||
<div style={{
|
<div style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
height: "100vh",
|
flexDirection: "row",
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center"
|
||||||
}}>
|
}}>
|
||||||
<WeekSelector year={currentYear} startday={currentWeekStartDay} onFunctionLeft={() => onWeekLeft()}
|
<div>
|
||||||
onFunctionRight={() => onWeekRight()}/>
|
<BasicDateCalendar startyear={2023} startday={34} endyear={2024} endday={100} onMonthClick={onMonthClick}/>
|
||||||
<div id={update} style={{
|
</div>
|
||||||
|
<div style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "row",
|
height: "100vh",
|
||||||
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
backgroundColor: "white",
|
|
||||||
gap: 5,
|
|
||||||
}}>
|
}}>
|
||||||
<div style={{borderRadius: 10, padding: 10, backgroundColor: "#f1f1f1"}} className={"box-shadow"}>
|
<WeekSelector year={currentYear} startday={currentWeekStartDay} onFunctionLeft={() => onWeekLeft()}
|
||||||
<div>
|
onFunctionRight={() => onWeekRight()}/>
|
||||||
<div className={"wochen-tag-container"}>
|
<div id={update} style={{
|
||||||
<div
|
display: "flex",
|
||||||
className={"wochen-tag font-big"}>Montag {new Date(currentYear, 0, currentWeekStartDay).getDate()}.
|
flexDirection: "row",
|
||||||
</div>
|
justifyContent: "center",
|
||||||
<div
|
alignItems: "center",
|
||||||
className={"wochen-tag font-big"}>Dienstag {new Date(currentYear, 0, currentWeekStartDay + 1).getDate()}.
|
backgroundColor: "white",
|
||||||
</div>
|
gap: 5,
|
||||||
<div
|
}}>
|
||||||
className={"wochen-tag font-big"}>Mittwoch {new Date(currentYear, 0, currentWeekStartDay + 2).getDate()}.
|
<div style={{borderRadius: 10, padding: 10, backgroundColor: "#f1f1f1"}} className={"box-shadow"}>
|
||||||
</div>
|
<div>
|
||||||
<div
|
<div className={"wochen-tag-container"}>
|
||||||
className={"wochen-tag font-big"}>Donnerstag {new Date(currentYear, 0, currentWeekStartDay + 3).getDate()}.
|
<div
|
||||||
</div>
|
className={"wochen-tag font-big"}>Montag {new Date(currentYear, 0, currentWeekStartDay).getDate()}.
|
||||||
<div
|
</div>
|
||||||
className={"wochen-tag font-big"}>Freitag {new Date(currentYear, 0, currentWeekStartDay + 4).getDate()}.
|
<div
|
||||||
</div>
|
className={"wochen-tag font-big"}>Dienstag {new Date(currentYear, 0, currentWeekStartDay + 1).getDate()}.
|
||||||
<div
|
</div>
|
||||||
className={"wochen-tag font-big"}>Samstag {new Date(currentYear, 0, currentWeekStartDay + 5).getDate()}.
|
<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>
|
||||||
</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"}
|
<div className={"spalte"}
|
||||||
id={"0"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
id={"0"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||||
onMouseDown={e => onMouseDown(e)}
|
onMouseDown={e => onMouseDown(e)}
|
||||||
onMouseMove={e => onMouseMove(e)}
|
onMouseMove={e => onMouseMove(e)}
|
||||||
onMouseUp={e => onMouseUp(e)}>
|
onMouseUp={e => onMouseUp(e)}>
|
||||||
|
|
||||||
{entries[0].map(d => (d != null && <div className={"entry"} style={{
|
{entries[0].map(d => (d != null && <div className={"entry"} style={{
|
||||||
width: "100%",
|
width: "100%",
|
||||||
gridRowStart: d.timestart,
|
gridRowStart: d.timestart,
|
||||||
gridRowEnd: d.timeend,
|
gridRowEnd: d.timeend,
|
||||||
backgroundColor: getEntryColor(d.usercreatedbyid, 0)
|
backgroundColor: getEntryColor(d.usercreatedbyid, 0)
|
||||||
}} id={d.id + "e"}>
|
}} id={d.id + "e"}>
|
||||||
<div className={"resize-grab"} id={"grabup"} style={{
|
<div className={"resize-grab"} id={"grabup"} style={{
|
||||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 0)
|
backgroundColor: getResizeBarColor(d.usercreatedbyid, 0)
|
||||||
}}></div>
|
}}></div>
|
||||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||||
<p>{d.info}</p>
|
<p>{d.info}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
<div className={"resize-grab"} id={"grabdown"} style={{
|
||||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 0)
|
backgroundColor: getResizeBarColor(d.usercreatedbyid, 0)
|
||||||
}}></div>
|
}}></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={{
|
||||||
|
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>
|
||||||
|
|
||||||
|
|
||||||
<div className={"spalte"}
|
<div className={"overlay"} style={{backgroundColor: "rgba(0, 0, 0, 0)"}}>
|
||||||
id={"1"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
{/*maps a list of internal time stamps to lines and time stamps*/}
|
||||||
onMouseDown={e => onMouseDown(e)}
|
{temp.map(i => (<div style={{
|
||||||
onMouseMove={e => onMouseMove(e)}
|
|
||||||
onMouseUp={e => onMouseUp(e)}>
|
|
||||||
|
|
||||||
{entries[1].map(d => (d != null && <div className={"entry"} style={{
|
|
||||||
width: "100%",
|
width: "100%",
|
||||||
gridRowStart: d.timestart,
|
height: cellHeight * 2,
|
||||||
gridRowEnd: d.timeend,
|
display: "flex",
|
||||||
backgroundColor: getEntryColor(d.usercreatedbyid, 1)
|
flexDirection: "row",
|
||||||
}} id={d.id + "e"}>
|
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={{
|
<div style={{
|
||||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 1)
|
borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
|
||||||
}}></div>
|
}}><p style={{
|
||||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
color: "gray",
|
||||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
marginTop: cellHeight - 3,
|
||||||
<p>{d.info}</p>
|
marginRight: 120,
|
||||||
</div>
|
fontSize: 12,
|
||||||
<div className={"resize-grab"} id={"grabdown"} style={{
|
textAlign: "center"
|
||||||
backgroundColor: getResizeBarColor(d.usercreatedbyid, 1)
|
}}>{internal_to_time(i + 1)}</p></div>
|
||||||
}}></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>
|
||||||
|
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -15,18 +15,7 @@ export default function planning(p)
|
|||||||
<Logout/>
|
<Logout/>
|
||||||
<Back onClick={() => router.back()}/>
|
<Back onClick={() => router.back()}/>
|
||||||
<Background/>
|
<Background/>
|
||||||
<div style={{
|
|
||||||
display : "flex",
|
|
||||||
flexDirection : "row",
|
|
||||||
justifyContent : "space-around",
|
|
||||||
alignItems : "center"
|
|
||||||
}}>
|
|
||||||
<BasicDateCalendar startyear={2023} startday={1} endyear={2024} endday={100}/>
|
|
||||||
<CalenderView/>
|
<CalenderView/>
|
||||||
<div style={{
|
</div>
|
||||||
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