From 86f9e559b59e8a32316fb397bdfd2e3f67092f8a Mon Sep 17 00:00:00 2001
From: brausjonas <brausjonas@gmail.com>
Date: Sun, 9 Jul 2023 00:22:52 +0200
Subject: [PATCH] Weitere Kommentare im Frontend

---
 anwendung/src/components/Background.jsx   |   1 +
 anwendung/src/components/Button.jsx       |   2 +-
 anwendung/src/components/CalenderView.jsx | 157 ++++++++++++++++++++--
 anwendung/src/components/ErrorType.js     |   1 +
 anwendung/src/components/Icons.js         |   3 +
 anwendung/src/components/InputForm.jsx    |  26 ++++
 anwendung/src/components/Login.jsx        |  11 ++
 anwendung/src/components/Test.jsx         |   1 +
 anwendung/src/components/Tile.jsx         |   2 +
 anwendung/src/pages/index.js              |   3 +
 10 files changed, 198 insertions(+), 9 deletions(-)

diff --git a/anwendung/src/components/Background.jsx b/anwendung/src/components/Background.jsx
index d6d2682..65ccd10 100644
--- a/anwendung/src/components/Background.jsx
+++ b/anwendung/src/components/Background.jsx
@@ -2,6 +2,7 @@ import React from "react";
 
 export default function Background()
 {
+    //diese komponente generiert über css properties und geschickte rotationen von div element im raum das hintergrundbild
     return (
         <div style={{
             position: "absolute",
diff --git a/anwendung/src/components/Button.jsx b/anwendung/src/components/Button.jsx
index af7e377..b705552 100644
--- a/anwendung/src/components/Button.jsx
+++ b/anwendung/src/components/Button.jsx
@@ -41,7 +41,7 @@ export default function Button(p) {
         iconHTML = "";
     }
 
-    //return the button
+    //return the button html
     return (
         <>
             <button className={"round-border button font font-small"}
diff --git a/anwendung/src/components/CalenderView.jsx b/anwendung/src/components/CalenderView.jsx
index 73cf1e9..f0d5be5 100644
--- a/anwendung/src/components/CalenderView.jsx
+++ b/anwendung/src/components/CalenderView.jsx
@@ -11,78 +11,115 @@ import PopUp from "@/components/PopUp";
 import {useRouter} from "next/router";
 import {info} from "autoprefixer";
 
+//Dieses Script ist für die Funktionalität der haupt-kalenderansicht
+
+//definiert die höhe einer Zeile
 let cellHeight = 20;
 
 let colors = ["#f80000", "#414141"]
-
+//start und ende des semesters (tag)
 let semesterStart;
 let semesterEnd;
+//akuteller tag im jar, mit dem die woche startet
 let currentWeekStartDay;
+//aktuelles jahr
 let currentYear;
+//start und end jahr des semesters
 let semesterStartYear;
 let semesterEndYear;
+//akutell ausgewählter Termin (Element)
 let selectedElement;
 let lastEndTimeDrag;
 let lastStartTimeDrag;
 let grabbedDown;
 
+//Wochenweiße Variablen:
+//Speichert, ob in einem Tag ein Fehler augetreten ist
 let isDayOkay = [true, true, true, true, true, true]
 
+//Speichert für jeden Wochentag den Fehlerstatus ab
 let errorState = [ErrorType.Okay, ErrorType.Okay, ErrorType.Okay, ErrorType.Okay, ErrorType.Okay, ErrorType.Okay]
+//gibt an, ob ein Wochentag ausgegraut ist (z.b. feiertag)
 let grayedOut = [false, false, false, false, false, false]
 
+//speichert die "verplante" zeit ab. wichtig für abgeben funktion etc.
 let timePlanned = 0
 
 export default function CalenderView(p) {
 
+    //array, welches wochenweiße alle termine beinhaltet
     const [entries, setEntries] = useState([[], [], [], [], [], []])
+    //update funktion
     const [update, setUpdate] = useState(false)
+    //referenz auf die scroll bar der ansichz
     const scrollRef = useRef(null);
 
+    //variablen für die kalender seitenansicht
     const [startDayCalenderSideBar, setStartDayCalenderSideBar] = useState(0)
     const [startYearCalenderSideBar, setStartYearCalenderSideBar] = useState(2000)
     const [endDayCalenderSideBar, setEndDayCalenderSideBar] = useState(0)
     const [endYearCalenderSideBar, setEndYearCalenderSideBar] = useState(2000)
     const [highlightMonth, setHighlightMonth] = useState(0)
     const [highlightYear, setHighlightYear] = useState(2000)
+
+    //speichert, ob das abgeben popup anzeigt werden soll
     const [popUpToggleAbgeben, setPopUpToggleAbgeben] = useState(false)
+
     const router = useRouter();
 
 
+    //funktion, die alle Einträge vom backend liest
     function readEntries() {
+        //url für alle tage für die woche
         let url = baseURL + "/entries?semesterid=" + localStorage.getItem("currentsid") +
             "&daynumber=" + currentWeekStartDay + "&yearnumber=" + currentYear + "&sessionid=" + localStorage.getItem("sessionid");
+        //hole die id des aktuellen semester
         let currentsid = localStorage.getItem("currentsid")
+        //hole die id des aktuellen nutzers
         let userid = localStorage.getItem("userid")
 
         try {
+            //frage die daten am backend über die url an
             fetch(url).then(r => r.json()).then(en => {
 
 
+                //iterieren über alle 6 wochentage
                 for (let i = 0; i < en.length; i++) {
+                    //erst einmal ist jeder tag fehlerfrei
                     isDayOkay[i] = true
                     let maxLunchBreak = 0
+
+                    //summe um zu überprüfen, ob 8 stunden am tag schon verplant wurden
                     let daySum = 0
+                    //iterieren über jeden termin innerhalb eines tages
                     for (let j = 0; j < en[i].length; j++) {
+                        //überpüfen, ob der termin wirklich im aktuellen planungssemester liegt
                         if (en[i][j] != null && currentsid == (en[i][j]).semesterid) {
                             let elem = en[i][j]
 
+                            //hier werden fehler abgefragt, je weiter oben der fehler liegt, um so wichtiger ist er
+                            //bedienung falls der termin zu früh liegt
                             if ((elem.timestart - 1) / 4 < 8) {
                                 errorState[i] = ErrorType.TooEarly
                                 isDayOkay[i] = false
                                 break
+                                //bedinung, falls der termin zu spät liegt
                             } else if ((elem.timeend - 1) / 4 > 17) {
                                 errorState[i] = ErrorType.TooLate
                                 isDayOkay[i] = false
                                 break
+                                //bedinung, falls der termin an einem samstag liegt
                             } else if (new Date(currentYear, 0, elem.daynumber).getUTCDay() === 5) {
                                 errorState[i] = ErrorType.Saturday
                                 isDayOkay[i] = false
                             } else {
+                                //bedinung falls die mittagspause nicht eingehalten wurde
+                                //1. ein einziger termin überdeckt die ganze mittagszeit
                                 if ((elem.timestart - 1) / 4 <= 11 && (elem.timeend - 1) / 4 >= 14) {
                                     errorState[i] = ErrorType.NotEnoughLunchTime
                                     isDayOkay[i] = false
                                     break
+                                    //2. abfragen, ob mehrere termine in kombination die mittagspause überdecken
                                 } else if ((elem.timeend - 1) / 4 >= 11 && (elem.timeend - 1) / 4 <= 14) {
                                     let min = 24 * 3
 
@@ -101,24 +138,31 @@ export default function CalenderView(p) {
                                     }
                                 }
 
+                                //sollte kein fehler gefunden worden sein ist der tag okay.
                                 errorState[i] = ErrorType.Okay
                             }
 
+                            //rechne für jeden termin die "delta zeit" (länge des termins) auf die gesamt zeit
                             daySum += elem.timeend - elem.timestart
                         }
                     }
 
+                    //sollte die gesamt zeit über 8 sein, sind zu viele vorlesungen bzw. zu lang an diesem tag verplant
                     if (daySum / 4 > 8) {
                         errorState[i] = ErrorType.TooLong
                         isDayOkay[i] = false
                     }
                 }
 
+                //hier ist eine logik für blaue termine, die sich mit grauen überscheiden (von der planung her kein problem)
+                //da blau in der aktuellen planung nicht berücksichtig wird, trotzdem sollte dieser fall aus visuellen gründen abgedeckt sein
                 for (let i = 0; i < 6; i++) {
                     for (let k = 0; k < 20; k++) {
                         if (en[i][k] != null) {
 
 
+                            //hier für einen blauen termin wird ein grauer gesucht, der diesen schneidet
+                            //in diesem wird der blaue termin verkürzt dargestellt
                             if (en[i][k].semesterid != currentsid) {
                                 for (let l = 0; l < 20; l++) {
                                     if (en[i][l] != null && en[i][l].usercreatedbyid != userid) {
@@ -135,6 +179,8 @@ export default function CalenderView(p) {
                                     }
                                 }
                             }
+                            //hier für einen grauen termin der von einem blauen geschnitten wird
+                            //hier wird der graue termin verkürzt dargestellt
                             if (en[i][k] != null && en[i][k].usercreatedbyid != userid) {
                                 for (let l = 0; l < 20; l++) {
                                     if (en[i][l] != null && en[i][l].semesterid != currentsid) {
@@ -150,6 +196,8 @@ export default function CalenderView(p) {
 
                 }
 
+                //hier wird überprüft, ob sich ein tag innerhalb der semestergrenzen befindet
+                //wenn nicht, muss er ausgegraut werden, damit dort nichts geplant werden kann.
                 let j = 0;
                 for (let i = Math.round(((new Date(currentYear, 0, currentWeekStartDay) - new Date(currentYear, 0, 0)) / (1000 * 60 * 60 * 24))); i <= Math.round(((new Date(currentYear, 0, currentWeekStartDay + 5) - new Date(currentYear, 0, 0)) / (1000 * 60 * 60 * 24))); i++) {
                     grayedOut[j] = i % Math.round(((new Date(currentYear, 11, 31) - new Date(currentYear, 0, 0)) / (1000 * 60 * 60 * 24))) < semesterStart && semesterEnd && new Date(currentYear, 0, currentWeekStartDay + j).getFullYear() == semesterStartYear || i % Math.round(((new Date(currentYear, 11, 31) - new Date(currentYear, 0, 0)) / (1000 * 60 * 60 * 24))) > semesterEnd && new Date(currentYear, 0, currentWeekStartDay + j).getFullYear() == semesterEndYear
@@ -159,21 +207,26 @@ export default function CalenderView(p) {
                     }
                     j++
                 }
+                //hier wird die ausgrauung für feiertage überprüft
                 for (let i = 0; i < 6; i++) {
                     let date = new Date(currentYear, 0, currentWeekStartDay + i)
                     grayedOut[i] = holiday(currentYear, date.getMonth(), date.getDate()) ? holiday(currentYear, date.getMonth(), date.getDate()) : grayedOut[i]
                 }
 
+                //die termine können nun angezeigt werden. (der state wird geändert)
                 setEntries(en)
 
+                //sollte ein dozent die planugsansicht verwende, muss seine gesamt verplante zeit in der aktuellen vorlesung berechnet werden.
                 if(localStorage.getItem("admin") == 0)
                 {
+                    //es werden alle relevanten termine vom backend angefordert
 
                     let entriesURL = baseURL + "/entries/all/module?sessionid=" + localStorage.getItem("sessionid") + "&moduleid=" + localStorage.getItem("moduleid")
                     fetch(entriesURL).then(r => r.json()).then(allEn => {
                         let moduleid = localStorage.getItem("moduleid")
                         let sum = 0
 
+                        //die zeitsplannen aller termine werden aufsummiert
                         let checkTime = 0
                         for (let j = 0; j < allEn.length; j++) {
                             if (allEn[j] != null && allEn[j].moduleid == moduleid) {
@@ -181,6 +234,7 @@ export default function CalenderView(p) {
                             }
                         }
 
+                        //um auf einen stundensatz von 45 min pro stunde zu kommen muss die resultierende zeit (in 15 min takten) durch 3 geteilt werden.
                         sum /= 3
                         timePlanned = sum
                     })
@@ -191,8 +245,10 @@ export default function CalenderView(p) {
         }
     }
 
+    //hierbei wird ein neu angelegter termin (immer 45 minuten zu beginn) and das backend gesendet
     function pushEntry(currentColumnID, row) {
         let url = baseURL + "/entries" + "?sessionid=" + localStorage.getItem("sessionid")
+        //json objekt, das alle relavanten informationen über den termin enthält, resultiert aus der datenbank.
         let json = {
             "id": 0,
             "daynumber": currentWeekStartDay + currentColumnID,
@@ -209,10 +265,12 @@ export default function CalenderView(p) {
             headers: {"Content-Type": "application/json"},
             body: JSON.stringify(json)
         }).then(r => {
+            //einträge werden nach dem hochladen neu synchronisiert und damit auch validiert
             readEntries()
         })
     }
 
+    //schickt eine delete anfrage für einen termin an das backend
     function deleteEntry(id) {
         let url = baseURL + "/entries?id=" + id + "&sessionid=" + localStorage.getItem("sessionid");
         fetch(url, {
@@ -220,12 +278,15 @@ export default function CalenderView(p) {
         }).then(r => readEntries())
     }
 
+    //gibt für ein datum zurück, ob es sich um einen feiertag handelt. Wichtig für die ausgrau funktion.
+    //verwendung von feiertagejs (keine garantie auf korrektheit, externe library)
     function holiday(year, month, day) {
         var feiertagejs = require('feiertagejs');
         let today = new Date(year, month, day)
         return feiertagejs.isHoliday(today, 'BW')
     }
 
+    //funktion, welche überprüft, ob an einem tag (column) zu einer gewissen zeit (row) ein termin bereits vorhanden ist
     function checkForElementAtRow(row, column) {
         let currentList = entries[column];
         for (let i = 0; i < currentList.length; i++) {
@@ -242,6 +303,7 @@ export default function CalenderView(p) {
         return false;
     }
 
+    //kann ein element an einem tag anhand seiner id zurückgeben. Wichtig wenn das gleiche Termin objekt verwendet werden muss.
     function getElementInColumn(id, column) {
         let currentList = entries[column];
         for (let i = 0; i < currentList.length; i++) {
@@ -255,12 +317,17 @@ export default function CalenderView(p) {
         return null;
     }
 
+    //hier werden termin operationen wie vergrößern oder verkleiner final validiert etc.
     function onMouseUp(e) {
+        //überprüft, ob ein element gewählt ist (maus hält einen termin fest)
         if (selectedElement != null) {
             let id = selectedElement.id;
 
+            //überprüft, ob der termin sich über oder unter den erlaubten grenzen von 7 uhr morgens oder 18 uhr abends befindet.
             if ((selectedElement.timestart - 1) / 4 >= 7 && (selectedElement.timeend - 1) / 4 <= 18) {
 
+                //rechnet bei einem überschreiten der gesamtzeit die überschrittene zeit aus, und lässt den termin zurück auf die letze
+                //valide länge springen
                 let finalTimeEnd = selectedElement.timeend
                 let deltaTimeEnd = (selectedElement.timeend - lastEndTimeDrag) / 3
                 if (timePlanned + deltaTimeEnd > 20) {
@@ -272,6 +339,7 @@ export default function CalenderView(p) {
                     finalTimeStart += (timePlanned + deltaTimeStart - 20) * 3
                 }
 
+                //hier wird ein termin (vergrößert oder verkleinert) hinsichtlich seiner zeit am backend geupdated.
                 let url = baseURL + "/entries?sessionid=" + localStorage.getItem("sessionid");
                 let json = {
                     "id": id,
@@ -289,24 +357,32 @@ export default function CalenderView(p) {
                     headers: {"Content-Type": "application/json"},
                     body: JSON.stringify(json)
                 }).then(r => {
+                    //elemente werden nach einem update neu synchronisiert und damit auch validiert
                     readEntries()
                 })
             }
 
+            //es gibt kein aktuelle mit der maus "gehaltenes" element mehr.
             selectedElement = null;
         }
     }
 
     function onMouseMove(e) {
+        //überprüft, ob ein element gewählt ist (maus hält einen termin fest)
         if (selectedElement != null) {
+            //berechne die zeile (zeit) über welcher sich die maus befindet = die zeile in der planungsansicht in welcher sich die maus befindet
             let y_window = e.clientY;
             let y_target_offset = e.currentTarget.getBoundingClientRect().top;
             let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1;
+
+            //bekomme die nummber des aktuellen tages. 0 = montag, 1 = dienstag usw.
             let currentColumnID = parseInt(e.currentTarget.id)
 
+            //logik sollte ein termin an der unteren kante gezogen werden.
             if (grabbedDown) {
                 if (row - 1 > selectedElement.timestart) {
 
+                    //überprüft ob an der gezogenen position keine termine bereits sind.
                     let free = true;
                     for (let i = 0; i < entries[currentColumnID].length; i++) {
                         if (entries[currentColumnID][i] != null && selectedElement !== entries[currentColumnID][i]) {
@@ -320,11 +396,14 @@ export default function CalenderView(p) {
                         }
                     }
 
+                    //sollte keine termine vorhanden sein, kann der termin verlängert bzw. verkürzt werden.
                     if (free) {
                         selectedElement.timeend = row + 1;
                     }
                 }
+                //logik sollte ein termin an der oberen kante gezogen werden.
             } else if (row + 2 < selectedElement.timeend) {
+                //logik wie bei unterer kante
                 let free = true;
                 for (let i = 0; i < entries[currentColumnID].length; i++) {
                     if (entries[currentColumnID][i] != null && selectedElement !== entries[currentColumnID][i]) {
@@ -347,6 +426,7 @@ export default function CalenderView(p) {
     }
 
     function onMouseDown(e) {
+        //berechnet alle wichtigen informationen, wie die nummer des geklickten tages in der woche und die angeklickte zeit.
         let y_window = e.clientY;
         let y_target_offset = e.currentTarget.getBoundingClientRect().top;
         let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1;
@@ -355,9 +435,14 @@ export default function CalenderView(p) {
         let currentUserID = localStorage.getItem("userid");
         let currentsid = localStorage.getItem("currentsid")
 
+        //sollte ein Links-klick ausgeführt worden sein:
         if (e.button === 0) {
+            //überprüfen ob auf einen freien platz gedrückt wurde (e in der id steht für entry)
             if (!currentId.includes("e")) {
+
+                //schauen, ob auf keine resize bar gedrückt wurde
                 if (!currentId.includes("grab")) {
+                    //sollte im geklickten bereich genug zeit frei sein 3 * 15 min dann lege einen neuen termin an
                     if (!checkForElementAtRow(row + 2, currentColumnID) && !checkForElementAtRow(row + 1, currentColumnID)) {
                         if ((row - 1) / 4 >= 7 && (row + 2) / 4 <= 18) {
                             if (!grayedOut[currentColumnID] && timePlanned + 0.8 < 20) {
@@ -365,9 +450,14 @@ export default function CalenderView(p) {
                             }
                         }
                     }
+                    //wurde auf eine resize leiste gedrückt (nach oben oder unten):
                 } else {
+                    //hole die id des termins (hierbei darf das entry e nicht mitgenommen werden)
                     let parentID = parseInt(e.target.parentElement.id.replace("e", ""));
+                    //überpüfen, ob der termin tatsächlich dem aktuellem dozenten gehört.
                     if (currentUserID == getElementInColumn(parentID, currentColumnID).usercreatedbyid && getElementInColumn(parentID, currentColumnID).moduleid == localStorage.getItem("moduleid")) {
+                        //anhand der id herausfinden ob nach oben oder unten gezogen werden sollte
+                        //speichere aktuelle daten des termins ab
                         grabbedDown = currentId.includes("down")
                         selectedElement = getElementInColumn(parentID, currentColumnID);
                         lastEndTimeDrag = selectedElement.timeend
@@ -375,9 +465,13 @@ export default function CalenderView(p) {
                     }
                 }
             }
+            //sollte ein Rechts-klick ausgeführt worden sein:
         } else if (e.button === 2) {
+            //id holen
             let parentID = parseInt(e.target.id.replace("e", ""));
+            //überpüfen, ob der termin tatsächlich dem aktuellen dozenten gehört
             if (currentUserID == getElementInColumn(parentID, currentColumnID).usercreatedbyid && currentId.includes("e") && getElementInColumn(parentID, currentColumnID).moduleid == localStorage.getItem("moduleid")) {
+                //aktuellen termin löschen
                 let id = parseInt(currentId.replace("e", ""))
                 errorState[currentColumnID] = ErrorType.Okay
                 deleteEntry(id)
@@ -385,6 +479,7 @@ export default function CalenderView(p) {
         }
     }
 
+    //wenn die woche nach links gewechselt wurden, müssen tages und wochendaten angepasst werden.
     function onWeekLeft() {
         currentWeekStartDay -= 7;
         let date = new Date(currentYear, 0, currentWeekStartDay + 5)
@@ -395,9 +490,11 @@ export default function CalenderView(p) {
             errorState[i] = ErrorType.Okay
         }
 
+        //einträge müssen für die neue woche neu geholt werden.
         readEntries()
     }
 
+    //inverse logik zu nach links
     function onWeekRight() {
         currentWeekStartDay += 7;
         let date = new Date(currentYear, 0, currentWeekStartDay + 5)
@@ -411,30 +508,37 @@ export default function CalenderView(p) {
         readEntries()
     }
 
+    //gibt die farbe eines termins anhand der gegebenen parameter zurück
     function getEntryColor(userCreatedByID, columnID, semesterid, moduleid) {
         let id = localStorage.getItem("userid");
         let currentsid = localStorage.getItem("currentsid")
         if(localStorage.getItem("admin") == 0)
         {
+            //ist der termin vom nutzer selbst:
             if (id == userCreatedByID) {
                 if (isDayOkay[columnID] && moduleid == localStorage.getItem("moduleid")) {
                     return "#77932b";
+                    //ist der termin vom nutzer selbst aber liegt in einem anderen fach / modul, dann wird er blau
                 } else if (moduleid != localStorage.getItem("moduleid")) {
                     return "#346991";
+                    //gibt es ein problem mit einem einem termin der wohl im aktuellen fach liegt, wird er gelb
                 } else {
                     return "#e5a10e";
                 }
 
+                //von anderen nutzern...
             } else {
                 return "#a2a2a2";
             }
         }
+        //oder für die ansicht von admins immer grau
         else
         {
             return "#a2a2a2";
         }
     }
 
+    //gleiche logik wie für die termine, nur mit etwas dunkleren farbwerten
     function getResizeBarColor(userCreatedByID, columnID, semesterid, moduleid) {
         let id = localStorage.getItem("userid");
         let currentsid = localStorage.getItem("currentsid")
@@ -458,8 +562,11 @@ export default function CalenderView(p) {
         }
     }
 
+    //beim neu laden der seite:
     useEffect(() => {
+        //kleines delay zum start, um ladefehler zu vermeiden.
         setTimeout(() => {
+            //setze allde daten zum beginn auf ihre default werte.
             semesterStart = 0;
             semesterEnd = 0;
             semesterStartYear = 0;
@@ -474,9 +581,11 @@ export default function CalenderView(p) {
                 "&id=" + localStorage.getItem("currentsid");
 
 
+            //lese alle informationen über das aktuelle semester aus (start ende etc.)
             fetch(url).then(r => r.json()).then(s => {
                 currentWeekStartDay = s.startday - new Date(s.startyear, 0, s.startday).getUTCDay();
                 currentYear = s.startyear;
+                //setze alle informationen für die kalender seitenansicht
                 setStartYearCalenderSideBar(currentYear)
                 setEndYearCalenderSideBar(s.endyear)
                 setHighlightMonth(new Date(s.startyear, 0, s.startday).getMonth())
@@ -484,18 +593,26 @@ export default function CalenderView(p) {
 
                 semesterStart = s.startday;
                 semesterEnd = s.endday;
+                //setze alle informationen für die kalender seitenansicht
                 semesterStartYear = s.startyear;
                 semesterEndYear = s.endyear;
                 setStartDayCalenderSideBar(semesterStart)
                 setEndDayCalenderSideBar(s.endday)
 
+                //sollte alle semesterinformationen da und verteilt sein, lese zum ersten mal die termine für die aktuelle woche (semester start woche)
+                //vom backend
             }).then(readEntries)
 
+            //setze den scroll der kompontente auf ca. die mitte der ansicht
             scrollRef.current.scrollTop = 600;
+            //blockiere das kontextmenü, damit es bei rechtsklickoperationen nicht stört
             window.addEventListener("contextmenu", (e) => (e.preventDefault()))
 
+            //verwende einen keylistener für die resize funktionen der komponente mit der plus und minus taste
             window.addEventListener("keypress", (e) => {
                 try {
+                    //hierbei wird die cell height (ganz oben im script) angepasst und auf ein minimum limitiert.
+                    //ein maximum gibt es nicht.
                     if (e.key === "+") {
                         cellHeight += 2
                     } else if (e.key === "-") {
@@ -509,6 +626,7 @@ export default function CalenderView(p) {
             })
 
 
+            //führe diese funktion parellel zum rest aus, damit alle 500ms die daten neu vom backend geladen werden (live sync)
             setInterval(function () {
                 if (selectedElement == null) {
                     readEntries()
@@ -518,7 +636,7 @@ export default function CalenderView(p) {
     }, [])
 
 
-    //returns internal format (0 - 96) to a string
+    //rechnet das interne zeitformat 0-96 in lesbaren zeiten um
     function internal_to_time(internal) {
         internal -= 1
         internal /= 4
@@ -534,7 +652,9 @@ export default function CalenderView(p) {
         temp.push(i);
     }
 
+    //funktionalität in diesem komponente, sollte in der seitenansicht auf einen monat geklickt werden.
     function onMonthClick(monthIndex, startParts) {
+        //berechne den neuen starttag in der woche, und lade alle benötigten daten neu.
         monthIndex--
         let startDay = 1
         let date = new Date(parseInt(startParts[2]), monthIndex, startDay);
@@ -557,9 +677,12 @@ export default function CalenderView(p) {
             errorState[i] = ErrorType.Okay
         }
 
+        //hole die daten für die neue woche vom backend erneut
         readEntries()
     }
 
+    //sichtbarer html teil der komponente, im allgemeinen über flex layouts und div elemente realisiert. in jeder einzelnen tages-spalte
+    //befindet sich allerdings ein grid layout mit der breite 1. In diesem werden die Termine angesiedelt
     return (
 
         <div style={{
@@ -586,6 +709,7 @@ export default function CalenderView(p) {
             }}>{p.semesterName}</p>
             <div className={"calender-direction-wrapper"}>
                 <div>
+                    {/*füge hier die kalender seitenansicht ein links von der planungsansicht*/}
                     <BasicDateCalendar startyear={startYearCalenderSideBar} startday={startDayCalenderSideBar}
                                        endyear={endYearCalenderSideBar} endday={endDayCalenderSideBar}
                                        highlightYear={highlightYear} highlightMonth={highlightMonth}
@@ -598,6 +722,7 @@ export default function CalenderView(p) {
                     justifyContent: "center",
                     alignItems: "center",
                 }} id={update}>
+                    {/*füge hier den wochenwechsler ein. Oberhalb der planungsansicht*/}
                     <WeekSelector year={currentYear} startday={currentWeekStartDay} onFunctionLeft={() => onWeekLeft()}
                                   onFunctionRight={() => onWeekRight()}/>
                     <div style={{
@@ -608,6 +733,7 @@ export default function CalenderView(p) {
                         backgroundColor: "white",
                         gap: 5,
                     }}>
+                        {/*hier wird die leiste für die namen der wochentage generiert*/}
                         <div style={{borderRadius: 10, padding: 10, backgroundColor: "#f1f1f1"}}
                              className={"box-shadow"}>
                             <div>
@@ -637,37 +763,43 @@ export default function CalenderView(p) {
                                 <div className={"calender-view content"} style={{height: cellHeight * 96 + 10}}>
 
 
+                                    {/*hier die spalte für den montag*/}
                                     <div className={"spalte"}
                                          id={"0"} style={{
                                         gridTemplateRows: `repeat(96, ${cellHeight}px)`,
                                         backgroundColor: grayedOut[0] ? "#aaaaaa" : "#ffffff"
                                     }}
+                                         // weise mausfunktionalitäten der spalte zu
                                          onMouseDown={e => onMouseDown(e)}
                                          onMouseMove={e => onMouseMove(e)}
                                          onMouseUp={e => onMouseUp(e)}>
 
+                                        {/*füge die einträge dieses tages in das grid layout ein*/}
                                         {entries[0].map(d => (d != null && <div className={"entry"} style={{
                                             width: "100%",
                                             gridRowStart: d.timestart,
                                             gridRowEnd: d.timeend,
                                             backgroundColor: getEntryColor(d.usercreatedbyid, 0, d.semesterid, d.moduleid)
                                         }} id={d.id + "e"}>
+                                            {/*hier die obere bar, an der termin gezogen werden kann*/}
                                             <div className={"resize-grab"} id={"grabup"} style={{
                                                 backgroundColor: getResizeBarColor(d.usercreatedbyid, 0, d.semesterid, d.moduleid)
                                             }}></div>
+                                            {/*hier der mittelteil des termins (zeitinfos usw.)*/}
                                             <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
                                                 <p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
                                                 <p>{d.info}</p>
                                                 <br/>
                                                 <p>{(Math.floor((d.timeend - d.timestart) / 12)) > 0 ? (Math.floor((d.timeend - d.timestart) / 12) * 15) + "min Pause einplanen" : ""}</p>
                                             </div>
+                                            {/*hier die untere bar, an der termin gezogen werden kann*/}
                                             <div className={"resize-grab"} id={"grabdown"} style={{
                                                 backgroundColor: getResizeBarColor(d.usercreatedbyid, 0, d.semesterid, d.moduleid)
                                             }}></div>
                                         </div>))}
                                     </div>
 
-
+                                    {/*gleich wie montag, aber für dienstag*/}
                                     <div className={"spalte"}
                                          id={"1"} style={{
                                         gridTemplateRows: `repeat(96, ${cellHeight}px)`,
@@ -700,6 +832,7 @@ export default function CalenderView(p) {
                                     </div>
 
 
+                                    {/*gleich wie montag aber für mittwoch*/}
                                     <div className={"spalte"}
                                          id={"2"} style={{
                                         gridTemplateRows: `repeat(96, ${cellHeight}px)`,
@@ -732,7 +865,7 @@ export default function CalenderView(p) {
                                         </div>))}
                                     </div>
 
-
+                                    {/*gleich wie montag*/}
                                     <div className={"spalte"}
                                          id={"3"} style={{
                                         gridTemplateRows: `repeat(96, ${cellHeight}px)`,
@@ -764,7 +897,7 @@ export default function CalenderView(p) {
                                         </div>))}
                                     </div>
 
-
+                                    {/*gleich wie montag*/}
                                     <div className={"spalte"}
                                          id={"4"} style={{
                                         gridTemplateRows: `repeat(96, ${cellHeight}px)`,
@@ -796,7 +929,7 @@ export default function CalenderView(p) {
                                         </div>))}
                                     </div>
 
-
+                                    {/*gleich wie montag*/}
                                     <div className={"spalte"}
                                          id={"5"} style={{
                                         gridTemplateRows: `repeat(96, ${cellHeight}px)`,
@@ -830,8 +963,8 @@ export default function CalenderView(p) {
                                 </div>
 
 
+                                {/*hier ein zweites element, das über den eigentlichen terminen usw. liegt und dafür verantwortlich ist zeitstempel und trennlinen anzuzeigen*/}
                                 <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,
@@ -840,9 +973,12 @@ export default function CalenderView(p) {
                                         justifyContent: "space-around",
                                         alignItems: "center",
                                     }} className={"no-pointer-events"}>
+                                        {/*das div element ist für die linie*/}
                                         <div style={{
                                             borderBottom: (i / 4 === 7 || i / 4 === 18 ? "3px solid #fc3d03" : "1px solid #363636"),
-                                        }}><p style={{
+                                        }}>
+                                            {/*das p element ist für den zeitstempel*/}
+                                            <p style={{
                                             color: "gray",
                                             marginTop: cellHeight - 3,
                                             marginRight: 120,
@@ -901,7 +1037,9 @@ export default function CalenderView(p) {
                         </div>
                     </div>
                 </div>
+                {/*die seitliche anzeige, welche die fehler anzeigt*/}
                 <div className={"error-bar"}>
+                    {/*iteriert über das array der fehlercodes und zeigt nur "fehler" bzw. warnungen an, die nicht gleich okay sind*/}
                     {errorState.map((e, index) => (
                         <div style={{
                             display: e === ErrorType.Okay ? "none" : "flex",
@@ -932,6 +1070,7 @@ export default function CalenderView(p) {
                 </div>
             </div>
 
+            {/*hier ein element, welches die oben berechneten verplanten vorlesungsstunden des dozenten anzeigt*/}
             <div className={"box-shadow round-border"} style={{
                 marginTop: 30,
                 padding: 5
@@ -949,6 +1088,8 @@ export default function CalenderView(p) {
                 right: 70,
                 bottom: 20,
             }}>
+                {/*hier der button für das abgeben. dieser überprüft, ob schon 20 vorlesungsstunden verplant wurden*/}
+                {/*diese 20 vorlesungsstunden könnten durch eine anbindung an andere systeme ersetzt werden (temporärer wert)*/}
                 <Button color={timePlanned < 20 ? "#AAAAAA": "#77932b"} onClick={() => {
                     Math.floor(timePlanned) == 20 ? setPopUpToggleAbgeben(true) : {}
                 }} text={"Abgeben"} width={100} height={40}/>
diff --git a/anwendung/src/components/ErrorType.js b/anwendung/src/components/ErrorType.js
index 328f0a2..fdfe2a6 100644
--- a/anwendung/src/components/ErrorType.js
+++ b/anwendung/src/components/ErrorType.js
@@ -1,3 +1,4 @@
+//hier werden fehlertypen mit ihrem anzeigetext für die CalenderView hinterlegt
 export const ErrorType = {
     Okay: "Okay",
     TooLong: "Zu lang, maximal 8h pro Tag!",
diff --git a/anwendung/src/components/Icons.js b/anwendung/src/components/Icons.js
index e31b390..375332b 100644
--- a/anwendung/src/components/Icons.js
+++ b/anwendung/src/components/Icons.js
@@ -1,3 +1,6 @@
+//hier sind wichtige svg images zur späteren verwendung auf buttons usw. hinterlegt. In diese können später evtl. per stringmanipulation weitere infos
+//wie breite und höhe eingearbeitet werden.
+
 export const arrowLeft = `<svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-arrow-left" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
 </svg>`
diff --git a/anwendung/src/components/InputForm.jsx b/anwendung/src/components/InputForm.jsx
index 6e84565..8bcba2b 100644
--- a/anwendung/src/components/InputForm.jsx
+++ b/anwendung/src/components/InputForm.jsx
@@ -5,6 +5,7 @@ import Background from "@/components/Background";
 import {baseURL} from "@/components/Constants";
 import Back from "@/components/Back";
 
+//dummy daten für die vorlesungsfächer
 let modulesDummy = [
     ["Grundlagen u. Logik", "Programmieren 1", "Programmieren 2", "Digitaltechnik", "Web. Eng.", "Analysis"],
     ["Lineare Algebra", "Anwendungsprojekt", "BWL", "Projektmanagement", "Algo. Kompl.", "Python", "Prolog"],
@@ -14,6 +15,8 @@ let modulesDummy = [
     ["Bachelor"]
 ]
 
+//speichert ab, ob die nummer des semesters in der bearbeitung geändert wurde.
+//wichtig umd daten (aus alten semester nummern) korrekt löschen zu können
 let hasSemesterNumberChanged = false
 
 export default function InputForm(p) {
@@ -31,6 +34,7 @@ export default function InputForm(p) {
 
         hasSemesterNumberChanged = false
 
+        //lädt zu beginn alle dummy daten des ersten semesters
         let arr = []
         modulesDummy[0].map(e => {
             arr.push({"moduleid": -1, "userid": -1, "activated": 0})
@@ -38,12 +42,16 @@ export default function InputForm(p) {
         setModuleUserMapping(arr)
 
         let url = baseURL + "/users/all?sessionid=" + localStorage.getItem("sessionid")
+        //holt alle dozenten, die für das dozieren in fragen kommen.
         fetch(url).then(r => r.json()).then(u => {
             setUsers(u)
         }).then(() => {
             let tempSemesterNumber = 0
+            //hier kann ausgemacht werden, ob ein semester neu erstellt werden soll oder bearbeitet, wenn 0 dann wird neu erstellt
+            //also hier wird bearbeitet
             if(localStorage.getItem("currentsid") != 0)
             {
+                //holen alle daten, die bis jetzt in diesem semester vorhanden sind (noch keine zuweisungen von dozenten zu vorlesungen)
                 fetch(baseURL + "/semester/id?sessionid=" + localStorage.getItem("sessionid") + "&id=" + localStorage.getItem("currentsid")).then(r => r.json()).then(semester => {
                     setCourseName(semester.name)
                     let startYear = semester.startyear
@@ -63,6 +71,7 @@ export default function InputForm(p) {
                     })
 
                 }).then(() => {
+                    //hole alle zuweisungen von dozenten zu vorlesungen / fächern innerhalb dieses semesters.
                     fetch(baseURL + "/module/bysemesterid?sessionid=" + localStorage.getItem("sessionid") + "&semesterid=" + localStorage.getItem("currentsid")).then(r => r.json()).then(modules => {
                         console.log(modules)
                         for(let i = 0; i < modules.length; i++)
@@ -86,12 +95,16 @@ export default function InputForm(p) {
         })
     }, [])
 
+    //sollte auf abbrechen geklickt worden sein...
     function onButtonAbort(e) {
         router.back()
     }
 
+    //sollte auf speichern geklickt worden sein... hier werden nur daten des semesters übermittelt, noch nicht die
+    //zweisungen von dozenten und vorlesungen / modulen
     function onButtonSave(e) {
 
+        //bereite alle relevanten daten des input form auf
         let semesterid = localStorage.getItem("currentsid")
 
         let startYear = parseInt(startDate.split("-")[0])
@@ -103,6 +116,7 @@ export default function InputForm(p) {
         let startDayInYear = Math.round((start - new Date(startYear, 0, 0)) / (1000 * 60 * 60 * 24))
         let endDayInYear = Math.round((end - new Date(endYear, 0, 0)) / (1000 * 60 * 60 * 24))
 
+        //wenn das semester neu erstellt werden soll, sende eine post anfrage and das backend.
         if(semesterid == 0)
         {
             fetch(baseURL + "/semester?sessionid=" + localStorage.getItem("sessionid"), {
@@ -119,6 +133,7 @@ export default function InputForm(p) {
                 })
             }).then(r => r.json()).then(semester => {semesterid = semester.id}).then(() => modulesInBackend(semesterid))
         }
+        //wenn das semester nur editiert wurde, stelle eine put anfrage an das backend.
         else
         {
             fetch(baseURL + "/semester?sessionid=" + localStorage.getItem("sessionid"), {
@@ -139,6 +154,7 @@ export default function InputForm(p) {
 
     function modulesInBackend(semesterid)
     {
+        //sollte sich die nummer des semesters geändert haben, lösche alle alten zuweisungen von dozenten und modulen aus dem backend.
         if (hasSemesterNumberChanged) {
             fetch(baseURL + "/module/bysemesterid?sessionid=" + localStorage.getItem("sessionid") + "&id=" + localStorage.getItem("currentsid"), {
                 method: "DELETE"
@@ -164,9 +180,12 @@ export default function InputForm(p) {
             })
         } else {
 
+            //hier werden modulzuweisungen zu dozenten am backend aktualisiert
             for (let i = 0; i < moduleUserMapping.length; i++) {
                 let current = moduleUserMapping[i]
+                //solte die zuweisung des modules zum dozenten noch aktiv sein...
                 if (current.userid != -1) {
+                    //im fall, dass das die zuweisung nocht nie existiert hat, stelle eine post anfrage
                     if (current.moduleid == -1) {
                         fetch(baseURL + "/module?sessionid=" + localStorage.getItem("sessionid"), {
                             method: "POST",
@@ -180,6 +199,7 @@ export default function InputForm(p) {
                             })
                         })
                     } else {
+                        //im fall, dass die zuweisung schon existiert hat aber nur geändert wurde, stelle eine PUT anfrage
                         fetch(baseURL + "/module?sessionid=" + localStorage.getItem("sessionid"), {
                             method: "PUT",
                             headers: {"Content-Type": "application/json"},
@@ -192,6 +212,7 @@ export default function InputForm(p) {
                             })
                         })
                     }
+                    //.. ist diese zuweisung nicht mehr aktiv, lösche die zuweisung aus dem backend.
                 } else {
                     if (current.moduleid != -1) {
                         fetch(baseURL + "/module?sessionid=" + localStorage.getItem("sessionid") + "&id=" + current.moduleid, {
@@ -202,14 +223,17 @@ export default function InputForm(p) {
             }
         }
 
+        //gehe nach dem speichern zurück auf das dashboard
         router.back()
     }
 
     return (
         <>
+            {/*das hintergrundbild*/}
             <Background/>
             <div className={"box-shadow input-form round-border"}>
 
+                {/*grundlegende input forms für namen... semesternummer usw.*/}
                 <p>Kursname</p>
                 <input type={"text"} className={"box-shadow round-border"}
                        style={{padding: 8, width: "100%", backgroundColor: (courseName == "") ? "#E44747" : "white"}}
@@ -253,6 +277,7 @@ export default function InputForm(p) {
                     <option value={5}>6. Semester</option>
                 </select>
 
+                {/*hier die tabelle, die alle zuweisungen von dozenten und modulen / vorlesungen anzeigt*/}
                 <div className={"table-wrapper"}>
                     <table>
                         <tbody>
@@ -308,6 +333,7 @@ export default function InputForm(p) {
                     width: "100%",
                     gap: 10
                 }}>
+                    {/*hier die knöpfe abbrechen und speichern mit einer kleinen validierung, ob die grundlegen semesterdaten angegeben wurden*/}
                     <Button text={"Abbrechen"} onClick={onButtonAbort}/>
                     <Button text={"Speichern"} color={"#77932b"} onClick={() => {
                         (startDate == "" || endDate == "" || startDate >= endDate || courseName == "") ? () => {
diff --git a/anwendung/src/components/Login.jsx b/anwendung/src/components/Login.jsx
index d558d0c..6d3c861 100644
--- a/anwendung/src/components/Login.jsx
+++ b/anwendung/src/components/Login.jsx
@@ -9,13 +9,18 @@ export default function Login() {
 
     let url = baseURL + "/users"
 
+    //sollte auf den login knopf geklickt worden sein...
     async function on_login_click() {
+        //füge der url die mail und das passwort an, sicherheitsfeatures werden die hier vorläufig nicht berücktsichtigt
         url += "?mail=" + inputUserName + "&password=" + inputPassword;
 
         let response = await fetch(url, {
             method: "GET",
         });
 
+        //lese die antwort vom backend, und versuche die sessionid (für weitere anfragen am backend wird diese übergeben) auszulesen.
+        //ist der status nicht "failed" wurden die einloggdaten gefunden und im fall, dass kein fehler aufgetreten ist
+        //eine sessionid zurückgegeben.
         let reader = response.body.getReader();
         let value = String.fromCharCode.apply(null, ((await reader.read()).value))
         if (value != "failed") {
@@ -26,7 +31,12 @@ export default function Login() {
             let admin = 0
             await fetch(url).then(o => o.json()).then(user => {
                 admin = user.permissions})
+            //setze für die spätere verwendung im localstorage, ob es sich bei dem aktuellen nutzer um einen admin handelt.
+            //selbst wenn diese informationen vom nutzer im browser manuell editiert werden, blockt das backend
+            //über sämtliche anfrage mit einer sessionid die dozenten bezogen ist ab. => diese information ist nur für die anzeige.
+            //diese könnte allerdings nicht ordnungsgemäß funktionieren sollte ein nutzer versuchen das tool "auszutricksen"
             localStorage.setItem("admin", admin)
+            //leite den nutzer je nach seinem status auf die admin oder dozenten ansicht weiter.
             if(admin === 1) {
                 await router.push("/semesteroverview")
             }else await router.push("/semesteroverviewLecturer")
@@ -40,6 +50,7 @@ export default function Login() {
 
     const [inputUserName, setInputUserName] = useState("")
     const [inputPassword, setInputPassword] = useState("")
+    //hier states für die hinweise in den loginfeldern für späteres anzeigen von evtl. fehlgeschlagen login versuchen.
     const [hint, setHint] = useState("Benutzername")
     const [hint2, setHint2] = useState("Passwort")
     const [backgroundColor, setBackgroundColor] = useState("rgb(255, 255, 255)")
diff --git a/anwendung/src/components/Test.jsx b/anwendung/src/components/Test.jsx
index 1054073..d406f20 100644
--- a/anwendung/src/components/Test.jsx
+++ b/anwendung/src/components/Test.jsx
@@ -1,3 +1,4 @@
+//hier ein test für die umrechnung zwischen internen und externen datumsformaten. Kann zur nachvollziehbarkeit der rechnung evtl. nützlich sein.
 export default function Test(p)
 {
 
diff --git a/anwendung/src/components/Tile.jsx b/anwendung/src/components/Tile.jsx
index 55a7af2..b8ca84c 100644
--- a/anwendung/src/components/Tile.jsx
+++ b/anwendung/src/components/Tile.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+//hier eine verworfene version der SemesterTile, welche einen hübschen hover effekt ansetzt. Könnte evtl.
+//wieder eingepflegt werden.
 const Tile = () => {
     const [isHovered, setIsHovered] = React.useState(false);
     const [cursorPosition, setCursorPosition] = React.useState({ x: 0, y: 0 });
diff --git a/anwendung/src/pages/index.js b/anwendung/src/pages/index.js
index be1672d..74fff0b 100644
--- a/anwendung/src/pages/index.js
+++ b/anwendung/src/pages/index.js
@@ -11,11 +11,14 @@ const inter = Inter({subsets: ['latin']})
 export default function Home(p) {
     const router = useRouter()
 
+    //hier wird im login fenster überpüft ob der aktuelle browser mit dem tool kompatibel ist.
+    //evtl. sind auch browser, die nicht chrome basiert sind kompatibel, diese konnten aber nicht ausführlich genug getest werden.
     useEffect(() => {
         let isEdge = window.navigator.userAgent.indexOf("Edg") > -1
         let isChrome = window.navigator.userAgent.indexOf("Chrome") > -1
         let isFireFox = window.navigator.userAgent.indexOf("firefox") > -1
 
+        //ist der browser nicht unterstützt so wird der nutzer auf die browser nicht unterstützt seite weitergeleitet.
         if(!(isEdge || isChrome || isFireFox))
         {
             router.push("/browserNotSupported")