# Pré-remplissage complet du formulaire PCI

## Contexte

Lors de l'import de périphériques PCI, certains champs n'étaient pas pré-remplis dans le formulaire:
- Le sous-type n'était pas sélectionné (select vide)
- Le Device ID (slot PCI comme 08:00.0) n'était pas rempli
- Le fabricant de carte (pour GPU) n'était pas rempli

## Problèmes résolus

### 1. Sous-type non sélectionné

**Problème**: Le champ `type_principal` était pré-rempli avec "PCI", mais le select `sous_type` restait vide car les options n'étaient pas chargées avant de tenter de sélectionner la valeur.

**Solution**: Appeler `loadPeripheralSubtypes()` après avoir défini le `type_principal`, puis définir le `sous_type`.

```javascript
// Fill type_principal and trigger sous_type loading
if (suggested.type_principal) {
    document.getElementById('type_principal').value = suggested.type_principal;
    // Load subtypes for this type
    await loadPeripheralSubtypes();
    // Then set the sous_type value
    if (suggested.sous_type) {
        document.getElementById('sous_type').value = suggested.sous_type;
    }
}
```

### 2. Device ID manquant

**Problème**: Le slot PCI (ex: `08:00.0`) n'était pas pré-rempli dans le champ `device_id`.

**Solution**: Ajouter le slot dans les données suggérées du backend.

#### Backend - `peripherals.py`

```python
suggested = {
    "nom": nom,
    "type_principal": type_principal,
    "sous_type": sous_type,
    "marque": brand or device_info.get("vendor_name"),
    "modele": model or device_info.get("device_name"),
    "device_id": device_info.get("slot"),  # PCI slot (e.g., 08:00.0)
    "pci_device_id": device_info.get("pci_device_id"),  # vendor:device (e.g., 10de:2504)
    "cli_raw": device_section,
    "caracteristiques_specifiques": caracteristiques_specifiques
}
```

#### Frontend - `peripherals.js`

```javascript
// Fill Device ID (PCI slot like 08:00.0)
if (suggested.device_id) {
    const deviceIdField = document.getElementById('device_id');
    if (deviceIdField) deviceIdField.value = suggested.device_id;
}
```

### 3. Fabricant de carte manquant

**Problème**: Pour les cartes graphiques, le fabricant de la carte (ex: Gigabyte) extrait du subsystem n'était pas pré-rempli.

**Solution**: Le backend extrait déjà le fabricant, il suffit de le pré-remplir dans le frontend.

```javascript
// Fill fabricant if present (for GPU cards)
if (suggested.fabricant) {
    const fabricantField = document.getElementById('fabricant');
    if (fabricantField) fabricantField.value = suggested.fabricant;
}
```

## Champs pré-remplis automatiquement

Lors de l'import d'un périphérique PCI, le formulaire pré-remplit maintenant:

### Champs de base
- ✅ **Nom**: Construit à partir de marque + modèle (ex: `NVIDIA GeForce RTX 3060 Lite Hash Rate`)
- ✅ **Type principal**: `PCI`
- ✅ **Sous-type**: Classification automatique (ex: `Carte graphique`, `SSD NVMe`, etc.)
- ✅ **Marque**: Premier mot du vendor (ex: `NVIDIA`, `Micron`)
- ✅ **Modèle**: Nom commercial du périphérique (ex: `GeForce RTX 3060 Lite Hash Rate`)

### Champs spécifiques PCI
- ✅ **Device ID**: Slot PCI (ex: `08:00.0`)
- ✅ **PCI Device ID**: Identifiant vendor:device (ex: `10de:2504`)
- ✅ **Fabricant**: Fabricant de la carte pour GPU (ex: `Gigabyte`)

### Champs techniques
- ✅ **CLI Raw**: Sortie complète de lspci pour ce périphérique
- ✅ **Caractéristiques spécifiques**: JSON avec:
  - Slot PCI
  - Device class
  - Vendor name
  - Subsystem
  - Driver
  - IOMMU group
  - Revision
  - Modules

## Exemple complet - NVIDIA RTX 3060

### Données d'entrée
```
08:00.0 VGA compatible controller: NVIDIA Corporation GA106 [GeForce RTX 3060 Lite Hash Rate] (rev a1) (prog-if 00 [VGA controller])
    Subsystem: Gigabyte Technology Co., Ltd Device 4074
    Flags: bus master, fast devsel, latency 0, IRQ 84, IOMMU group 16
    Kernel driver in use: nvidia
```

### Formulaire pré-rempli

| Champ | Valeur | Source |
|-------|--------|--------|
| **Nom** | `NVIDIA GeForce RTX 3060 Lite Hash Rate` | `brand + model` |
| **Type principal** | `PCI` ✅ | Classification automatique |
| **Sous-type** | `Carte graphique` ✅ | Classification automatique |
| **Marque** | `NVIDIA` | Premier mot de "NVIDIA Corporation" |
| **Modèle** | `GeForce RTX 3060 Lite Hash Rate` | Contenu des brackets `[...]` |
| **Fabricant** | `Gigabyte` ✅ | Premier mot du subsystem |
| **Device ID** | `08:00.0` ✅ | Slot PCI |
| **PCI Device ID** | `10de:2504` | Vendor:device depuis lspci -n |

