\section{Benutzeroberfläche}

Die Synchronisation der \Glspl{podcast} soll über eine Weboberfläche verwalten werden.
Dazu wird eine \Gls{spa} erstellt. Diese kann durch ein
\Gls{responsive}-Design für Desktop- und Mobilgeräte nutzerfreundlich angezeigt
werden. 

Die Navigation erfolgt über eine Navigationsleiste, welche auf jeder
nutzerbezogenen Seite zu sehen ist. Über die Navigationsleiste können über
Knöpfe alle anderen nutzerbezogenen Seiten aufgerufen werden. Über ein
Dropdown-Menu werden Accounteinstellungen und ein Logout-Knopf sichtbar (siehe
Abbildung \ref{fig:listening-progress-account-dropdown}). Ein weiters
Dropdown-Menu erlaubt das Wechseln der Sprache (siehe Abbildung
\ref{fig:podcast-desktop-change-language}). Der ,,Hilfe''-Eintrag öffnet ein
Fenster mit Hilfestellungen (siehe Abbildung \ref{fig:help-desktop}). Durch das
\Gls{responsive}-Design kann die Navigations-Leiste auf Mobilgeräten sich zu
einem Burger-Menu zusammenklappen. 

Die Komponenten der Weboberfläche werden von einem Still-Framework, wie Bootstrap,
benutzt. 

% Übersichtlichkeit wichtig?

% Webanwendung
% Single-Page-Application
% Responsive
% Navigationsleiste
% Bootstrap

\subsection{Login}

Bei der erstmaligen Nutzung des Services wird der Nutzer aufgefordert, sich neu
für die \Gls{podcast}-Synchronisation zu registrieren. Dabei gibt der Nutzer seine
E-Mail und ein Passwort ein. Daraufhin wird dem Nutzer eine E-Mail mit einem
Bestätigungslink an seine E-Mail-Adresse versandt. Erst wenn der Link angeklickt
wird, ist der Account freigeschaltet und der Nutzer wird zur Anmeldeseite
weitergeleitet (siehe Abbildung \ref{fig:login-mobile}). 

Alternativ kann der Nutzer sich auch mit einem Identifikationsbereitsteller, wie
Google oder Facebook registrieren und anmelden. 

Zusätzlich kann der Nutzer beim Anmelden über eine Checkbox einstellen, dass
dieser angemeldet bleiben möchte, sodass sich dieser beim nächsten Aufruf der
Weboberfläche nicht erneut anmelden muss. 

Nach dem Anmelden wird der Nutzer zur \Gls{podcast}-Liste weitergeleitet. 

% Registrieren
% E-Mail und Passwort, E-Mail bestätigung

% anmelden mit E-Mail und Passwort oder es kann sich auch mit einem
% Identifikations-Bereitsteller (wie Google, Facebook, GitHub) angemeldet
% werden. 

% Angemeldet bleiben

% Anschließlich auf der Startseite

\subsection{Podcast-Liste}

Die Seite der \Gls{podcast}-Liste zeigt eine Liste aller vom Nutzer abonnierten
\Glspl{podcast}. Diese sind danach sortiert, welcher \Gls{podcast} zuletzt
gehört wurde (siehe Abbildung \ref{fig:podcast-desktop-change-language}). 

\Glspl{podcast} können aufgeklappt werden, um \Glspl{episode} inklusive deren Hörfortschritt
anzuzeigen. Die \Glspl{episode} werden nach Veröffentlichungszeitpunkt sortiert. 

% Navigatinsleiste
% Zeigt eine Liste aller vom Nutzer abonnierten Podcasts sortiert nach welcher
% Podcast zuletzt gehört wurde. 
% Podcasts können aufgeklappt werden, um Episoden inklusive deren Hörfortschritt
% anzuzueigen. Die Episoden werden nach Veröffentlichungszeitpunkt sortiert. 

\subsection{Zuletzt gehört}

Die Seite ,,Zuletzt gehört'' zeigt eine Liste der vom Nutzer gehörten
\Glspl{episode} inklusive Hörfortschritt (siehe Abbildung
\ref{fig:listening-progress-account-dropdown}). Die \Glspl{episode} sind danach
sortiert wann sie zuletzt gehört wurden. 

Zusätzlich können die beendeten und angefangenen \Glspl{episode} über ein
Dropdown-Menu auch auf- und absteigend lexikografisch oder nach Hörfortschritt
sortiert werden. 

