Add HTMX indicator for import form to enhance user feedback during submission
This commit is contained in:
@@ -2,14 +2,25 @@
|
|||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h1>Import LLM Questions</h1>
|
<h1>Import LLM Questions</h1>
|
||||||
<form id="llm-import-form" method="post" enctype="multipart/form-data" hx-post="{% url 'sbas:import_llm_questions' %}" hx-target="#import-preview" hx-swap="innerHTML">
|
<form id="llm-import-form" method="post" enctype="multipart/form-data" hx-post="{% url 'sbas:import_llm_questions' %}" hx-target="#import-preview" hx-swap="innerHTML" hx-indicator="#llm-import-indicator">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
{{ form.as_p }}
|
{{ form.as_p }}
|
||||||
<div class="d-flex gap-2">
|
<div class="d-flex gap-2">
|
||||||
<button class="btn btn-outline-primary" type="submit">Preview (dry run)</button>
|
<button class="btn btn-outline-primary" type="submit">Preview (dry run)</button>
|
||||||
<button class="btn btn-secondary" type="button" onclick="document.getElementById('llm-import-form').reset()">Reset</button>
|
<button class="btn btn-secondary" type="button" onclick="document.getElementById('llm-import-form').reset()">Reset</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mt-2">
|
||||||
|
<span id="llm-import-indicator" aria-hidden="true" style="display:none;">
|
||||||
|
<span class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
<style>
|
||||||
|
/* HTMX indicator for the import form */
|
||||||
|
#llm-import-indicator { display: none; }
|
||||||
|
#llm-import-indicator.htmx-request { display: inline-block; }
|
||||||
|
</style>
|
||||||
<p>Upload a single JSON array, a single object, or JSONL (one JSON object per line) matching the agreed schema. Use the Preview button to inspect results before importing.</p>
|
<p>Upload a single JSON array, a single object, or JSONL (one JSON object per line) matching the agreed schema. Use the Preview button to inspect results before importing.</p>
|
||||||
<div id="import-preview" class="mt-3"></div>
|
<div id="import-preview" class="mt-3"></div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user