From 4974ae0e10742c2247f5ab844fb1805a261cc7c4 Mon Sep 17 00:00:00 2001
From: Simon Kellner <the_kellner@web.de>
Date: Fri, 19 Jun 2020 10:13:34 +0200
Subject: [PATCH] Change size and indentation of listings, minor fixes

---
 documentation/parts/frontend.tex | 216 ++++++++++++-------------------
 1 file changed, 84 insertions(+), 132 deletions(-)

diff --git a/documentation/parts/frontend.tex b/documentation/parts/frontend.tex
index 07cae09..f064d35 100644
--- a/documentation/parts/frontend.tex
+++ b/documentation/parts/frontend.tex
@@ -22,44 +22,44 @@
 	
 	\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: \href{https://www.youtube.com/watch?v=Wy9q22isx3U&t=3007s}{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>
+<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.\\
 		\\
@@ -116,103 +116,53 @@
 		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
-		        }
-		      }
-		    };
-		  },
+<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}
 				
 		
@@ -231,6 +181,8 @@
 		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 um die Anfragen durchzuführen, das heißt es werden so oft 50 Einträge angefragt, bis die letzte Seite erreicht ist.