Die für die Webseite notwendigen Dateien liegen im "public" Ordner. Innerhalb von diesem sind die einzelnen Seiten in respektive Unterordner sortiert damit eine übersichtliche Struktur herrscht. In einem solchen Unterordner befinden sich jeweils eine html, css und javascript datei speziell für die jeweilige Seite. Zusätzlich zu diesen existieren im "public" Ordner globale .css und .js Dateien, welche auf allen/den meisten Seiten eingebunden werden, mit dem ziel Redundanzen zu vermeiden.

• Account: Anmelde-Maske
• Admin: Seite zum hinzufügen von Inhalten durch den Administrator der Seite
• Booking: Ticketbuchung
• Confirmation: Buchungsbestätigung
• Icons: verwendete Icons, svg, png
• Index: Startseite unserer Website, wichtige Filme im Rondell, andere nach Kategorie sortiert
• Info: Allgemeine Informationen zu unserem Kino
• Movie: Informationen zu einem Film
• Search: Filmsuche
• Snippets: Grundgerüst für den Aufbau einer Seite
• User: Profilseite
• Global.js: Öfter verwendete Methoden
• Global.css: Grunddesign + öfter verwendete Designs

Neben der erwähnten Unterordner-"public"-Struktur für css und js, existiert ein zusätzlicher Ordner "snippets" in dem html Ausschnitte gelagert sind, welche auf den anderen Seiten importiert werden. Dazu zählen beispielsweise die NavigationBar und der Header, welche auf allen Seiten existieren und zur Vermeidung von Redundanz in "snippets" ausgelagert sind.

Bei den inhaltlichen Container, welche Content aus dem Backend beziehen, existiert zunächst lediglich ein Placeholder-Element, dessen Content "onLoad" dynamisch mit Hilfe der Backend-Funktionen geladen und in dynamisch kreierten Elementen angezeigt wird.
Bis alle Inhalte einer Seite dynamisch geladen sind wird eine Ladeanimation gezeigt.

Die verwendeten Design Farben sind als Variablen in der global.css gespeichert, damit ein einheitliches Farbschema und einfache Bearbeitung erfolgen kann. "Zusätzlich ermöglicht es das einfache Verwenden von verschiedenen "Themes" welche lediglich die Werte der Variablen verändern müssen."

Eine Seite ist in Reihen und Spalten aufgeteilt. Dabei hat eine Reihe 16 Spalten, die beliebig verknüpft werden können.

<div class="row">
   <div class="col-2"></div>
   <div class="col-14"></div>
</div>
<div class="row">
   <div class="col-2"></div>
   <div class="col-7"></div>
   <div class="col-7"></div>
</div>

Die Account Login-In Seite bietet eine Anmelde-Maske für den Login mit einer klassischen Username Password Kombo. Zusätzlich besteht die Option über den Button "Google" ein Anmeldefenster mit der Google API zu öffnen und sich über dieses anzumelden.
Beim Aufrufen der Seite wird geprüft, ob man bereits angemeldet ist, mit Hilfe des firebase.auth().currentUser Objektes, falls ja wird man direkt auf die User-Page weitergeleitet.

• addMovie()
• getAllMovies()
• getAllHalls()
• getAllRowTypes()
• getMovieById()
• getScreeningsOfById()
• updateScreening()
• updateMovie()
• addScreening()
• addHall()
• promoteUserToAdminById()
• degradeAdminToUserById()
  Backend-Dependency : 12

Mithilfe des "Search" Feldes wird ein Search-Request an die tmdb Datenbank geschickt und der Film mit der höchsten Relevanz in die Eingabe Felder geladen (diese können auch manuell bearbeitet werden). Bei betätigen des "Add Movie" Buttons werden die Eingabe-Felder als Parameter für die addMovie() Funktion genommen und diese aufgerufen.

