Change size and indentation of listings, minor fixes

documentation/parts/frontend.tex

@@ -22,13 +22,13 @@
 	
 	\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>
+<script>
-		...
+...
-		export default {
+export default {
     ...
   data() {
     return {
@@ -58,8 +58,8 @@
     }
   },
   ...
-		}
+}
-		</script>
+</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,9 +116,9 @@
 		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>
+<script>
-		...
+...
-		export default {
+export default {
   ...
   data() {
     return {
@@ -138,54 +138,11 @@
           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,
@@ -202,17 +159,10 @@
                     return hours + ":" + minutes + ":" + seconds;
                   }
         },
-		        legend: {
+        ...
-		          show: false,
-		          position: "left",
-		          offsetY: 40
-		        },
-		        fill: {
-		          opacity: 1
-		        }
       }
     };
-		  },
+},
 		\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.