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

\chapter{Web-Frontend}
	\section{Technologiebeschreibung}
		\subsection{Vue.js}
			Vue.js\footnote{\url{https://vuejs.org/}} 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\footnote{\url{https://vuetifyjs.com/de-DE/}} ist ein Designframework für Vue.js, das viele Elemente wie Menüleisten, Buttons und Dialogfenster bereitstellt. Ein bekanntes äquivalentes Framework 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\footnote{\url{https://www.youtube.com/watch?v=Wy9q22isx3U}} von Traversy Media genutzt. Dieser ist kostenlos auf YouTube zu finden.
		\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 Livedaten 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 wird. 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 "XMLHttpRequests" genutzt. Zum Hinzufügen wurden Post Requests 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\footnote{\url{https://apexcharts.com/}} 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: {
            ...
          }
        },
        colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
        ...
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: "50%"
          }
        },
        xaxis: {
          type: "datetime",
          categories: []
        },
        yaxis: {
          labels: formatter: function(value) {
                     ...
                    return hours + ":" + minutes + ":" + seconds;
                  }
        },
        ...
      }
    };
},
			\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 Variablen 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.\\
		
			Um riesige Anfragen zu verhindern wird Paging verwendet, das heißt, es werden so oft 50 Einträge angefragt, bis die letzte Seite erreicht ist.

		\subsection{Administrator Funktionalitäten}\label{subsection:frontend:admin}
			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 hat 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 oder zu löschen, indem man über den Stift hovert. Neue Einträge können erstellt werden, indem man den "+"-Button am Ende der Seite anklickt.
			\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 zwei 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 Möglichkeiten, um eigene Accounts einzusehen und zu verwalten. Es ist möglich, neue Accounts hinzuzufügen und bestehende Accounts zu löschen oder anzupassen.
		
			\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 \ref{subsection:frontend:admin} 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ünes Papier mit Stift) ist zum Ändern der Nutzerinformationen und der Position der Arbeitsstelle. Das rechte Zeichen (blaue Person mit drei Strichen) führt 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{Nutzerverwaltung}
			\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 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 hatten 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}