Beim Wechsel auf den Edit Movie Reiter werden zunächst die Dropdown Menus geladen; Dafür werden die Funktionen getAllMovies(), getAllHalls() und getAllRowTypes() aufgerufen. Die Dropdown Menus zeigen den Namen an und laden bei Auswahl die korrespondierende ID in das entsprechende Eingabe-Feld.
Bei Auswahl eines Movies im Dropdown oder manueller Eingabe einer MovieID wird getMovieById() aufgerufen und die erhaltenen Informationen zur Bearbeitung in die Input Felder geschrieben. Zusätzlich wird getScreeningsOfById() mit der MovieID aufgerufen und die erhaltenen Screenings in der Tabelle dargestellt.
Mithilfe des Update Buttons direkt über der Tabelle können einzelne Screenings bearbeitet und upgedated werden, dafür wird die updateScreening() Methode aufgerufen. Mit den Eingabe Feldern über denen zur Bearbeitung können neue Screenings angelegt werde. Besonders interessant sind dabei Repetition und Increment welche die Wiederholungsanzahl und zeitlichen Abstand zwischen den Wiederholungen definieren. Durch betätigen des "ADD" Buttons werden die neuen Screening mit Hilfe der addScreening() Methode angelegt.
Unabhängig von den Screening können natürlich auch die Informationen des Movies bearbeitet werden mit den oberen Eingabe Feldern. Nach zufriedenstellender Bearbeitung kann mit dem "Update" Button die updateMovie() Methode aufgerufen werden um die Änderungen zu speichern. Movie Cover werden direkt in die Bilder Datenbank geschrieben und bekommen als Namen die ID des Movies, so dass dieser sein Cover zuverlässig als Referenz speichern kann.

Im Reiter Add Hall kann ein neuer Saal angelegt werden. Dafür muss eine feste Breite definiert werden und eine beliebig lange Liste von Reihen mit einem bestimmten Sitz-Typen. Zur Vereinfachung können Reihen direkt im "Bulk" erzeugt werden durch "Count". Die Liste am rechten Rand zeigt die aktuelle Liste an Reihen und bietet die Option die letzte Reihe wieder zu löschen. Mithilfe von Preview lässt sich eine Vorschau des Saal generieren. Nach Eingabe aller Informationen kann mit dem "ADD Hall" Button die addHall() Methode aufgerufen und der Saal erstellt werden.

In diesem Reiter muss eine UserID spezifiziert werden für den User der Bearbeitet werden soll. (Diese kann man nur aus dem BackEnd auslesen)
Durch "Promote User to Admin" und "Degrade Admin to User" wird respektiv promoteUserToAdminById() und degradeAdminToUserById() aufgerufen welche Admin Privilegien hinzufügt bzw. wieder entfernt.

Die Booking-Page besteht aus den drei verschiedenen Sektionen (Drop-Down-Menüs) Platzauswahl, Zahlung, Zusammenfassung. Auf dieser Seite wird die Buchung eines Tickets durchgeführt, weshalb hier am meisten Logik hinter steckt.

• In der Sektion Platzauswahl soll zu Beginn der Buchung ein Platz oder mehrere Plätze ausgewählt werden. Dazu befindet sich über der eigentlichen Platzauswahl eine Legende in welchem Status ein Sitz ist und was der jeweilige Sitz für ein Typ ist.
• In der Sektion Zahlung werden persönliche Bestelldaten des Users angegeben. Im Idealfall soll durch die Anmeldung über Google Punkte wie die Rechnungsadresse oder Zahlungsinformationen vordefiniert sein. Der User hat hier außerdem die Möglichkeit verschiedene Zahlungsmethoden bzw. andere Angaben zu machen.
• In der Sektion Zusammenfassung wird ein Preview eines Tickets dargestellt, welches an dieser Stelle noch keine Gültigkeit besitzt. Darauf abgebildet sind der Saal, die Reihe, der Sitz sowie die Vorstellungszeit. Als Endprodukt des Tickets soll der Benutzer ein solches Ticket mit einem QR-Code darauf erhalten. Außerdem wird in dieser Sektion eine Tabelle mit angegebenen persönlichen Daten gezeigt werden, die der Validierung der Angaben durch User dienen soll.

Die Legende der Platzauswahl ist fest in HTML geschrieben. Die Platzauswahl selber wird dynamisch mit JavaScript geladen. Dazu wird bei dem Aufruf der Seite die loadContent()-Methode aufgerufen.
Diese Methode ruft weitergehend die seatGeneration()-, die blockAlreadyBookedSeats()-, endLoading()- und loadCurrentUserData()-Methode auf.
Des Weiteren wird ein Weiter-Button angezeigt, der die jumpToZahlung()-Methode besitz, die den Bereich der Platzauswahl schließt und den Bereich der Zahlung öffnet (siehe Quellcode).