### Caractéristiques spécifiques (JSON)
```json
{
  "slot": "08:00.0",
  "device_class": "VGA compatible controller",
  "vendor_name": "NVIDIA Corporation",
  "subsystem": "Gigabyte Technology Co., Ltd Device 4074",
  "driver": "nvidia",
  "iommu_group": "16",
  "revision": "a1",
  "modules": "nvidia"
}
```

## Exemple complet - Micron NVMe SSD

### Données d'entrée
```
01:00.0 Non-Volatile memory controller: Micron/Crucial Technology P2 [Nick P2] / P3 / P3 Plus NVMe PCIe SSD (DRAM-less) (rev 01)
    Subsystem: Micron/Crucial Technology P2 [Nick P2] / P3 / P3 Plus NVMe PCIe SSD (DRAM-less)
    Kernel driver in use: nvme
```

### Formulaire pré-rempli

| Champ | Valeur | Source |
|-------|--------|--------|
| **Nom** | `Micron P2/P3/P3 Plus NVMe PCIe SSD (DRAM-less)` | `brand + model` |
| **Type principal** | `PCI` ✅ | Classification automatique |
| **Sous-type** | `SSD NVMe` ✅ | Classification automatique |
| **Marque** | `Micron` | Premier mot de "Micron/Crucial Technology" |
| **Modèle** | `P2/P3/P3 Plus NVMe PCIe SSD (DRAM-less)` | Nettoyé des brackets |
| **Device ID** | `01:00.0` ✅ | Slot PCI |
| **PCI Device ID** | `c0a9:5407` | Vendor:device depuis lspci -n |

## Workflow de pré-remplissage

```
1. User colle lspci -v et lspci -n
2. Backend détecte les périphériques
3. User sélectionne un périphérique (ex: 08:00.0)
4. Backend extrait et parse les informations
   ├─ Parse vendor/device name intelligemment
   ├─ Classifie le périphérique (type + sous-type)
   ├─ Extrait marque et modèle
   ├─ Extrait fabricant (pour GPU)
   └─ Construit les caractéristiques spécifiques
5. Frontend ouvre le formulaire d'ajout
6. Pré-remplissage séquentiel:
   ├─ Champs de base (nom, marque, modèle)
   ├─ Type principal → déclenche chargement sous-types
   ├─ Sous-type (une fois les options chargées) ✅
   ├─ Fabricant (si GPU)
   ├─ Device ID (slot PCI) ✅
   ├─ PCI Device ID (vendor:device)
   └─ Caractéristiques spécifiques (JSON)
7. User valide/modifie et sauvegarde
```

## Code modifié

### Backend - `peripherals.py` (ligne 1507)
```python
"device_id": device_info.get("slot"),  # Ajouté: slot PCI
```

### Frontend - `peripherals.js`

**Lignes 1822-1830**: Chargement async des sous-types
```javascript
if (suggested.type_principal) {
    document.getElementById('type_principal').value = suggested.type_principal;
    await loadPeripheralSubtypes();  // IMPORTANT: async
    if (suggested.sous_type) {
        document.getElementById('sous_type').value = suggested.sous_type;
    }
}
```

**Lignes 1833-1836**: Fabricant
```javascript
if (suggested.fabricant) {
    const fabricantField = document.getElementById('fabricant');
    if (fabricantField) fabricantField.value = suggested.fabricant;
}
```

**Lignes 1839-1842**: Device ID (slot PCI)
```javascript
if (suggested.device_id) {
    const deviceIdField = document.getElementById('device_id');
    if (deviceIdField) deviceIdField.value = suggested.device_id;
}
```

## Bénéfices

✅ **Formulaire complet**: Tous les champs pertinents sont pré-remplis
✅ **Gain de temps**: L'utilisateur n'a plus qu'à valider
✅ **Moins d'erreurs**: Les types et sous-types sont correctement sélectionnés
✅ **Traçabilité**: Le slot PCI permet d'identifier précisément le périphérique
✅ **Distinction GPU**: Le fabricant de carte est séparé du fabricant du chipset

## Tests

Pour tester le pré-remplissage complet:

1. Importer un périphérique PCI (GPU ou NVMe)
2. Vérifier que le formulaire affiche:
   - Type principal: `PCI` ✅
   - Sous-type: Sélectionné automatiquement ✅
   - Device ID: Slot PCI (ex: `08:00.0`) ✅
   - Fabricant: Pour GPU uniquement ✅
   - PCI Device ID: vendor:device (ex: `10de:2504`) ✅

## Fichiers modifiés

1. **backend/app/api/endpoints/peripherals.py** - Ajout du device_id (slot)
2. **frontend/js/peripherals.js** - Pré-remplissage async du sous-type + device_id + fabricant

## Conclusion

Le formulaire d'import PCI pré-remplit maintenant tous les champs disponibles, offrant une expérience utilisateur optimale avec validation minimale requise.