397 lines
10 KiB
Markdown
397 lines
10 KiB
Markdown
# Synthèse de la session - Corrections et améliorations
|
|
|
|
## Date
|
|
11 janvier 2026
|
|
|
|
---
|
|
|
|
## 1. Système d'icônes personnalisables
|
|
|
|
### Problème initial
|
|
Les boutons utilisaient des chemins d'images codés en dur (`<img src="icons/icons8-save-48.png">`), empêchant le changement de pack d'icônes.
|
|
|
|
### Solution appliquée
|
|
- Remplacement des `<img>` par `data-icon="..."` + `<span class="btn-icon-wrapper"></span>`
|
|
- Ajout de `initializeButtonIcons()` après chaque rendu dynamique
|
|
- Passage aux SVG inline pour FontAwesome avec `currentColor` (permet la coloration selon le thème)
|
|
- Migration des boutons : save, edit, delete, close, check, download, image, pdf
|
|
|
|
### Fichiers modifiés
|
|
- `frontend/js/devices.js`
|
|
- `frontend/js/icon-manager.js`
|
|
- `frontend/js/utils.js`
|
|
- `frontend/css/components.css`
|
|
|
|
---
|
|
|
|
## 2. Modernisation des boutons icon-btn
|
|
|
|
### Problème
|
|
Cercle autour des boutons, style daté, icônes forcées en blanc.
|
|
|
|
### Solution appliquée
|
|
- Forme rectangulaire arrondie avec coins doux
|
|
- Ombres légères et effets hover/active/focus modernes
|
|
- Taille responsive via variables CSS
|
|
- Suppression du forçage blanc sur les icônes
|
|
- Coloration automatique via `currentColor` (SVG FontAwesome)
|
|
|
|
### Fichiers modifiés
|
|
- `frontend/css/main.css`
|
|
- `frontend/css/components.css`
|
|
|
|
---
|
|
|
|
## 3. Intégration complète des données mémoire (dmidecode)
|
|
|
|
### Objectif
|
|
Stocker et afficher toutes les informations dmidecode -t memory en base de données.
|
|
|
|
### Implémentation
|
|
- Stockage du résultat brut complet dans `raw_info_json`
|
|
- Affichage divisé en :
|
|
- **Général** : capacité max, ECC, nombre de slots (en gras)
|
|
- **Par barrette** : détails spécifiques à chaque DIMM (en gras)
|
|
- **Valeurs non renseignées** : conservées et affichées barrées dans un popup au survol de l'icône "Mémoire"
|
|
|
|
### Fichiers modifiés
|
|
- `backend/app/models/hardware.py`
|
|
- `backend/app/api/devices.py`
|
|
- `frontend/js/devices.js`
|
|
- `frontend/js/device_detail.js`
|
|
- `frontend/css/memory-slots.css`
|
|
|
|
---
|
|
|
|
## 4. Barres de visualisation RAM/SWAP
|
|
|
|
### Implémentation
|
|
- **Barre RAM** segmentée : utilisée / partagée / libre, avec couleurs du thème
|
|
- **Barre SWAP** : utilisée / libre
|
|
- Pourcentages affichés au-dessus de la jauge
|
|
- Légende en dessous
|
|
- Réorganisation des cartes mémoire :
|
|
1. Capacité max carte mère
|
|
2. RAM totale
|
|
3. RAM libre
|
|
4. RAM utilisée
|
|
5. RAM partagée
|
|
6. Slots utilisés / total
|
|
7. ECC (oui/non)
|
|
|
|
### Fichiers modifiés
|
|
- `frontend/js/devices.js`
|
|
- `frontend/js/device_detail.js`
|
|
- `frontend/css/memory-slots.css`
|
|
- `frontend/css/components.css`
|
|
|
|
---
|
|
|
|
## 5. Affichage des slots mémoire
|
|
|
|
### Design appliqué
|
|
```
|
|
+-----------------------------------------+
|
|
dimm0 | 16GB | occupé
|
|
+------------------------------------------+
|
|
DDR4 3200 MT/s | Unregistered
|
|
Form Factor | Voltage | Fabricant
|
|
Serial Number (petit)
|
|
Part Number (petit)
|
|
+-------------------------------------------+
|
|
```
|
|
|
|
### Tooltip complet
|
|
- Toutes les infos dmidecode au survol du slot
|
|
- Placement intelligent (gauche/droite selon position sur la page)
|
|
- Popup en `position: fixed` pour éviter masquage par sections
|
|
|
|
### Fichiers modifiés
|
|
- `frontend/css/memory-slots.css`
|
|
- `frontend/js/devices.js`
|
|
- `frontend/js/device_detail.js`
|
|
|
|
---
|
|
|
|
## 6. Adresses IP et URL personnalisées
|
|
|
|
### Fonctionnalités ajoutées
|
|
- Affichage des IP (hors 127.0.0.1) dans l'en-tête du panneau détail
|
|
- Bouton "Éditer lien" sous l'IP pour saisir une URL personnalisée
|
|
- Sauvegarde en base de données (champ `ip_url`)
|
|
- Clic sur l'IP ouvre l'URL dans un nouvel onglet
|
|
- Auto-préfixe `http://` si non spécifié
|
|
|
|
### Fichiers modifiés
|
|
- `backend/app/models/device.py`
|
|
- `backend/app/api/devices.py`
|
|
- `backend/migrations/018_add_device_ip_url.sql`
|
|
- `frontend/js/devices.js`
|
|
- `frontend/css/main.css`
|
|
|
|
---
|
|
|
|
## 7. Score global avec affichage étoilé
|
|
|
|
### Design
|
|
- Badge avec valeur numérique du score
|
|
- Barre de 4 étoiles (pleines/demi/vides)
|
|
- Couleur du fond et des étoiles selon le niveau (high/medium/low) et le thème
|
|
- Bordure fine colorée selon le résultat
|
|
|
|
### Calcul
|
|
- Échelle 0-4 étoiles selon score / seuil high
|
|
- Pas de 0,5 étoile
|
|
|
|
### Fichiers modifiés
|
|
- `frontend/js/devices.js`
|
|
- `frontend/css/main.css`
|
|
|
|
---
|
|
|
|
## 8. Popup détail du score
|
|
|
|
### Contenu
|
|
- Tableau comparatif "Ce PC" vs "PC standard"
|
|
- Lignes : CPU, Mémoire, Disque, Réseau
|
|
- Explications de la configuration PC standard en dessous
|
|
|
|
### Références PC standard (base 100)
|
|
```javascript
|
|
REF_CPU_SINGLE = 2000
|
|
REF_CPU_MULTI = 3500
|
|
REF_RAM_SPEED = 2500
|
|
REF_DISK_SPEED = 1.5
|
|
REF_NETWORK_SPEED = 950
|
|
```
|
|
|
|
### Placement intelligent
|
|
- Position `fixed` au premier plan (`z-index: 10002`)
|
|
- Voile d'ombre sur le reste de la page
|
|
- Ajustement automatique gauche/droite/haut selon place disponible
|
|
- Recalcul au frame suivant pour éviter tronquage en bas de page
|
|
|
|
### Fichiers modifiés
|
|
- `frontend/js/devices.js`
|
|
- `frontend/css/components.css`
|
|
|
|
---
|
|
|
|
## 9. Section Motherboard (carte mère)
|
|
|
|
### Champs indispensables (affichés en dur, cochés)
|
|
- ✅ Fabricant système
|
|
- ✅ Nom du produit
|
|
- ✅ Famille
|
|
- ✅ Type
|
|
- ✅ Châssis
|
|
- ✅ BIOS fabricant
|
|
- ✅ Version BIOS
|
|
- ✅ Date publication
|
|
- ✅ Révision BIOS
|
|
- ✅ UEFI supporté
|
|
- ✅ État démarrage
|
|
- ✅ État alimentation
|
|
- ✅ État thermique
|
|
- ✅ Sécurité
|
|
- ✅ Nombre câbles alimentation
|
|
- ✅ Langue installée
|
|
|
|
### Autres infos
|
|
Affichées dans un popup au survol de l'icône "Motherboard" (placement intelligent).
|
|
|
|
### Fichiers modifiés
|
|
- `frontend/js/devices.js`
|
|
- `frontend/js/device_detail.js`
|
|
|
|
---
|
|
|
|
## 10. Support multi-CPU
|
|
|
|
### Détection
|
|
- Parsing de tous les processeurs (dmidecode type 4)
|
|
- Détection multi-socket (Proc 1, Proc 2, etc.)
|
|
|
|
### Affichage
|
|
- Grille de CPU avec pour chaque socket :
|
|
- Désignation socket
|
|
- Modèle CPU
|
|
- Cores / Threads
|
|
- Fréquences (max / actuelle)
|
|
- Tension
|
|
|
|
### Champs CPU ajoutés
|
|
- ✅ Signature CPU : Family, Model, Stepping
|
|
- ✅ Socket
|
|
- ✅ Famille
|
|
- ✅ Fréquence maximale
|
|
- ✅ Fréquence actuelle
|
|
- ✅ Tension
|
|
|
|
### Fichiers modifiés
|
|
- `frontend/js/devices.js`
|
|
- `frontend/js/device_detail.js`
|
|
- `frontend/css/main.css`
|
|
|
|
---
|
|
|
|
## 11. Recherche Web du modèle
|
|
|
|
### Fonctionnalité
|
|
- Bouton "recherche web" (icône globe) à droite du modèle
|
|
- Tooltip "Recherche sur le Web"
|
|
- Moteur de recherche paramétrable dans Settings (Google par défaut, DuckDuckGo, Bing)
|
|
- Ouverture dans un nouvel onglet avec le texte du modèle
|
|
|
|
### Fichiers modifiés
|
|
- `frontend/js/devices.js`
|
|
- `frontend/js/icon-manager.js`
|
|
- `frontend/html/settings.html`
|
|
- `frontend/js/settings.js`
|
|
|
|
---
|
|
|
|
## 12. Scrollbars personnalisées
|
|
|
|
### Style appliqué
|
|
- Couleurs cohérentes avec le thème actif
|
|
- Largeur confortable (10px)
|
|
- Séparation fine (1px)
|
|
- Effet hover (couleur --color-info)
|
|
|
|
### Fichiers modifiés
|
|
- `frontend/css/main.css`
|
|
|
|
---
|
|
|
|
## 13. Page Settings modernisée
|
|
|
|
### Améliorations
|
|
- Style moderne des boutons (gradient, bordure, ombre légère, hover fluide)
|
|
- Aperçu des icônes corrigé (inline SVG via `IconManager.inlineSvgIcons()`)
|
|
- Toast déplacé sous le header dynamique
|
|
|
|
### Fichiers modifiés
|
|
- `frontend/html/settings.html`
|
|
- `frontend/js/settings.js`
|
|
- `frontend/css/main.css`
|
|
- `frontend/js/utils.js`
|
|
|
|
---
|
|
|
|
## 14. Page test-icons.html
|
|
|
|
### Modernisation
|
|
- Structure revue avec classes dédiées
|
|
- Style cohérent avec le thème
|
|
- Interface user-friendly
|
|
- Aperçu compact des icônes par pack
|
|
|
|
### Fichiers modifiés
|
|
- `frontend/test-icons.html`
|
|
- `frontend/css/main.css`
|
|
|
|
---
|
|
|
|
## 15. Gestion des images
|
|
|
|
### Amélioration
|
|
- Affichage en entier dans la case (`object-fit: contain`)
|
|
- Clic ouvre un popup avec l'image en grand
|
|
- Suppression des `onclick` inline (remplacés par `data-*` + binding JS)
|
|
|
|
### Fichiers modifiés
|
|
- `frontend/js/devices.js`
|
|
|
|
---
|
|
|
|
## 16. Corrections diverses
|
|
|
|
### CORS backend
|
|
- Fix allow_credentials=False pour autoriser allow_origins=["*"]
|
|
|
|
### Header non permanent
|
|
- Suppression du scroll interne "plein écran" dans devices.html pour permettre le scroll de page normal
|
|
|
|
### Bouton "Éditer lien IP"
|
|
- Déplacé sous l'IP (et non à droite)
|
|
|
|
### Fichiers modifiés
|
|
- `backend/app/main.py`
|
|
- `frontend/html/devices.html`
|
|
- `frontend/css/main.css`
|
|
|
|
---
|
|
|
|
## 17. Versions
|
|
|
|
### Incrémentation appliquée
|
|
- **Script bench** : v2.2.0 (dans `scripts/bench.sh`)
|
|
- **Backend** : v2.2.0
|
|
- **Frontend** : v2.2.0 (dans `frontend/version.json`)
|
|
- Affichage des versions dans le header
|
|
|
|
### Fichiers modifiés
|
|
- `scripts/bench.sh`
|
|
- `backend/app/api/benchmark.py`
|
|
- `frontend/version.json`
|
|
|
|
---
|
|
|
|
## Migrations à appliquer
|
|
|
|
```bash
|
|
sqlite3 backend/data/data.db < backend/migrations/018_add_device_ip_url.sql
|
|
```
|
|
|
|
---
|
|
|
|
## Prochaines étapes possibles
|
|
|
|
1. Tester le changement de pack d'icônes dans Settings
|
|
2. Lancer un bench avec `raw_info.dmidecode` complet pour vérifier l'affichage
|
|
3. Vérifier le placement des popups (score, motherboard, mémoire) en bas de page
|
|
4. Ajuster les seuils de score si nécessaire
|
|
5. Étendre la même édition d'URL IP dans `device_detail.html`
|
|
6. Migrer les icônes de sections (carte mère, CPU, etc.) vers des packs personnalisables
|
|
|
|
---
|
|
|
|
## Fichiers principaux modifiés
|
|
|
|
### Backend
|
|
- `backend/app/main.py`
|
|
- `backend/app/models/device.py`
|
|
- `backend/app/models/hardware.py`
|
|
- `backend/app/api/devices.py`
|
|
- `backend/app/api/benchmark.py`
|
|
- `backend/migrations/018_add_device_ip_url.sql`
|
|
- `scripts/bench.sh`
|
|
|
|
### Frontend
|
|
- `frontend/html/devices.html`
|
|
- `frontend/html/settings.html`
|
|
- `frontend/test-icons.html`
|
|
- `frontend/js/devices.js`
|
|
- `frontend/js/device_detail.js`
|
|
- `frontend/js/settings.js`
|
|
- `frontend/js/icon-manager.js`
|
|
- `frontend/js/utils.js`
|
|
- `frontend/css/main.css`
|
|
- `frontend/css/components.css`
|
|
- `frontend/css/memory-slots.css`
|
|
- `frontend/version.json`
|
|
|
|
---
|
|
|
|
## Notes techniques
|
|
|
|
- Les icônes PNG (Icons8) ne peuvent pas être teintées via `currentColor` - utiliser les packs FontAwesome pour la coloration thème
|
|
- Les popups utilisent `position: fixed` + `z-index` élevé pour rester au premier plan
|
|
- Le placement "intelligent" des tooltips utilise `getBoundingClientRect()` + `requestAnimationFrame()`
|
|
- Les scrollbars personnalisées utilisent les pseudo-éléments `::-webkit-scrollbar` (WebKit uniquement)
|
|
|
|
---
|
|
|
|
**Fin de la synthèse**
|