1 files changed, 150 insertions, 0 deletions
diff --git a/10-entwurfsheft/sections/frontend.tex b/10-entwurfsheft/sections/frontend.tex
new file mode 100644
index 0000000..69a3c61
--- /dev/null
+++ b/10-entwurfsheft/sections/frontend.tex
@@ -0,0 +1,150 @@
+\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. 
+
+Das Projekt wird durch den \Gls{bundler} vite aufgesetzt, gebaut und stellt einen
+Entwicklungswebserver mit Echtzeitvorschau bereit. Durch den vue-router wird bei
+der \Gls{spa} ein Seitenwechsel durch Manipulation der
+Browser-Chronik (History Manipulation) simuliert. Dadurch hat der Nutzer eine
+bessere Erfahrung, weil die Seite nicht neu geladen werden muss, wenn zu einem
+anderen Menüpunkt gewechselt wird. 
+
+Wenn der Nutzer sich anmeldet wird die E-Mail-Adresse, der \Gls{session-token} und
+Spracheinstellungen in dem globallen Zustandsspeicher gespeichert, welcher durch
+die Pinia-Abhängigkeit bereitgestellt wird. Dadurch haben alle
+\Glspl{uiComponent} einfachen Zugriff auf die Daten und diese müssen nicht über
+Props in tiefliegende \Glspl{uiComponent} durchgereicht werden. 
+
+Die Seiten werden als einzelne Kompontenten erstellt. Andere HTML-Strukturen
+werden als eigene Komponenten ausgelagert, wenn sie in mehreren Seiten verwendet
+werden und zur Reduzierung von Komplexität und Duplikation beitragen und selbst
+Logik beinhalten.
+
+Vom Frontend benötigte Abhängigkeiten:
+\begin{itemize}
+\item vite
+\item vue
+\item vue-router
+\item Pinia (globaler Zustandsspeicher)
+\item bootstrap
+\item fontawesome
+\item vue-i18n (Support für mehrere Sprachen)
+\end{itemize}
+
+\subsection{Komponentendiagramm Web-Frontend}
+\includegraphics[width=\textwidth]{assets/diagrams/componentdiagram}
+
+\subsection{Komponentenbeschreibung}
+
+\begin{minipage}{.7\linewidth}
+
+\subsubsection*{SubscriptionComponent}
+
+\begin{description}
+\item[Tag] \texttt{<Subscription subscription>}
+\item[Props] \mbox{} \\
+    \emph{subscription} \mbox{} Subscription-Objekt, welches Attribute zu einem \Gls{podcast} und
+        dessen \Glspl{episode} enthält. 
+\item[Beschreibung] Nimmt ein Subscription-Objekt, zeigt Titel und LastUpdate und
+\Glspl{episode} der Subscription an. 
+\end{description} 
+\end{minipage}
+\begin{minipage}{.3\linewidth}
+    \begin{figure}[H]
+        \includegraphics[width=\textwidth]{assets/subscription.png}
+    \end{figure}
+\end{minipage}
+
+
+\vspace{.5cm}
+\begin{minipage}{.7\linewidth}
+\subsubsection*{EpisodeComponent}
+
+\begin{description}
+\item[Tag] \texttt{<Episode episode>}
+\item[Props] \mbox{} \\
+    \emph{episode} \mbox{} EpisodeAction-Objekt, welches Titel, \Gls{podcast},
+        Timestamp, Dauer und Hörfortschritt der \Gls{episode} enthält. 
+\item[Beschreibung] Nimmt ein EpisodeAction-Object, zeigt Titel, \Gls{podcast}, Dauer,
+    Hörfortschritt und LastUpdate an. 
+\end{description}
+\end{minipage}
+\begin{minipage}{.3\linewidth}
+    \begin{figure}[H]
+        \includegraphics[width=\textwidth]{assets/episode.png}
+    \end{figure}
+\end{minipage}
+
+
+\vspace{.5cm}
+\begin{minipage}{.7\linewidth}
+\subsubsection*{LastUpdateComponent}
+
+\begin{description}
+\item[Tag] \texttt{<LastUpdate timestamp>}
+\item[Props] \mbox{} \\
+    \emph{timestamp} \mbox{} Date-Objekt, welches die Zeit der letzten Änderung enthält
+\item[Beschreibung] Nimmt ein Timestamp und gibt die Zeit seit dem Timestamp in
+        einem menschenlesbaren Format aus. 
+\end{description}
+\end{minipage}
+\begin{minipage}{.3\linewidth}
+    \begin{figure}[H]
+        \includegraphics[width=\textwidth]{assets/lastupdate.png}
+    \end{figure}
+\end{minipage}
+
+
+\vspace{.5cm}
+\begin{minipage}{.7\linewidth}
+\subsubsection*{HelpComponent}
+
+\begin{description}
+\item[Tag] \texttt{<Help>}
+\item[Beschreibung] Zeigt Hilfestellungen in einem Fenster an. Dieses kann über
+    die Navigationsleiste aufgerufen werden. 
+\end{description}
+\end{minipage}
+\begin{minipage}{.3\linewidth}
+    \begin{figure}[H]
+        \includegraphics[width=\textwidth]{assets/help.png}
+    \end{figure}
+\end{minipage}
+
+
+\vspace{.5cm}
+\begin{minipage}{.7\linewidth}
+\subsubsection*{NavbarComponent}
+
+\begin{description}
+\item[Tag] \texttt{<Navbar>}
+\item[Beschreibung] Enthält route-links zu im vue-router definierten Pfaden. 
+\end{description}
+\end{minipage}
+\begin{minipage}{.3\linewidth}
+    \begin{figure}[H]
+        \fbox{\includegraphics[width=\textwidth]{assets/navbar.png}}
+    \end{figure}
+\end{minipage}
+
+
+\vspace{.5cm}
+\begin{minipage}{.7\linewidth}
+\subsubsection*{PasswordValidatorComponent}
+
+\begin{description}
+\item[Tag] \texttt{<Password>}
+\item[Beschreibung] Überprüft ob der eingegebene Text die Bedingungen für ein
+    sicheres Passwort erfüllt. 
+\end{description}
+\end{minipage}
+\begin{minipage}{.3\linewidth}
+    \begin{figure}[H]
+        \includegraphics[width=\textwidth]{assets/password-margin.png}
+    \end{figure}
+\end{minipage}
+