gilles/serv_benchmark

Fork 0

Files

Gilles Soulier 6abc70cdfe add go bench client

2026-01-11 23:41:30 +01:00

8.7 KiB

Raw Permalink Blame History

✅ Système d'icônes - Prêt à tester !

🎯 Résumé des modifications

Le système de packs d'icônes est maintenant complètement fonctionnel et intégré dans toutes les pages.

Problème résolu

Les icônes étaient codées en dur avec des emojis dans le HTML. Maintenant, elles sont dynamiques et changent selon le pack sélectionné.

🔧 Modifications apportées

1. Boutons HTML mis à jour

Fichiers modifiés :

frontend/device_detail.html - Boutons "Rafraîchir", "Supprimer", "Upload", "Ajouter lien"
frontend/devices.html - Bouton "Rafraîchir"
frontend/settings.html - Tous les boutons (Enregistrer, Réinitialiser, Copier, etc.)

Changement effectué :

<!-- AVANT (emoji codé en dur) -->
<button class="btn btn-danger" onclick="deleteItem()">
  🗑️ Supprimer
</button>

<!-- APRÈS (icône dynamique) -->
<button class="btn btn-danger" onclick="deleteItem()" data-icon="delete">
  <span class="btn-icon-wrapper"></span> Supprimer
</button>

2. Auto-initialisation des icônes

Fichier modifié : frontend/js/icon-manager.js

Le gestionnaire initialise automatiquement toutes les icônes au chargement de la page :

Scanne tous les [data-icon]
Injecte l'icône correspondante dans .btn-icon-wrapper
Re-initialise automatiquement lors du changement de pack

3. Fonction helper ajoutée

Fichier modifié : frontend/js/utils.js

Nouvelle fonction initializeButtonIcons() :

// Initialise tous les boutons avec icônes
initializeButtonIcons();

// Appelée automatiquement par icon-manager.js

4. Page de test créée

Nouveau fichier : frontend/test-icons.html

Page dédiée pour tester les packs d'icônes avec :

Sélecteur de pack en temps réel
15 boutons de test couvrant toutes les icônes
Informations de debug
Application instantanée sans rechargement

🧪 Comment tester

Test 1 : Page de test dédiée (RECOMMANDÉ)

Ouvrir http://localhost:8087/test-icons.html
Sélectionner différents packs dans la liste déroulante
Cliquer sur "Appliquer le pack"
Observer que tous les boutons changent d'icônes instantanément
Vérifier la section "Informations de debug" pour voir les détails

Résultat attendu :

Emojis Unicode : ➕ ✏️ 🗑️ 💾
FontAwesome Solid : Icônes SVG pleines en blanc
FontAwesome Regular : Icônes SVG fines en blanc
Icons8 PNG : Mix d'icônes PNG et emojis

Test 2 : Via Settings (test complet)

Ouvrir http://localhost:8087/settings.html
Aller dans la section "Pack d'icônes"
Sélectionner un pack (ex: FontAwesome Solid)
Observer l'aperçu en temps réel
Cliquer sur "Appliquer le pack d'icônes"
La page se recharge automatiquement
Vérifier que tous les boutons de Settings utilisent le nouveau pack
Naviguer vers Device Detail ou Devices
Vérifier que les icônes sont cohérentes partout

Boutons à vérifier dans Settings :

💾 / SVG - Appliquer le thème
💾 / SVG - Appliquer le pack d'icônes
🔄 / SVG - Réinitialiser
💾 / SVG - Enregistrer les préférences
💾 / SVG - Enregistrer les seuils
📋 / SVG - Copier

Test 3 : Device Detail

