refactor: simplification structure des groupes

Simplification majeure de la configuration des groupes :
- Suppression des champs redondants 'id' et 'description'
- Le nom du groupe sert maintenant d'identifiant (converti en slug automatiquement)
- Génération automatique des IDs pour groupes et canaux via fonction slugify()

Backend (server/) :
- Ajout fonction slugify() pour génération d'IDs à partir des noms
- Génération automatique des IDs au chargement de la config (index.js)
- API admin adaptée : POST/PUT /admin/groups génèrent les IDs automatiquement
- Pas besoin de fournir l'ID lors de la création/modification

Frontend (client/src/Admin.jsx + Admin.css) :
- Suppression champs ID et description du formulaire
- Simplification interface : nom + bitrate + canaux
- Mise à jour layout CSS canal (4 colonnes au lieu de 5)
- Cartes de groupe épurées (plus d'affichage d'ID)

Configuration (config.yaml) :
- Format simplifié : groupes avec 'name', 'channels' et 'audioBitrate' optionnel
- Exemple : "Production" au lieu de id/name/description séparés
- Plus lisible et maintenable

Les IDs sont générés dynamiquement :
- Groupe "Production" → id: "production"
- Canal "Principal" → id: "production-principal"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

server/api/admin.js

@@ -13,6 +13,21 @@ import { dirname } from 'path';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const router = Router();
 
+/**
+ * Génère un ID slug à partir d'un nom
+ */
+function slugify(text) {
+  return text
+    .toString()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-');
+}
+
 // État en mémoire des utilisateurs connectés
 const connectedUsers = new Map(); // identity -> { username, groupId, roomName, connectedAt, lastActivity }
 
