139 lines
4.8 KiB
HTML
139 lines
4.8 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 head %}
|
||
<style>
|
||
.pub-print-badge {
|
||
position: absolute; top: 6px; left: 6px;
|
||
background: rgba(30,160,70,.9); color: #fff;
|
||
border-radius: 12px; padding: .15rem .5rem;
|
||
font-size: .72rem; font-weight: 700;
|
||
pointer-events: none;
|
||
}
|
||
.photo-card { position: relative; }
|
||
</style>
|
||
{% 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">⬇ 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 => {
|
||
const copies = p.print_done_copies || 0;
|
||
const printedBadge = copies > 0
|
||
? `<div class="pub-print-badge">🖨 ${copies}×</div>`
|
||
: '';
|
||
return `
|
||
<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}'">
|
||
${printedBadge}
|
||
<div class="photo-card-actions">
|
||
<a class="btn btn-primary btn-sm" href="${p.download_url}" 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 %}
|