proj/Frontend/erklaerung.md

Frontend Erklärung (für Einsteiger)

Dieses Dokument erklärt die Logik und Struktur des Frontends. Es basiert auf Next.js (einem React Framework) und TypeScript.

1. Grundkonzept: Komponenten

Die gesamte Anwendung besteht aus kleinen, wiederverwendbaren Bausteinen, sogenannten Komponenten. Stell dir das wie Lego vor: Ein "Knopf" ist ein Stein, ein "Formular" ist eine kleine Platte aus Steinen, und die "Seite" ist das fertige Haus.

Warum?

• Übersichtlichkeit: Man muss nicht 1000 Zeilen Code auf einmal verstehen, sondern nur kleine Teile.
• Wiederverwendbarkeit: Ein Knopf wird einmal programmiert und überall benutzt.

2. Der Startpunkt: layout.tsx und page.tsx

app/layout.tsx (Der Rahmen)

Dies ist die "Hülle" um jede Seite.

• Hier wird HTML, Body und CSS geladen.
• Wichtig: Hier sitzt der NextAuthSessionProvider. Das ist wie ein unsichtbarer "Rucksack", der die Login-Informationen (Session) trägt und sie überall in der App verfügbar macht.

app/page.tsx (Der Inhalt)

Dies ist die Startseite. Sie entscheidet, was angezeigt wird:

1. Nicht eingeloggt? -> Zeige den Login-Screen (AuthScreen).
2. Eingeloggt als Lehrer? -> Zeige das Lehrer-Dashboard.
3. Eingeloggt als Raumbetreuer? -> Zeige das Betreuer-Dashboard.

Warum? So haben wir eine einzige URL (Startseite), die sich aber intelligent an den Nutzer anpasst ("Conditional Rendering").

3. Das Gehirn der App: lib/auth-context.tsx

Hier liegt die wichtigste Logik. Wir nutzen einen React Context. Normalerweise müsstest du Daten (z.B. "Wer ist eingeloggt?") von oben nach unten durch alle Komponenten durchreichen ("Prop Drilling"). Das ist mühsam. Der Context ist wie ein globaler Speicher, auf den jede Komponente direkt zugreifen kann.

Was passiert hier?

• Zustand (State): Hier merken wir uns:
  • user: Wer ist gerade da?
  • tickets: Liste aller Tickets.
  • rooms: Liste aller Räume.
• Aktionen: Hier liegen die Funktionen wie login(), createTicket(), updateTicketStatus().
  • Diese Funktionen sprechen mit dem Backend (dem Server) über fetch.

Beispiel: Wenn du auf "Ticket erstellen" klickst, ruft die Komponente createTicket() im Context auf. Der Context sendet die Daten an den Server und lädt danach die Ticketliste neu (fetchTickets). Alle Komponenten, die die Ticketliste anzeigen, aktualisieren sich dann automatisch.

4. Die Verbindung zum Backend: Authentifizierung

Wir nutzen NextAuth.js.

• Frontend: Wenn du dich einloggst, schicken wir Benutzername/Passwort an NextAuth.
• Backend (Java): Unser Backend prüft die Daten und gibt einen "Token" (Ausweis) zurück.
• Session: NextAuth speichert diesen "Ausweis" sicher. Bei jeder Anfrage an den Server (z.B. "Lade Tickets") zeigen wir diesen Ausweis vor (Authorization Header).

5. Warum TypeScript?

TypeScript ist JavaScript mit "Typen". Statt einfach eine Variable data zu haben (wo alles drin sein könnte: Text, Zahl, oder nichts), definieren wir genau: interface Ticket { id: number; title: string; status: 'OPEN' | 'CLOSED'; }

Warum?

• Fehlerschutz: Wenn du versuchst, einem Ticket einen Namen statt einer ID zu geben, unterstreicht TypeScript das rot – bevor du das Programm überhaupt startest.
• Autovervollständigung: Der Code-Editor weiß genau, welche Eigenschaften ein Ticket hat und schlägt sie dir vor. Das macht das Programmieren viel schneller und sicherer.

Zusammenfassung

1. Der Nutzer öffnet die Seite (page.tsx).
2. Der AuthContext prüft: "Kenne ich dich?".
3. Nein? -> Login Formular.
4. Ja? -> Dashboard anzeigen.
5. Das Dashboard holt sich Daten (Tickets) aus dem AuthContext.
6. Der AuthContext hat die Daten vorher vom Server geladen.