initial html added
This commit is contained in:
parent
7b554c1b1f
commit
3a93595396
|
@ -0,0 +1,129 @@
|
|||
{% extends "base.html" %}
|
||||
{% load i18n %}
|
||||
{% load django_bootstrap5 %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mt-5">
|
||||
<div class="row mb-4">
|
||||
<div class="col">
|
||||
<h3 class="text-center">{{ subtitle }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form role="form" method="post" novalidate>
|
||||
{% csrf_token %}
|
||||
<div class="mb-3">
|
||||
{{ form.annotation_name.label_tag }}
|
||||
{{ form.annotation_name }}
|
||||
</div>
|
||||
|
||||
<h5 class="mt-4">{% translate "Possible States" %}</h5>
|
||||
<div id="formset">
|
||||
{{ formset.management_form }}
|
||||
{% for form in formset %}
|
||||
<div class="row mb-3 formset-form">
|
||||
<div class="col-md-10">
|
||||
{% bootstrap_field form.annotation_state show_label=False %}
|
||||
</div>
|
||||
<div class="col-md-2 d-flex align-items-center">
|
||||
{% if forloop.first %}
|
||||
<button type="button" class="btn btn-sm btn-success add-form">
|
||||
+
|
||||
</button>
|
||||
{% endif %}
|
||||
<button type="button" class="btn btn-sm btn-danger remove-form ms-2">
|
||||
−
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="container">
|
||||
<a class="btn btn-grey" href="{% url 'admin:panel' %}">{% translate "Cancel" %}</a>
|
||||
<input class="btn btn-green-admin" type="submit" name="submit" value="{% translate 'Save' %}" />
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
//fix this stub chatgpt code
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var formsetDiv = document.getElementById('formset');
|
||||
var totalForms = document.getElementById('id_form-TOTAL_FORMS');
|
||||
|
||||
function updateElementIndex(el, prefix, index) {
|
||||
var idRegex = new RegExp('(' + prefix + '-\\d+-)');
|
||||
var replacement = prefix + '-' + index + '-';
|
||||
if (el.id) el.id = el.id.replace(idRegex, replacement);
|
||||
if (el.name) el.name = el.name.replace(idRegex, replacement);
|
||||
}
|
||||
|
||||
function addForm(e) {
|
||||
e.preventDefault();
|
||||
var formCount = parseInt(totalForms.value);
|
||||
var newForm = document.querySelector('.formset-form').cloneNode(true);
|
||||
|
||||
newForm.querySelectorAll('input').forEach(function(input) {
|
||||
updateElementIndex(input, 'form', formCount);
|
||||
input.value = '';
|
||||
});
|
||||
|
||||
// Remove any hidden inputs (management form fields)
|
||||
newForm.querySelectorAll('input[type="hidden"]').forEach(function(hiddenInput) {
|
||||
hiddenInput.remove();
|
||||
});
|
||||
|
||||
// Attach event listeners to the new buttons
|
||||
var addButton = newForm.querySelector('.add-form');
|
||||
var removeButton = newForm.querySelector('.remove-form');
|
||||
|
||||
addButton.addEventListener('click', addForm);
|
||||
removeButton.addEventListener('click', removeForm);
|
||||
|
||||
// Ensure only the first form has the add button
|
||||
formsetDiv.querySelectorAll('.add-form').forEach(function(button, index) {
|
||||
if (index > 0) {
|
||||
button.remove();
|
||||
}
|
||||
});
|
||||
|
||||
formsetDiv.appendChild(newForm);
|
||||
totalForms.value = formCount + 1;
|
||||
}
|
||||
|
||||
function removeForm(e) {
|
||||
e.preventDefault();
|
||||
var formToRemove = e.target.closest('.formset-form');
|
||||
formToRemove.remove();
|
||||
|
||||
var forms = formsetDiv.querySelectorAll('.formset-form');
|
||||
totalForms.value = forms.length;
|
||||
|
||||
// Re-index form elements
|
||||
forms.forEach(function(form, index) {
|
||||
form.querySelectorAll('input').forEach(function(input) {
|
||||
updateElementIndex(input, 'form', index);
|
||||
});
|
||||
});
|
||||
|
||||
// Ensure only the first form has the add button
|
||||
formsetDiv.querySelectorAll('.add-form').forEach(function(button, index) {
|
||||
if (index > 0) {
|
||||
button.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initial event listeners
|
||||
document.querySelectorAll('.add-form').forEach(function(button) {
|
||||
button.addEventListener('click', addForm);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.remove-form').forEach(function(button) {
|
||||
button.addEventListener('click', removeForm);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
Loading…
Reference in New Issue