pse-documentation/30-qualitaetsheft/sections/frontend.tex

\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}