# Fonctionnalité : Icône cliquable pour photo principale

## 🎯 Objectif

Ajouter une icône cliquable en bas à gauche de chaque photo dans la galerie pour permettre de définir facilement quelle photo sera utilisée comme vignette principale (thumbnail).

## ✅ Implémentation

### 1. Interface utilisateur

**Fichier** : `frontend/js/peripheral-detail.js` (lignes 108-112)

```javascript
<button class="photo-primary-toggle ${photo.is_primary ? 'active' : ''}"
        onclick="setPrimaryPhoto(${photo.id})"
        title="${photo.is_primary ? 'Photo principale' : 'Définir comme photo principale'}">
    <i class="fas fa-${photo.is_primary ? 'check-circle' : 'circle'}"></i>
</button>
```

**Icônes** :
- ⭕ `circle` (non cochée) - Photo normale
- ✅ `check-circle` (cochée) - Photo principale

### 2. Style CSS

**Fichier** : `frontend/css/peripherals.css` (lignes 764-803)

```css
/* Photo Primary Toggle */
.photo-primary-toggle {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #666;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #999;
    font-size: 16px;
    z-index: 10;
}

.photo-primary-toggle:hover {
    background: rgba(0, 0, 0, 0.85);
    border-color: #66d9ef;
    color: #66d9ef;
    transform: scale(1.1);
}

.photo-primary-toggle.active {
    background: rgba(102, 217, 239, 0.2);
    border-color: #66d9ef;
    color: #66d9ef;
}

.photo-primary-toggle.active:hover {
    background: rgba(102, 217, 239, 0.3);
}

.photo-item {
    position: relative;
}
```

**Caractéristiques** :
- Position : Coin inférieur gauche de chaque photo
- Taille : 32×32px, bouton rond
- États : normal (gris), hover (bleu), active (bleu clair)
- Effet : Scale 1.1 au hover
- Z-index élevé pour rester au-dessus de l'image

### 3. Fonction JavaScript

**Fichier** : `frontend/js/peripheral-detail.js` (lignes 239-252)

```javascript
// Set photo as primary
async function setPrimaryPhoto(photoId) {
    try {
        await apiRequest(`/peripherals/${peripheralId}/photos/${photoId}/set-primary`, {
            method: 'POST'
        });

        showSuccess('Photo principale définie');
        loadPhotos(); // Reload to update icons
    } catch (error) {
        console.error('Error setting primary photo:', error);
        showError('Erreur lors de la définition de la photo principale');
    }
}
```

**Processus** :
1. Appel API POST pour définir la photo comme principale
2. Message de succès
3. Rechargement de la galerie pour mettre à jour les icônes

### 4. Endpoint API Backend

**Fichier** : `backend/app/api/endpoints/peripherals.py` (lignes 370-396)

```python
@router.post("/{peripheral_id}/photos/{photo_id}/set-primary", status_code=200)
def set_primary_photo(
    peripheral_id: int,
    photo_id: int,
    db: Session = Depends(get_peripherals_db)
):
    """Set a photo as primary (thumbnail)"""
    # Get the photo
    photo = db.query(PeripheralPhoto).filter(
        PeripheralPhoto.id == photo_id,
        PeripheralPhoto.peripheral_id == peripheral_id
    ).first()

    if not photo:
        raise HTTPException(status_code=404, detail="Photo not found")

    # Unset all other primary photos for this peripheral
    db.query(PeripheralPhoto).filter(
        PeripheralPhoto.peripheral_id == peripheral_id,
        PeripheralPhoto.id != photo_id
    ).update({"is_primary": False})

    # Set this photo as primary
    photo.is_primary = True
    db.commit()

    return {"message": "Photo set as primary", "photo_id": photo_id}
```

**Logique** :
1. Vérifie que la photo existe et appartient au périphérique
2. Retire le flag `is_primary` de toutes les autres photos
3. Définit `is_primary=True` pour la photo sélectionnée
4. Garantit qu'une seule photo est principale à la fois

## 🎨 Rendu visuel

### Galerie de photos

```
┌─────────────┐  ┌─────────────┐  ┌─────────────┐
│             │  │             │  │             │
│   Photo 1   │  │   Photo 2   │  │   Photo 3   │
│             │  │             │  │             │
│ ⭕          │  │ ✅          │  │ ⭕          │
│  [🗑️]      │  │  [🗑️]      │  │  [🗑️]      │
│ ★ Principale│  │             │  │             │
└─────────────┘  └─────────────┘  └─────────────┘
```

