hft-informatik/ubiquitous-computing-geo-timetracking
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change size and indentation of listings, minor fixes

Browse Source
This commit is contained in:
Simon Kellner 2020-06-19 10:13:34 +02:00 committed by Marcel Schwarz
parent 1d9740c9bc
commit 4974ae0e10
1 changed files with 84 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
documentation/parts/frontend.tex
View File

@ -22,7 +22,7 @@
\section{Umsetzung} \section{Umsetzung}
\subsection{Einarbeitung} \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} \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. 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] \begin{lstlisting}[language=JavaScript,caption=Dummy-Daten]
@ -138,54 +138,11 @@
stacked: true, stacked: true,
background: "#202020", background: "#202020",
toolbar: { 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"], 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: { plotOptions: {
bar: { bar: {
horizontal: false, horizontal: false,
@ -202,14 +159,7 @@
return hours + ":" + minutes + ":" + seconds; 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.\\ 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. 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.