@@ -140,34 +155,42 @@ router.get('/groups', (req, res) => {
 /**
  * POST /admin/groups
  * Crée un nouveau groupe
- * Body: { id, name, description, audioBitrate?, channels }
+ * Body: { name, audioBitrate?, channels }
+ * L'ID est généré automatiquement à partir du nom
  */
 router.post('/groups', (req, res) => {
   try {
-    const { id, name, description, audioBitrate, channels } = req.body;
+    const { name, audioBitrate, channels } = req.body;
 
-    if (!id || !name || !channels || !Array.isArray(channels)) {
+    if (!name || !channels || !Array.isArray(channels)) {
       return res.status(400).json({
-        error: 'Missing required fields: id, name, channels'
+        error: 'Missing required fields: name, channels'
       });
     }
 
     const config = loadConfig();
 
+    // Générer l'ID à partir du nom
+    const id = slugify(name);
+
     // Vérifier que l'ID n'existe pas déjà
     if (config.groups.find(g => g.id === id)) {
       return res.status(409).json({
-        error: `Group ${id} already exists`
+        error: `Group "${name}" already exists (ID: ${id})`
       });
     }
 
+    // Générer les IDs pour les canaux
+    const channelsWithIds = channels.map(channel => ({
+      ...channel,
+      id: channel.id || `${id}-${slugify(channel.name)}`
+    }));
+
     // Créer le nouveau groupe
     const newGroup = {
-      id,
       name,
-      description: description || '',
       audioBitrate: audioBitrate || config.audio.defaultBitrate,
-      channels
+      channels: channelsWithIds
     };
 
     config.groups.push(newGroup);
@@ -177,7 +200,7 @@ router.post('/groups', (req, res) => {
 
     res.status(201).json({
       message: 'Group created',
-      group: newGroup
+      group: { ...newGroup, id }
     });
 
   } catch (error) {
@@ -189,12 +212,12 @@ router.post('/groups', (req, res) => {
 /**
  * PUT /admin/groups/:id
  * Modifie un groupe existant
- * Body: { name?, description?, audioBitrate?, channels? }
+ * Body: { name?, audioBitrate?, channels? }
  */
 router.put('/groups/:id', (req, res) => {
   try {
     const { id } = req.params;
-    const { name, description, audioBitrate, channels } = req.body;
+    const { name, audioBitrate, channels } = req.body;
 
     const config = loadConfig();
     const groupIndex = config.groups.findIndex(g => g.id === id);
@@ -207,9 +230,14 @@ router.put('/groups/:id', (req, res) => {
 
     // Mettre à jour les champs fournis
     if (name !== undefined) config.groups[groupIndex].name = name;
-    if (description !== undefined) config.groups[groupIndex].description = description;
     if (audioBitrate !== undefined) config.groups[groupIndex].audioBitrate = audioBitrate;
-    if (channels !== undefined) config.groups[groupIndex].channels = channels;
+    if (channels !== undefined) {
+      // Générer les IDs pour les canaux s'ils n'existent pas
+      config.groups[groupIndex].channels = channels.map(channel => ({
+        ...channel,
+        id: channel.id || `${id}-${slugify(channel.name)}`
+      }));
+    }
 
     saveConfig(config);
 

server/config/config.yaml

@@ -17,47 +17,31 @@ audio:
   jitterBufferMs: 40
 
 # Configuration des groupes
+# Format simplifié : nom du groupe + canaux
 groups:
-  - id: production
-    name: "Équipe Production"
-    description: "Réalisateur, cadreurs, régisseur"
-
-    # Qualité audio spécifique (optionnel, sinon utilise defaultBitrate)
-    audioBitrate: 96
-
-    # Canaux audio associés
+  - name: "Production"
+    audioBitrate: 96  # optionnel, sinon utilise defaultBitrate
     channels:
-      - id: prod-main
-        name: "Production principale"
+      - name: "Principal"
         audioInput: 0   # Index device CoreAudio/JACK
         audioOutput: 0
-
-      - id: prod-backup
-        name: "Production backup"
+      - name: "Backup"
         audioInput: 1
         audioOutput: 1
 
-  - id: technique
-    name: "Équipe Technique"
-    description: "Techniciens, électriciens, machinistes"
-    audioBitrate: 96
+  - name: "Technique"
     channels:
-      - id: tech-main
-        name: "Technique général"
+      - name: "Général"
         audioInput: 2
         audioOutput: 2
 
-  - id: sonorisation
-    name: "Équipe Sonorisation"
-    description: "Ingénieurs son, retours"
+  - name: "Sonorisation"
     audioBitrate: 128  # Qualité supérieure pour les ingénieurs son
     channels:
-      - id: son-main
-        name: "Son principal"
+      - name: "Principal"
         audioInput: 3
         audioOutput: 3
-      - id: son-retours
-        name: "Retours scène"
+      - name: "Retours"
         audioInput: 4
         audioOutput: 4
 

server/index.js

@@ -18,6 +18,38 @@ const configPath = join(__dirname, 'config', 'config.yaml');
 const configFile = readFileSync(configPath, 'utf8');
 const config = YAML.parse(configFile);
 
+/**
+ * Génère un ID slug à partir d'un nom
+ * Ex: "Équipe Production" -> "equipe-production"
+ */
+function slugify(text) {
+  return text
+    .toString()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '') // Retire les accents
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-');
+}
+
+// Générer les IDs pour les groupes et canaux s'ils n'existent pas
+config.groups = config.groups.map(group => {
+  if (!group.id) {
+    group.id = slugify(group.name);
+  }
+  if (group.channels) {
+    group.channels = group.channels.map(channel => {
+      if (!channel.id) {
+        channel.id = `${group.id}-${slugify(channel.name)}`;
+      }
+      return channel;
+    });
+  }
+  return group;
+});
+
 /**
  * Détecte l'IP réseau locale (WiFi/Ethernet)
  * @returns {string|null} IP réseau ou null si non trouvée
@@ -195,7 +227,6 @@ app.get('/config', (req, res) => {
       groups: config.groups.map(g => ({
         id: g.id,
         name: g.name,
-        description: g.description,
         channels: g.channels.map(c => ({
           id: c.id,
           name: c.name
@@ -222,8 +253,7 @@ app.get('/groups', (req, res) => {
   try {
     const groups = config.groups.map(g => ({
       id: g.id,
-      name: g.name,
-      description: g.description
+      name: g.name
     }));
 
     res.json({ groups });