120 lines
4.3 KiB
HTML
120 lines
4.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Galerie photos — Photomaton LSDW{% endblock %}
|
|
|
|
{% block nav_links %}
|
|
<a href="/gallery" class="active">📷 Galerie photos</a>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h1 class="page-title" style="margin:0">📷 Vos photos</h1>
|
|
<div class="flex gap-1 items-center">
|
|
<span class="text-sm text-muted" id="photo-count">Chargement…</span>
|
|
<button class="btn btn-ghost btn-sm" onclick="loadPhotos(1)">↻</button>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-muted mb-2">
|
|
Retrouvez vos photos ci-dessous. Scannez le QR code depuis la galerie du photomaton pour télécharger votre photo directement sur votre téléphone.
|
|
</p>
|
|
|
|
<!-- Navigation pages -->
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<button class="btn btn-ghost btn-sm" id="prev-btn" onclick="changePage(-1)" disabled>← Préc.</button>
|
|
<span class="text-sm text-muted">Page <span id="page-cur">1</span> / <span id="page-total">1</span></span>
|
|
<button class="btn btn-ghost btn-sm" id="next-btn" onclick="changePage(1)">Suiv. →</button>
|
|
</div>
|
|
|
|
<div class="photo-grid" id="photo-grid">
|
|
<div class="empty-state"><div class="icon">⏳</div>Chargement…</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lightbox -->
|
|
<div class="lightbox" id="lightbox" onclick="closeLightbox(event)">
|
|
<button class="lightbox-close">×</button>
|
|
<img id="lightbox-img" src="" alt="Photo">
|
|
<div class="lightbox-actions">
|
|
<a class="btn btn-primary" id="lb-download" download>⬇ Télécharger la photo</a>
|
|
</div>
|
|
<div class="text-xs text-muted">Connectez-vous au WiFi Photomaton pour télécharger</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
let currentPage = 1;
|
|
let totalPages = 1;
|
|
|
|
async function loadPhotos(page = 1) {
|
|
try {
|
|
const data = await api('GET', `/api/gallery/photos?page=${page}&limit=24`);
|
|
const { photos, total, pages } = data;
|
|
|
|
currentPage = page;
|
|
totalPages = pages;
|
|
|
|
document.getElementById('photo-count').textContent = `${total} photo(s)`;
|
|
document.getElementById('page-cur').textContent = page;
|
|
document.getElementById('page-total').textContent = pages;
|
|
document.getElementById('prev-btn').disabled = page <= 1;
|
|
document.getElementById('next-btn').disabled = page >= pages;
|
|
|
|
const grid = document.getElementById('photo-grid');
|
|
|
|
if (!photos || !photos.length) {
|
|
grid.innerHTML = `
|
|
<div class="empty-state" style="grid-column:1/-1">
|
|
<div class="icon">📷</div>
|
|
Aucune photo pour l'instant — prenez la pose !
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
grid.innerHTML = photos.map(p => `
|
|
<div class="photo-card" onclick="openLightbox('${p.full_url}', '${p.download_url}')">
|
|
<img src="${p.thumb_url}" loading="lazy" alt="Photo" onerror="this.src='${p.full_url}'">
|
|
<div class="photo-card-actions">
|
|
<a class="btn btn-primary btn-sm" href="${p.download_url}" download onclick="event.stopPropagation()">⬇ Télécharger</a>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
} catch(e) {
|
|
document.getElementById('photo-grid').innerHTML = `
|
|
<div class="empty-state" style="grid-column:1/-1">
|
|
<div class="icon">⚠️</div>
|
|
Impossible de charger les photos. Êtes-vous connecté au WiFi Photomaton ?
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
function changePage(delta) { loadPhotos(currentPage + delta); }
|
|
|
|
function openLightbox(fullUrl, downloadUrl) {
|
|
document.getElementById('lightbox-img').src = fullUrl;
|
|
document.getElementById('lb-download').href = downloadUrl;
|
|
document.getElementById('lightbox').classList.add('open');
|
|
}
|
|
|
|
function closeLightbox(e) {
|
|
if (!e || e.target.id === 'lightbox' || e.target.classList.contains('lightbox-close')) {
|
|
document.getElementById('lightbox').classList.remove('open');
|
|
}
|
|
}
|
|
|
|
document.querySelector('.lightbox-close').addEventListener('click', closeLightbox);
|
|
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeLightbox({}); });
|
|
|
|
function onWsMessage(msg) {
|
|
// Rafraîchit la galerie quand une nouvelle photo est ajoutée
|
|
if (msg.type === 'photobooth_event' && msg.event === 'finished') {
|
|
setTimeout(() => loadPhotos(1), 2000);
|
|
}
|
|
}
|
|
|
|
loadPhotos(1);
|
|
// Auto-refresh toutes les 30 secondes
|
|
setInterval(() => loadPhotos(1), 30000);
|
|
</script>
|
|
{% endblock %}
|