Füge hinzufügen Skript hinzu

src/backoffice/templates/backoffice/link/link_display.html

@@ -2,7 +2,10 @@
 {% load i18n %}
 
 <div class="card-header bg-default">{% trans 'Links' %}</div>
-<ul class="list-group list-group-flush">
+<ul
+  id="links"
+  class="list-group list-group-flush"
+>
   {% csrf_token %}
   {{ link_forms.management_form }}
   <input type="hidden" name="form_type" value="link_form">
@@ -13,3 +16,14 @@
     </li>
   {% endfor %}
 </ul>
+
+<div class="card-body">
+  <button
+    type="button"
+    class="btn btn-secondary float-end"
+    data-add-from-template="#link_form_template"
+    data-add-to="#links"
+  >
+    {{ _("Add link") }}
+  </button>
+</div>

src/backoffice/templates/backoffice/project/create_edit.html

@@ -10,9 +10,78 @@
   {% endif %}
   | {{ event_type }} | {{ conference.name }}
 {% endblock title %}
+
 {% block scripts %}
   <script src="{% static "backoffice/modal.js" %}"></script>
   <script>
+    const extractNumber = (value) => {
+      const numberString = value.replace(/[^0-9]/g, '');
+      return new Number(numberString);
+    };
+
+    /**
+     * Iterates over all buttons with the "data-add-from-template" attribute.
+     * For each button register a click listener, that copies the element found by selector from that attribute.
+     * Then seplaces "template" with "links-NUMBER". NUMER is the last numer of any "name" from source.
+     * The new element is added to the node specified by "data-add-to".
+     */
+    const setUpAddFromTemplate = () => {
+      /**
+       * @type {NodeList}
+       */
+      const addButtons = document.querySelectorAll("[data-add-from-template]");
+
+      addButtons.forEach(
+        /**
+         * @param addButton {Node}
+         */
+        (addButton) => {
+          const templateSelector = addButton.dataset.addFromTemplate;
+          const template = document.querySelector(templateSelector);
+
+          if (!template) {
+            console.log("Template source not found");
+            return;
+          }
+
+          const targetSelector = addButton.dataset.addTo;
+          const target = document.querySelector(targetSelector);
+
+          if (!target) {
+            console.log("Template target not found");
+            return;
+          }
+
+          addButton.addEventListener("click", () => {
+            const last = [...target.querySelectorAll("[name]")].pop();
+
+            if (!last) {
+              console.log("Unable to find last element in source");
+              return;
+            }
+
+            const lastNumber = extractNumber(last.getAttribute("name"));
+
+            if (isNaN(lastNumber)) {
+              console.log("Unable to find last element number in source");
+              return;
+            }
+
+            const nextNumber = lastNumber + 1;
+            // TODO "links" mit ins template rendern, damit hier nur noch die Nummer eingesetzt werden muss
+            const nextAsString = template.outerHTML.replaceAll("template", `links-${nextNumber}`);
+
+            // TODO eventuell fertiges LI als Template rausrendern
+            const next = document.createElement("li");
+            next.classList.add("list-group-item");
+            next.innerHTML = nextAsString;
+
+            target.appendChild(next);
+          });
+        }
+      );
+    };
+
   $(document).ready(() => {
     showModal = registerModal()
     publishProject = document.getElementById('publishProject');
@@ -58,9 +127,11 @@
         })
       }
     };
+    setUpAddFromTemplate();
   });
   </script>
 {% endblock scripts %}
+
 {% block content %}
   {% if form.instance.assembly %}
     {% url 'backoffice:assembly-project' pk=form.instance.id assembly=form.instance.assembly.id as edit_url %}