Die Buchung eines Sitzes ist nur von einer Person gleichzeitig möglich (Mutex-Implementation). Dazu haben wir aktuell 2 Möglichkeiten: Login mit Email und Passwort und Login mit Google
Bei der Anmeldung werden dabei die loginWithGoogle()- und die loginWithUserCredentials()-Methode verwendet. Die Rechnungsadresse sowie Zahlungsmethode sollte an dieser Stelle dann bereits ausgefüllt sein.
Des Weiteren kann man eine alternative Lieferadresse angeben oder die Zahlungsmethode zwischen vor Ort Bezahlung und Kreditkarte wechseln. Die jeweiligen Events bei der Auswahl der verschiedenen Radio-Buttons (Zahlungsmethode) bzw. der Auswahl der Check-Box (Lieferadresse) werden durch die pay()- bzw. otherAdr()-Methode definiert.
Die Rechnungsadresse ist im Gegensatz zur Lieferadresse und zur Zahlungsmethode (dynamisch) fest in HTML eingebettet. Durch den Klick auf den Next-Button bei Zahlung wird ein Form check ausgeführt, der überprüft, ob alle Felder ausgefüllt sind. Ist dies der Fall wird man zu Zusammenfassung weitergeleitet.

Die eingegebenen Daten werden zur Übersicht in eine Tabelle geladen. Zusätzlich zur Übersicht in der Tabelle wird eine Vorschau zu jedem Ticket der gebuchten Sitze erzeugt. Diese Vorschau ist im Design des funktionierenden Tickets mit Angaben wie Kinosaal, Reihe, Sitz, Vorstellungsdatum und Preis. Der einzige Unterschied zwischen Preview und funktionierendem Ticket liegt in der Anzeige des Covers. Beim funktioniereden Ticket (Confirmation-Page) wird ein gültiger QR-Code anstatt des Filmcovers gezeigt.

• getInformationOfCurrentUser();
• createTicket()
• getBookedSeatsByCreeningId()
• updateInformationOfCurrentUser()
  Backend-Dependency : 4

