implement the make cohost on templates

Here, when event host clicks the `Make Cohost` or the `Remove Cohost` button,
1. we will immediately disable the button(so that host cant spam the button), it also acts like a feedback to host that the task is processing.
2. Then we send ajax request to our view
3. Depending on the response from view,
 a. If successfull, we will either change the button from `Make Cohost` to `Remove Cohost` or vice versa(depending on whether the host was trying to make cohost or remove cohost)
 b. If unsuccessfull, we will enable the button again to allow host to try again.

physionet-django/events/templates/events/event_entries.html

@@ -18,14 +18,14 @@
             <td>{{ participant.user.is_credentialed }}</td>
             <td>
                 {% if participant.is_cohost %}
-                    <form class="manage-cohost" action="">
+                    <form class="manage-cohost" action="{% url 'manage_co_hosts' %}">
                         {% csrf_token %}
                         <input type="text" name="event" value="{{ event.slug }}" hidden>
                         <input type="text" name="participant" value="{{ participant.id }}" hidden>
                         <input type="submit" value="Remove cohost" class="btn btn-sm btn-danger">
                     </form>
                 {% else %}
-                     <form class="manage-cohost" action="">
+                     <form class="manage-cohost" action="{% url 'manage_co_hosts' %}">
                         {% csrf_token %}
                         <input type="text" name="event" value="{{ event.slug }}" hidden>
                         <input type="text" name="participant" value="{{ participant.id }}" hidden>

physionet-django/events/templates/events/event_home.html

@@ -190,6 +190,47 @@ <h5 class="modal-title">Participants</h5>
 
 {% block local_js_bottom %}
   <script>
+  $(document).ready(function() {
+    $('.manage-cohost').submit(function(e) {
+        e.preventDefault();
+        let $form = $(this);
+        $form.find('input[type="submit"]').prop('disabled', true);
+
+        let participant_id = e.target.participant.value;
+        let event_slug = e.target.event.value;
+        let submit_value = $form.find('input[type="submit"]').val();
+        let csrftoken = e.target.csrfmiddlewaretoken.value;
+        let url = e.target.action;
+
+        $.ajax({
+          url: url,
+          type: 'POST',
+          data: {
+              'participant_id': participant_id,
+              'event_slug': event_slug,
+              'csrfmiddlewaretoken': csrftoken,
+              'submit': submit_value
+          },
+          success: function(data) {
+
+              $form.find('input[type="submit"]').prop('disabled', false);
+
+              if (submit_value == 'Make cohost') {
+                $form.find('input[type="submit"]').val('Remove cohost');
+                $form.find('input[type="submit"]').removeClass('btn-primary');
+                $form.find('input[type="submit"]').addClass('btn-danger');
+              } else if (submit_value == 'Remove cohost') {
+                $form.find('input[type="submit"]').val('Make cohost');
+                $form.find('input[type="submit"]').removeClass('btn-danger');
+                $form.find('input[type="submit"]').addClass('btn-success');
+              }
+          },
+          error: function(data) {
+            $form.find('input[type="submit"]').prop('disabled', false);
+          }
+      });
+    });
+  });
   </script>
   <script src="{% static 'custom/js/resize-ck.js' %}"></script>
 {% endblock %}