**Légende** :
- ⭕ = Icône ronde grise (non sélectionnée)
- ✅ = Icône check bleu cyan (sélectionnée)
- ★ = Badge "Principale" (affiché en haut)
- 🗑️ = Bouton supprimer (en haut à droite)

### États de l'icône

| État | Apparence | Couleur | Comportement |
|------|-----------|---------|--------------|
| **Normal** | ⭕ Circle | Gris #999 | Cliquable |
| **Hover** | ⭕ Circle agrandie | Bleu #66d9ef | Scale 1.1 |
| **Active** | ✅ Check-circle | Bleu #66d9ef | Fond bleu clair |
| **Active + Hover** | ✅ Check-circle | Bleu plus clair | Rétroaction visuelle |

## 🔄 Flux d'utilisation

```
1. User voit la galerie de photos
   ↓
2. Chaque photo affiche une icône ⭕/✅ en bas à gauche
   ↓
3. User clique sur une icône ⭕ (non sélectionnée)
   ↓
4. setPrimaryPhoto(photoId) appelé
   │  ├─> POST /api/peripherals/{id}/photos/{photo_id}/set-primary
   │  └─> Backend met à jour is_primary
   ↓
5. Base de données mise à jour
   │  ├─> Ancienne photo principale : is_primary = false
   │  └─> Nouvelle photo : is_primary = true
   ↓
6. Success
   │  ├─> Message "Photo principale définie"
   │  ├─> Galerie rechargée
   │  └─> Icônes mises à jour (✅ sur la nouvelle, ⭕ sur les autres)
```

## 📊 Règles métier

### Contraintes

1. **Une seule photo principale** par périphérique
   - Définie automatiquement lors de la sélection
   - Les autres sont désélectionnées automatiquement

2. **Photo principale = Vignette**
   - Utilisée dans les listes de périphériques
   - Affichée comme aperçu principal

3. **Upload avec is_primary**
   - Possibilité de cocher lors de l'upload
   - Si cochée, retire le flag des autres

### Avantages

- ✅ **Interface intuitive** : Un clic pour changer
- ✅ **Visuel clair** : États bien différenciés
- ✅ **Feedback immédiat** : Message + rechargement
- ✅ **Cohérence** : Une seule photo principale garantie

## 🧪 Tests

### Test manuel

1. **Ouvrir page détail** : Aller sur `/peripheral-detail.html?id=3`
2. **Observer les icônes** : Voir ⭕ ou ✅ en bas à gauche de chaque photo
3. **Hover sur icône** : Vérifier effet scale + changement couleur
4. **Cliquer icône non cochée** :
   - Message "Photo principale définie"
   - Icône devient ✅
   - Autres icônes deviennent ⭕
5. **Vérifier badge** : Badge "★ Principale" sur la photo cochée

### Test API

```bash
# Définir photo ID 5 comme principale pour périphérique 3
curl -X POST "http://10.0.0.50:8007/api/peripherals/3/photos/5/set-primary" \
  -H "X-API-Token: YOUR_TOKEN"
```

**Résultat attendu** :
```json
{
  "message": "Photo set as primary",
  "photo_id": 5
}
```

### Vérification base de données

```bash
docker exec linux_benchtools_backend python3 -c "
import sqlite3
conn = sqlite3.connect('/app/data/peripherals.db')
cursor = conn.cursor()
cursor.execute('SELECT id, filename, is_primary FROM peripheral_photos WHERE peripheral_id = 3')
for row in cursor.fetchall():
    print(f'Photo {row[0]}: {row[1]} - Primary: {row[2]}')
"
```

**Résultat attendu** :
```
Photo 4: image1.png - Primary: 0
Photo 5: image2.png - Primary: 1  ← Une seule
Photo 6: image3.png - Primary: 0
```

## 📝 Fichiers modifiés

### Frontend
- ✅ `frontend/js/peripheral-detail.js` - Ajout bouton + fonction setPrimaryPhoto()
- ✅ `frontend/css/peripherals.css` - Style .photo-primary-toggle

### Backend
- ✅ `backend/app/api/endpoints/peripherals.py` - Endpoint POST set-primary

### Documentation
- ✅ `docs/FEATURE_PRIMARY_PHOTO_TOGGLE.md` - Cette documentation

## 💡 Améliorations futures possibles

- [ ] Drag & drop pour réorganiser les photos
- [ ] Double-clic sur photo pour la définir comme principale
- [ ] Raccourci clavier (ex: P pour Primary)
- [ ] Animation de transition entre photos principales
- [ ] Preview de la vignette avant validation

---

**Date** : 31 décembre 2025
**Statut** : ✅ Implémenté et fonctionnel
**Impact** : Interface intuitive pour choisir la photo principale