Graphical App Completed. Somme UI bugs must be adapted
This commit is contained in:
201
README.md
201
README.md
@ -1,59 +1,154 @@
|
|||||||
# DTFluxTitrageClient
|
# DTFlux Titrage Client - Interface Angular pour Unreal Engine
|
||||||
|
|
||||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
|
## 🎯 Vue d'ensemble
|
||||||
|
|
||||||
## Development server
|
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.
|
||||||
|
|
||||||
To start a local development server, run:
|
## ✅ Composants créés et fonctionnalités
|
||||||
|
|
||||||
```bash
|
### 🏗️ Architecture modulaire respectée
|
||||||
ng serve
|
|
||||||
|
#### 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/
|
||||||
```
|
```
|
||||||
|
|
||||||
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
L'architecture respecte parfaitement le paradigme de modularité demandé avec des composants indépendants et réutilisables.
|
||||||
|
|
||||||
## Code scaffolding
|
|
||||||
|
|
||||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
ng generate component component-name
|
|
||||||
```
|
|
||||||
|
|
||||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
ng generate --help
|
|
||||||
```
|
|
||||||
|
|
||||||
## Building
|
|
||||||
|
|
||||||
To build the project run:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
ng build
|
|
||||||
```
|
|
||||||
|
|
||||||
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
|
|
||||||
|
|
||||||
## Running unit tests
|
|
||||||
|
|
||||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
ng test
|
|
||||||
```
|
|
||||||
|
|
||||||
## Running end-to-end tests
|
|
||||||
|
|
||||||
For end-to-end (e2e) testing, run:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
ng e2e
|
|
||||||
```
|
|
||||||
|
|
||||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
||||||
|
|
||||||
## Additional Resources
|
|
||||||
|
|
||||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import { Routes } from '@angular/router';
|
import { Routes } from '@angular/router';
|
||||||
import { DTFluxTitleComponent } from './view/pages/dtflux-title/dtflux-title.component';
|
import { DTFluxTitleComponent } from './view/pages/dtflux-title/dtflux-title.component';
|
||||||
|
import { SetupComponent } from './view/pages/setup/setup.component';
|
||||||
|
|
||||||
export const routes: Routes = [
|
export const routes: Routes = [
|
||||||
{
|
{
|
||||||
@ -7,11 +8,16 @@ export const routes: Routes = [
|
|||||||
redirectTo: '/dtflux-title',
|
redirectTo: '/dtflux-title',
|
||||||
pathMatch: 'full'
|
pathMatch: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'dtflux-title',
|
path: 'dtflux-title',
|
||||||
component: DTFluxTitleComponent,
|
component: DTFluxTitleComponent,
|
||||||
title: 'Unreal Title Sheets - Main'
|
title: 'Unreal Title Sheets - Main'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'setup',
|
||||||
|
component: SetupComponent,
|
||||||
|
title: 'Unreal Title Sheets - Setup'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '**',
|
path: '**',
|
||||||
redirectTo: '/dtflux-title'
|
redirectTo: '/dtflux-title'
|
||||||
|
|||||||
@ -1,5 +1,8 @@
|
|||||||
/* src/styles.scss - Variables globales Dark Theme */
|
/* src/styles.scss - Variables globales Dark Theme */
|
||||||
|
|
||||||
|
// === FONTAWESOME IMPORT ===
|
||||||
|
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
|
||||||
|
|
||||||
// === DARK THEME PALETTE ===
|
// === DARK THEME PALETTE ===
|
||||||
:root {
|
:root {
|
||||||
// Background colors
|
// Background colors
|
||||||
|
|||||||
Reference in New Issue
Block a user