jonas/TIF22A_AnwProjekt_B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Calender Side Bar on Click

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/CalendarSideBar.jsx
+20 -7
View File
@@ -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
} }
anwendung/src/components/CalenderView.jsx
+51 -66
View File
@@ -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,43 +34,31 @@ 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
@@ -77,8 +66,7 @@ export default function CalenderView(p) {
} }
} }
if (min - elem.timeend < 3) if (min - elem.timeend < 3) {
{
errorState = ErrorType.NotEnoughLunchTime errorState = ErrorType.NotEnoughLunchTime
isDayOkay[i] = false isDayOkay[i] = false
break break
@@ -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,15 +188,12 @@ 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;
} }
@@ -220,26 +204,21 @@ export default function CalenderView(p) {
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,8 +238,7 @@ 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)
} }
} }
@@ -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,9 +356,28 @@ 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={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
}}>
<div>
<BasicDateCalendar startyear={2023} startday={34} endyear={2024} endday={100} onMonthClick={onMonthClick}/>
</div>
<div style={{ <div style={{
display: "flex", display: "flex",
height: "100vh", height: "100vh",
@@ -673,5 +657,6 @@ export default function CalenderView(p) {
</div> </div>
</div> </div>
</div> </div>
</div>
) )
} }
anwendung/src/pages/planning.js
-11
View File
@@ -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={{
width : 250
}}></div>
</div>
</div> </div>
) )
} }
backend/database.mv.db
BIN
View File
Binary file not shown.
backend/database.trace.db
+29277
View File
File diff suppressed because it is too large Load Diff