re-add multiple event views, add message for success

teamsnap/templates/lineup/multiple_edit.html

@@ -18,11 +18,14 @@
     {#        </div>#}
     {#    </div>#}
     <div class="container overflow-scroll">
+      <div id="popup-messages-content">
+      </div>
         <div class="row flex-row flex-nowrap">
             <table>
                 <tbody>
                 <tr class="align-top mx-1">
                     {% for event_data in contexts %}
+
                         <td class="px-1">
                             {% include "lineup/widgets/lineup.html" with event=event_data.event event_id=event_data.event.data.id formset=event_data.formset formset_startinglineup=event_data.formset_startinglineup formset_bench=event_data.formset_bench formset_out=event_data.formset_out formset_startingpositionalonly=event_data.formset_startingpositionalonly %}
                         </td>
@@ -32,6 +35,43 @@
             </table>
         </div>
     </div>
-    <script src="{% static 'js/Sortable.js' %}"></script>
-<script src="{% static 'teamsnap/js/lineup-table.js' %}"></script>
+
+{% endblock %}
+
+{% block inline_javascript %}
+ {{ block.super }}
+  <script src="{% static 'js/Sortable.js' %}"></script>
+  <script src="{% static 'js/lineup-table.js' %}"></script>
+  <script>
+    window.addEventListener('DOMContentLoaded', () => {
+      /* Run whatever you want */
+      const postForms = document.querySelectorAll("[id^=form-lineup]");
+      for (postForm of postForms) {
+        function handleSubmit(postForm) {
+          postForm.addEventListener("submit", e => {
+            e.preventDefault();
+            formData = new FormData(postForm);
+            fetch(postForm.action, {
+              method: 'POST',
+              body: formData,
+            })
+              .then(response => response.json())
+              .then(data => {
+                {#postForm.reset();#}
+                document.querySelector("#popup-messages-content").innerHTML = `<div class="alert alert-dismissible alert-success" role="alert">
+                                                                  <strong>Success!</strong> ${data.formatted_title} <strong>saved</strong>.
+                                                                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                                                                </div> `
+              })
+              .catch((error) => {
+                console.error('Error:', error);
+              });
+          })
+        }
+
+        handleSubmit(postForm)
+      }
+    });
+  </script>
+
 {% endblock %}

teamsnap/templates/lineup/widgets/lineup.html

@@ -1,5 +1,5 @@
 <div class="card mx-auto benchcoach-lineup" style="max-width: 455px" id="benchcoach-lineup-{{ event_id }}">
-    <form method="post" action="">
+    <form method="post" action='{% url 'teamsnap_submit_lineup' team_id=event.data.team_id event_id=event.data.id %}' id="form-lineup-{{ event.data.id }}">
         {{ formset.management_form }}
         {% csrf_token %}
         <div class="border-bottom p-2">
@@ -71,7 +71,6 @@
             </div>
             {% include 'lineup/widgets/lineup_table.html' with formset=formset_out table_id="benchcoach-out" %}
 
-
         </div>
     </form>
 </div>