Skip to main content

Frontend

Verwendete Technologien​

Kotlin/JS​

Die gesamte Frontend-Anwendung ist in Kotlin geschrieben und wird über das Kotlin/JS-Target nach JavaScript kompiliert. Dadurch entsteht eine Single-Page-Application (SPA), die im Browser ausgeführt wird. Kotlin bringt dabei als statisch typisierte Sprache Vorteile wie Null-Safety, Data Classes und Coroutines mit.

Compose HTML​

Statt klassischer JS-Frameworks wie React oder Angular wird Compose HTML (Teil von JetBrains Compose Multiplatform) als UI-Framework verwendet. Es übersetzt das aus der Android-Welt bekannte deklarative Compose-Paradigma auf das Web:

  • @Composable-Funktionen beschreiben die UI-Struktur.
  • mutableStateOf / remember verwalten reaktiven State – Änderungen lösen automatisch ein Recompose der betroffenen UI-Abschnitte aus.
  • LaunchedEffect / DisposableEffect behandeln Seiteneffekte (z. B. API-Aufrufe oder Event-Listener).
  • HTML-Elemente werden über Kotlin-DSL-Wrapper wie Div, Span, Button, H1 etc. erzeugt.
  • Inline-Styles werden typsicher über die style { } DSL gesetzt (z. B. backgroundColor(colors.surface)).

Projektstruktur​

Tests (composeApp/src/jsTest/)​

In diesem Verzeichnis liegen die Unit-Tests, die auf kotlin-test basieren.

Frontend-Code (composeApp/src/jsMain/kotlin/)​

Einstiegspunkt (main.kt und App.kt)​

Die Funktion main() in main.kt ruft renderComposable(rootElementId = "root") auf und rendert die Root-Composable App() in das <div id="root">-Element der index.html. Die App-Composable enthält die zentrale Anwendungslogik: Sie prüft den Authentifizierungsstatus, verwaltet die aktuelle View als State und baut das Grund-Layout aus Sidebar und Content-Bereich auf.

Konfiguration (config/)​

  • ApplicationConfig – Stellt dem Frontend die Backend-URL bereit.
  • UiPreferences – Kapselt die Persistierung von UI-Einstellungen im LocalStorage des Browsers (Dark-/Light-Modus, gewählter Kalender-Anzeigemodus, ausgewählte Kalender).

Theming (theme/)​

  • AppTheme - Definiert das Farbsystem für die Anwendung (sowohl Light als auch Dark-Mode).
  • Views – Eine Enum-Klasse, die alle verfügbaren Seiten für die Seitenleiste mit Label, Material-Icon-Name und URL-Route definiert.
  • Sidebar – Die vertikale Seitenleiste, die die Navigationseinträge als Icon-Pill-Buttons rendert. Zusätzlich enthält sie einen Suche-Button, einen Theme-Toggle und einen Logout-Button.

API-Schicht (api/)​

Für die Backend-API-Kommunikation wird intern die Browser Fetch API (fetch()) verwendet.

  • api/auth/ – Enthält AuthApi (Login, Registrierung...) sowie die Datenklassen UserDto und LoginResponse. JWT-Token werden bei authentifizierten Requests als Authorization: Bearer <token> Header mitgesendet.
  • api/calendar/ – Enthält CalendarApi (Kalender-CRUD, Events laden, globale Suche, Suchhistorie).

Wiederverwendbare Komponenten (shared/composables/)​

View-übergreifende UI-Bausteine sind hier gebündelt:

  • Dialog – Stellt die Grundbausteine DialogOverlay (halbtransparenter Hintergrund mit Blur), DialogCard, DialogHeader und DialogActions (Abbrechen-/Bestätigen-Buttons) bereit.
  • EventDetailDialog – Zeigt die Detailansicht eines Kalenderevents in einem Dialog an.
  • EmptyState – Eine Platzhalter-Ansicht mit Icon und Beschreibungstext, die bei leeren Ergebnissen oder Fehlern angezeigt wird.
  • LoadingIndicator – Eine Lade-Animation, die während asynchroner Operationen eingeblendet wird.

Views (views/)​

Jede Seite der Anwendung besitzt ein eigenes Sub-Package:

  • views/auth/ – Die AuthView implementiert die Login- und Registrierungsseite.
  • views/calendar/ – Die Kalender-Hauptansicht mit mehreren Dateien:
    • CalendarView orchestriert das Laden der Kalender und Events, verwaltet den State und delegiert an die jeweilige Ansicht.
    • CalendarToolbar enthält die Steuerleiste mit Ansichtswechsel (Tag/Woche/Monat), Vor-/Zurück-Navigation, Heute-Button und Kalender-Filter-Dropdown.
    • CalendarDayView, CalendarWeekView und CalendarMonthView implementieren jeweils die entsprechende Kalender-Darstellung.
    • EventBlock rendert ein einzelnes Event als farbigen Block innerhalb der Kalenderansichten.
    • CalendarModels enthält UI-Hilfsmodelle und Datumsfunktionen.
  • views/settings/ – Die SettingsView bietet die Kalenderverwaltung (Hinzufügen, Löschen von Kalender-Abonnements). Unterstützt wird sie durch Komponenten im Unterordner components/ wie SettingsSection und CalendarManagement.
  • views/search/ – Der GlobalSearchDialog implementiert die globale Suche, die per Tastenkürzel (⌘K / Ctrl+K) geöffnet werden kann und Events über alle Kalender hinweg durchsucht.

Deployment​

Die Anwendung wird via GitLab CI/CD automatisiert als Docker-Image gebaut und auf dem Server deployt.