Ross
66 lines
2.3 KiB
HTML
66 lines
2.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<h1 class="mb-4">Marking: Exams you can mark</h1>
|
|
|
|
<style>
|
|
.htmx-indicator { display: none; }
|
|
.htmx-request .htmx-indicator { display: inline-block; }
|
|
</style>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="text-muted">Click an exam type to load exams — each section loads independently.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
{% for app in apps %}
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body d-flex align-items-center justify-content-between">
|
|
<h5 class="card-title mb-0">{{ app|capfirst }}</h5>
|
|
<div>
|
|
<button class="btn btn-sm btn-primary" hx-get="{% url 'user_marking_partial' app %}" hx-target="#marking-{{ app }}" hx-swap="innerHTML" hx-indicator="#indicator-{{ app }}">Load / Refresh</button>
|
|
<div id="indicator-{{ app }}" class="htmx-indicator ms-2 spinner-border spinner-border-sm text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
|
|
</div>
|
|
</div>
|
|
<div id="marking-{{ app }}" class="card-body border-top">
|
|
<div class="text-muted small">No data loaded — click the button to load.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<script>
|
|
// Show/hide indicators referenced by triggering element's hx-indicator attribute
|
|
document.body.addEventListener('htmx:beforeRequest', function(evt){
|
|
try{
|
|
var elt = evt.detail.elt || evt.target;
|
|
var sel = elt && elt.getAttribute && elt.getAttribute('hx-indicator');
|
|
if(sel){
|
|
var indicator = document.querySelector(sel);
|
|
if(indicator) indicator.classList.add('visible');
|
|
}
|
|
}catch(e){console.warn(e)}
|
|
});
|
|
|
|
document.body.addEventListener('htmx:afterRequest', function(evt){
|
|
try{
|
|
var elt = evt.detail.elt || evt.target;
|
|
var sel = elt && elt.getAttribute && elt.getAttribute('hx-indicator');
|
|
if(sel){
|
|
var indicator = document.querySelector(sel);
|
|
if(indicator) indicator.classList.remove('visible');
|
|
}
|
|
}catch(e){console.warn(e)}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.htmx-indicator { display: none; }
|
|
.htmx-indicator.visible { display: inline-block !important; }
|
|
</style>
|
|
|
|
{% endblock %}
|