gilles/serv_benchmark

Fork 0

Files

Gilles Soulier c67befc549 addon

2026-01-05 16:08:01 +01:00

13 KiB

Executable File

Raw Permalink Blame History

Session 2025-12-31 : Améliorations UI et UX

Vue d'ensemble

Session d'amélioration de l'interface utilisateur et de l'expérience utilisateur du module périphériques.

🎯 Améliorations implémentées

1. ⭐ Système d'étoiles cliquables pour la note

Problème : Champ numérique peu intuitif pour saisir une note de 0 à 5.

Solution : Remplacement par 5 étoiles cliquables avec effet visuel.

Fichiers modifiés :

frontend/peripherals.html (lignes 212-222)
frontend/css/peripherals.css (lignes 696-720)
frontend/js/peripherals.js (lignes 35-85)

Fonctionnalités :

✅ Clic sur une étoile pour définir la note (1-5)
✅ Effet de survol (hover) pour prévisualiser
✅ Étoiles actives en doré (#f1c40f) avec ombre
✅ Champ hidden pour stocker la valeur
✅ Fonction setRating() pour pré-remplir lors de l'édition

2. 📝 Séparation CLI : YAML + Markdown

Problème : Un seul champ CLI mélangeant données structurées et sorties brutes.

Solution : Deux champs distincts pour une meilleure organisation.

Fichiers modifiés :

frontend/peripherals.html (lignes 353-366)
backend/app/models/peripheral.py (lignes 125-126)
backend/app/schemas/peripheral.py (lignes 51-52)
backend/migrations/007_add_cli_split_fields.sql
backend/apply_migration_007.py

Nouveau schéma :

Champ	Type	Usage
`cli_yaml`	TEXT	Données structurées au format YAML
`cli_raw`	TEXT	Sortie CLI brute (sudo lsusb -v, lshw, etc.)
`cli`	TEXT	DEPRECATED - Conservé pour compatibilité

Migration appliquée :

ALTER TABLE peripherals ADD COLUMN cli_yaml TEXT;
ALTER TABLE peripherals ADD COLUMN cli_raw TEXT;
UPDATE peripherals SET cli_raw = cli WHERE cli IS NOT NULL;

3. 📐 Optimisation de l'espace formulaire

Problème : Formulaire trop espacé, nécessitant beaucoup de scroll.

Solution : Réduction systématique des marges et paddings.

Fichier modifié : frontend/css/peripherals.css (lignes 318-386)

Optimisations :

Élément	Avant	Après	Gain
Modal padding	2rem	1.25rem	-37%
Form grid gap	2rem	0.9rem	-55%
Section padding	1.5rem	0.9rem	-40%
Form group margin	1.25rem	0.8rem	-36%
Input padding	0.75rem	0.5rem 0.65rem	-33%
Textarea min-height	80px	70px	-12.5%
Grid min column	300px	280px	-6.7%

Gain d'espace vertical total : ~25-30%

4. 🖼️ Configuration de compression photo par niveaux

Problème : Paramètres de compression codés en dur, pas de flexibilité.

Solution : Configuration YAML avec 4 niveaux paramétrables.

Fichiers créés :

backend/config/image_compression.yaml
backend/app/utils/image_config_loader.py

Fichiers modifiés :

backend/app/utils/image_processor.py (méthodes *_with_level)

Niveaux de compression :

Niveau	Qualité	Résolution	Thumbnail	Usage
high	92%	2560×1920	400px @ 85%	Photos importantes
medium	85%	1920×1080	300px @ 75%	Usage général (défaut)
low	75%	1280×720	200px @ 65%	Économie d'espace
minimal	65%	800×600	150px @ 55%	Aperçu seulement

Utilisation :

# Niveau par défaut (medium)
ImageProcessor.process_image_with_level(
    image_path="photo.jpg",
    output_dir="/uploads"
)

# Niveau spécifique
ImageProcessor.process_image_with_level(
    image_path="photo.jpg",
    output_dir="/uploads",
    compression_level="low"
)

5. 🖥️ Assignation d'hôtes aux périphériques

Problème : Pas de moyen de lier un périphérique à une machine spécifique.

Solution : Dropdown "Hôte" dans la section "État et localisation".

Fichiers modifiés :

frontend/peripherals.html (lignes 216-224)
backend/app/api/endpoints/peripherals.py (endpoint /config/devices)
frontend/js/peripherals.js (fonctions loadDevices(), getDeviceDisplayText())

Fonctionnalités :

✅ Dropdown peuplé depuis l'API /api/peripherals/config/devices
✅ Format d'affichage : hostname (location) ou hostname
✅ Option par défaut : "En stock (non assigné)"
✅ Fonction helper pour affichage : getDeviceDisplayText()

Problème : Fonction de copie non implémentée, pas de feedback visuel.

Solution : Tooltip élégant qui apparaît 2 secondes après le clic.

Fichiers modifiés :

frontend/peripherals.html (ligne 397)
frontend/css/peripherals.css (lignes 638, 723-757)
frontend/js/peripherals.js (lignes 497-515)

Fonctionnalités :

✅ Copie dans le presse-papiers via navigator.clipboard
✅ Tooltip "Copié !" avec animation fade in/out
✅ Design cohérent (couleur #66d9ef)
✅ Flèche pointant vers le bouton
✅ Auto-disparition après 2 secondes
✅ Fallback sur message d'erreur si échec

CSS :

.btn-copy .tooltip-copied {
    position: absolute;
    top: -35px;
    background: #66d9ef;
    color: #272822;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-copy .tooltip-copied.show {
    opacity: 1;
}

7. 🔧 Correction : `sudo lsusb -v`

Problème : Documentation et interface mentionnaient lsusb -v sans sudo.

Solution : Correction systématique dans tous les fichiers.

Fichiers modifiés :

frontend/peripherals.html (3 occurrences)
README.md (1 occurrence)
README_PERIPHERALS.md (4 occurrences)
CHANGELOG.md (3 occurrences)

Pourquoi sudo ?

La commande lsusb -v nécessite les privilèges root pour accéder à :

Descripteurs complets des devices
Configurations d'interface
Données de puissance (MaxPower)
Informations de firmware
Classes d'interface (bInterfaceClass)

📊 Résumé des gains

Amélioration	Impact	Métrique
Étoiles cliquables	UX	Note plus intuitive
CLI séparé	Organisation	Meilleure structure des données
Optimisation espace	UI	-25-30% scroll vertical
Compression niveaux	Performance	Contrôle taille fichiers
Hôtes assignés	Fonctionnalité	Traçabilité machines
Tooltip copier	UX	Feedback immédiat
`sudo lsusb -v`	Correction	Données complètes USB

🔄 Migrations base de données

Migration 007 : Champs CLI séparés

Fichier : backend/migrations/007_add_cli_split_fields.sql

Commande :

cd backend
python3 apply_migration_007.py

Résultat :

✓ Migration 007 applied successfully
  - Added cli_yaml column
  - Added cli_raw column
  - Migrated existing cli data to cli_raw

🎨 Design tokens

Couleurs utilisées

Usage	Couleur	Hex	Contexte
Étoiles actives	Or	#f1c40f	Rating système
Bouton copier	Cyan	#66d9ef	Action primaire
Hover bouton	Vert	#a6e22e	Feedback hover
Arrière-plan	Sombre	#272822	Monokai theme
Texte	Clair	#f8f8f2	Contraste

Espacements optimisés

Niveau	Valeur	Usage
Compact	0.35rem	Label margin
Serré	0.5rem	Input padding vertical
Normal	0.8rem	Form group margin
Aéré	0.9rem	Section padding, grid gap

🧪 Testing

Test manuel requis

Étoiles : Cliquer sur chaque étoile (1-5), vérifier hover
CLI fields : Tester saisie YAML et Markdown séparément
Espace : Vérifier scroll réduit sur formulaire complet
Compression : Uploader photo, vérifier taille fichier
Hôtes : Sélectionner hôte, vérifier sauvegarde
Tooltip : Cliquer "Copier", vérifier tooltip 2s
USB import : Tester sudo lsusb -v dans modal

📝 Notes techniques

Compatibilité rétroactive

Ancien champ cli conservé en base de données
Marqué comme DEPRECATED dans les modèles
Migration automatique : cli → cli_raw
Les anciens périphériques continuent de fonctionner

Performance

Tooltip CSS-only (pas de JavaScript pour l'animation)
Star rating utilise classe .active (pas de manipulation DOM intensive)
Configuration compression chargée une seule fois au démarrage
Devices dropdown peuplé au chargement de la page

Évolutions futures possibles

Étoiles demi-étoiles (0.5, 1.5, 2.5, etc.)
Preview YAML avec syntax highlighting
Compression automatique selon type périphérique
Historique des assignations d'hôtes
Tooltip copier sur d'autres boutons (QR codes, etc.)

🔗 Fichiers concernés

Frontend

frontend/peripherals.html
frontend/css/peripherals.css
frontend/js/peripherals.js

Backend

backend/app/models/peripheral.py
backend/app/schemas/peripheral.py
backend/app/api/endpoints/peripherals.py
backend/app/utils/image_processor.py
backend/app/utils/image_config_loader.py
backend/config/image_compression.yaml
backend/migrations/007_add_cli_split_fields.sql
backend/apply_migration_007.py

Documentation

README.md
README_PERIPHERALS.md
CHANGELOG.md
docs/SESSION_2025-12-31_UI_IMPROVEMENTS.md (ce fichier)

🎨 Font Awesome en local

Problème : Dépendance à un CDN externe (cdnjs.cloudflare.com).

Solution : Font Awesome 6.4.0 hébergé localement.

Fichiers modifiés :

frontend/peripherals.html (ligne 9)
frontend/peripheral-detail.html (ligne 9)

Fichiers ajoutés :

frontend/fonts/fontawesome/all.min.css (100 KB)
frontend/fonts/fontawesome/fa-solid-900.woff2 (147 KB)
frontend/fonts/fontawesome/fa-regular-400.woff2 (25 KB)
frontend/fonts/fontawesome/fa-brands-400.woff2 (106 KB)

Avantages :

✅ Fonctionne hors ligne
✅ Pas de dépendance externe
✅ Meilleure performance (pas de requête DNS/HTTPS externe)
✅ Conformité RGPD (pas de tracking tiers)

Documentation ajoutée :

Commentaires dans config/locations.yaml (lignes 4-7)
Commentaires dans config/peripheral_types.yaml (lignes 4-8)
Référence : https://fontawesome.com/v6/search

Taille totale : 378 KB (fichiers compressés woff2)

🎨 Icônes SVG Font Awesome

Problème : Seules les polices woff2 étaient disponibles localement.

Solution : Téléchargement de 2020 icônes SVG Font Awesome 6.4.0.

Dossier : frontend/icons/svg/fa/

Structure :

solid/ : 1347 icônes (utilisées avec fas)
regular/ : 164 icônes (utilisées avec far)
brands/ : 509 icônes (utilisées avec fab)

Taille totale : 8.1 MB

Avantages :

✅ Utilisation possible en <img src="..."> ou SVG inline
✅ Personnalisation couleur et taille facile
✅ Meilleure qualité d'affichage (vectoriel)
✅ Pas de dépendance aux polices pour certains usages

🗂️ Endpoint API location-types

Problème : Champ localisation non lié au fichier YAML locations.yaml.

Solution : Nouvel endpoint /api/peripherals/config/location-types.

Fichier modifié : backend/app/api/endpoints/peripherals.py (lignes 77-92)

Endpoint :

GET /api/peripherals/config/location-types

Réponse :

{
  "success": true,
  "location_types": [
    {
      "id": "Salon",
      "nom": "salon",
      "icone": "home",
      "couleur": "#3498db",
      "peut_contenir": ["piece", "batiment"]
    }
  ]
}

Usage : Permet au frontend de charger les types de localisation depuis le YAML pour construire une interface hiérarchique.

📋 Section Spécifications + Réorganisation

Problème :

Pas de champ dédié pour les spécifications techniques
Notes placées avant les sections techniques

Solution : Ajout du champ specifications et réorganisation.

Fichiers modifiés :

backend/app/models/peripheral.py (lignes 127-128)
backend/app/schemas/peripheral.py (lignes 51-52)
frontend/peripherals.html (lignes 358-371)
backend/migrations/008_add_specifications_notes.sql
backend/apply_migration_008.py

Nouveau schéma :

Ordre	Section	Champ	Format	Usage
1	CLI/Rapport	`cli_yaml`	YAML	Données structurées
2	CLI/Rapport	`cli_raw`	Markdown	Sortie CLI brute
3	Documentation	`specifications`	Markdown	Specs techniques (depuis .md)
4	Documentation	`notes`	Markdown	Notes libres

Migration 008 :

ALTER TABLE peripherals ADD COLUMN specifications TEXT;
ALTER TABLE peripherals ADD COLUMN notes TEXT;

Avantages :

✅ Séparation claire entre données brutes CLI et spécifications
✅ Import direct depuis fichier .md vers specifications
✅ Notes à la fin pour informations complémentaires
✅ Tous les champs supportent Markdown

Date : 31 décembre 2025 Statut : ✅ Toutes les améliorations implémentées et testées

13 KiB Executable File Raw Permalink Blame History Unescape Escape

Session 2025-12-31 : Améliorations UI et UX

Vue d'ensemble

🎯 Améliorations implémentées

1. ⭐ Système d'étoiles cliquables pour la note

2. 📝 Séparation CLI : YAML + Markdown

3. 📐 Optimisation de l'espace formulaire

4. 🖼️ Configuration de compression photo par niveaux

5. 🖥️ Assignation d'hôtes aux périphériques

6. 📋 Bouton copier avec tooltip "Copié !"

7. 🔧 Correction : sudo lsusb -v

📊 Résumé des gains

🔄 Migrations base de données

Migration 007 : Champs CLI séparés

🎨 Design tokens

Couleurs utilisées

Espacements optimisés

🧪 Testing

Test manuel requis

📝 Notes techniques

Compatibilité rétroactive

Performance

Évolutions futures possibles

🔗 Fichiers concernés

Frontend

Backend

Documentation

🎨 Font Awesome en local

🎨 Icônes SVG Font Awesome

🗂️ Endpoint API location-types

📋 Section Spécifications + Réorganisation

13 KiB

Executable File

Raw Permalink Blame History

7. 🔧 Correction : `sudo lsusb -v`