Ajout galerie d'images et flux vidéo au dashboard 1BIP

Fonctionnalités ajoutées:
- 📸 Galerie d'images capturées dans l'onglet "Alertes de Sécurité"
  - Affichage des 20 dernières images capturées par la caméra
  - Vue en grille avec miniatures cliquables
  - Modal pour visualisation en plein écran
  - Bouton de téléchargement pour chaque image
  - Horodatage en français pour chaque capture

- 📹 Section flux vidéo en direct dans l'onglet "Moniteur en Direct"
  - Placeholder pour streaming vidéo (prochainement)
  - Infrastructure prête pour MJPEG/WebRTC

- 🔌 API Backend (dashboard-service/src/app.py):
  - GET /api/images/<filename> - Servir une image capturée
  - GET /api/images/latest - Liste des 20 dernières images
  - Volume partagé avec camera-service pour accès aux images

- 🎨 Styles CSS complets pour galerie et modal
  - Thème militaire cohérent
  - Responsive design (mobile/tablet)
  - Animations et transitions fluides

Modifications techniques:
- dashboard.html: Nouvelle section galerie dans tab-unauthorized
- dashboard.js: Fonctions refreshCapturedImages(), viewFullImage(), closeImageModal()
- dashboard.css: Styles .image-grid, .image-modal, .live-stream-section
- app.py: Routes /api/images/* avec serving depuis /app/camera_logs
- docker-compose.yml: Volume mapping camera-service/logs → dashboard

🇲🇦 1BIP - Forces Armées Royales Marocaines - Troupes Aéroportées
🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

Author: claude

dashboard-service/src/app.py

@@ -459,6 +459,64 @@ def serve_static(filename):
     return send_from_directory('static', filename)
 
 
+# ============================================
+# CAPTURED IMAGES (from camera service)
+# ============================================
+
+@app.route('/api/images/<path:filename>')
+def serve_captured_image(filename):
+    """Serve captured images from camera service"""
+    try:
+        camera_logs_path = os.getenv('CAMERA_LOGS_PATH', '/app/camera_logs')
+        image_path = os.path.join(camera_logs_path, 'debug_images', filename)
+
+        if os.path.exists(image_path):
+            return send_from_directory(
+                os.path.join(camera_logs_path, 'debug_images'),
+                filename,
+                mimetype='image/jpeg'
+            )
+        else:
+            logger.warning(f"Image not found: {image_path}")
+            # Return placeholder image
+            return jsonify({'error': 'Image not found'}), 404
+    except Exception as e:
+        logger.error(f"Error serving image {filename}: {e}")
+        return jsonify({'error': str(e)}), 500
+
+
+@app.route('/api/images/latest')
+def get_latest_images():
+    """Get list of latest captured images"""
+    try:
+        camera_logs_path = os.getenv('CAMERA_LOGS_PATH', '/app/camera_logs')
+        debug_images_path = os.path.join(camera_logs_path, 'debug_images')
+
+        if not os.path.exists(debug_images_path):
+            return jsonify({'images': []})
+
+        # Get all images sorted by modification time
+        images = []
+        for filename in os.listdir(debug_images_path):
+            if filename.endswith(('.jpg', '.jpeg', '.png')):
+                filepath = os.path.join(debug_images_path, filename)
+                mtime = os.path.getmtime(filepath)
+                images.append({
+                    'filename': filename,
+                    'timestamp': mtime,
+                    'url': f'/api/images/{filename}'
+                })
+
+        # Sort by timestamp (newest first)
+        images.sort(key=lambda x: x['timestamp'], reverse=True)
+
+        # Return last 20 images
+        return jsonify({'images': images[:20]})
+    except Exception as e:
+        logger.error(f"Error getting latest images: {e}")
+        return jsonify({'error': str(e), 'images': []}), 500
+
+
 # ============================================
 # ERROR HANDLERS
 # ============================================

dashboard-service/src/static/css/dashboard.css

@@ -593,3 +593,226 @@ body {
 .fade-in {
     animation: fadeIn 0.3s ease-in-out;
 }
+
+/* ==================== IMAGE GALLERY ==================== */
+.captured-images-section {
+    margin-top: 2rem;
+    padding-top: 2rem;
+    border-top: 2px solid var(--border-color);
+}
+
+.captured-images-section h3 {
+    font-size: 1.3rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+
+.image-count {
+    font-weight: 600;
+    color: var(--text-muted);
+    margin-left: 1rem;
+}
+
+.image-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.image-card {
+    background: var(--card-bg);
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.image-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    border-color: var(--primary-color);
+}
+
+.image-wrapper {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    background-color: #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.image-wrapper img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.image-info {
+    padding: 0.75rem;
+    background-color: var(--card-bg);
+}
+
+.image-filename {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 0.25rem;
+}
+
+.image-timestamp {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--primary-color);
+}
+
+/* ==================== IMAGE MODAL ==================== */
+.image-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.85);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    animation: fadeIn 0.2s ease-in-out;
+}
+
+.image-modal-content {
+    background: var(--card-bg);
+    border-radius: 12px;
+    max-width: 90vw;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+}
+
+.image-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    border-bottom: 2px solid var(--border-color);
+    background-color: var(--header-bg);
+    color: var(--header-text);
+    border-radius: 12px 12px 0 0;
+}
+
+.image-modal-header h3 {
+    margin: 0;
+    font-size: 1.1rem;
+}
+
+.image-modal-close {
+    background: none;
+    border: none;
+    color: var(--header-text);
+    font-size: 2rem;
+    cursor: pointer;
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+
+.image-modal-close:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.image-modal-body {
+    padding: 1rem;
+    overflow: auto;
+    max-height: calc(90vh - 140px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.image-modal-body img {
+    max-width: 100%;
+    max-height: 70vh;
+    object-fit: contain;
+    border-radius: 4px;
+}
+
+.image-modal-footer {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem 1.5rem;
+    border-top: 2px solid var(--border-color);
+    justify-content: flex-end;
+}
+
+/* ==================== LIVE STREAM VIDEO ==================== */
+.live-stream-section {
+    margin-bottom: 2rem;
+    background: var(--card-bg);
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    padding: 1rem;
+}
+
+.live-stream-section h3 {
+    font-size: 1.3rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+
+.video-container {
+    position: relative;
+    width: 100%;
+    background-color: #000;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.video-stream {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.video-placeholder {
+    width: 100%;
+    height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #1a1a1a;
+    color: #888;
+    font-size: 1.2rem;
+}
+
+/* ==================== RESPONSIVE ADJUSTMENTS ==================== */
+@media (max-width: 768px) {
+    .image-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    }
+
+    .image-wrapper {
+        height: 150px;
+    }
+
+    .image-modal-content {
+        max-width: 95vw;
+        max-height: 95vh;
+    }
+
+    .image-modal-body img {
+        max-height: 60vh;
+    }
+}

dashboard-service/src/static/js/dashboard.js

@@ -83,6 +83,7 @@ function loadTabData(tabName) {
             break;
         case 'unauthorized':
             refreshUnauthorized();
+            refreshCapturedImages();
             break;
         case 'cameras':
             refreshCameraStatus();
@@ -243,6 +244,95 @@ async function refreshUnauthorized() {
     }
 }
 
+// ==================== CAPTURED IMAGES ====================
+async function refreshCapturedImages() {
+    const imageGrid = document.getElementById('capturedImagesGrid');
+    const imageCount = document.getElementById('imageCount');
+
+    imageGrid.innerHTML = '<div class="loading">Chargement des images capturées...</div>';
+
+    try {
+        const response = await fetch(`${CONFIG.API_BASE_URL}/api/images/latest`);
+        if (!response.ok) throw new Error('Failed to fetch images');
+
+        const data = await response.json();
+        const images = data.images || [];
+
+        imageCount.textContent = `${images.length} image(s) trouvée(s)`;
+
+        if (images.length === 0) {
+            imageGrid.innerHTML = '<div class="empty">Aucune image capturée trouvée</div>';
+            return;
+        }
+
+        imageGrid.innerHTML = images.map(img => {
+            const date = new Date(img.timestamp * 1000);
+            const timeStr = date.toLocaleString('fr-FR', {
+                day: '2-digit',
+                month: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            });
+
+            return `
+                <div class="image-card" onclick="viewFullImage('${img.url}', '${escapeHtml(img.filename)}')">
+                    <div class="image-wrapper">
+                        <img src="${img.url}" alt="${escapeHtml(img.filename)}" loading="lazy" />
+                    </div>
+                    <div class="image-info">
+                        <div class="image-filename">${escapeHtml(img.filename)}</div>
+                        <div class="image-timestamp">🕒 ${timeStr}</div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+    } catch (error) {
+        console.error('Error loading captured images:', error);
+        imageGrid.innerHTML = '<div class="empty">Erreur lors du chargement des images</div>';
+        imageCount.textContent = 'Erreur';
+    }
+}
+
+function viewFullImage(url, filename) {
+    // Create modal overlay
+    const modal = document.createElement('div');
+    modal.className = 'image-modal';
+    modal.innerHTML = `
+        <div class="image-modal-content">
+            <div class="image-modal-header">
+                <h3>📸 ${escapeHtml(filename)}</h3>
+                <button class="image-modal-close" onclick="closeImageModal()">&times;</button>
+            </div>
+            <div class="image-modal-body">
+                <img src="${url}" alt="${escapeHtml(filename)}" />
+            </div>
+            <div class="image-modal-footer">
+                <button class="btn btn-secondary" onclick="closeImageModal()">Fermer</button>
+                <a href="${url}" download="${filename}" class="btn btn-primary">📥 Télécharger</a>
+            </div>
+        </div>
+    `;
+
+    modal.onclick = function(e) {
+        if (e.target === modal) {
+            closeImageModal();
+        }
+    };
+
+    document.body.appendChild(modal);
+    document.body.style.overflow = 'hidden';
+}
+
+function closeImageModal() {
+    const modal = document.querySelector('.image-modal');
+    if (modal) {
+        modal.remove();
+        document.body.style.overflow = '';
+    }
+}
+
 // ==================== CAMERA STATUS ====================
 async function refreshCameraStatus() {
     const cameraGrid = document.getElementById('cameraGrid');