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

Use URL as Constant

Browse Source
This commit is contained in:
brausjonas
2023-05-30 02:28:51 +02:00
parent a0d6d15099
commit dac59d4a23
11 changed files with 343890 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/CalenderView.jsx
+172 -73
View File
@@ -3,6 +3,7 @@ import Button from "@/components/Button";
import {list} from "postcss";
import Background from "@/components/Background";
import WeekSelector from "@/components/WeekSelector";
import {baseURL} from "@/components/Constants";
let cellHeight = 20;
@@ -21,15 +22,19 @@ export default function CalenderView(p) {
const scrollRef = useRef(null);
function readEntries() {
let url = "http://localhost:8080/entries?semesterid=" + localStorage.getItem("currentsid") +
let url = baseURL + "/entries?semesterid=" + localStorage.getItem("currentsid") +
"&daynumber=" + currentWeekStartDay + "&yearnumber=" + currentYear + "&sessionid=" + localStorage.getItem("sessionid");
fetch(url).then(r => r.json()).then(en => {
setEntries(en)
})
try {
fetch(url).then(r => r.json()).then(en => {
setEntries(en)
})
}catch (e) {
}
}
function pushEntry(currentColumnID, row) {
let url = "http://localhost:8080/entries" + "?sessionid=" + localStorage.getItem("sessionid")
let url = baseURL + "/entries" + "?sessionid=" + localStorage.getItem("sessionid")
let json = {
"id": 0,
"daynumber": currentWeekStartDay + currentColumnID,
@@ -50,7 +55,7 @@ export default function CalenderView(p) {
}
function deleteEntry(id) {
let url = "http://localhost:8080/entries?id=" + id + "&sessionid=" + localStorage.getItem("sessionid");
let url = baseURL + "/entries?id=" + id + "&sessionid=" + localStorage.getItem("sessionid");
fetch(url, {
method: "DELETE"
}).then(r => readEntries())
@@ -89,7 +94,7 @@ export default function CalenderView(p) {
if (selectedElement != null) {
let id = selectedElement.id;
let url = "http://localhost:8080/entries?sessionid=" + localStorage.getItem("sessionid");
let url = baseURL + "/entries?sessionid=" + localStorage.getItem("sessionid");
let json = {
"id": id,
"daynumber": 0,
@@ -119,12 +124,51 @@ export default function CalenderView(p) {
let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1;
let currentColumnID = parseInt(e.currentTarget.id)
if (grabbedDown)
if (grabbedDown) {
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 &&
row >= entries[currentColumnID][i].timestart ||
row > entries[currentColumnID][i].timeend &&
selectedElement.timestart < entries[currentColumnID][i].timestart)
{
free = false;
break;
}
}
}
if(free) {
selectedElement.timeend = row + 1;
}
}
} else if (row + 2 < selectedElement.timeend)
{
selectedElement.timeend = row + 1;
}else
{
selectedElement.timestart = row;
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 &&
row >= entries[currentColumnID][i].timestart ||
row < entries[currentColumnID][i].timestart &&
selectedElement.timeend > entries[currentColumnID][i].timestart)
{
free = false;
break;
}
}
}
if(free)
{
selectedElement.timestart = row;
}
}
setUpdate(!update);
}
@@ -136,6 +180,7 @@ export default function CalenderView(p) {
let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1;
let currentColumnID = parseInt(e.currentTarget.id)
let currentId = e.target.id;
let currentUserID = localStorage.getItem("userid");
if (e.button === 0) {
if (!currentId.includes("e")) {
@@ -144,20 +189,16 @@ export default function CalenderView(p) {
pushEntry(currentColumnID, row)
}
} else {
grabbedDown = currentId.includes("down")
/*
if(currentId.includes("up"))
{
grabbedDown = false;
}else grabbedDown = true;
*/
let parentID = parseInt(e.target.parentElement.id.replace("e", ""));
selectedElement = getElementInColumn(parentID, currentColumnID);
if(currentUserID == getElementInColumn(parentID, currentColumnID).usercreatedbyid) {
grabbedDown = currentId.includes("down")
selectedElement = getElementInColumn(parentID, currentColumnID);
}
}
}
} else if (e.button === 2) {
if (currentId.includes("e")) {
let parentID = parseInt(e.target.id.replace("e", ""));
if (currentUserID == getElementInColumn(parentID, currentColumnID).usercreatedbyid && currentId.includes("e")) {
let id = parseInt(currentId.replace("e", ""))
deleteEntry(id)
}
@@ -174,6 +215,31 @@ export default function CalenderView(p) {
readEntries()
}
function getEntryColor(userCreatedByID)
{
let id = localStorage.getItem("userid");
if(id == userCreatedByID)
{
return "#77932b";
}
else
{
return "#a2a2a2";
}
}
function getResizeBarColor(userCreatedByID)
{
let id = localStorage.getItem("userid");
if(id == userCreatedByID)
{
return "#5a6c20";
}
else{
return "#a2a2a2";
}
}
useEffect(() => {
semesterStart = 0;
currentWeekStartDay = 0;
@@ -181,7 +247,7 @@ export default function CalenderView(p) {
selectedElement = null;
grabbedDown = false;
let url = "http://localhost:8080/semester/id?sessionid=" + localStorage.getItem("sessionid") +
let url = baseURL + "/semester/id?sessionid=" + localStorage.getItem("sessionid") +
"&id=" + localStorage.getItem("currentsid");
fetch(url).then(r => r.json()).then(s => {
@@ -194,27 +260,25 @@ export default function CalenderView(p) {
window.addEventListener("contextmenu", (e) => (e.preventDefault()))
window.addEventListener("keypress", (e) => {
if(e.key === "+")
{
scrollRef.current.scrollTop = scrollRef.current.scrollTop + 100;
cellHeight += 2
}
else if(e.key === "-")
{
if(cellHeight - 2 >= 8)
{
scrollRef.current.scrollTop = scrollRef.current.scrollTop - 100;
cellHeight -= 2
try {
if (e.key === "+") {
cellHeight += 2
} else if (e.key === "-") {
if (cellHeight - 2 >= 8) {
cellHeight -= 2
}
}
} catch (e) {
}
})
setInterval(function(){
if (selectedElement == null){
setInterval(function () {
if (selectedElement == null) {
readEntries()
}
}, 100);
}, 500);
}, [])
@@ -252,18 +316,29 @@ export default function CalenderView(p) {
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
gap: 5
gap: 5,
}}>
<div style={{ borderRadius: 10, padding: 10, backgroundColor: "#f1f1f1"}} className={"box-shadow"}>
<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
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 className={"calender-container"} ref={scrollRef}>
@@ -281,14 +356,18 @@ export default function CalenderView(p) {
width: "100%",
gridRowStart: d.timestart,
gridRowEnd: d.timeend,
backgroundColor: "#77932b"
backgroundColor: getEntryColor(d.usercreatedbyid)
}} id={d.id + "e"}>
<div className={"resize-grab"} id={"grabup"}></div>
<div className={"resize-grab"} id={"grabup"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid)
}}></div>
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
<p>Modul</p>
</div>
<div className={"resize-grab"} id={"grabdown"}></div>
<div className={"resize-grab"} id={"grabdown"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid)
}}></div>
</div>))}
</div>
@@ -303,15 +382,19 @@ export default function CalenderView(p) {
width: "100%",
gridRowStart: d.timestart,
gridRowEnd: d.timeend,
backgroundColor: "#77932b"
backgroundColor: getEntryColor(d.usercreatedbyid)
}} id={d.id + "e"}>
<div className={"resize-grab"} id={"grabup"}></div>
<div className={"resize-grab"} id={"grabup"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid)
}}></div>
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
<p>Modul</p>
</div>
<div className={"resize-grab"} id={"grabdown"}></div>
<div className={"resize-grab"} id={"grabdown"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid)
}}></div>
</div>))}
</div>
@@ -327,15 +410,19 @@ export default function CalenderView(p) {
width: "100%",
gridRowStart: d.timestart,
gridRowEnd: d.timeend,
backgroundColor: "#77932b"
backgroundColor: getEntryColor(d.usercreatedbyid)
}} id={d.id + "e"}>
<div className={"resize-grab"} id={"grabup"}></div>
<div className={"resize-grab"} id={"grabup"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid)
}}></div>
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
<p>Modul</p>
</div>
<div className={"resize-grab"} id={"grabdown"}></div>
<div className={"resize-grab"} id={"grabdown"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid)
}}></div>
</div>))}
</div>
@@ -350,15 +437,19 @@ export default function CalenderView(p) {
width: "100%",
gridRowStart: d.timestart,
gridRowEnd: d.timeend,
backgroundColor: "#77932b"
backgroundColor: getEntryColor(d.usercreatedbyid)
}} id={d.id + "e"}>
<div className={"resize-grab"} id={"grabup"}></div>
<div className={"resize-grab"} id={"grabup"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid)
}}></div>
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
<p>Moduel etc.</p>
</div>
<div className={"resize-grab"} id={"grabdown"}></div>
<div className={"resize-grab"} id={"grabdown"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid)
}}></div>
</div>))}
</div>
@@ -374,14 +465,18 @@ export default function CalenderView(p) {
width: "100%",
gridRowStart: d.timestart,
gridRowEnd: d.timeend,
backgroundColor: "#77932b"
backgroundColor: getEntryColor(d.usercreatedbyid)
}} id={d.id + "e"}>
<div className={"resize-grab"} id={"grabup"}></div>
<div className={"resize-grab"} id={"grabup"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid)
}}></div>
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
<p>Modul</p>
</div>
<div className={"resize-grab"} id={"grabdown"}></div>
<div className={"resize-grab"} id={"grabdown"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid)
}}></div>
</div>))}
</div>
@@ -397,14 +492,18 @@ export default function CalenderView(p) {
width: "100%",
gridRowStart: d.timestart,
gridRowEnd: d.timeend,
backgroundColor: "#77932b"
backgroundColor: getEntryColor(d.usercreatedbyid)
}} id={d.id + "e"}>
<div className={"resize-grab"} id={"grabup"}></div>
<div className={"resize-grab"} id={"grabup"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid)
}}></div>
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
<p>Modul</p>
</div>
<div className={"resize-grab"} id={"grabdown"}></div>
<div className={"resize-grab"} id={"grabdown"} style={{
backgroundColor: getResizeBarColor(d.usercreatedbyid)
}}></div>
</div>))}
</div>
</div>
@@ -420,15 +519,15 @@ export default function CalenderView(p) {
justifyContent: "space-around",
alignItems: "center",
}} className={"no-pointer-events"}>
<div style={{
borderBottom: "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: "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: "1px solid #363636",