Add listing js Edit frontend documentation

documentation/documentation.tex

@@ -124,6 +124,20 @@
 	{[}{{{\color{delim}{[}}}}{1}
 	{]}{{{\color{delim}{]}}}}{1},
 }
+\lstdefinelanguage{JavaScript}{
+	keywords={typeof, new, true, false, catch, function, return, null, catch, switch, var, if, in, while, do, else, case, break},
+	keywordstyle=\color{blue}\bfseries,
+	ndkeywords={class, export, boolean, throw, implements, import, this},
+	ndkeywordstyle=\color{darkgray}\bfseries,
+	identifierstyle=\color{black},
+	sensitive=false,
+	comment=[l]{//},
+	morecomment=[s]{/*}{*/},
+	commentstyle=\color{purple}\ttfamily,
+	stringstyle=\color{red}\ttfamily,
+	morestring=[b]',
+	morestring=[b]"
+}
 
 \usepackage{setspace}
 \setstretch{1.2} %Zeilenabstand

documentation/parts/frontend.tex

@@ -7,7 +7,24 @@
 		\subsection{Einarbeitung}
 		\subsection{Arbeit mit Dummy-Daten}
 		\subsection{Authentifizierung}
+		Wie schon im Backend beschrieben wurde, haben wir zur Authenfizierung JSON Web Token benutzt. Beim Login wurde das Token abgeholt und in den Sessionstorage geschrieben. Wir haben uns für den Sessionstorage entschieden, weil dieser beim Schließen des Browsertabs automatisch gelöscht. Der Logout Button entfernt ebenso das Token aus dem Storage.
 		\subsection{Abrufen der Daten in Listen}
+		Zum Abrufen der Daten nutzen wir XMLHttpRequests. Diese geben vom Backend ein JSON Objekt zurück. Dies ermöglicht es uns die JSON funktionen von Java Script zu nutzen. 
+		\begin{lstlisting}[language=JavaScript]
+		var xhttp = new XMLHttpRequest();
+		var today;
+		xhttp.onreadystatechange = function() {
+			if (this.readyState == 4 && this.status == 200) {
+				today = JSON.parse(xhttp.responseText);
+				today = today._embedded.records;
+			}
+		};
+		xhttp.open("GET", baseUri + "/records/search/today", false);
+		
+		xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+		
+		xhttp.send(null);
+		\end{lstlisting}
 		\subsection{Ändern und Hinzufügen von Daten}
 		\subsection{Auswertung in Diagrammen}
 		\subsection{Administrator Funktionalitäten}