diff --git a/static/js/qrcode.js b/static/js/qrcode.js index 787aa74..0932025 100644 --- a/static/js/qrcode.js +++ b/static/js/qrcode.js @@ -14,10 +14,12 @@ function formatCountdown(totalSeconds) { } class QRCodeManager { - constructor(serverTime) { + constructor(serverTime, endTime = null) { const serverTimeMs = new Date(serverTime).getTime(); const clientTimeMs = new Date().getTime(); this.timeOffset = serverTimeMs - clientTimeMs; + this.endTime = endTime ? new Date(endTime).getTime() : null; + this.hasReloaded = false; this.intervals = []; } @@ -54,6 +56,16 @@ class QRCodeManager { if (currentDateEl) { currentDateEl.textContent = dateFormatter.format(now); } + + // Check if activity has ended and trigger HTMX refresh + if (this.endTime && !this.hasReloaded && now.getTime() >= this.endTime) { + this.hasReloaded = true; + const qrContainer = document.getElementById('qr-code-container'); + if (qrContainer && typeof htmx !== 'undefined') { + const url = qrContainer.getAttribute('hx-get'); + htmx.ajax('GET', url, {target: '#qr-code-container', swap: 'innerHTML'}); + } + } }; update(); diff --git a/templates/presente/includes/qr_content.html b/templates/presente/includes/qr_content.html index 8b9d0dd..7ba9085 100644 --- a/templates/presente/includes/qr_content.html +++ b/templates/presente/includes/qr_content.html @@ -56,14 +56,22 @@
Erro
window.qrManager.clearIntervals(); } - window.qrManager = new QRCodeManager("{{ server_time }}"); + // Defer DOM access to avoid FOUC warning + requestAnimationFrame(() => { + // Create manager without end time check for expired activities + {% if activity.status == 'expired' %} + window.qrManager = new QRCodeManager("{{ server_time }}"); + {% else %} + window.qrManager = new QRCodeManager("{{ server_time }}", "{{ activity.end_time|date:'c' }}"); + {% endif %} - window.qrManager.updateDateTime(); + window.qrManager.updateDateTime(); - {% if activity.status == 'not_started' %} - window.qrManager.initActivityStartCountdown({{ seconds_until_start }}); - {% elif activity.status == 'active' %} - window.qrManager.startQRCountdown({{ timeout }}); - {% endif %} + {% if activity.status == 'not_started' %} + window.qrManager.initActivityStartCountdown({{ seconds_until_start }}); + {% elif activity.status == 'active' %} + window.qrManager.startQRCountdown({{ timeout }}); + {% endif %} + }); })(); diff --git a/templates/presente/public_activity.html b/templates/presente/public_activity.html index 61e6de3..cc19ac3 100644 --- a/templates/presente/public_activity.html +++ b/templates/presente/public_activity.html @@ -81,19 +81,13 @@
Erro de Conexão
const errorContainer = document.getElementById('qr-error-container'); if (qrContainer) { - qrContainer.addEventListener('htmx:responseError', function() { + const showError = () => { qrContainer.classList.add('d-none'); errorContainer.classList.remove('d-none'); - }); + }; - qrContainer.addEventListener('htmx:sendError', function() { - qrContainer.classList.add('d-none'); - errorContainer.classList.remove('d-none'); - }); - - qrContainer.addEventListener('htmx:timeout', function() { - qrContainer.classList.add('d-none'); - errorContainer.classList.remove('d-none'); + ['htmx:responseError', 'htmx:sendError', 'htmx:timeout'].forEach(event => { + qrContainer.addEventListener(event, showError); }); } });