% \newpage

\subsection{Einstellungen}

Auf der Einstellungsseite darf der Nutzer sein Passwort ändern und seinen
Account löschen (siehe Abbildung \ref{fig:settings-mobile-1}). 

Der Nutzer kann seine personenbezogenen Daten, wie abonnierte \Glspl{podcast} und
Hörfortschritte, in eine Datei exportieren, welche der Nutzer herunterladen
kann. Außerdem kann der Nutzer zuvor heruntergeladene Exports wieder
importieren, um zum Beispiel alte abonnierte \Glspl{podcast} wiederherzustellen. 

Zusätzlich kann der Nutzer seine Daten von einer anderen \Gls{gpodder} importieren,
indem er sich in den Einstellungen auf der anderen \Gls{gpodder} anmeldet. 

% Passwort ändern
% Account löschen
% Daten importieren/exportieren
% Daten anderer Gpodder-API importieren

% \vspace{1cm}

%===================================================================================%
% https://tex.stackexchange.com/questions/55337/how-to-use-figure-inside-a-minipage %
%===================================================================================%
\hspace{-.5cm}
\begin{minipage}[H]{\linewidth}
    %\centering
    \begin{minipage}{0.32\linewidth}
        \begin{figure}[H]
            \fbox{\includegraphics[width=.9\linewidth]{assets/ui/login-mobile.png}}
            \setcapindent*{1em}
            \caption{Anmeldeseite mit Identitätsbereitsteller\\}
            \label{fig:login-mobile}
        \end{figure}
    \end{minipage}
%    \hspace{0.05\linewidth}
    \begin{minipage}{0.32\linewidth}
        \begin{figure}[H]
            \fbox{\includegraphics[width=.9\linewidth]{assets/ui/podcasts-mobile.png}}
            \setcapindent*{1em}
            \caption{Mobile \Glspl{podcast}-Seite mit Burger-Menu\\}
            \label{fig:podcasts-mobile}
        \end{figure}
    \end{minipage}
%    \hspace{0.05\linewidth}
    \begin{minipage}{0.32\linewidth}
        \begin{figure}[H]
            \fbox{\includegraphics[width=.9\linewidth]{assets/ui/listening-progress-mobile.png}}
            \setcapindent*{1em}
            \caption{Mobile ,,Zuletzt gehört''-Seite mit offenem Burger-Menu}
            \label{fig:listening-progress-mobile}
        \end{figure}
    \end{minipage}
\end{minipage}

\begin{figure}[H]
    \centering
    \fbox{\includegraphics[width=.9\linewidth]{assets/ui/podcasts-desktop-change-language.png}}
    \caption{\Glspl{podcast}-Seite mit \Glspl{episode} und Sprachauswahl}
    \label{fig:podcast-desktop-change-language}
\end{figure}

\begin{figure}[H]
    \centering
    \fbox{\includegraphics[width=.9\linewidth]{assets/ui/listening-progess-account-dropdown.png}}
    \caption{,,Zuletzt gehört''-Seite mit Fortschrittsbalken und Account-Dropdown}
    \label{fig:listening-progress-account-dropdown}
\end{figure}

\begin{figure}[H]
    \centering
    \includegraphics[width=.87\linewidth]{assets/ui/help-desktop.png}
    \caption{Hilfe-Fenster, welches mit dem Menu-Eintrag ,,Hilfe'' geöffnet wird}
    \label{fig:help-desktop}
\end{figure}

\begin{minipage}[H]{.9\linewidth}
    \centering
    \begin{minipage}{.4\linewidth}
        \begin{figure}[H]
            \centering
            \fbox{\includegraphics[width=.8\linewidth]{assets/ui/settings-mobile-1.png}}
            \setcapindent*{1em}
            \caption{Einstellungen mit Ändern des Passworts und Gpodder-Verknüpfung}
            \label{fig:settings-mobile-1}
        \end{figure}%
    \end{minipage}
    \hspace{.5cm}
    \begin{minipage}{.4\linewidth}
        \begin{figure}[H]
            \fbox{\includegraphics[width=.8\linewidth]{assets/ui/settings-mobile-2.png}}
            \setcapindent*{1em}
            \caption{Einstellungen mit Datenexport und Accountlöschung\\}
            \label{fig:settings-mobile-2}
        \end{figure}
    \end{minipage}
\end{minipage}