Functionnal UI

README.md

@@ -1,154 +1,2 @@
 # 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.