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);
});
}
});