ubiquitous-computing-geo-timetracking/documentation/parts/frontend.tex

\chapter{Web-Frontend}
	\section{Technologiebeschreibung}
		\subsection{Vue.js}
		Vue.js ist ein Javascript Framework, welches den Aufbau von Frontend Anwendungen erleichtert. Ein Hauptmerkmal hierbei ist die Kapselung der einzelnen Elemente in Komponenten, welche ihren eigenen HTML, Javascript und CSS code enthalten. Eine Komponente kann mehrere andere Komponenten einbinden, sowie diesen Daten mitgeben. Eingebundene Komponenten können an die übergeordnete Komponente Daten senden.
		\subsection{Vuetify}
		Vuetify ist ein Designframework für Vue.js, dass viele Elemente wie Menüleisten, Buttons und Dialogfenster bereitstellt. Ein bekanntes äquivalentes Framwork ist Bootstrap. Das Designschema von Vuetify ist an Googles Material Design angelehnt. Nach Installation können die Elemente sehr einfach eingebunden und verwendet werden. 
	\section{Farbschema und Designsprache}
	Wir haben uns für die, von Google entwickelte Designsprache, Material Design entschieden. Diese zeichnet sich durch ihre kartenartigen Flächen und dem Gestaltungsstil Flat Design aus. Verwendet werden auch viele Schatten um die materialistisch-physikalische Darstellung zu erzeugen.\\
	In unserem eigens entwickelten Farbschema haben wir uns für ein dunkles Thema mit Blau als Hauptfarbe entschieden. 
	\begin{figure}[H]
	\centering
	\includegraphics[width=\linewidth/2]{img/frontend/color_sceme.png}
	\caption{Farbschema}
	\end{figure} 
	Unser Logo wurde im abgestimmten Farbschema umgesetzt und stellt die Kombination zwischen einer Stoppuhr und einem Kompass dar. So verbindet das Logo Zeit und Ort welche bei der Verwendung unseres Produkts eine wichtige Rolle spielen.
	\begin{figure}[H]
	\centering
	\includegraphics[width=\linewidth/3]{img/frontend/logo_dark_gt.png}
	\caption{Logo unserer Anwendung}
	\end{figure} 
	
	
	\section{Umsetzung}
		\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}
	\section{Funktionen der Website}
		\subsection{Home}
		\subsection{Time Records}
		\subsection{...}
	\subsection{Probleme und Lösungen}
	\section{Deployment}