115 lines
6.2 KiB
TeX
115 lines
6.2 KiB
TeX
\chapter{Web-Frontend}
|
|
\section{Technologiebeschreibung}
|
|
\subsection{Vue.js}
|
|
Vue.js ist ein Javascript Framework, welches den Aufbau von Frontend Anwendungen erleichtert. Ein Hauptmerkmal hierbei ist die Kapselung der einzelnen Elemente in Komponenten, welche ihren eigenen HTML, Javascript und CSS code enthalten. Eine Komponente kann mehrere andere Komponenten einbinden, sowie diesen Daten mitgeben. Eingebundene Komponenten können an die übergeordnete Komponente Daten senden.
|
|
\subsection{Vuetify}
|
|
Vuetify ist ein Designframework für Vue.js, dass viele Elemente wie Menüleisten, Buttons und Dialogfenster bereitstellt. Ein bekanntes äquivalentes Framwork ist Bootstrap. Das Designschema von Vuetify ist an Googles Material Design angelehnt. Nach Installation können die Elemente sehr einfach eingebunden und verwendet werden.
|
|
\section{Farbschema und Designsprache}
|
|
Wir haben uns für die, von Google entwickelte Designsprache, Material Design entschieden. Diese zeichnet sich durch ihre kartenartigen Flächen und dem Gestaltungsstil Flat Design aus. Verwendet werden auch viele Schatten um die materialistisch-physikalische Darstellung zu erzeugen.\\
|
|
In unserem eigens entwickelten Farbschema haben wir uns für ein dunkles Thema mit Blau als Hauptfarbe entschieden.
|
|
\begin{figure}[H]
|
|
\centering
|
|
\includegraphics[width=\linewidth/2]{img/frontend/color_sceme.png}
|
|
\caption{Farbschema}
|
|
\end{figure}
|
|
Unser Logo wurde im abgestimmten Farbschema umgesetzt und stellt die Kombination zwischen einer Stoppuhr und einem Kompass dar. So verbindet das Logo Zeit und Ort welche bei der Verwendung unseres Produkts eine wichtige Rolle spielen.
|
|
\begin{figure}[H]
|
|
\centering
|
|
\includegraphics[width=\linewidth/3]{img/frontend/logo_dark_gt.png}
|
|
\caption{Logo unserer Anwendung}
|
|
\end{figure}
|
|
|
|
|
|
\section{Umsetzung}
|
|
\subsection{Einarbeitung}
|
|
Zur Einarbeitung haben wir den Vue JS Crash Course von Traversy Media genutzt. Dieser ist auf Youtube zu finden: https://www.youtube.com/watch?v=Wy9q22isx3U&t=3007s
|
|
\subsection{Arbeit mit Dummy-Daten}
|
|
|
|
Simon
|
|
|
|
|
|
\subsection{Authentifizierung}
|
|
Wie schon im Backend beschrieben wurde, haben wir zur Authenfizierung JSON Web Token benutzt. Beim Login wurde das Token abgeholt und in den Sessionstorage geschrieben. Wir haben uns für den Sessionstorage entschieden, weil dieser beim Schließen des Browsertabs automatisch gelöscht. Der Logout Button entfernt ebenso das Token aus dem Storage.
|
|
\subsection{Abrufen der Daten in Listen}
|
|
Zum Abrufen der Daten nutzen wir XMLHttpRequests. Diese geben vom Backend ein JSON Objekt zurück. Dies ermöglicht es uns die JSON Funktionen von Java Script zu nutzen.
|
|
\begin{lstlisting}[language=JavaScript,caption=Get Request]
|
|
var xhttp = new XMLHttpRequest();
|
|
var today;
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
today = JSON.parse(xhttp.responseText);
|
|
today = today._embedded.records;
|
|
}
|
|
};
|
|
xhttp.open("GET", baseUri + "/records/search/today", false);
|
|
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
|
|
xhttp.send(null);
|
|
\end{lstlisting}
|
|
\subsection{Ändern und Hinzufügen von Daten}
|
|
Zum Ändern und Hinzufügen von Daten haben wir ebenfalls XMLHTTRequests genutzt. Zum Hinzufügen wurden Post Request gesendet, zum Ändern Patch Requests.
|
|
\begin{lstlisting}[language=JavaScript, caption=Post Request]
|
|
xhttp.open("Post", baseUri + path, false);
|
|
|
|
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
|
|
|
|
xhttp.send(JSONData);
|
|
\end{lstlisting}
|
|
\begin{lstlisting}[language=JavaScript, caption=Patch Request]
|
|
xhttp.open("PATCH", baseUri + path, false);
|
|
|
|
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
|
|
|
|
xhttp.send(JSONData);
|
|
\end{lstlisting}
|
|
\subsection{Auswertung in Diagrammen}
|
|
\subsection{Administrator Funktionalitäten}
|
|
Ein Administrator hat die Möglichkeit zur vollen Nutzerverwaltung. Er kann Nutzer löschen, und bearbeiten. Als Bearbeitungsmöglichkeiten hat er die Accountverwaltung von Nutzern, das Setzen der Arbeitslocation für einen Nutzer und das Ändern des Namens.
|
|
\section{Funktionen der Website}
|
|
\subsection{Home}
|
|
Die Home Seite hat zwei Ansichten. Wenn kein User angemeldet ist, sieht man lediglich einen Wilkommensgruß und die Möglichkeit sich anzumelden. Wenn man angemeldet ist, sieht man seine persönlichen Informationen, die einem zugeordnete Abeitslocation, die Tagesarbeitszeit und die eigenen Accounts.
|
|
\begin{figure}[H]
|
|
\centering
|
|
\includegraphics[width=\linewidth]{img/frontend/home.PNG}
|
|
\caption{Home eingeloggt}
|
|
\end{figure}
|
|
\begin{figure}[H]
|
|
\centering
|
|
\includegraphics[width=\linewidth]{img/frontend/HomeLoggedOut.PNG}
|
|
\caption{Home ausgeloggt}
|
|
\end{figure}
|
|
|
|
\subsection{Time Records}
|
|
Auf der Time Records Seite kann man die eigenen Arbeitszeiten einsehen. Außerdem hat man die Möglichkeit Fehlerhafte Einträge zu verbessern und neue Einträge zu erstellen.
|
|
\begin{figure}[H]
|
|
\centering
|
|
\includegraphics[width=\linewidth]{img/frontend/timerecords.PNG}
|
|
\caption{Time Records}
|
|
\end{figure}
|
|
|
|
\subsection{Statistics}
|
|
|
|
SIMON
|
|
|
|
\subsection{Accounts}
|
|
Die Accouts Seite bietet einem die Möglichkeit eigene Accounts einzusehen und zu verwalten. Man kann neue Accounts hinzufügen und bestehende Accounts löschen oder anpassen.
|
|
|
|
\begin{figure}[H]
|
|
\centering
|
|
\includegraphics[width=\linewidth]{img/frontend/accounts.PNG}
|
|
\caption{Accounts}
|
|
\end{figure}
|
|
|
|
\subsection{Admin}
|
|
Die Admin Seite bietet einem die Möglichkeiten, welche in 5.3.7 beschrieben werden. Um die einzelnen Verwaltungsmöglichkeiten zu sehen, reicht es über den Stift zu hovern. Das linke Zeichen (rote Mülltonne) löscht den jeweiligen Nutzer, das mittlere (grün) Ist zum Ändern der Nutzerinformationen und der Position der Arbeitsstelle. Das rechte Zeichen (blau) führt einen zur Accountverwaltung für den jeweiligen Nutzer.
|
|
\begin{figure}[H]
|
|
\centering
|
|
\includegraphics[width=\linewidth]{img/frontend/admin.PNG}
|
|
\caption{Admin}
|
|
\end{figure}
|
|
\begin{figure}[H]
|
|
\centering
|
|
\includegraphics[width=\linewidth/2]{img/frontend/verwaltung.PNG}
|
|
\caption{Nutzer Verwaltung}
|
|
\end{figure}
|
|
\subsection{Probleme und Lösungen}
|
|
\section{Deployment} |