1 files changed, 196 insertions, 0 deletions
diff --git a/20-implementierungsheft/sections/frontend.tex b/20-implementierungsheft/sections/frontend.tex
new file mode 100644
index 0000000..ae5be0e
--- /dev/null
+++ b/20-implementierungsheft/sections/frontend.tex
@@ -0,0 +1,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}