From 6defc2c35349a7e6b2547967e2e142b5bf338d11 Mon Sep 17 00:00:00 2001
From: Tim Zieger <tim.zieger98@web.de>
Date: Fri, 12 Jun 2020 10:01:20 +0200
Subject: [PATCH] Add listing js Edit frontend documentation

---
 documentation/documentation.tex  | 14 ++++++++++++++
 documentation/parts/frontend.tex | 17 +++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/documentation/documentation.tex b/documentation/documentation.tex
index 042069f..a6149e9 100644
--- a/documentation/documentation.tex
+++ b/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
diff --git a/documentation/parts/frontend.tex b/documentation/parts/frontend.tex
index 28e24aa..1734f46 100644
--- a/documentation/parts/frontend.tex
+++ b/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}