addon

2026-01-05 16:08:01 +01:00
parent dcba044cd6
commit c67befc549
2215 changed files with 26743 additions and 329 deletions
--- a/docs/FRONTEND_USB_DETAILS.md
+++ b/docs/FRONTEND_USB_DETAILS.md
@@ -0,0 +1,260 @@
+# Affichage des Informations USB Détaillées - Frontend
+
+## Vue d'ensemble
+
+Section dynamique ajoutée au formulaire de périphériques pour afficher toutes les informations techniques USB extraites lors de l'import.
+
+## Comportement
+
+### Affichage Conditionnel
+
+La section **"Informations USB Détaillées"** est :
+- ✅ **Visible** : Si le périphérique contient des données USB (`vendor_id`, `product_id`, `usb_type`, ou `interface_classes`)
+- ❌ **Cachée** : Si aucune donnée USB n'est présente (périphériques non-USB)
+
+### Déclenchement
+
+La section est automatiquement remplie lors de :
+1. **Import USB CLI** (`lsusb -v`) → Fonction `importSelectedUSBDevice()`
+2. **Import USB Structuré** (info formatée) → Fonction `importUSBStructured()`
+3. Édition d'un périphérique existant avec données USB
+
+## Champs Affichés
+
+### Grille Responsive (12 champs)
+
+| Champ | Description | Exemple | Source USB |
+|-------|-------------|---------|------------|
+| **Vendor ID** | Identifiant hexadécimal du fabricant | `0x0781` | `idVendor` |
+| **Product ID** | Identifiant hexadécimal du produit | `0x55ab` | `idProduct` |
+| **Fabricant** | Nom du fabricant | `SanDisk Corp.` | `iManufacturer` |
+| **Type USB Réel** | Type basé sur vitesse négociée | `USB 3.0` | Vitesse → Type |
+| **Version USB Déclarée** | Version déclarée par le périphérique | `USB 3.20` | `bcdUSB` |
+| **Vitesse Négociée** | Vitesse réelle de connexion | `SuperSpeed (5 Gbps)` | Détection vitesse |
+| **Puissance Max** | Consommation maximale | `896 mA` | `MaxPower` |
+| **Mode Alimentation** | Type d'alimentation | `Bus Powered` | `bmAttributes` |
+| **Alimentation Suffisante** | Suffisance du port | `✅ Oui` / `⚠️ Non` | Calcul normatif |
+| **Firmware Requis** | Nécessite pilote spécifique | `✅ Non` / `⚠️ Oui` | Classe 255 |
+| **Device Class** | Classe du périphérique | `0 [unknown]` | `bDeviceClass` |
+| **Interface Classes** | Classes d'interface (normative) | `8 (Mass Storage)` | `bInterfaceClass` |
+
+## Indicateurs Visuels
+
+### Alimentation Suffisante
+- ✅ **Oui** : Le port peut alimenter le périphérique
+  - USB 2.0 : MaxPower ≤ 500 mA
+  - USB 3.x : MaxPower ≤ 900 mA
+- ⚠️ **Non** : Risque d'alimentation insuffisante
+
+### Firmware Requis
+- ✅ **Non** : Utilise des classes USB standard
+- ⚠️ **Oui (classe 255)** : Nécessite pilote + microcode spécifique (Vendor Specific)
+
+## Implémentation Technique
+
+### HTML Structure
+
+```html
+<div class="form-section full-width" id="usb-details-section" style="display: none;">
+    <h3>Informations USB Détaillées</h3>
+    <div class="usb-details-grid">
+        <div class="form-group">
+            <label for="usb_vendor_id">
+                Vendor ID
+                <span class="help-text-inline">(idVendor)</span>
+            </label>
+            <input type="text" id="usb_vendor_id" readonly>
+        </div>
+        <!-- ... 11 autres champs ... -->
+    </div>
+</div>
+```
+
+### CSS Grid
+
+```css
+.usb-details-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+}
+
+.usb-details-grid .form-group input[readonly] {
+    background-color: #1e1e1e;
+    color: #a9b7c6;
+    border: 1px solid #3a3a3a;
+    cursor: default;
+}
+```
+
+**Avantages** :
+- Grille responsive s'adaptant à la largeur d'écran
+- Minimum 250px par colonne
+- Remplissage automatique de l'espace disponible
+
+### JavaScript Logic
+
+```javascript
+function fillUSBDetails(caracteristiques) {
+    if (!caracteristiques) {
+        // Hide section if no data
+        document.getElementById('usb-details-section').style.display = 'none';
+        return;
+    }
+
+    // Check if we have USB-specific fields
+    const hasUSBData = caracteristiques.vendor_id ||
+                       caracteristiques.product_id ||
+                       caracteristiques.usb_type ||
+                       caracteristiques.interface_classes;
+
+    if (!hasUSBData) {
+        document.getElementById('usb-details-section').style.display = 'none';
+        return;
+    }
+
+    // Show section and fill fields
+    document.getElementById('usb-details-section').style.display = 'block';
+
+    // Set all fields
+    setField('usb_vendor_id', caracteristiques.vendor_id);
+    setField('usb_product_id', caracteristiques.product_id);
+    // ... etc
+
+    // Format interface classes
+    if (caracteristiques.interface_classes?.length > 0) {
+        const interfaceClassesStr = caracteristiques.interface_classes
+            .map(ic => `${ic.code} (${ic.name})`)
+            .join(', ');
+        setField('usb_interface_classes', interfaceClassesStr);
+    }
+}
+```
+
+## Workflows Utilisateur
+
+### Workflow 1 : Import USB CLI (lsusb -v)
+
+1. Utilisateur clique **"Importer USB (lsusb)"**
+2. Colle la sortie de `sudo lsusb -v`
+3. Sélectionne un périphérique
+4. Click **"Finaliser"**
+5. ✅ **Formulaire pré-rempli** avec section USB détaillée visible
+6. Utilisateur vérifie les informations techniques
+7. Enregistre le périphérique
+
+### Workflow 2 : Import USB Structuré (Info)
+
+1. Utilisateur clique **"Importer USB (Info)"**
+2. Colle les informations formatées
+3. Click **"Importer"**
+4. ✅ **Formulaire pré-rempli** avec section USB détaillée visible
+5. Utilisateur complète et enregistre
+
+### Workflow 3 : Périphérique Non-USB
+
+1. Utilisateur crée un périphérique manuel (câble, console, etc.)
+2. Remplit les champs généraux
+3. ❌ **Section USB masquée** (pas de données USB)
+4. Enregistre normalement
+
+## Exemples de Rendu
+
+### Exemple 1 : Clé USB SanDisk
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ Informations USB Détaillées                                 │
+├─────────────────────────────────────────────────────────────┤
+│ Vendor ID              │ Product ID                         │
+│ 0x0781                 │ 0x55ab                             │
+├────────────────────────┼────────────────────────────────────┤
+│ Fabricant              │ Type USB Réel                      │
+│ SanDisk Corp.          │ USB 3.0                            │
+├────────────────────────┼────────────────────────────────────┤
+│ Version USB Déclarée   │ Vitesse Négociée                   │
+│ USB 3.20               │ SuperSpeed (5 Gbps)                │
+├────────────────────────┼────────────────────────────────────┤
+│ Puissance Max          │ Mode Alimentation                  │
+│ 896 mA                 │ Bus Powered                        │
+├────────────────────────┼────────────────────────────────────┤
+│ Alimentation Suffisante│ Firmware Requis                    │
+│ ✅ Oui                 │ ✅ Non                             │
+├────────────────────────┼────────────────────────────────────┤
+│ Device Class           │ Interface Classes                  │
+│ 0 [unknown]            │ 8 (Mass Storage)                   │
+└────────────────────────┴────────────────────────────────────┘
+```
+
+**Observations** :
+- Type USB 3.0 détecté depuis vitesse SuperSpeed
+- Alimentation suffisante : 896 mA ≤ 900 mA (USB 3.x)
+- Classification normative via `bInterfaceClass = 8`
+
+### Exemple 2 : Adaptateur WiFi Realtek (Firmware Requis)
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ Informations USB Détaillées                                 │
+├─────────────────────────────────────────────────────────────┤
+│ Vendor ID              │ Product ID                         │
+│ 0x0bda                 │ 0x8176                             │
+├────────────────────────┼────────────────────────────────────┤
+│ Fabricant              │ Type USB Réel                      │
+│ Realtek Semiconductor  │ USB 2.0                            │
+├────────────────────────┼────────────────────────────────────┤
+│ Puissance Max          │ Mode Alimentation                  │
+│ 500 mA                 │ Bus Powered                        │
+├────────────────────────┼────────────────────────────────────┤
+│ Alimentation Suffisante│ Firmware Requis                    │
+│ ✅ Oui                 │ ⚠️ Oui (classe 255)               │
+├────────────────────────┼────────────────────────────────────┤
+│ Interface Classes      │                                    │
+│ 255 (Vendor Specific)  │                                    │
+└────────────────────────┴────────────────────────────────────┘
+```
+
+**Observations** :
+- ⚠️ **Firmware Requis** : Nécessite pilote Realtek spécifique
+- Classe 255 (Vendor Specific) détectée
+
+## Fichiers Modifiés
+
+### Frontend
+
+1. **[frontend/peripherals.html](../frontend/peripherals.html)** - Lignes 241-325
+   - Nouvelle section `id="usb-details-section"`
+   - 12 champs en lecture seule
+
+2. **[frontend/css/peripherals.css](../frontend/css/peripherals.css)** - Lignes 668-685
+   - Classe `.usb-details-grid`
+   - Styles pour champs `readonly`
+
+3. **[frontend/js/peripherals.js](../frontend/js/peripherals.js)**
+   - Lignes 32-107 : Fonction `fillUSBDetails()`
+   - Ligne 459 : Appel depuis import CLI
+   - Ligne 629 : Appel depuis import structuré
+
+## Avantages
+
+✅ **Transparence** : Toutes les informations USB visibles
+✅ **Pédagogique** : Explications inline (tooltips)
+✅ **Diagnostic** : Détection problèmes alimentation/firmware
+✅ **Normative** : Affichage `bInterfaceClass` (critique)
+✅ **Responsive** : Adaptation automatique à la taille d'écran
+✅ **Conditionnel** : Masqué pour périphériques non-USB
+
+## Limitations
+
+⚠️ **Champs en lecture seule** : Informations extraites automatiquement, non éditables
+⚠️ **Pas de validation** : Les données proviennent directement de l'import
+⚠️ **Langue française** : Labels en français uniquement
+
+## Améliorations Futures
+
+1. **Tooltips explicatifs** : Au survol, explication détaillée de chaque champ
+2. **Copie rapide** : Bouton pour copier vendor_id:product_id
+3. **Liens externes** : Lien vers USB ID Database pour vendor/product
+4. **Codes couleur** : Rouge/Orange/Vert selon type USB et puissance
+5. **Export** : Bouton pour exporter les infos USB en JSON/YAML
+6. **Comparaison** : Afficher différences avant/après mise à jour