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}
		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}
		Zur Erstellung der Listen und Diagramme haben wir häufig Dummy-Daten verwendet, um die Funktionalität im Frontend unabhängig vom Backend zu entwickeln. Die Dummy-Daten haben wir im jeweiligen Vue Component wie folgt angelegt. 
		\begin{lstlisting}[language=JavaScript,caption=Dummy-Daten]
		<script>
		...
		export default {
		    ...
		  data() {
		    return {
		      timeRecords: [
		        {
		          id: 1,
		          start: "25.04.2020 / 8:00",
		          end: "25.04.2020 / 13:00",
		          time: "5:00",
		          type: "Paid"
		        },
		        {
		          id: 2,
		          start: "25.04.2020 / 13:00",
		          end: "25.04.2020 / 14:00",
		          time: "1:00",
		          type: "Lunch"
		        },
		        {
		          id: 3,
		          start: "25.04.2020 / 14:00 ",
		          end: "25.04.2020 / 16:30",
		          time: "2:30",
		          type: "Paid"
		        }
		      ]
		    }
		  },
		  ...
		}
		</script>
		\end{lstlisting}
		Durch Verwendung der Dummy-Daten war es ebenso möglich Funktionsaufrufe zum Löschen oder Bearbeiten von Daten zu testen ohne persistente Veränderungen an den Daten auszulösen. Durch neu laden der Seite sind die Dummy-Daten wiederhergestellt. Bei der Erstellung der Diagramme waren die Dummy-Daten ebenfalls wichtig, so konnten Formatierungsfunktionen für die Zeitanzeige getestet werden. Ebenfalls konnte so die Optimale Größe und Anordnung der Diagramme bestimmt werden.\\
		\\
		Durch die Verwendung von Dummy-Daten war der Umstieg auf die Live Daten nicht allzu schwer. Die Dummy-Daten konnten bei Anbindung an die Datenbank reibungslos durch Live-Daten aus der Datenbank ersetzt werden.
				
		\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,caption=Get Request]
		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}
		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}
		Jeder Benutzer kann seine Daten in einer Übersicht zusammengefasst betrachten, hier verwenden wir folgende Diagramme:
		\begin{itemize}
			\item Kreisdiagramme
			\begin{itemize}
				\item Verhältnis von Arbeitszeit zu Pausenzeit von allen Accounts des Benutzers.
				\item Verhältnis der Arbeitszeit je TimeTrack Account des Benutzers mit Angabe des Gesamtverdienstes.
				\item Verhältnis des Verdienstes je TimeTrack Account des Benutzers.
			\end{itemize}
			\item Säulendiagramme
			\begin{itemize}
				\item Übersicht über die Letzten 7 Tage mit Arbeits- und Pausenzeit.
				\item Übersicht über die Letzten 30 Tage mit Arbeits- und Pausenzeit.
			\end{itemize}
		\end{itemize}
		Um Diagramme verwenden zu können haben wir das Framework Apexcharts eingebunden, welches es ermöglicht, konfigurierbare Diagramme einzufügen.
		Die Konfiguration des Säulendiagramms für die Ansicht der letzten 30 Tage ist nachfolgend dargestellt.
		\begin{lstlisting}[language=JavaScript, caption=Konfiguration Säulendiagramm]
		<script>
		...
		export default {
		  ...
		  data() {
		    return {
		      series: [
		        {
		          name: "Working Hours",
		          data: []
		        },
		        {
		          name: "Pause Hours",
		          data: []
		        }
		      ],
		      chartOptions: {
		        chart: {
		          type: "bar",
		          stacked: true,
		          background: "#202020",
		          toolbar: {
		            show: true,
		            offsetX: 0,
		            offsetY: 0,
		            tools: {
		              download: true,
		              selection: true,
		              zoom: false,
		              zoomin: false,
		              zoomout: false,
		              pan: false,
		              reset: false,
		              customIcons: []
		            },
		            autoSelected: "zoom"
		          }
		        },
		        colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
		        theme: {
		          mode: "dark"
		        },
		        dataLabels: {
		          enabled: false
		        },
		        tooltip: {
		          enabled: true,
		          followCursor: true,
		          x: {
		            show: true
		          },
		          y: {
		            formatter: function(value) {
		              ...
		              return hours + ":" + minutes + ":" + seconds;
		            }
		          }
		        },
		        responsive: [
		          {
		            breakpoint: 480,
		            options: {
		              legend: {
		                position: "bottom",
		                offsetX: -10,
		                offsetY: 0
		              }
		            }
		          }
		        ],
		        plotOptions: {
		          bar: {
		            horizontal: false,
		            columnWidth: "50%"
		          }
		        },
		        xaxis: {
		          type: "datetime",
		          categories: []
		        },
		        yaxis: {
		          labels: formatter: function(value) {
		                     ...
		                    return hours + ":" + minutes + ":" + seconds;
		                  }
		        },
		        legend: {
		          show: false,
		          position: "left",
		          offsetY: 40
		        },
		        fill: {
		          opacity: 1
		        }
		      }
		    };
		  },
		\end{lstlisting}
				
		
		Für die Kreisdiagramme war es notwendig alle Zeiteinträge abzuholen, die Zeiten zu Addieren und in die Datenfelder des Diagramms zu schreiben. Bei dem Kreisdiagramm das die Accounts darstellt war es notwendig die TimeTrack Accounts des Benutzers abzufragen und für jeden ein Feld der addierten Zeit anzulegen und den Lohn in einer Variable abzulegen. 
		\begin{lstlisting}[language=JavaScript, caption=Zuordnung der Zeit zu den TimeTrack Accounts]
		for (let index = 0; index < records.length; index++){
		   var record = records[index];
		   for (let indexAccs = 0; indexAccs < this.chartOptions.labels.length; indexAccs++) {
		      if (record.account == this.chartOptions.labels[indexAccs] && record.type == "PAID") {
		         this.series[indexAccs] += record.duration;
		      }
		   }
		}		
		\end{lstlisting}
				
		Ebenfalls war es notwendig eine Funktion zu erstellen, die den gesamten Lohn des jeweiligen Accounts nach den ermittelten Stunden berechnet.\\
		\\
		Bei den Säulendiagrammen müssen lediglich die nötigen Zeiteinträge beim zuständigen Endpoint angefragt werden. Dieser Endpoint liefert alle Einträge zwischen einem Startdatum und einem Enddatum. Hier wird immer das aktuelle Datum verwendet und die Zeitspanne entsprechend zurückgerechnet.
		
		
		
		
		\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}
		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}
		Auf der Statistics Seite sind die Daten der Time Records übersichtlich ausgewertet. Hier werden 2 verschiedene Diagrammtypen eingesetzt, um dem Benutzer eine bestmögliche Auswertung seiner Zeiteinträge zu bieten.
		\begin{figure}[H]
			\centering
			\includegraphics[width=\linewidth]{img/frontend/statistics_pie.PNG}
			\caption{Kreisdiagramme}
		\end{figure}
		\begin{figure}[H]
			\centering
			\includegraphics[width=\linewidth]{img/frontend/statistics_column.PNG}
			\caption{Säulendiagramme}
		\end{figure}
		\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} 
	\section{Probleme und Lösungen}
	\subsection{Diagramme}
	Beim erstellen der Säulendiagramme sind wir auf den Fehler gestoßen, dass der erste Eintrag von links nicht richtig angezeigt wird. Dieser Fehler ist den Entwicklern von Apexcharts bekannt aber noch nicht behoben. Wir haben das Problem behoben indem wir die die Daten an der ersten Stelle entfernen. Dies führt zu einem kleinen Abstand, jedoch wird das Diagramm so optimal ohne fehlende Beschriftungen dargestellt.
	\subsection{Custom Headers Chrome}
	Ein weiteres unserer Probleme war, dass Chrome sich geweigert hat auf den selbst erstellten Header zuzugreifen. Dieses Problem konnten wir im Backend lösen, indem wir den Header zu den Access-Control-Expose-Headers hinzugefügt haben.  
	\begin{lstlisting}[language=Java]
			res.setHeader("Access-Control-Expose-Headers", "Authorization");
	\end{lstlisting}
	\subsection{Kein Patch möglich}
	Beim erstellen eines Patch Requests hattten wir das Problem, dass dieser verweigert wurde. Dies lag daran, dass in den standard Cors-Konfigurationen nur Get, Head und Post erlaubt sind. Da wir noch Delete und Patch brauchen, haben wir alle Methoden erlaubt.
	\begin{lstlisting}[language=Java]
		final CorsConfiguration configuration = new CorsConfiguration().applyPermitDefaultValues();
		configuration.addAllowedMethod("*");
	\end{lstlisting} 
	\section{Deployment}