# Frontend


Es soll eine Webseite mit HTML, CSS und JavaScript erstellt werden. Die Webseite soll hierbei eine Finanzverwaltung mit doppelter Buchführung abbilden.

**Anforderungen:**

- **Inhalt:**
  - Es sind zwei Unterseiten vorzusehen:
    - Übersicht über alle Konten
    - Liste der Buchungen eines Kontos
  - Die Übersichtsseite enthält je Konto mindestens folgende Angaben:
    - Name des Kontos
    - Beschreibung des Kontos
    - Kontonummer
    - Aktuelle Summe

Die Konten sollen hierbei hierarchisch angeordnet werden (beispielsweise Aufwendungen mit den Unterkonten Miete, Lebensmittel und Semesterbeitrag).  
Die Übersicht soll nach Kontonummer sortiert sein.

- - Die Buchungsliste für ein Konto enthält je Buchung mindestens folgende Angaben:
        - Titel der Buchung
        - Betrag der Buchung auf dem Konto
        - Gegenkonto
- **Navigation:**
  - Zwischen Übersichtsseite und Buchungslisten soll eine Navigation über Hyperlinks möglich sein.
- **Struktur:**
  - Es gibt auf allen Seiten einen einheitlichen Header und Footer.
- **Stylesheets:**
  - CSS-Stylesheets sollen als separate Datei eingebunden werden
  - Für das Styling des Headers und Footers ist ein gemeinsames Stylesheet zu nutzen.
  - Die aktuelle Summe ist grün bei positiven, rot bei negativen und schwarz beim Betrag null zu formatieren.
  - Es werden keine CSS-Frameworks eingesetzt (Bootstrap o.Ä.)
  - Die Darstellung auf Smartphones und Desktop-Geräten soll sich unterscheiden (Responsive Design).
- **Schnittstelle:**
  - Für den Abruf der Daten soll die bereitgestellte API genutzt werden.
  - Unter der URL, die ihr im ersten Labor erhaltet, sind die Endpunkte der API mit OpenAPI dokumentiert und können dort auch getestet werden.
  - Liefert die Schnittstelle einen Fehler zurück, soll dieser angemessen behandelt werden (d.h. Anzeige einer für den Benutzer sichtbaren und verständlichen Fehlermeldung).
- **Bearbeitung:**
  - Buchungen sollen erstellt, bearbeitet und gelöscht werden können.
  - Konten sollen erstellt, bearbeitet und gelöscht werden können.
- **Mehrteilige Buchungen:**
  - Buchungen sollen auch so erstellt werden können, dass in einer  
        Buchung mehr als zwei Konten aufgeführt sind.
- **Gesamtbuchungsübersicht:**
  - Es ist eine zusätzliche Seite zu erstellen, welche die Buchungen  
        aller Konten enthält.
- **Sortieren und Filtern:**
  - Auf der Buchungsübersicht und der Gesamtbuchungsübersicht ist eine Sortier- und Filterfunktion zu implementieren.
  - Die Sortierung muss auf- und absteigend erfolgen können nach:
    - Buchungsdatum
    - Wertstellungsdatum
  - Die Filterung muss erfolgen können nach:
    - Datum oder Zeitraum (Datum von - bis) für
      - Buchungsdatum
      - Wertstellungsdatum
    - Titel der Buchung
      - case-insensitive (Groß-/Kleinschreibung ignorieren)
      - auch Teilausdrücke finden (beispielsweise soll "Brot" den Eintrag "Abendbrot für Sonntag" finden)
      - Der Filter soll direkt beim Tippen angewandt werden, ohne dass eine Bestätigung notwendig ist.
    - Betrag der Buchung (größer als .../kleiner als ...)

Sind mehrere Filter gleichzeitig aktiv, werden diese logisch und-verknüpft.

- - Standardmäßig sollen nur Buchungen des laufenden Kalenderjahres absteigend sortiert nach Buchungsdatum angezeigt werden.
- **Paginierung:**
  - Die Anzeige auf der Buchungsübersicht und der Gesamtbuchungsübersicht soll paginierbar sein, das heißt, es werden auf einer Seite nur eine bestimmte Menge (initial 10) an Buchungen angezeigt.
  - Die Seitengröße soll hierbei auf 10, 20, 50, 100 und „Alle“ einstellbar sein.
  - Sind weniger als 10 Einträge vorhanden, sollen die Einstellungen zur Paginierung (Seitenauswahl, Seitengröße) verborgen werden.
- **Echtzeitupdates:**
  - Die Anwendung soll Änderungen bei den Buchungen über SSE empfangen und in Echtzeit anzeigen. Hierfür dient der Endpunkt /live des Backends.