1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
|
\section{Weboberfläche}
Die Weboberfläche wird mit dem Frontend-Web-Framework Vue.js erstellt. Mit Vue
werden wiederverwendbare, auf Datenänderungen reagierende Komponenten erstellt.
Die Komponenten nutzen ein fertiges Aussehen von dem Frontend-CSS-Framework
Bootstrap. Außerdem werden Icons der freien Schriftart fontawesome
verwendet.
An der generellen Struktur und wichtigen Komponenten hat sich in der
Implementierung nichts großes zum Entwurf geändert. Einige Komponenten konnten
in der Implementierung allerdings abstrahiert werden, sodass weniger Code
dupliziert werden musste. Dazu gehören zum Beispiel die Komponenten, welche ein
Eingabefeld bereit stellen.
Durch eine gute Arbeitsteilung blieb genug Zeit, um auch einige Kann-Kriterien
zu implementieren, weshalb ein paar Abhängigkeiten hinzugekommen sind. So werden
jszip und file-saver benötigt, um das Kann-Kriterium RC3 umzusetzen, durch
welches man Nutzerdaten im- und exportieren kann.
Pinia konnten wir als Abhängigkeit entfernen, weil Vue von sich aus genügend
Funktionalität bietet die Nutzerdaten global allen Komponenten bereit zu
stellen.
Anfangs überlegten wir den Wrapper \texttt{bootstrap-vue} zu verwenden, welcher
Bootstrap-HTML-Strukturen als Vue-Komponenten bereit stellt. Dies hätte des
Vorteil, dass man nur jene Komponenten importieren müsste, die man auch
benötigt. Es stellte sich heraus, dass \texttt{vue-bootstrap} nicht mit neusten
Version Vue3 kompatibel ist, weshalb wir uns entschieden Bootstrap wie gewohnt
komplett einzubinden.
Während der Implementierung sind wir auf die Bibliothek \texttt{VueUse}
gestoßen, mit der man die Abhängigkeit \texttt{file-saver} und mehrere eigene
Wrapper für Browser-\Gls{api}s ersetzen könnte. So kann man das \Gls{dashboard} auch in
Zukunft noch weiter verbessern.
Vom Frontend benötigte Abhängigkeiten:
\begin{itemize}
\item vite
\item vue
\item vue-router
\item \textcolor{red}{\sout{Pinia} wird durch globale Vue-Interne \texttt{ref} ersetzt}
\item bootstrap
\item fontawesome
\item vue-i18n (Support für mehrere Sprachen)
\item \textcolor{Green}{dayjs (Rechnen und formatieren von Zeiten)}
\item \textcolor{Green}{jszip (erstellen von Im-/Exports)}
\item \textcolor{Green}{file-saver (Abstraktion für Datei-Speichern-Dialog)}
\end{itemize}
\subsection{Komponentendiagramm Web-Frontend}
\includegraphics[width=\textwidth]{assets/diagrams/componentdiagram}
\subsection{Hinzugefügte Komponenten}
% PasswordInput
% PasswordValidator
% FloatingLabelInput
% Loading
% ErrorLog
% ProgressTime
\begin{minipage}{.7\linewidth}
\subsubsection*{FloatingLabelInput}
\begin{description}
\item[Tag] \texttt{<FloatingLabelInput type label>}
\item[Props] \mbox{} \\
\emph{type} \mbox{} Beschreibt den Inhalt des Eingabefelder. Handelt es sich
um eine E-Mail, ein Passwort oder nur Text? \\
\emph{label} \mbox{} Das Label wird als Platzhalter und kleine Überschrift
angezeigt.
\item[Beschreibung] Abstrahiert eine HTML-Struktur von Bootstrap, um ein schönes
Eingabefeld anzuzeigen.
\end{description}
\end{minipage}
\begin{minipage}{.3\linewidth}
\begin{figure}[H]
\includegraphics[width=\textwidth]{assets/floatinglabelinput.png}
\end{figure}
\end{minipage}
\vspace{.5cm}
\begin{minipage}{.7\linewidth}
\subsubsection*{PasswordInput}
\begin{description}
\item[Tag] \texttt{<PasswordInput type label>}
\item[Props] \mbox{} \\
\emph{label} \mbox{} Das Label wird als Platzhalter und kleine Überschrift
angezeigt.
\item[Beschreibung] Erweitert den FloatingLabelInput um einen Knopf mit dem die
Sichtbarkeit des Eingabefeldes gewechselt werden kann. Dabei wird intern der
Typ des Eingabefeldes zwischen Text and Passwort gewechselt.
\end{description}
\end{minipage}
\begin{minipage}{.3\linewidth}
\begin{figure}[H]
\includegraphics[width=\textwidth]{assets/passwordinput.png}
\end{figure}
\end{minipage}
\vspace{.5cm}
\begin{minipage}{.7\linewidth}
\subsubsection*{PasswordValidator}
\begin{description}
\item[Tag] \texttt{<PasswordValidator>}
\item[Beschreibung] Besteht aus zwei PasswordInputs und überprüft diese auf
Gleichheit und Kriterien für eine gutes Passwort.
\end{description}
\end{minipage}
\begin{minipage}{.3\linewidth}
\begin{figure}[H]
\includegraphics[width=\textwidth]{assets/passwordvalidator.png}
\end{figure}
\end{minipage}
\vspace{.5cm}
\begin{minipage}{.7\linewidth}
\subsubsection*{Loading}
\begin{description}
\item[Tag] \texttt{<Loading waitingFor>...<Loading/>}
\item[Props] \mbox{} \\
\emph{waitingFor} \mbox{} Eine Referenz auf eine Bedingung wann die Kinder
der Komponente gezeigt werden sollen.
\item[Beschreibung] Zeigt solange ein Ladesymbol an, bis die Bedingung in
\texttt{waitingFor} erfüllt ist und stattdessen die Kinder der Komponente
gezeigt werden.
\end{description}
\end{minipage}
\begin{minipage}{.3\linewidth}
\begin{figure}[H]
\includegraphics[width=\textwidth]{assets/loading.png}
\end{figure}
\end{minipage}
\vspace{.5cm}
\begin{minipage}{.7\linewidth}
\subsubsection*{ProgressTime}
\begin{description}
\item[Tag] \texttt{<ProgressTime unix>}
\item[Props] \mbox{} \\
\emph{unix} \mbox{} Anzahl an Sekunden.
\item[Beschreibung] Nimmt eine Anzahl an Sekunden und gibt an wie viele Stunden,
Minuten und Sekunden die Anzahl entspricht.
\end{description}
\end{minipage}
\begin{minipage}{.3\linewidth}
\begin{figure}[H]
\includegraphics[width=\textwidth]{assets/progresstime.png}
\end{figure}
\end{minipage}
\vspace{.5cm}
\begin{minipage}{.7\linewidth}
\subsubsection*{ErrorLog}
\begin{description}
\item[Tag] \texttt{<ErrorLog>}
\item[Beschreibung] Zeigt eine Liste von Warnungen an, welche aus einem globalen
Zustandsspeicher geladen werden.
\end{description}
\end{minipage}
\begin{minipage}{.3\linewidth}
\begin{figure}[H]
\includegraphics[width=\textwidth]{assets/errorlog.png}
\end{figure}
\end{minipage}
\vspace{.5cm}
\subsubsection*{Dashboard/FormLayout}
\begin{description}
\item[Tag] \texttt{<DashboardLayout> <FormLayout>}
\item[Beschreibung] Fügt den Kindern einen Seitenabstand hinzu.
\end{description}
|
