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

216
documentation/parts/frontend.tex
View File

@ -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.