Ouvrir un device : http://localhost:8087/device_detail.html?id=1
Vérifier les boutons :
- 🔄 / SVG Rafraîchir (dans le header)
- 🗑️ / SVG Supprimer (à côté du nom)
- 📤 / SVG Upload (dans l'onglet Documents)
- 🔗 / SVG Ajouter lien (dans l'onglet Liens)

Résultat attendu : Toutes les icônes correspondent au pack sélectionné.

Test 4 : Changement dynamique

Avec la console ouverte (F12)
Exécuter :

// Changer de pack
window.IconManager.applyPack('fontawesome-solid');

// Vérifier le pack actuel
console.log(window.IconManager.getCurrentPack());

// Obtenir une icône
console.log(window.IconManager.getIcon('delete'));

Résultat attendu :

Les icônes changent instantanément
La console affiche le pack actuel
L'icône retournée correspond au pack

🐛 Debug en cas de problème

Problème : Les icônes ne changent pas

Solution :

Ouvrir la console (F12)
Vérifier les logs :

[IconManager] Initialized with pack: emoji
[initializeButtonIcons] Initialized X button icons

Vérifier que icon-manager.js est chargé :

console.log(window.IconManager);
// Devrait afficher l'objet IconManager

Vérifier que les boutons ont l'attribut data-icon :

console.log(document.querySelectorAll('[data-icon]').length);
// Devrait afficher un nombre > 0

Problème : Les icônes SVG n'apparaissent pas

Solution :

Vérifier les fichiers SVG :

ls frontend/icons/svg/fa/solid/ | grep -E "trash|plus|pen|save"

Ouvrir la console Network (F12 > Network)
Recharger la page
Chercher les erreurs 404 sur les fichiers .svg
Vérifier les permissions :

chmod 644 frontend/icons/svg/fa/solid/*.svg
chmod 644 frontend/icons/svg/fa/regular/*.svg

Problème : Le pack ne se sauvegarde pas

Solution :

Vérifier localStorage :

console.log(localStorage.getItem('benchtools_icon_pack'));

Vider le cache du navigateur (Ctrl+Shift+Del)
Tester en navigation privée

Problème : Les icônes sont de la mauvaise couleur

Vérification : Les filtres CSS dans components.css doivent être :

.btn-primary .btn-icon { filter: brightness(0) invert(1); } /* Blanc */
.btn-secondary .btn-icon { filter: brightness(0.8); }
.btn-danger .btn-icon { filter: brightness(0) invert(1); } /* Blanc */

📊 Liste complète des boutons mis à jour

device_detail.html (4 boutons)

✅ Rafraîchir (header)
✅ Supprimer device
✅ Upload document
✅ Ajouter lien

devices.html (1 bouton)

✅ Rafraîchir (header)

settings.html (9 boutons)

✅ Appliquer le thème
✅ Appliquer le pack d'icônes
✅ Réinitialiser pack
✅ Enregistrer préférences
✅ Réinitialiser préférences
✅ Enregistrer seuils
✅ Calculer automatiquement
✅ Réinitialiser seuils
✅ Copier token

Total : 14 boutons mis à jour avec le système dynamique.

🎨 Packs disponibles

Pack	Icône Add	Icône Delete	Icône Save	Type
emoji	➕	🗑️	💾	Unicode emoji
fontawesome-solid				SVG plein
fontawesome-regular				SVG fin
icons8	✓	🗑️	💾	Mix PNG/emoji

🚀 Prochaines étapes (optionnel)

Si vous voulez aller plus loin :

1. Ajouter plus d'icônes

Éditer icon-manager.js et ajouter de nouvelles icônes dans ICON_PACKS :

icons: {
  // ... icônes existantes
  'new-icon': '<img src="icons/svg/fa/solid/star.svg" class="btn-icon" alt="Star">'
}

2. Créer un nouveau pack personnalisé

Ajouter un nouveau pack dans icon-manager.js :

'mon-pack': {
  name: 'Mon Pack Custom',
  description: 'Mon pack personnalisé',
  icons: {
    'add': '➕',
    'delete': '🗑️',
    // ... autres icônes
  }
}

Puis ajouter l'option dans settings.html.

3. Mettre à jour les boutons générés en JavaScript

Si vous avez des boutons créés dynamiquement dans vos scripts, utilisez :

// Au lieu de
innerHTML = '<button>🗑️ Supprimer</button>';

// Utilisez
innerHTML = createIconButton('delete', 'Supprimer', 'btn btn-danger', 'deleteItem()');

✅ Checklist de test

Ouvrir test-icons.html et tester les 4 packs
Vérifier que l'aperçu fonctionne dans Settings
Appliquer un pack et vérifier le rechargement
Vérifier device_detail.html avec le nouveau pack
Vérifier devices.html avec le nouveau pack
Vérifier settings.html avec le nouveau pack
Tester le changement de pack plusieurs fois
Vérifier que le pack persiste après rechargement
Tester en navigation privée
Vérifier la console pour les erreurs

📚 Documentation

FEATURE_ICON_PACKS.md - Documentation technique complète
GUIDE_ICON_PACKS.md - Guide utilisateur
CHANGELOG.md - Liste des changements

Statut : ✅ PRÊT POUR LES TESTS

Le système est complètement fonctionnel et toutes les icônes sont dynamiques. Vous pouvez maintenant changer de pack d'icônes à votre guise !

8.7 KiB Raw Permalink Blame History Unescape Escape

✅ Système d'icônes - Prêt à tester !

🎯 Résumé des modifications

Problème résolu

🔧 Modifications apportées

1. Boutons HTML mis à jour

2. Auto-initialisation des icônes

3. Fonction helper ajoutée

4. Page de test créée

🧪 Comment tester

Test 1 : Page de test dédiée (RECOMMANDÉ)

Test 2 : Via Settings (test complet)

Test 3 : Device Detail

Test 4 : Changement dynamique

🐛 Debug en cas de problème

Problème : Les icônes ne changent pas

Problème : Les icônes SVG n'apparaissent pas

Problème : Le pack ne se sauvegarde pas

Problème : Les icônes sont de la mauvaise couleur

📊 Liste complète des boutons mis à jour

device_detail.html (4 boutons)

devices.html (1 bouton)

settings.html (9 boutons)

🎨 Packs disponibles

🚀 Prochaines étapes (optionnel)

1. Ajouter plus d'icônes

2. Créer un nouveau pack personnalisé

3. Mettre à jour les boutons générés en JavaScript

✅ Checklist de test

📚 Documentation

8.7 KiB

Raw Permalink Blame History