518 lines
22 KiB
HTML
518 lines
22 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Galerie admin — JH Photomaton{% endblock %}
|
|
|
|
{% block nav_links %}
|
|
<a href="/admin">Dashboard</a>
|
|
<a href="/admin/gallery" class="active">Galerie admin</a>
|
|
<a href="/admin/print">Impression</a>
|
|
<a href="/admin/actions">Actions</a>
|
|
<a href="/admin/settings">Réglages</a>
|
|
<a href="/gallery">Galerie publique</a>
|
|
<a href="/admin/logout" style="margin-left:auto;color:var(--text-dim)">Déconnexion</a>
|
|
{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
/* ── Photo grid ───────────────────────────────────────────────────────────── */
|
|
.gallery-wrap { max-width: 1300px; margin: 0 auto; padding: 1rem; }
|
|
.gallery-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
|
|
.gallery-title { font-size: 1.2rem; font-weight: 700; }
|
|
.gallery-controls { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
|
|
.gallery-filters { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; flex-wrap: wrap; }
|
|
.filter-btn { padding: .3rem .75rem; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-size: .85rem; transition: all .2s; }
|
|
.filter-btn.active, .filter-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
|
|
.filter-badge { background: rgba(224,123,0,.2); color: #e07b00; padding: .15rem .45rem; border-radius: 10px; font-size: .75rem; font-weight: 700; }
|
|
|
|
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
|
|
.photo-card {
|
|
position: relative;
|
|
aspect-ratio: 3/2;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
background: var(--surface);
|
|
border: 2px solid transparent;
|
|
transition: border-color .2s, transform .15s;
|
|
}
|
|
.photo-card:hover { border-color: var(--primary); transform: scale(1.02); }
|
|
.photo-card.has-print-request { border-color: #e07b00; }
|
|
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
|
|
/* Badge demande d'impression */
|
|
.print-badge {
|
|
position: absolute;
|
|
top: 5px; right: 5px;
|
|
background: rgba(224,123,0,.9);
|
|
color: #fff;
|
|
border-radius: 12px;
|
|
padding: .15rem .45rem;
|
|
font-size: .72rem;
|
|
font-weight: 700;
|
|
display: flex; align-items: center; gap: .25rem;
|
|
backdrop-filter: blur(4px);
|
|
pointer-events: none;
|
|
}
|
|
.print-badge.printing { background: rgba(25,108,176,.9); }
|
|
|
|
/* Overlay actions au hover */
|
|
.card-overlay {
|
|
position: absolute; inset: 0;
|
|
background: rgba(0,0,0,.55);
|
|
display: flex; align-items: flex-end; justify-content: center;
|
|
gap: .4rem; padding: .5rem;
|
|
opacity: 0; transition: opacity .2s;
|
|
}
|
|
.photo-card:hover .card-overlay { opacity: 1; }
|
|
.ov-btn {
|
|
padding: .3rem .5rem; border: none; border-radius: 6px;
|
|
cursor: pointer; font-size: .8rem; font-weight: 700;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.ov-print { background: rgba(224,123,0,.85); color: #fff; }
|
|
.ov-cancel { background: rgba(192,0,0,.75); color: #fff; }
|
|
.ov-delete { background: rgba(80,80,80,.75); color: #fff; }
|
|
.ov-dl { background: rgba(40,40,40,.75); color: #ccc; text-decoration: none; }
|
|
|
|
/* Pagination */
|
|
.pagination { display: flex; align-items: center; gap: .75rem; justify-content: center; margin: 1rem 0; }
|
|
.pg-btn { padding: .4rem .9rem; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; color: var(--text); cursor: pointer; }
|
|
.pg-btn:disabled { opacity: .35; cursor: default; }
|
|
.pg-info { color: var(--text-muted); font-size: .9rem; }
|
|
|
|
/* ── Lightbox ─────────────────────────────────────────────────────────────── */
|
|
.lightbox {
|
|
display: none; position: fixed; inset: 0; z-index: 1000;
|
|
background: rgba(0,0,0,.88); backdrop-filter: blur(6px);
|
|
flex-direction: column; align-items: center; justify-content: center;
|
|
gap: 1rem; padding: 1.5rem;
|
|
}
|
|
.lightbox.open { display: flex; }
|
|
.lightbox-img-wrap { position: relative; max-width: 80vw; max-height: 70vh; }
|
|
.lightbox-img-wrap img { max-width: 80vw; max-height: 70vh; border-radius: 8px; object-fit: contain; display: block; }
|
|
.lb-close { position: absolute; top: -14px; right: -14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.15); border: none; color: #fff; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
|
|
|
|
.lb-info { text-align: center; }
|
|
.lb-id { font-size: .78rem; color: var(--text-muted); font-family: monospace; }
|
|
|
|
/* Bloc demandes en attente dans le lightbox */
|
|
.lb-print-status {
|
|
background: var(--surface); border-radius: 10px; padding: .85rem 1.25rem;
|
|
min-width: min(400px, 80vw); border: 1px solid var(--border);
|
|
}
|
|
.lb-print-title { font-size: .85rem; font-weight: 700; margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
|
|
.lb-queue-entry {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: .3rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
|
|
font-size: .82rem; gap: .75rem;
|
|
}
|
|
.lb-queue-status { padding: .15rem .5rem; border-radius: 10px; font-size: .75rem; font-weight: 700; }
|
|
.s-pending { background: rgba(224,123,0,.2); color: #e07b00; }
|
|
.s-printing { background: rgba(25,108,176,.2); color: var(--primary); }
|
|
|
|
.lb-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
|
|
.lb-btn { padding: .5rem 1.1rem; border: none; border-radius: 8px; cursor: pointer; font-size: .9rem; font-weight: 600; transition: opacity .2s; }
|
|
.lb-btn:hover { opacity: .82; }
|
|
.lb-btn-print { background: var(--primary); color: #fff; }
|
|
.lb-btn-now { background: #1a7340; color: #fff; }
|
|
.lb-btn-cancel { background: rgba(192,0,0,.25); color: #e05050; border: 1px solid rgba(192,0,0,.3); }
|
|
.lb-btn-delete { background: #3d1f1f; color: #e05050; border: 1px solid rgba(192,0,0,.2); }
|
|
.lb-btn-dl { background: rgba(255,255,255,.08); color: var(--text); text-decoration: none; display: inline-flex; align-items: center; }
|
|
|
|
/* copies input */
|
|
.copies-wrap { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--text-muted); }
|
|
.copies-wrap input { width: 52px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: .3rem .5rem; text-align: center; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="gallery-wrap">
|
|
|
|
<div class="gallery-header">
|
|
<div class="gallery-title">🖼 Galerie — Administration</div>
|
|
<div class="gallery-controls">
|
|
<span class="text-sm text-muted" id="photo-count">Chargement…</span>
|
|
<div class="copies-wrap">
|
|
<label for="copies-input">Copies :</label>
|
|
<input type="number" id="copies-input" min="1" max="3" value="1">
|
|
</div>
|
|
<button class="pg-btn" onclick="refreshPhotos()">↻</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filtres -->
|
|
<div class="gallery-filters">
|
|
<button class="filter-btn active" onclick="setFilter('all', this)">Toutes</button>
|
|
<button class="filter-btn" onclick="setFilter('pending', this)">
|
|
🖨 À imprimer <span class="filter-badge" id="pending-count">0</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="pagination">
|
|
<button class="pg-btn" id="prev-btn" onclick="changePage(-1)" disabled>← Préc.</button>
|
|
<span class="pg-info">Page <span id="page-cur">1</span> / <span id="page-total">1</span></span>
|
|
<button class="pg-btn" id="next-btn" onclick="changePage(1)">Suiv. →</button>
|
|
</div>
|
|
|
|
<div class="photo-grid" id="photo-grid">
|
|
<div style="color:var(--text-muted);grid-column:1/-1;text-align:center;padding:2rem">⏳ Chargement…</div>
|
|
</div>
|
|
|
|
<div class="pagination" style="margin-top:.5rem">
|
|
<button class="pg-btn" id="prev-btn2" onclick="changePage(-1)" disabled>← Préc.</button>
|
|
<span class="pg-info">Page <span id="page-cur2">1</span> / <span id="page-total2">1</span></span>
|
|
<button class="pg-btn" id="next-btn2" onclick="changePage(1)">Suiv. →</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ── Lightbox ─────────────────────────────────────────────────────────────── -->
|
|
<div class="lightbox" id="lightbox">
|
|
|
|
<div class="lightbox-img-wrap">
|
|
<img id="lb-img" src="" alt="">
|
|
<button class="lb-close" onclick="closeLightbox()">✕</button>
|
|
</div>
|
|
|
|
<div class="lb-info">
|
|
<div class="lb-id" id="lb-id"></div>
|
|
</div>
|
|
|
|
<!-- Bloc demandes d'impression en attente -->
|
|
<div class="lb-print-status" id="lb-print-status" style="display:none">
|
|
<div class="lb-print-title">🖨 Demandes d'impression en attente</div>
|
|
<div id="lb-queue-list"></div>
|
|
</div>
|
|
|
|
<!-- Boutons d'action -->
|
|
<div class="lb-actions">
|
|
<button class="lb-btn lb-btn-print" id="lb-btn-queue" onclick="lbAddToQueue()">
|
|
📋 Ajouter à la file
|
|
</button>
|
|
<button class="lb-btn lb-btn-now" id="lb-btn-now" onclick="lbPrintNow()">
|
|
🖨 Imprimer maintenant
|
|
</button>
|
|
<button class="lb-btn lb-btn-cancel" id="lb-btn-cancel-all" onclick="lbCancelAll()" style="display:none">
|
|
✕ Annuler la demande
|
|
</button>
|
|
<a class="lb-btn lb-btn-dl" id="lb-btn-dl" download>⬇ Télécharger</a>
|
|
<button class="lb-btn lb-btn-delete" onclick="lbDelete()">🗑 Supprimer</button>
|
|
</div>
|
|
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
let currentPage = 1;
|
|
let totalPages = 1;
|
|
let currentPhotoId = null;
|
|
let currentPhotoData = null;
|
|
let allPhotos = [];
|
|
let filterMode = 'all';
|
|
|
|
// ════════════════════════════════════════════════════════════════════════════
|
|
// Chargement photos
|
|
// ════════════════════════════════════════════════════════════════════════════
|
|
async function loadPhotos(page = 1) {
|
|
const grid = document.getElementById('photo-grid');
|
|
grid.innerHTML = '<div style="color:var(--text-muted);grid-column:1/-1;text-align:center;padding:2rem">⏳ Chargement…</div>';
|
|
|
|
try {
|
|
const data = await api('GET', `/admin/api/gallery/photos?page=${page}&limit=24`);
|
|
allPhotos = data.photos || [];
|
|
currentPage = page;
|
|
totalPages = data.pages || 1;
|
|
|
|
updatePagination();
|
|
document.getElementById('photo-count').textContent = `${data.total} photo(s)`;
|
|
|
|
// Compteur de demandes en attente
|
|
const pendingTotal = allPhotos.filter(p => p.print_pending > 0).length;
|
|
document.getElementById('pending-count').textContent = pendingTotal;
|
|
|
|
renderGrid();
|
|
} catch(e) {
|
|
grid.innerHTML = '<div style="color:#e05050;grid-column:1/-1;text-align:center;padding:2rem">❌ Erreur de chargement</div>';
|
|
}
|
|
}
|
|
|
|
function renderGrid() {
|
|
const grid = document.getElementById('photo-grid');
|
|
let photos = allPhotos;
|
|
|
|
if (filterMode === 'pending') {
|
|
photos = allPhotos.filter(p => p.print_pending > 0 || p.print_printing > 0);
|
|
}
|
|
|
|
if (!photos.length) {
|
|
grid.innerHTML = filterMode === 'pending'
|
|
? '<div style="color:var(--text-muted);grid-column:1/-1;text-align:center;padding:2rem">✅ Aucune demande d\'impression en attente</div>'
|
|
: '<div style="color:var(--text-muted);grid-column:1/-1;text-align:center;padding:2rem">📷 Aucune photo</div>';
|
|
return;
|
|
}
|
|
|
|
grid.innerHTML = photos.map(p => {
|
|
const pid = p.photo_id || p.id || p.filename || '';
|
|
const hasPending = p.print_pending > 0;
|
|
const hasPrinting = p.print_printing > 0;
|
|
|
|
let badge = '';
|
|
if (hasPrinting) badge = `<div class="print-badge printing">🔵 Impression…</div>`;
|
|
else if (hasPending) badge = `<div class="print-badge">🖨 ${p.print_pending} en attente</div>`;
|
|
|
|
return `
|
|
<div class="photo-card ${hasPending || hasPrinting ? 'has-print-request' : ''}"
|
|
id="card-${pid}"
|
|
onclick="openLightbox(${JSON.stringify(p)})">
|
|
<img src="${p.thumb_url}" loading="lazy" alt="">
|
|
${badge}
|
|
<div class="card-overlay">
|
|
${hasPending
|
|
? `<button class="ov-btn ov-cancel" onclick="event.stopPropagation();quickCancel('${pid}')">✕ Annuler</button>`
|
|
: `<button class="ov-btn ov-print" onclick="event.stopPropagation();quickQueue('${pid}')">🖨 File</button>`
|
|
}
|
|
<button class="ov-btn ov-delete" onclick="event.stopPropagation();deletePhoto('${pid}')">🗑</button>
|
|
<a class="ov-btn ov-dl" href="${p.full_url}" download onclick="event.stopPropagation()">⬇</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
function setFilter(mode, btn) {
|
|
filterMode = mode;
|
|
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
renderGrid();
|
|
}
|
|
|
|
// ════════════════════════════════════════════════════════════════════════════
|
|
// Lightbox
|
|
// ════════════════════════════════════════════════════════════════════════════
|
|
function openLightbox(photo) {
|
|
currentPhotoData = photo;
|
|
currentPhotoId = photo.photo_id || photo.id || photo.filename || '';
|
|
|
|
document.getElementById('lb-img').src = photo.full_url || photo.thumb_url;
|
|
document.getElementById('lb-id').textContent = currentPhotoId;
|
|
document.getElementById('lb-btn-dl').href = photo.full_url;
|
|
|
|
// Mise à jour du bloc demandes
|
|
updateLightboxPrintStatus(photo);
|
|
|
|
document.getElementById('lightbox').classList.add('open');
|
|
}
|
|
|
|
function updateLightboxPrintStatus(photo) {
|
|
const statusBlock = document.getElementById('lb-print-status');
|
|
const queueList = document.getElementById('lb-queue-list');
|
|
const btnCancelAll = document.getElementById('lb-btn-cancel-all');
|
|
|
|
const requests = photo.print_requests || [];
|
|
const activeRequests = requests.filter(r => r.status === 'pending' || r.status === 'printing');
|
|
|
|
if (activeRequests.length) {
|
|
statusBlock.style.display = 'block';
|
|
btnCancelAll.style.display = 'inline-flex';
|
|
queueList.innerHTML = activeRequests.map(r => `
|
|
<div class="lb-queue-entry">
|
|
<span>${r.copies} copie${r.copies > 1 ? 's' : ''}</span>
|
|
<span class="lb-queue-status ${r.status === 'printing' ? 's-printing' : 's-pending'}">
|
|
${r.status === 'printing' ? '🔵 En cours' : '⏳ En attente'}
|
|
</span>
|
|
<span style="font-size:.75rem;color:var(--text-muted)">${new Date(r.requested_at * 1000).toLocaleTimeString('fr-FR')}</span>
|
|
${r.status === 'pending'
|
|
? `<button class="ov-btn ov-cancel" style="padding:.2rem .5rem;font-size:.75rem"
|
|
onclick="cancelOneEntry('${r.id}')">✕</button>`
|
|
: ''}
|
|
</div>
|
|
`).join('');
|
|
} else {
|
|
statusBlock.style.display = 'none';
|
|
btnCancelAll.style.display = 'none';
|
|
queueList.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
function closeLightbox() {
|
|
document.getElementById('lightbox').classList.remove('open');
|
|
currentPhotoId = null;
|
|
currentPhotoData = null;
|
|
}
|
|
|
|
document.getElementById('lightbox').addEventListener('click', e => {
|
|
if (e.target === document.getElementById('lightbox')) closeLightbox();
|
|
});
|
|
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeLightbox(); });
|
|
|
|
// ════════════════════════════════════════════════════════════════════════════
|
|
// Actions impression
|
|
// ════════════════════════════════════════════════════════════════════════════
|
|
function getCopies() {
|
|
return parseInt(document.getElementById('copies-input').value) || 1;
|
|
}
|
|
|
|
async function lbAddToQueue() {
|
|
const copies = getCopies();
|
|
try {
|
|
const r = await api('POST', `/admin/api/gallery/print/${currentPhotoId}?copies=${copies}&immediate=false`);
|
|
showToast(`📋 Ajouté à la file (${copies} copie${copies > 1 ? 's' : ''})`, 'info');
|
|
// Mettre à jour la photo locale et le lightbox
|
|
await refreshPhotoData(currentPhotoId);
|
|
} catch(e) { showToast('Erreur : ' + e.message, 'error'); }
|
|
}
|
|
|
|
async function lbPrintNow() {
|
|
const copies = getCopies();
|
|
if (!confirm(`Imprimer ${copies} copie(s) immédiatement ?`)) return;
|
|
try {
|
|
const r = await api('POST', `/admin/api/gallery/print/${currentPhotoId}?copies=${copies}&immediate=true`);
|
|
if (r.success) showToast(`✅ Imprimé sur ${r.printer}`, 'success');
|
|
else showToast('❌ ' + (r.error || 'Erreur'), 'error');
|
|
await refreshPhotoData(currentPhotoId);
|
|
} catch(e) { showToast('Erreur : ' + e.message, 'error'); }
|
|
}
|
|
|
|
async function lbCancelAll() {
|
|
try {
|
|
const r = await api('DELETE', `/admin/api/gallery/print/${currentPhotoId}`);
|
|
showToast(`✕ ${r.cancelled} demande(s) annulée(s)`, 'info');
|
|
await refreshPhotoData(currentPhotoId);
|
|
} catch(e) { showToast('Erreur : ' + e.message, 'error'); }
|
|
}
|
|
|
|
async function cancelOneEntry(entryId) {
|
|
try {
|
|
await api('POST', `/api/print/cancel/${entryId}`);
|
|
showToast('Demande annulée', 'info');
|
|
await refreshPhotoData(currentPhotoId);
|
|
} catch(e) { showToast('Erreur', 'error'); }
|
|
}
|
|
|
|
async function lbDelete() {
|
|
if (!confirm('Supprimer cette photo définitivement ?')) return;
|
|
try {
|
|
const r = await api('DELETE', `/admin/api/gallery/${currentPhotoId}`);
|
|
if (r.ok) {
|
|
showToast('🗑 Photo supprimée', 'success');
|
|
closeLightbox();
|
|
loadPhotos(currentPage);
|
|
} else showToast('❌ Erreur suppression', 'error');
|
|
} catch(e) { showToast('Erreur : ' + e.message, 'error'); }
|
|
}
|
|
|
|
// Actions depuis la grille (sans ouvrir le lightbox)
|
|
async function quickQueue(pid) {
|
|
const copies = getCopies();
|
|
try {
|
|
await api('POST', `/admin/api/gallery/print/${pid}?copies=${copies}&immediate=false`);
|
|
showToast('📋 Ajouté à la file', 'info');
|
|
await refreshPhotoData(pid);
|
|
} catch(e) { showToast('Erreur', 'error'); }
|
|
}
|
|
|
|
async function quickCancel(pid) {
|
|
try {
|
|
const r = await api('DELETE', `/admin/api/gallery/print/${pid}`);
|
|
showToast(`✕ ${r.cancelled} demande(s) annulée(s)`, 'info');
|
|
await refreshPhotoData(pid);
|
|
} catch(e) { showToast('Erreur', 'error'); }
|
|
}
|
|
|
|
async function deletePhoto(pid) {
|
|
if (!confirm('Supprimer cette photo ?')) return;
|
|
try {
|
|
const r = await api('DELETE', `/admin/api/gallery/${pid}`);
|
|
if (r.ok) { showToast('🗑 Supprimée', 'success'); loadPhotos(currentPage); }
|
|
} catch(e) { showToast('Erreur', 'error'); }
|
|
}
|
|
|
|
// ════════════════════════════════════════════════════════════════════════════
|
|
// Helpers
|
|
// ════════════════════════════════════════════════════════════════════════════
|
|
async function refreshPhotoData(pid) {
|
|
// Re-fetch le statut des demandes pour cette photo et met à jour l'UI
|
|
try {
|
|
const status = await api('GET', '/admin/api/gallery/print-status');
|
|
const count = status[pid] || 0;
|
|
|
|
// Met à jour dans allPhotos
|
|
const idx = allPhotos.findIndex(p => (p.photo_id || p.id) === pid);
|
|
if (idx >= 0) {
|
|
allPhotos[idx].print_pending = count;
|
|
}
|
|
|
|
// Si le lightbox est ouvert pour cette photo, re-fetch les détails
|
|
if (currentPhotoId === pid) {
|
|
const data = await api('GET', `/admin/api/gallery/photos?page=${currentPage}&limit=24`);
|
|
const photo = (data.photos || []).find(p => (p.photo_id || p.id) === pid);
|
|
if (photo) {
|
|
currentPhotoData = photo;
|
|
updateLightboxPrintStatus(photo);
|
|
}
|
|
}
|
|
|
|
// Re-render la grille (met à jour le badge)
|
|
renderGrid();
|
|
const pendingTotal = allPhotos.filter(p => p.print_pending > 0).length;
|
|
document.getElementById('pending-count').textContent = pendingTotal;
|
|
} catch(e) {}
|
|
}
|
|
|
|
function updatePagination() {
|
|
for (const suffix of ['', '2']) {
|
|
const cur = document.getElementById(`page-cur${suffix}`);
|
|
const tot = document.getElementById(`page-total${suffix}`);
|
|
const prev = document.getElementById(`prev-btn${suffix}`);
|
|
const next = document.getElementById(`next-btn${suffix}`);
|
|
if (cur) cur.textContent = currentPage;
|
|
if (tot) tot.textContent = totalPages;
|
|
if (prev) prev.disabled = currentPage <= 1;
|
|
if (next) next.disabled = currentPage >= totalPages;
|
|
}
|
|
}
|
|
|
|
function changePage(delta) { loadPhotos(currentPage + delta); }
|
|
function refreshPhotos() { loadPhotos(currentPage); }
|
|
|
|
// ── WebSocket ─────────────────────────────────────────────────────────────────
|
|
function onWsMessage(msg) {
|
|
if (msg.type === 'photo_deleted') {
|
|
loadPhotos(currentPage);
|
|
}
|
|
if (msg.type === 'print_request' && msg.photo_id) {
|
|
refreshPhotoData(msg.photo_id);
|
|
showToast(`🖨 Demande d'impression reçue`, 'info');
|
|
}
|
|
if (msg.type === 'print_result') {
|
|
const ok = msg.result && msg.result.success;
|
|
showToast(ok ? `✅ Impression OK — ${msg.result.printer}` : `❌ ${msg.result?.error || 'Erreur'}`, ok ? 'success' : 'error');
|
|
if (msg.photo_id) refreshPhotoData(msg.photo_id);
|
|
}
|
|
if (msg.type === 'print_cancelled_for_photo' && msg.photo_id) {
|
|
refreshPhotoData(msg.photo_id);
|
|
}
|
|
}
|
|
|
|
// Auto-refresh des badges toutes les 20s
|
|
setInterval(async () => {
|
|
try {
|
|
const status = await api('GET', '/admin/api/gallery/print-status');
|
|
let changed = false;
|
|
allPhotos.forEach(p => {
|
|
const pid = p.photo_id || p.id;
|
|
const newCount = status[pid] || 0;
|
|
if (p.print_pending !== newCount) {
|
|
p.print_pending = newCount;
|
|
changed = true;
|
|
}
|
|
});
|
|
if (changed) renderGrid();
|
|
} catch(e) {}
|
|
}, 20000);
|
|
|
|
loadPhotos(1);
|
|
</script>
|
|
{% endblock %}
|