Funktionsbeschreibung: Die loadContent() FUnktion ist die erste Funktion die beim erreichen einer Seite ausgeführt wird. Sie fühlt mithilfe von, für die Funktionalität der Seite bereitgestellten Funktionen, die Seite mit Inhalten aus dem Backend oder fügt notwendige dynamische Funktionalitäten ein. Location: /everywhere/* Attributsbeschreibung: Die Funktion ist parameterlos

Funktionsbeschreibung: Die Funktion generiert dynamisch basierend auf Daten aus dem Backend die einzelnen Kinosäle als Grafisch interagierbare Einheiten. Location: /booking/* Attributsbeschreibung: Als Attribut erwartet die Funktion ein Objekt, welches der Response eines Fragments der Backendfunktion getScreeningsOfMovieByID() gleichzusetzen ist. Parameterobjekt:

hall: {
  data: {
    name: <hallName>
    rows: <rowInfos>
    width: <numberOfSeatsPerRow>
  }
  id: <hallId>
}

Während der Generation der einzelnen Sitze wird abgefragt, von welchem Typ ein Sitz ist. Ist ein Sitz beispielsweise vom Typ lodge so wird ein neues Element erstellt und dem Sitz zugewiesen. So erhalten verschiedene Sitze andere Designs.
Beispiel Typ lodge:

if(seat.classList.contains('lodge')) {
          var lodgDesin = document.createElement("img");
          lodgDesin.setAttribute("id", "seatDesign");
          lodgDesin.setAttribute("src", "../icons/jpg/krone.png");
          seat.appendChild(lodgDesin);
}

Dasselbe passiert für einen Sitz mit dem Typ withspecialneeds. Ist ein Sitz ganz normal und besitz den Standard-Preis so wird er ganz normal erstellt.

Funktionsbeschreibung: Die Funktion blockiert alle bereits von anderen Kunden gebuchten Sitze eines Kinosaals für den aktuellen Nutzer, als Interaktionsmöglichkeit. Location: /booking/* Attributsbeschreibung: Als Attribut erwartet die Funktion ein Objekt mit der Response der Backendfunktion getBookedSeatsByScreeningID().

Funktionsbeschreibung: Die Funktion prüft, ob ein User angemeldet ist. Ist der User angemeldet werden seine Daten in die Buchungsmaske geladen und ihm das buchen eines Tickets ermöglicht.
Ist der User nicht angemeldet, kann ehr im Buchungsprozess nicht weiter gehen

Funktionsbeschreibung: Diese Funktion generiert die HTML-Elemente für die Tabelle in Zusammenfassung, sowie deren Inhalt. Außerdem wird die Vorschau der Tickets im Bereich Zusammenfassung generiert, sofern alle benötigten Information angegeben wurden.

Funktionsbeschreibung: Diese Funktion generiert die Ticket Vorschau, indem alle nötigen HTML-Elemente erzeugt werden.

Funktionsbeschreibung: Diese Funktion überprüft zuerst ob ein Sitz bereits von einem anderen Kunden gebucht wurde und bucht dann die Tickets für den Kunden Location: /booking/*

Funktionsbeschreibung: Die Funktion vergleicht einen spezifischen Sitz mit denen bereits durch den User angeklickten Sitzen und gibt einen als Response einen true zurück wenn der übergebene Sitz einer der ausgewählten Sitze für die Buchung ist. Location: /booking/* Attributbeschreibung: Als Attribut erwartet die Funktion eine SitzId um den Vergliech durchführen zu können. Die ID ist die Summe aus Reihennummer + Sitznummer(Erste Reihe und erster Sitz jeder Reihe ist die 0).

Funktionsbeschreibung: Die Funktion überprüft ob die vom Kunden ausgewählten Sitze bereits durch einen anderen Kunden gebucht wurden. Location: /booking/* Attributbeschreibung: Als Attribut erwartet die Funktion ein Objekt, dass der Response der Backendfunktion getBookedSeatsByScreeningID() entspricht.

Funktionsbeschreibung: Die Funktion öffnet ein Fenster mit dem sich der Kunde mittels eines Googleaccounts anmelden kann. Location: /account/* Attributbeschreibung: Die Funktion ist parameterlos.

Funktionsbeschreibung: Die Funktion logt mittels auf der Seite angegebenen Daten(E-Mail und Passwort) den User in das Kinosystem ein. Location: /account/* Attributbeschreibung: Die Funktion ist parameterlos.

Die Confirmation-Seite ist für den Abschluss einer Ticketbestellung essentiell. Auf ihr werden alle gekauften Ticktes angezeigt und der Kunde die Möglichkeit diese als PDF sich herunterzuladen.

• Keine
  Backend-Dependency : 0

Funktionsbeschreibung: Die Funktion erstellt für jedes einzelne gebuchte Ticket einen eigenen QRCode.
Location: /confirmation/*
Parameterbeschreibung: Die Funktion erwartet keine Parameter.

Funktionsbeschreibung: Die Funktion erstellt für jedes einzelne gebuchte Ticket ein eigenes HTML Objekt, welche die Ticket physisch auf dem Bildschirm anzeigt.
Location: /confirmation/*
Parameterbeschreibung: Die Funktion erwartet keine Parameter.

Funktionsbeschreibung: Die Funktion erstellt ein HTML Objekt zur Visualisierung des Tickets.
Location: /confirmation/*
Parameterbeschreibung: Die FUnktion erwartet den Titel des Films als String, den Namen des Kinosaals als String, die Reihe als Integer, den Sitz als Integer, das Datum als fertig formatierten String und eine Value für den QRCode als String.

Funktionsbeschreibung: Die Funktion erstellt einen QRCode.
Location: /confirmation/*
Parameterbeschreibung: Die Funktion erwartet ein HTML Element, an das der QRCode angehangen werden soll und eine TextValue, welche als QRCode ausgedrückt werden soll als String.

Funktionsbeschreibung: Die Funktion erstellt die PDF mit den gebuchten Tickets und downloadet diese auf den Rechner des Clients.
Location: /confirmation/*
Parameterbeschreibung: Die Funktion erwartet keine Parameter.

Funktionsbeschreibung: Die Funktion konfiguriert ein PDF-Document auf Standardwerte, wie Schriftgröße, Schriftfarbe, etc.
Location: /confirmation/*
Parameterbeschreibung: Die Funktion erwartet eine PDF-Document als Parameter.

Funktionsbeschreibung: Die Funktion erzeugt ein PDF-Dokument mit den gebuchten Tickets als Inhalt.
Location: /confirmation/*
Parameterbeschreibung: Die Funktion erwartet keine Parameter.

Funktionsbeschreibung: Die Funktion fügt alle gebuchten Tickets in die PDF als Bilder ein.
Location: /confirmation/*
Parameterbeschreibung: Die Funktion erwartet das PDF-Dokuemnt, in welches die Bilder sollen, als Parameter.

Im Icons Ordner liegen die PNGs die wir für das Design unserer Seite benötigen. Dabei handelt es sich zum Beispiel um das Design unserer Sitze oder die Icons in unserem Menü.

Auf der Informations-Seite werden allgemeine Informationen zu den Betreibern (uns) und unserm Kino gegeben. Die Seite benötigt keine Backend Funktionen.
Der Standort unseres Kinos wird auf einer Google Maps Karte angezeigt. Diese Karte wurde als Iframe mit vordefinierten Koordinaten implementiert.

Die Movie-Seite ist für eine detaillierte Informationszufuhr über einen einzelnen Film gedacht. Des Weiteren werden auf ihr eine Liste von anstehenden Vorführungen für die nächsten sieben Tage, für den Film, angezeigt.

• getMovieById()
• getScreeningsOfMovieById()
  Backend-Dependency : 2

Funktionsbeschreibung: Die Funktion fügt aus dem Backend erhaltene Informationen, über die Vorführung eines Filmes, in ein speziel für den Tag der Vorführung bereitgestelltes Array ein.
Location: /movie/*
Attributbeschreibung: Die Funktion erwartet einen Tag als Integerwert(0/Sonntag bis 6/Samstag) und eine Referenz auf das Array.

Funktionsbeschreibung: Die Funktion fügt die einzelnen Vorstellung als auswählbare Buttons in einen Kalender auf der Seite ein.
Location: /movie/*
Attributbeschreibung: Die Funktion erwartet einen Tag als Integerwert(0/Sonntag bis 6/Samstag) und eine Referenz auf die Zeile der Kalendertabelle.

Funktionsbeschreibung: Die Funktion fügt die einzelnen Vorstellung für einen bestimmten Tag als auswählbare Buttons in einen Kalender auf der Seite ein.
Location: /movie/*
Attributbeschreibung: Die Funktion erwartet eine Referenz auf das Datenarray mit den Informationen und eine Referenz auf die Zeile der Kalendertabelle.

Funktionsbeschreibung: Die Funktion wird beim drücken des Buchenknopfs ausgeführt. Sie überprüft welche Vorstellung vom Kunden für die Buchung ausgewählt wurde und leitet diesen auf die dafür vorgesehene Buchungsseite weiter.
Location: /movie/*
Attributbeschreibung: Die Funktion ist parameterlos.

Funktionsbeschreibung: Die Funktion bekommt einen Minutenwert und gibt einem diesen als String zurück. Sollte der Minutenwert kleiner als 10 sein wird eine führende 0 eingefügt. Um das gängige Uhrenformat zu wahren.
Location: /movie/*
Attributbeschreibung: Die Funktion erwartet einen Minutenwert als Integer.

Die Search-Seite ist die Bibliothek des Kinosystems. Auf ihr werden alle im aktuellen Portfolio enthaltenen Filme angezeigt. Diese können entweder nach Name oder Rating sortiert werden. Desweiteren kann nach bestimmten Filmen gesucht, werden und direkt auf die detailliertere Informationen zurückgegriffen werden.

• getAllMovies()
  Backend-Dependency : 1

Funktionsbeschreibung: Die Funktion alle Filme in einen Container als HTML Objekt auf der Seite ein. Location: /search/*
Attributbeschreibung: Die Funktion erwartet keine Parameter.

Funktionsbeschreibung: Die Funktion speichert alle Daten über jeden einzelnen Film als Objekt in einen Chachespeicher. Location: /search/*
Attributbeschreibung: Die Funktion erwartet ein Objekt, welche jeden Film mit allen notwendigen Informationen enthält.

Funktionsbeschreibung: Die Funktion erzeugt ein HTML Objekt zur Visualisierung eines Films. Location: /search/*
Attributbeschreibung: Die Funktion erwartet eine Referenz auf das Filmlogo als String, den Titel des Films als String, die Bewertung als Zahl, die Id als String und die Position des Objektes in der Sortierreihenfolge als Zahl.

Funktionsbeschreibung: Die Funktion sortiert die Filme nach Namen und zeigt sie in der neuen Reihenfolge dem Kunden an. Wird die Funktion erneut ausgeführt sortiert die Funktion nach der umgekehrten Reihenfolge Location: /search/*
Attributbeschreibung: Die Funktion erwartet keine Parameter.

Funktionsbeschreibung: Die Funktion sortiert die Filme ihrer Bewertung und zeigt sie in der neuen Reihenfolge dem Kunden an. Wird die Funktion erneut ausgeführt sortiert die Funktion nach der umgekehrten Reihenfolge Location: /search/*
Attributbeschreibung: Die Funktion erwartet keine Parameter.

Funktionsbeschreibung: Die Funktion sucht, mit Hilfe eines von der Seite entnommenen Parameters, in dem gecachten Daten nach Namen, welche zu einem der Filme gehören könnte und zeigt das Ergebnis dem Kunden an. Location: /search/*
Attributbeschreibung: Die Funktion erwartet keine Parameter.

Funktionsbeschreibung: Die Funktion sucht, mit einem von einer anderen Quelle bereitgestellten Parameter, in dem gecachten Daten nach Namen, welche zu einem der Filme gehören könnte und zeigt das Ergebnis dem Kunden an. Location: /search/*
Attributbeschreibung: Die Funktion erwartet einen Präfix oder Sufix eines Filmtitels als String.

• getInformationOfCurrentUser()
• updateInformationOfCurrentUser()
• getTicketsOfCurrentUser()
• checkIfCurrentUserIsAdmin()

Beim Aufrufen der User Page wird getInformationOfCurrentUser() genutzt um die Information des aktiven User aus der Datenbank zu erhalten. Mit diesen werden die Informations-Felder und "Visitenkarte" befüllt.
Die Informationen können manuell bearbeitet werden und mit dem "Update" Button mithilfe der updateInformationOfCurrentUser() Methode in der Datenbank gespeichert werden.
Unter Tickets werden standardmäßig die letzten 5 gebuchten Tickets durch getTicketsOfCurrentUser() angezeigt; durch einen Klick auf "All" werden alle Tickets des Nutzer geladen (bis zu einem Limit von 99999).
Neben den normalen Funktionalitäten wird checkIfCurrentUserIsAdmin() aufgerufen um zu überprüfen ob der aktuelle Nutzer Adminrechte besitzt. Falls ja, wird ein Button angezeigt, welcher die Option bietet auf das Admin Interface zu wechseln.

In der global.js sind Methoden definiert die sich auf mehreren Seiten unserer Website wiederholen.

Die endLoading()-Methode ist eine Globale Methode die den Übergang zwischen laden der Seite und geladener Seite verwaltet. Dazu werden die entsprechenden Bereiche zu- bzw. aufgedeckt.

function endLoading(){
    document.getElementById("loading").hidden = true;
    document.getElementById("main").hidden = false;
}

Diese beiden Methoden sogen dafür, dass auf jeder Seite geprüft werden kann, ob der momentane User der Seite eingeloggt ist oder nicht. Sollte ein User eingeloggt sein so verändert sich die Farbe des Icons im Menü. Diese Farbveränderung soll dem user klarmachen, ob er tatsächlich noch eingeloggt ist.

In der Global.css Datei definieren wir uns Designs für das Grundgerüst unserer Website.
So fügen wir hier zum Beispiel Farb-Variablen für unsere Hauptfarben und Accentfarben hinzu. Des Weiteren werden die Eigenschaften bestimmter Bereiche, wie dem Main- oder Footer-Bereich und der NavigationsBar definiert.
In dieser Datei werden auch Media Queries gespeichert die für die Anpassung der Hauptelemente (Header, Nav-Bar, Footer, Main-Bereich) sorgen, sowie des Grundlegende Grid anpassen.
Ein weiteres Feature, die Ladeanimation, ist ebenso in der Global.css hinterlegt.