# Notification System - Praktische Beispiele

## Controller-Integration

### PHP Controller mit AJAX-Response

```php
<?php

namespace TerraFlow\Controller\Admin;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;

class UserController extends AbstractController
{
    #[Route('/admin/users/create', name: 'admin_users_create', methods: ['POST'])]
    public function createUser(Request $request): JsonResponse
    {
        try {
            // Benutzer erstellen
            $user = new User();
            $user->setName($request->request->get('name'));
            $user->setEmail($request->request->get('email'));
            
            $this->entityManager->persist($user);
            $this->entityManager->flush();
            
            // Erfolgs-Notification über Header
            $response = new JsonResponse(['success' => true]);
            $response->headers->set('X-Notification-Type', 'success');
            $response->headers->set('X-Notification-Title', 'Benutzer erstellt');
            $response->headers->set('X-Notification-Message', 'Der Benutzer wurde erfolgreich angelegt.');
            
            return $response;
            
        } catch (\Exception $e) {
            // Fehler-Notification
            $response = new JsonResponse(['success' => false, 'error' => $e->getMessage()]);
            $response->headers->set('X-Notification-Type', 'error');
            $response->headers->set('X-Notification-Title', 'Fehler');
            $response->headers->set('X-Notification-Message', 'Benutzer konnte nicht erstellt werden.');
            
            return $response;
        }
    }
}
```

### Twig Template mit JavaScript

```twig
{# templates/administration/users.html.twig #}

{% extends 'administration/base.html.twig' %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="admin-card p-4">
                <h2>Benutzer verwalten</h2>
                
                <form id="userForm" class="mt-4">
                    <div class="mb-3">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="email" class="form-label">E-Mail</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-person-plus"></i> Benutzer erstellen
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('userForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    try {
        const response = await fetch('/admin/users/create', {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        
        if (data.success) {
            // Erfolg wird automatisch über Header angezeigt
            this.reset();
        } else {
            // Fehler wird automatisch über Header angezeigt
        }
        
    } catch (error) {
        // Netzwerkfehler wird automatisch angezeigt
        console.error('Fehler:', error);
    }
});
</script>
{% endblock %}
```

## JavaScript Beispiele

### Einfache Benachrichtigungen

```javascript
// Erfolg
window.adminNotifications.success('Daten gespeichert');

// Fehler
window.adminNotifications.error('Speichern fehlgeschlagen');

// Warnung
window.adminNotifications.warning('Bitte überprüfen Sie Ihre Eingaben');

// Info
window.adminNotifications.info('System wird aktualisiert');
```

### Mit detaillierten Nachrichten

```javascript
window.adminNotifications.success(
    'Benutzer erstellt', 
    'Max Mustermann wurde erfolgreich angelegt und kann sich jetzt anmelden.'
);

window.adminNotifications.error(
    'Validierungsfehler', 
    'Die E-Mail-Adresse ist bereits vergeben. Bitte wählen Sie eine andere.'
);
```

### Mit Aktionen

```javascript
// Update-Benachrichtigung
window.adminNotifications.info('Update verfügbar', 'Version 2.1.0 ist verfügbar', {
    actions: [
        {
            key: 'update',
            label: 'Jetzt updaten',
            callback: () => {
                window.location.href = '/admin/system/update';
            }
        },
        {
            key: 'later',
            label: 'Später',
            class: 'notification-action secondary'
        }
    ],
    duration: 10000 // 10 Sekunden
});

// Backup-Benachrichtigung
window.adminNotifications.warning('Backup empfohlen', 'Erstellen Sie ein Backup vor dem Update', {
    actions: [
        {
            key: 'backup',
            label: 'Backup erstellen',
            callback: () => {
                fetch('/admin/system/backup', { method: 'POST' });
            }
        }
    ],
    persistent: true // Bleibt bis manuell geschlossen
});
```

### Hotkey-Benachrichtigungen

```javascript
// Im Hotkey-System
window.adminNotifications.hotkey('Neue Seite erstellt', 'ALT+N');

// Nach Tastenkombination
window.adminNotifications.hotkey('Cache geleert', 'ALT+C');
```

### Mit Animationen

```javascript
// Bounce-Animation für Erfolg
window.adminNotifications.success('Gespeichert', 'Daten aktualisiert', {
    animation: 'bounce'
});

// Ohne Animation
window.adminNotifications.info('Info', 'Wichtige Information', {
    animation: null
});
```

