71 lines
3.9 KiB
Markdown
71 lines
3.9 KiB
Markdown
# 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. |