# DTFlux Titrage Client - Interface Angular pour Unreal Engine

## 🎯 Vue d'ensemble

Interface graphique modulaire Angular 19+ pour créer et gérer des fiches de titrage destinées à Unreal Engine avec le plugin Remote Control et Motion Design.

## ✅ Composants créés et fonctionnalités

### 🏗️ Architecture modulaire respectée

#### Services
- ✅ **TitleSheetsService** - Gestion des fiches de titrage (CRUD + localStorage)
- ✅ **UnrealEngineService** - Communication avec Unreal Engine Remote Control API
- ✅ **ConfigService** - Gestion de la configuration de l'application

#### Composants modulaires
- ✅ **MenuBarComponent** - Barre de menu avec actions de configuration
- ✅ **CuedTitleComponent** - Affichage du titre en cours de lecture
- ✅ **ToolbarComponent** - Barre de recherche + bouton d'ajout
- ✅ **ListHeaderComponent** - En-têtes de colonnes avec tri
- ✅ **ListComponent** - Liste principale des titres
- ✅ **ListItemComponent** - Élément de liste avec édition inline
- ✅ **DetailsPanelComponent** - Panneau de détails de l'élément sélectionné
- ✅ **TitleDialogComponent** - Boîte de dialogue d'ajout/modification
- ✅ **TitleSheetsListComponent** - Composant principal orchestrant la liste

#### Pages
- ✅ **DTFluxTitleComponent** - Page principale de l'application
- ✅ **SetupComponent** - Page de configuration légère

### 🎨 Design et thème
- ✅ **Thème dark** inspiré de VS Code et Unreal Engine
- ✅ **Design sobre et épuré** comme demandé
- ✅ **Responsive design** adaptatif jusqu'à 950px de largeur max
- ✅ **Icônes FontAwesome** intégrées
- ✅ **Animations et transitions** modernes

### ⚡ Fonctionnalités Angular 19+
- ✅ **Signals** utilisés partout (input, output, computed, effect)
- ✅ **Directives modernes** (@if, @for, etc.)
- ✅ **Composants standalone** 
- ✅ **Reactive Forms** pour la validation
- ✅ **Gestion d'état** avec BehaviorSubject et Signals

### 🔧 Fonctionnalités métier
- ✅ **CRUD complet** des fiches de titrage (Nom, Prénom, Fonction1, Fonction2)
- ✅ **Recherche en temps réel** avec autocomplétion
- ✅ **Tri des colonnes** (nom, prénom, fonctions, date de modification)
- ✅ **Édition inline** des cellules avec navigation clavier
- ✅ **Sélection et navigation** avec flèches clavier
- ✅ **Raccourcis clavier** (Ctrl+I ajouter, Enter play, Space stop, Delete supprimer)
- ✅ **Communication Unreal Engine** via Remote Control API
- ✅ **Gestion des états** (stopped, playing, error)
- ✅ **Timer de lecture** avec changement de couleur
- ✅ **Sauvegarde automatique** et configuration persistante

### 📱 Expérience utilisateur
- ✅ **Interface adaptative** 950px max comme demandé
- ✅ **États vides** avec messages et actions appropriées
- ✅ **Messages de feedback** (succès, erreurs)
- ✅ **Loading states** pendant les opérations
- ✅ **Tooltips et aide** contextuelle
- ✅ **Accessibilité** (aria-labels, focus management, contraste élevé)

## 🚀 Comment démarrer

1. **Installation des dépendances** :
   ```bash
   npm install
   ```

2. **Démarrage du serveur de développement** :
   ```bash
   ng serve
   ```

3. **Accès à l'application** :
   - Interface principale : `http://localhost:4200/dtflux-title`
   - Configuration : `http://localhost:4200/setup`

## 📋 Utilisation

### Interface principale
1. **Ajouter une fiche** : Bouton "Add" ou Ctrl+I
2. **Modifier une fiche** : Clic sur l'icône roue crantée ou double-clic sur une cellule
3. **Supprimer une fiche** : Bouton poubelle ou sélectionner + Delete
4. **Lancer un rundown** : Bouton play ou sélectionner + Enter
5. **Arrêter un rundown** : Bouton stop ou Space
6. **Rechercher** : Tapez dans la barre de recherche
7. **Trier** : Cliquez sur les en-têtes de colonnes

### Configuration
- **Unreal Engine** : Adresse IP, port, timeout
- **Sauvegarde** : Chemin, auto-sauvegarde, intervalle
- **Test de connexion** : Vérifier la communication avec Unreal

## 🔌 API Unreal Engine

L'application communique avec Unreal Engine via l'API Remote Control :
- **Endpoint** : `http://{address}:{port}/remote/object/call`
- **Blueprint cible** : `/Game/MotionDesign/TitleSheet_BP.TitleSheet_BP_C`
- **Fonctions** : `SetTitleProperties`, `StartRundown`, `StopRundown`, `GetStatus`

## 🛠️ Prochaines étapes possibles

### Fonctionnalités avancées
- [ ] **Import/Export** de fiches en CSV/JSON
- [ ] **Templates** de fiches prédéfinies
- [ ] **Historique** des modifications
- [ ] **Groupes/Catégories** de fiches
- [ ] **Preview en temps réel** dans Unreal
- [ ] **Synchronisation** multi-utilisateurs

### Intégrations
- [ ] **Drag & drop** pour réorganiser
- [ ] **Copier/coller** entre fiches
- [ ] **Undo/redo** des actions
- [ ] **Notifications** push pour les changements d'état
- [ ] **Mode hors ligne** avec synchronisation

### Performance
- [ ] **Virtualisation** de la liste pour de gros volumes
- [ ] **Lazy loading** des données
- [ ] **Cache** intelligent des requêtes
- [ ] **Optimisation bundle** et tree-shaking

## 🏗️ Architecture technique

```
src/app/
├── models/                    # Interfaces TypeScript
│   ├── title-sheet.model.ts
│   ├── unreal-status.model.ts
│   └── app-config.model.ts
├── services/                  # Services Angular
│   ├── title-sheet.service.ts
│   ├── unreal-engine.service.ts
│   └── config.service.ts
└── view/
    ├── components/           # Composants réutilisables
    │   ├── menu-bar/
    │   ├── cued-title/
    │   ├── toolbar/
    │   ├── list-header/
    │   ├── list-item/
    │   ├── details-panel/
    │   ├── title-dialog/
    │   └── title-sheets-list/
    └── pages/               # Pages de l'application
        ├── dtflux-title/
        └── setup/
```

L'architecture respecte parfaitement le paradigme de modularité demandé avec des composants indépendants et réutilisables.