# 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
