# TerraFlow Admin Notification System

Ein einheitliches Toast-Notification System für die TerraFlow CMS Administration, inspiriert vom Shopware 6 Design.

## Übersicht

Das Notification-System ersetzt alle bisherigen Notification-Implementierungen und bietet eine konsistente Benutzererfahrung im gesamten Admin-Bereich.

## Installation

Das System wird automatisch in `templates/administration/base.html.twig` geladen:

```html
<script src="/js/admin/notifications.js"></script>
```

## Grundlegende Verwendung

### 1. Einfache Notifications

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

// Fehler
window.adminNotifications.error('Fehler aufgetreten');

// Warnung
window.adminNotifications.warning('Warnung');

// Information
window.adminNotifications.info('Information');
```

### 2. Mit Nachricht

```javascript
window.adminNotifications.success(
    'Gespeichert', 
    'Daten wurden erfolgreich aktualisiert'
);
```

### 3. Mit Optionen

```javascript
window.adminNotifications.success('Gespeichert', 'Daten aktualisiert', {
    duration: 3000,           // Anzeigedauer in ms
    persistent: true,         // Bleibt bis manuell geschlossen
    showProgress: false,      // Keine Fortschrittsbalken
    animation: 'bounce'       // Animation
});
```

### 4. Mit Aktionen

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

### 5. Hotkey Notifications

```javascript
window.adminNotifications.hotkey('Neue Seite erstellt', 'ALT+N');
```

## Globale Shortcuts

Für einfache Verwendung stehen globale Funktionen zur Verfügung:

```javascript
showSuccess('Erfolgreich');
showError('Fehler');
showWarning('Warnung');
showInfo('Info');
showHotkey('Aktion', 'ALT+K');
```

## Optionen

| Option | Typ | Standard | Beschreibung |
|--------|-----|----------|--------------|
| `duration` | number | 5000 | Anzeigedauer in Millisekunden |
| `persistent` | boolean | false | Bleibt bis manuell geschlossen |
| `showProgress` | boolean | true | Zeigt Fortschrittsbalken |
| `animation` | string | - | Animation (bounce, shake, etc.) |
| `actions` | array | - | Array von Aktionen/Buttons |
| `hotkey` | string | - | Anzuzeigender Hotkey |

## Aktionen

Aktionen sind Buttons, die in der Notification angezeigt werden:

```javascript
{
    key: 'unique_key',           // Eindeutiger Schlüssel
    label: 'Button Text',        // Angezeigter Text
    callback: () => {},          // Callback-Funktion
    class: 'custom-class'        // CSS-Klasse (optional)
}
```

## Automatische Integration

### Formulare

Das System erkennt automatisch Formular-Submits und zeigt Loading-States an.

### AJAX-Requests

Das System überwacht Fetch-Requests und kann automatisch Notifications basierend auf Server-Headers anzeigen:

```php
// Im Controller
$response = new JsonResponse($data);
$response->headers->set('X-Notification-Type', 'success');
$response->headers->set('X-Notification-Title', 'Gespeichert');
$response->headers->set('X-Notification-Message', 'Daten aktualisiert');
return $response;
```

## Styling

Das System verwendet CSS-Variablen für einfache Anpassung:

```css
:root {
    --notification-color: #3b82f6;  /* Standard-Farbe */
}

.admin-notification.success {
    --notification-color: #10b981;  /* Erfolg-Farbe */
}

.admin-notification.error {
    --notification-color: #ef4444;  /* Fehler-Farbe */
}
```

## Migration von altem System

### Vorher (altes System)
```javascript
showSuccess('Erfolgreich gespeichert');
showError('Fehler aufgetreten');
```

### Nachher (neues System)
```javascript
window.adminNotifications.success('Erfolgreich gespeichert');
window.adminNotifications.error('Fehler aufgetreten');
```

Oder mit globalen Shortcuts (bleiben gleich):
```javascript
showSuccess('Erfolgreich gespeichert');
showError('Fehler aufgetreten');
```

## Features

- ✅ Automatisches Ausblenden nach 5 Sekunden (konfigurierbar)
- ✅ Fortschrittsbalken
- ✅ Verschiedene Animationen
- ✅ Mobile Responsive
- ✅ Dark Mode Support
- ✅ Aktionen/Buttons
- ✅ Hotkey Anzeige
- ✅ Automatische Form-Integration
- ✅ AJAX-Integration
- ✅ Maximale Anzahl von 5 gleichzeitigen Notifications
- ✅ Einheitliches Design im gesamten Admin-Bereich

## Browser-Support

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## Bekannte Probleme

- Keine bekannten Probleme

## Changelog

### v1.0.0
- Initiale Version
- Einheitliches Design
- Ersetzt alle alten Notification-Systeme
- Vollständige Dokumentation