158 lines
4.4 KiB
Markdown
158 lines
4.4 KiB
Markdown
# 🗑️ Suppression des boutons de suppression du volet latéral
|
||
|
||
## 📋 Changement effectué
|
||
|
||
Les boutons de suppression (🗑️) ont été **retirés du volet latéral** de la page Devices.
|
||
|
||
### Raison
|
||
|
||
La suppression d'un device doit uniquement se faire depuis la **section centrale** (panneau de détail) pour éviter les suppressions accidentelles lors de la navigation dans la liste.
|
||
|
||
---
|
||
|
||
## 🔧 Modifications apportées
|
||
|
||
### 1. JavaScript - Rendu de la liste
|
||
|
||
**Fichier modifié** : [frontend/js/devices.js](../frontend/js/devices.js:165-169)
|
||
|
||
**AVANT** :
|
||
```javascript
|
||
<div style="display: flex; align-items: center; gap: 0.35rem;">
|
||
<span class="${scoreClass}" style="font-size: 0.75rem; padding: 0.2rem 0.5rem;">
|
||
${scoreText}
|
||
</span>
|
||
<button type="button" class="device-list-delete"
|
||
title="Supprimer ce device"
|
||
onclick="event.stopPropagation(); deleteDeviceFromList(event, ${device.id}, '${hostnameEscaped}')">
|
||
🗑️
|
||
</button>
|
||
</div>
|
||
```
|
||
|
||
**APRÈS** :
|
||
```javascript
|
||
<div style="display: flex; align-items: center; gap: 0.35rem;">
|
||
<span class="${scoreClass}" style="font-size: 0.75rem; padding: 0.2rem 0.5rem;">
|
||
${scoreText}
|
||
</span>
|
||
</div>
|
||
```
|
||
|
||
### 2. CSS - Nettoyage
|
||
|
||
**Fichier modifié** : [frontend/css/main.css](../frontend/css/main.css:431)
|
||
|
||
**AVANT** :
|
||
```css
|
||
.device-list-delete {
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--color-danger);
|
||
cursor: pointer;
|
||
font-size: 0.9rem;
|
||
padding: 0.2rem;
|
||
transition: transform 0.2s ease;
|
||
position: relative;
|
||
z-index: 10;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.device-list-delete:hover {
|
||
transform: scale(1.2);
|
||
filter: brightness(1.3);
|
||
}
|
||
```
|
||
|
||
**APRÈS** :
|
||
```css
|
||
/* Device list delete button removed - deletion only from central panel */
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ Résultat
|
||
|
||
### Volet latéral (liste des devices)
|
||
|
||
**AVANT** :
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ pvemsi 9109 🗑️│
|
||
│ ⏱️ il y a 23 heures │
|
||
├─────────────────────────────┤
|
||
│ aorus 8848 🗑️│
|
||
│ ⏱️ il y a 13 heures │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
**APRÈS** :
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ pvemsi 9109│
|
||
│ ⏱️ il y a 23 heures │
|
||
├─────────────────────────────┤
|
||
│ aorus 8848│
|
||
│ ⏱️ il y a 13 heures │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### Panneau central (détails)
|
||
|
||
Le bouton **"🗑️ Supprimer"** (ou avec l'icône selon le pack choisi) reste présent dans le panneau central, à côté du nom du device.
|
||
|
||
---
|
||
|
||
## 🎯 Workflow de suppression
|
||
|
||
### Nouvelle procédure
|
||
|
||
1. Cliquer sur un device dans le volet latéral pour le sélectionner
|
||
2. Le panneau central affiche les détails du device
|
||
3. Cliquer sur le bouton **"Supprimer"** en haut du panneau central
|
||
4. Confirmer la suppression dans la popup
|
||
|
||
### Avantages
|
||
|
||
- ✅ **Évite les suppressions accidentelles** lors de la navigation
|
||
- ✅ **Workflow plus clair** : sélectionner puis agir
|
||
- ✅ **Interface plus propre** dans le volet latéral
|
||
- ✅ **Cohérent** avec d'autres interfaces de gestion
|
||
|
||
---
|
||
|
||
## 📝 Note technique
|
||
|
||
### Fonction conservée
|
||
|
||
La fonction `deleteDeviceFromList()` dans `devices.js` a été **conservée** mais n'est plus appelée. Elle pourrait être utilisée à l'avenir si nécessaire.
|
||
|
||
**Emplacement** : [frontend/js/devices.js:270](../frontend/js/devices.js#L270)
|
||
|
||
Si vous souhaitez la supprimer complètement :
|
||
```javascript
|
||
// Supprimer les lignes 270-289 dans devices.js
|
||
async function deleteDeviceFromList(event, deviceId, hostname) {
|
||
// ... code de la fonction
|
||
}
|
||
|
||
// Et la ligne 2144
|
||
window.deleteDeviceFromList = deleteDeviceFromList;
|
||
```
|
||
|
||
---
|
||
|
||
## 🧪 Test
|
||
|
||
1. Ouvrir [http://localhost:8087/devices.html](http://localhost:8087/devices.html)
|
||
2. Observer le volet latéral
|
||
3. Vérifier qu'il n'y a **plus de bouton 🗑️** à côté des scores
|
||
4. Cliquer sur un device
|
||
5. Vérifier que le bouton **"Supprimer"** est bien présent dans le panneau central
|
||
|
||
---
|
||
|
||
**Date** : 2026-01-11
|
||
**Impact** : UX improvement - Prévention des suppressions accidentelles
|
||
**Breaking change** : Non - Fonctionnalité conservée, seul l'emplacement change
|