Add --nothreading option to Django runserver command and implement HTMX debug modal for JSON responses

docker/docker-compose.dev.yml

@@ -8,7 +8,7 @@ services:
     # Development: run Django's autoreloading development server instead of
     # the production entrypoint/gunicorn. Mount the repository into the
     # container so code edits on the host trigger Django's autoreload.
-    entrypoint: ["python", "manage.py", "runserver", "0.0.0.0:8000"]
+    entrypoint: ["python", "manage.py", "runserver", "0.0.0.0:8000", "--nothreading"]
     # Clear any command set by the prod compose file (which would be passed
     # as an extra argument to manage.py). Setting an empty command prevents
     # the image `command` from being appended to the entrypoint.

docker/docker-compose.local.yml

@@ -13,7 +13,7 @@ services:
       # lives at rad/Dockerfile inside the context.
       context: ..
       dockerfile: rad/Dockerfile
-    command: python manage.py runserver 0.0.0.0:8000
+    command: python manage.py runserver 0.0.0.0:8000 --nothreading
     #command: pip install -r requirements.txt
     volumes:
       # Mount the repository root into the container WORKDIR so manage.py and

generic/templates/generic/ciduser_form.html

@@ -4,12 +4,84 @@
 {% load crispy_forms_tags %}
 
 {% block css %}
+    <style>
+    /* Simple modal for showing JSON debug info */
+        .hx-modal-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,0.5);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 1200;
+        }
+        .hx-modal {
+            background: #fff;
+            max-width: 90%;
+            max-height: 80%;
+            overflow: auto;
+            padding: 1rem;
+            border-radius: 6px;
+            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+            font-family: monospace;
+        }
+        .hx-modal pre { white-space: pre-wrap; word-wrap: break-word; }
+        .hx-modal .hx-close { float: right; cursor: pointer; margin-left: 0.5rem; }
+    </style>
 {% endblock %}
 {% block js %}
     <!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
     {{form.media}}
 
+    <!-- htmx for making the request; include if not already present -->
+    <script src="https://unpkg.com/htmx.org@1.9.2"></script>
+
     <script type="text/javascript">
+        (function(){
+        // Listen for HTMX requests and show the JSON response inside our modal.
+            document.addEventListener('htmx:afterRequest', function(evt){
+                try {
+                // We only care about requests triggered by our debug button
+                    var trigger = evt.detail.elt;
+                    if(!trigger) return;
+                    if(trigger.id !== 'show-exam-json') return;
+
+                    var xhr = evt.detail.xhr;
+                    if(!xhr) return;
+
+                    var txt = xhr.responseText || '';
+                    var json = null;
+                    try { json = JSON.parse(txt); }
+                    catch(e) { json = null; }
+
+                    var out = '';
+                    if(json !== null) {
+                        out = JSON.stringify(json, null, 2);
+                    } else {
+                    // If not valid JSON, just show raw text
+                        out = txt;
+                    }
+
+                    var overlay = document.getElementById('hx-debug-overlay');
+                    var pre = document.getElementById('hx-debug-pre');
+                    pre.textContent = out;
+                    overlay.style.display = 'flex';
+                } catch (e) {
+                    console.error('hx debug modal error', e);
+                }
+            });
+
+        // Close button and overlay click
+            document.addEventListener('DOMContentLoaded', function(){
+                var overlay = document.getElementById('hx-debug-overlay');
+                if(!overlay) return;
+                overlay.addEventListener('click', function(ev){
+                    if(ev.target === overlay) overlay.style.display = 'none';
+                });
+                var close = document.getElementById('hx-debug-close');
+                if(close) close.addEventListener('click', function(){ overlay.style.display = 'none'; });
+            });
+        })();
     </script>
 
     <!-- {{ form.media }} -->
@@ -25,7 +97,7 @@
     </form>
 
     <h2>Exams</h2>
-    The group is currently associated with the following exams. 
+    The group is currently associated with the following exams.
 
     <p>
         {% with object.get_cid_exams as exam_map %}
@@ -48,4 +120,23 @@
         These should be edited via the exam candidate page. If you need to manually toggle you can do so <a href="{% url 'generic:update_cid_exams' object.pk %}">here</a> (you shouldn't)
     </p>
 
+    <!-- HTMX debug button to show what the /exam/json/<cid>/<passcode> response will be -->
+    <p>
+        <button id="show-exam-json" class="button"
+                hx-get="{% url 'active_exams_cid' ciduser.cid ciduser.passcode %}"
+                hx-trigger="click"
+                hx-swap="none">
+            Show exam JSON (debug)
+        </button>
+    </p>
+
+    <!-- Modal overlay for JSON output -->
+    <div id="hx-debug-overlay" class="hx-modal-overlay" role="dialog" aria-hidden="true">
+        <div class="hx-modal" role="document">
+            <button id="hx-debug-close" class="hx-close">Close</button>
+            <h3>Exam JSON (debug)</h3>
+            <pre id="hx-debug-pre">(loading...)</pre>
+        </div>
+    </div>
+
 {% endblock %}