Jul 17 - Update Facility/Area QR code report page with anti-duplication reports

app/templates/public/area.html

@@ -124,7 +124,7 @@
             Let the cleaning team know.
         </p>
 
-        <form method="POST"
+        <form method="POST" id="reportForm"
               action="{{ url_for('public.area_report_problem', token=token) }}"
               enctype="multipart/form-data" novalidate>
             {{ form.hidden_tag() }}
@@ -171,7 +171,7 @@
                 {% endfor %}
             </div>
 
-            <button type="submit" class="btn btn-primary w-100">
+            <button type="submit" class="btn btn-primary w-100" id="submitBtn">
                 <i class="bi bi-send"></i> Submit Report
             </button>
         </form>
@@ -184,17 +184,41 @@
 <script>
 (function () {
     'use strict';
+
+    // Cap photo selection at 5.
     var input = document.getElementById('reportPhotos');
     var msg   = document.getElementById('photoLimitMsg');
-    if (!input) { return; }
-    input.addEventListener('change', function () {
-        if (input.files && input.files.length > 5) {
-            if (msg) { msg.style.display = 'block'; }
-            input.value = '';   // clear an over-limit selection so they re-pick
-        } else if (msg) {
-            msg.style.display = 'none';
-        }
-    });
+    if (input) {
+        input.addEventListener('change', function () {
+            if (input.files && input.files.length > 5) {
+                if (msg) { msg.style.display = 'block'; }
+                input.value = '';   // clear an over-limit selection so they re-pick
+            } else if (msg) {
+                msg.style.display = 'none';
+            }
+        });
+    }
+
+    // Prevent duplicate reports: disable the button on first submit so a slow
+    // network can't be double-tapped into multiple identical reports.
+    var form = document.getElementById('reportForm');
+    var btn  = document.getElementById('submitBtn');
+    if (form) {
+        form.addEventListener('submit', function (e) {
+            if (form.dataset.submitting === '1') { e.preventDefault(); return; }
+            form.dataset.submitting = '1';
+            if (btn) {
+                btn.disabled  = true;
+                btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Submitting…';
+            }
+        });
+    }
+
+    // After a successful submit we redirect back here with a flash message;
+    // jump to the top so the confirmation is seen and the form isn't re-tapped.
+    if (document.querySelector('.alert')) {
+        window.scrollTo(0, 0);
+    }
 }());
 </script>
 </body>