### Persistente Notifications

```javascript
// Bleibt bis manuell geschlossen
window.adminNotifications.warning('Wartungsmodus', 'Das System wird in 5 Minuten gewartet', {
    persistent: true
});

// Ohne Fortschrittsbalken
window.adminNotifications.info('Hinweis', 'Wichtige Information', {
    showProgress: false,
    duration: 8000
});
```

## Formular-Integration

### Automatische Form-Erkennung

```javascript
// Das System erkennt automatisch Formulare und zeigt Loading-States
document.getElementById('myForm').addEventListener('submit', function(e) {
    // Submit-Button wird automatisch deaktiviert und "Speichern..." angezeigt
    // Nach Response wird automatisch eine Notification angezeigt
});
```

### Manuelle Form-Behandlung

```javascript
document.getElementById('userForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    
    // Loading-State
    submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Speichern...';
    submitBtn.disabled = true;
    
    try {
        const response = await fetch('/admin/users/save', {
            method: 'POST',
            body: new FormData(this)
        });
        
        if (response.ok) {
            window.adminNotifications.success('Gespeichert', 'Benutzerdaten aktualisiert');
        } else {
            window.adminNotifications.error('Fehler', 'Speichern fehlgeschlagen');
        }
        
    } catch (error) {
        window.adminNotifications.error('Netzwerkfehler', 'Verbindung fehlgeschlagen');
    } finally {
        // Button zurücksetzen
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    }
});
```

## AJAX-Integration

### Fetch mit automatischer Notification

```javascript
// Erfolgreicher Request
const response = await fetch('/admin/api/data');
// Notification wird automatisch basierend auf Headers angezeigt

// Fehlerhafter Request
try {
    const response = await fetch('/admin/api/data');
} catch (error) {
    // Automatische Fehler-Notification
}
```

### Manuelle AJAX-Behandlung

```javascript
async function saveData(data) {
    const loadingId = window.adminNotifications.info('Speichern...', 'Bitte warten', {
        persistent: true
    });
    
    try {
        const response = await fetch('/admin/api/save', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });
        
        window.adminNotifications.hide(loadingId);
        
        if (response.ok) {
            window.adminNotifications.success('Gespeichert', 'Daten erfolgreich aktualisiert');
        } else {
            window.adminNotifications.error('Fehler', 'Speichern fehlgeschlagen');
        }
        
    } catch (error) {
        window.adminNotifications.hide(loadingId);
        window.adminNotifications.error('Netzwerkfehler', 'Verbindung fehlgeschlagen');
    }
}
```

## Best Practices

### 1. Konsistente Nachrichten

```javascript
// Gut
window.adminNotifications.success('Benutzer erstellt', 'Max Mustermann wurde angelegt');

// Schlecht
window.adminNotifications.success('OK', 'User added');
```

### 2. Angemessene Dauer

```javascript
// Kurze Nachrichten
window.adminNotifications.success('Gespeichert', '', { duration: 2000 });

// Wichtige Nachrichten
window.adminNotifications.warning('Wartungsmodus', 'System wird gewartet', { 
    duration: 8000 
});

// Kritische Nachrichten
window.adminNotifications.error('Fehler', 'Kritischer Systemfehler', { 
    persistent: true 
});
```

### 3. Sinnvolle Aktionen

```javascript
window.adminNotifications.info('Update verfügbar', 'Neue Version 2.1.0', {
    actions: [
        {
            key: 'update',
            label: 'Jetzt updaten',
            callback: () => window.location.href = '/admin/update'
        },
        {
            key: 'changelog',
            label: 'Changelog anzeigen',
            callback: () => window.open('/admin/changelog', '_blank')
        },
        {
            key: 'later',
            label: 'Später',
            class: 'notification-action secondary'
        }
    ]
});
```

### 4. Fehlerbehandlung

```javascript
async function handleApiCall() {
    try {
        const response = await fetch('/admin/api/data');
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        
        const data = await response.json();
        window.adminNotifications.success('Daten geladen', `${data.length} Einträge gefunden`);
        
    } catch (error) {
        console.error('API Error:', error);
        window.adminNotifications.error('Fehler', 'Daten konnten nicht geladen werden');
    }
}
```