Edit Frontend Documentation umsetzung

documentation/parts/frontend.tex

@@ -22,12 +22,17 @@
 	
 	\section{Umsetzung}
 		\subsection{Einarbeitung}
+		Zur Einarbeitung haben wir den Vue JS Crash Course von Traversy Media genutzt. Dieser ist auf Youtube zu finden: https://www.youtube.com/watch?v=Wy9q22isx3U&t=3007s
 		\subsection{Arbeit mit Dummy-Daten}
+		
+		Simon 
+		
+		
 		\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. 
+		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]
+		\begin{lstlisting}[language=JavaScript,caption=Get Request]
 		var xhttp = new XMLHttpRequest();
 		var today;
 		xhttp.onreadystatechange = function() {
@@ -36,18 +41,75 @@
 				today = today._embedded.records;
 			}
 		};
-		xhttp.open("GET", baseUri + "/records/search/today", false);
+		xhttp.open("GET", baseUri + "/records/search/today", false);		
-		
+		xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));		
-		xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-		
 		xhttp.send(null);
 		\end{lstlisting}
 		\subsection{Ändern und Hinzufügen von Daten}
+		Zum Ändern und Hinzufügen von Daten haben wir ebenfalls XMLHTTRequests genutzt. Zum Hinzufügen wurden Post Request gesendet, zum Ändern Patch Requests.
+			\begin{lstlisting}[language=JavaScript, caption=Post Request]
+				xhttp.open("Post", baseUri + path, false);
+				
+				xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+				
+				xhttp.send(JSONData);
+		\end{lstlisting}
+			\begin{lstlisting}[language=JavaScript, caption=Patch Request]
+		xhttp.open("PATCH", baseUri + path, false);
+		
+		xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+		
+		xhttp.send(JSONData);
+		\end{lstlisting}
 		\subsection{Auswertung in Diagrammen}
 		\subsection{Administrator Funktionalitäten}
+		Ein Administrator hat die Möglichkeit zur vollen Nutzerverwaltung. Er kann Nutzer löschen, und bearbeiten. Als Bearbeitungsmöglichkeiten hat er die Accountverwaltung von Nutzern, das Setzen der Arbeitslocation für einen Nutzer und das Ändern des Namens.  
 	\section{Funktionen der Website}
 		\subsection{Home}
+		Die Home Seite hat zwei Ansichten. Wenn kein User angemeldet ist, sieht man lediglich einen Wilkommensgruß und die Möglichkeit sich anzumelden. Wenn man angemeldet ist, sieht man seine persönlichen Informationen, die einem zugeordnete Abeitslocation, die Tagesarbeitszeit und die eigenen Accounts.		
+			\begin{figure}[H]
+			\centering
+			\includegraphics[width=\linewidth]{img/frontend/home.PNG}
+			\caption{Home eingeloggt}
+		\end{figure}
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=\linewidth]{img/frontend/HomeLoggedOut.PNG}
+			\caption{Home ausgeloggt}
+		\end{figure}  
+		  
 		\subsection{Time Records}
-		\subsection{...}
+		Auf der Time Records Seite kann man die eigenen Arbeitszeiten einsehen. Außerdem hat man die Möglichkeit Fehlerhafte Einträge zu verbessern und neue Einträge zu erstellen.		
+			\begin{figure}[H]
+			\centering
+			\includegraphics[width=\linewidth]{img/frontend/timerecords.PNG}
+			\caption{Time Records}
+		\end{figure} 	
+		
+		\subsection{Statistics}
+		
+		SIMON
+		
+		\subsection{Accounts}
+		Die Accouts Seite bietet einem die Möglichkeit eigene Accounts einzusehen und zu verwalten. Man kann neue Accounts hinzufügen und bestehende Accounts löschen oder anpassen.
+		
+			\begin{figure}[H]
+			\centering
+			\includegraphics[width=\linewidth]{img/frontend/accounts.PNG}
+			\caption{Accounts}
+		\end{figure} 
+		
+		\subsection{Admin}
+		Die Admin Seite bietet einem die Möglichkeiten, welche in 5.3.7 beschrieben werden. Um die einzelnen Verwaltungsmöglichkeiten zu sehen, reicht es über den Stift zu hovern. Das linke Zeichen (rote Mülltonne) löscht den jeweiligen Nutzer, das mittlere (grün) Ist zum Ändern der Nutzerinformationen und der Position der Arbeitsstelle. Das rechte Zeichen (blau) führt einen zur Accountverwaltung für den jeweiligen Nutzer.
+			\begin{figure}[H]
+			\centering
+			\includegraphics[width=\linewidth]{img/frontend/admin.PNG}
+			\caption{Admin}
+		\end{figure} 
+		\begin{figure}[H]
+		\centering
+		\includegraphics[width=\linewidth/2]{img/frontend/verwaltung.PNG}
+		\caption{Nutzer Verwaltung}
+	\end{figure} 
 	\subsection{Probleme und Lösungen}
 	\section{Deployment}