130 lines
4.3 KiB
HTML
130 lines
4.3 KiB
HTML
{% 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 %}
|