Add DummyDaten and Diagramme

documentation/parts/frontend.tex

@@ -22,11 +22,48 @@
 	
 	\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
+		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. 
-		Simon 
+		\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.
@@ -62,6 +99,136 @@
 		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.
+			\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.
+		%TODO Update listing if changes to options are made 
+		\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: []
+		        },
+		        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}
@@ -87,9 +254,8 @@
 		\end{figure} 	
 		
 		\subsection{Statistics}
-		
+		Auf der Statistics Seite sind die Daten der Time Records übersichtlich ausgewertet. Hier sind 2 verschiedene Diagrammtypen eingesetzt. 
-		SIMON
+		%TODO Add picture when statistics page is reworked		
-		
 		\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.
 		
@@ -112,4 +278,7 @@
 		\caption{Nutzer Verwaltung}
 	\end{figure} 
 	\subsection{Probleme und Lösungen}
+	\subsubsection{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.
+	
 	\section{Deployment}