feat: badges imprimé ( copies) dans galeries admin+public; fix: timestamp_to_date dans print.html
🚀 Deploy — JH Photomaton / 🔍 Vérification (push) Has been cancelled
🚀 Deploy — JH Photomaton / 🍓 Deploy sur le Pi (push) Has been cancelled

This commit is contained in:
2026-07-17 16:48:48 +02:00
parent 742186ec8e
commit c32b3ba345
7 changed files with 123 additions and 29 deletions
+24 -3
View File
@@ -71,6 +71,15 @@
pointer-events: none;
}
.print-badge.printing { background: rgba(25,108,176,.9); }
.print-badge.done { background: rgba(30,160,70,.9); }
.print-badge.done-secondary {
position: absolute; top: 5px; left: 5px;
background: rgba(30,160,70,.85); color: #fff;
border-radius: 12px; padding: .15rem .45rem;
font-size: .72rem; font-weight: 700;
display: flex; align-items: center; gap: .2rem;
pointer-events: none;
}
.date-badge {
position: absolute; bottom: 0; left: 0; right: 0;
@@ -445,11 +454,23 @@ function renderGrid(photos) {
const pid = p.photo_id || p.id || '';
const hasPending = p.print_pending > 0;
const hasPrinting = p.print_printing > 0;
const hasDone = (p.print_done || 0) > 0;
const copies = p.print_done_copies || 0;
// Badge principal (coin haut droite) — priorité : impression en cours > attente > terminé
const badge = hasPrinting
? `<div class="print-badge printing">🔵 Impression…</div>`
: hasPending
? `<div class="print-badge">🖨 ${p.print_pending}</div>`
: '';
? `<div class="print-badge">🖨 ${p.print_pending} att.</div>`
: hasDone
? `<div class="print-badge done">✅ ${copies} cop.</div>`
: '';
// Si en attente ET déjà imprimé → badge "imprimé" coin haut gauche aussi
const doneBadgeLeft = (hasPending || hasPrinting) && hasDone
? `<div class="print-badge done-secondary">✅ ${copies}</div>`
: '';
const dateLabel = p.date_label
? `<div class="date-badge">${p.date_label}</div>` : '';
@@ -457,7 +478,7 @@ function renderGrid(photos) {
<div class="photo-card ${hasPending || hasPrinting ? 'has-print' : ''}" id="card-${pid}"
onclick="openLightboxIdx(${idx})">
<img src="${p.thumb_url}" loading="lazy" alt="">
${badge}${dateLabel}
${badge}${doneBadgeLeft}${dateLabel}
<div class="card-overlay">
${hasPending
? `<button class="ov-btn ov-cancel" onclick="event.stopPropagation();quickCancel('${pid}')">✕</button>`
+1 -1
View File
@@ -308,7 +308,7 @@
</span>
</td>
<td style="font-size:.78rem;color:var(--text-muted)">
{{ q.requested_at|int|timestamp_to_date if q.requested_at else '—' }}
{{ q.requested_at_str }}
</td>
<td style="font-size:.82rem">{{ q.printer or '—' }}</td>
<td style="display:flex;gap:.4rem;align-items:center">
+27 -8
View File
@@ -5,6 +5,19 @@
<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">
@@ -71,14 +84,20 @@ async function loadPhotos(page = 1) {
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}" onclick="event.stopPropagation()">⬇ Télécharger</a>
</div>
</div>
`).join('');
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">