Dev

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

templates/presente/includes/qr_content.html

@@ -56,14 +56,22 @@ <h5>Erro</h5>
     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 %}
+  });
 })();
 </script>

templates/presente/public_activity.html

@@ -81,19 +81,13 @@ <h5>Erro de Conexão</h5>
   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);
     });
   }
 });