initial html added

admin/templates/reserved.html

@@ -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">
+                                &#43;
+                            </button>
+                        {% endif %}
+                        <button type="button" class="btn btn-sm btn-danger remove-form ms-2">
+                            &minus;
+                        </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 %}