# Plan de Refactoring Frontend

## ✅ Action 3.1 - Extraction des fonctions communes (EN COURS)

### Fichiers créés
- ✅ `frontend/js/hardware-renderer.js` - Module commun de rendu hardware
- ✅ Intégré dans `devices.html` et `device_detail.html`

### Fonctions disponibles dans `HardwareRenderer`

Le module `window.HardwareRenderer` expose les fonctions suivantes :

- `renderMotherboardDetails(snapshot)` - Carte mère
- `renderCPUDetails(snapshot)` - Processeur (avec multi-CPU)
- `renderMemoryDetails(snapshot, deviceData)` - Mémoire (barres + slots)
- `renderStorageDetails(snapshot)` - Stockage
- `renderGPUDetails(snapshot)` - Carte graphique
- `renderNetworkDetails(snapshot)` - Réseau
- `renderOSDetails(snapshot)` - Système d'exploitation
- `renderProxmoxDetails(snapshot)` - Proxmox (nouveau)
- `renderAudioDetails(snapshot)` - Audio (nouveau)

### Prochaines étapes

#### Option 1 : Refactorisation progressive (RECOMMANDÉ)

**Étape 1** : Modifier `device_detail.js` pour utiliser `HardwareRenderer`
- Remplacer chaque `renderXxxDetails()` locale par un appel à `HardwareRenderer.renderXxxDetails()`
- Exemple :
  ```javascript
  // AVANT
  function renderMotherboardDetails() {
    const snapshot = currentDevice.last_hardware_snapshot;
    const container = document.getElementById('motherboardDetails');
    // ... 25 lignes de code ...
    container.innerHTML = html;
  }

  // APRÈS
  function renderMotherboardDetails() {
    const snapshot = currentDevice.last_hardware_snapshot;
    const container = document.getElementById('motherboardDetails');
    container.innerHTML = HardwareRenderer.renderMotherboardDetails(snapshot);
  }
  ```

**Étape 2** : Modifier `devices.js` pour utiliser `HardwareRenderer`
- Même principe : remplacer les fonctions locales par des appels au module
- Les fonctions `renderXxxDetails()` dans devices.js retournent déjà du HTML (pas de changement majeur)

**Étape 3** : Supprimer les fonctions dupliquées
- Une fois les deux fichiers migrés, supprimer les anciennes implémentations

#### Option 2 : Migration immédiate (RISQUÉ)

Remplacer toutes les fonctions d'un coup dans les deux fichiers. Risque d'introduire des bugs.

---

## Modifications à apporter dans `device_detail.js`

### Fonctions à remplacer

Ligne | Fonction actuelle | Action
------|------------------|--------
91 | `renderMotherboardDetails()` | Appeler `HardwareRenderer.renderMotherboardDetails(snapshot)`
127 | `renderCPUDetails()` | Appeler `HardwareRenderer.renderCPUDetails(snapshot)`
185 | `renderMemoryDetails()` | Appeler `HardwareRenderer.renderMemoryDetails(snapshot, currentDevice)`
260 | `renderStorageDetails()` | Appeler `HardwareRenderer.renderStorageDetails(snapshot)`
454 | `renderGPUDetails()` | Appeler `HardwareRenderer.renderGPUDetails(snapshot)`
612 | `renderNetworkDetails()` | Appeler `HardwareRenderer.renderNetworkDetails(snapshot)`
513 | `renderOSDetails()` | Appeler `HardwareRenderer.renderOSDetails(snapshot)`

### Nouvelles fonctions à ajouter

```javascript
function renderProxmoxDetails() {
  const snapshot = currentDevice.last_hardware_snapshot;
  const container = document.getElementById('proxmoxDetails');
  if (!container) return;
  container.innerHTML = HardwareRenderer.renderProxmoxDetails(snapshot);
}

function renderAudioDetails() {
  const snapshot = currentDevice.last_hardware_snapshot;
  const container = document.getElementById('audioDetails');
  if (!container) return;
  container.innerHTML = HardwareRenderer.renderAudioDetails(snapshot);
}
```

Puis ajouter les sections dans le HTML :

```html
<!-- Après la section Network -->
<div class="card" id="proxmoxSection" style="display: none;">
  <div class="card-header">🔧 Proxmox VE</div>
  <div class="card-body">
    <div id="proxmoxDetails">
      <div class="loading">Chargement...</div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">🔊 Audio</div>
  <div class="card-body">
    <div id="audioDetails">
      <div class="loading">Chargement...</div>
    </div>
  </div>
</div>
```

