Change size and indentation of listings, minor fixes

documentation/parts/frontend.tex

@@ -22,7 +22,7 @@
 	
 	\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]
@@ -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,14 +159,7 @@
                     return hours + ":" + minutes + ":" + seconds;
                   }
         },
-		        legend: {
-		          show: false,
-		          position: "left",
-		          offsetY: 40
-		        },
-		        fill: {
-		          opacity: 1
-		        }
+        ...
       }
     };
 },
@@ -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.