---

## Modifications à apporter dans `devices.js`

### Fonctions à remplacer

Ligne | Fonction actuelle | Action
------|------------------|--------
649 | `renderMotherboardDetails(snapshot)` | Appeler `HardwareRenderer.renderMotherboardDetails(snapshot)`
681 | `renderCPUDetails(snapshot)` | Appeler `HardwareRenderer.renderCPUDetails(snapshot)`
735 | `renderMemoryDetails(snapshot)` | Adapter appel `HardwareRenderer.renderMemoryDetails(snapshot, currentDevice)`
791 | `renderStorageDetails(snapshot)` | Appeler `HardwareRenderer.renderStorageDetails(snapshot)`
915 | `renderGPUDetails(snapshot)` | Appeler `HardwareRenderer.renderGPUDetails(snapshot)`
942 | `renderOSDetails(snapshot)` | Appeler `HardwareRenderer.renderOSDetails(snapshot)`
1525 | `renderNetworkBlock(snapshot, bench)` | Adapter pour utiliser `HardwareRenderer.renderNetworkDetails(snapshot)`

### Exemple de remplacement

```javascript
// AVANT (ligne 649)
function renderMotherboardDetails(snapshot) {
  if (!snapshot) {
    return '<p style="color: var(--text-muted); text-align: center; padding: 2rem;">Aucune information disponible</p>';
  }
  const cleanValue = (val) => {
    if (!val || (typeof val === 'string' && val.trim() === '')) return 'N/A';
    return val;
  };
  const items = [
    { label: 'Fabricant', value: cleanValue(snapshot.motherboard_vendor) },
    // ... 20 lignes ...
  ];
  return `<div style="display: grid; ...">...</div>`;
}

// APRÈS
function renderMotherboardDetails(snapshot) {
  return HardwareRenderer.renderMotherboardDetails(snapshot);
}
```

**Gain** : 649 → 681 (32 lignes) deviennent **3 lignes**

---

## Estimation du gain de lignes

Fichier | Lignes actuelles | Lignes après refacto | Gain
--------|-----------------|---------------------|-----
`devices.js` | 1953 | ~1600 | -353
`device_detail.js` | 1003 | ~700 | -303
**TOTAL** | **2956** | **2300** | **-656 lignes**

---

## Tests à effectuer après refactoring

### Tests visuels (devices.html)
1. Ouvrir devices.html
2. Sélectionner un device
3. Vérifier chaque section :
   - ✅ Motherboard : affiche bien fabricant, modèle, BIOS, etc.
   - ✅ CPU : affiche modèle, cores, threads, caches, flags
   - ✅ Mémoire : barres RAM/SWAP + slots avec détails
   - ✅ Stockage : liste des disques avec SMART
   - ✅ GPU : fabricant, modèle, VRAM
   - ✅ Réseau : liste des interfaces
   - ✅ OS : nom, version, kernel, uptime
   - ✅ Proxmox : affiche si détecté (host/guest)
   - ✅ Audio : matériel + logiciels

### Tests visuels (device_detail.html)
1. Ouvrir device_detail.html?id=X
2. Vérifier les mêmes sections
3. Vérifier que les popups/tooltips fonctionnent

### Tests fonctionnels
1. Édition des champs (hostname, description, etc.)
2. Upload d'images/PDFs
3. Ajout/suppression de tags
4. Ajout/suppression de liens
5. Suppression de device

### Tests de régression
1. Vérifier que le score global s'affiche (étoiles)
2. Vérifier que les images s'affichent en grid
3. Vérifier que les barres mémoire ont les bons %
4. Vérifier le multi-CPU (si disponible)

---

## 🎯 Recommandation

**Je recommande de faire la migration progressive (Option 1)** :

1. ✅ Créer `hardware-renderer.js` (FAIT)
2. ✅ Intégrer dans les HTML (FAIT)
3. **SUIVANT** : Migrer `device_detail.js` (plus simple, fichier plus petit)
4. **APRÈS** : Migrer `devices.js`
5. **TESTER** chaque étape

Cette approche réduit les risques et permet de valider chaque changement avant de passer au suivant.

---

**Dernière mise à jour** : 2026-01-11