feat(activities,people): Allow people to attend activities

resolve #13

activities/templates/activities/activity/detail.html

@@ -10,6 +10,20 @@
         </ol>
     </nav>
 
+    {% if user_is_attending %}
+        <button class="btn btn-danger"
+                onclick="clickCancelAttend();">
+            Cancel Attendance
+        </button>
+
+    {% else %}
+        <button class="btn btn-success"
+                onclick="clickAttend();">
+            Attend
+        </button>
+
+    {% endif %}
+
     <hr>
 
     <dl>
@@ -23,4 +37,91 @@
         <dd>{{ activity.medium }}</dd>
     </dl>
 
+    <hr>
+
+    <table class="table table-borderless">
+        <thead>
+        <tr>
+            <th>Name</th>
+        </tr>
+        </thead>
+
+        <tbody>
+        {% for person in activity.attendance_list.all %}
+            <tr>
+                <td>{{ person }}</td>
+                <td>
+                    <a class="btn btn-sm btn-info"
+                       href="{% url 'people:person.detail' pk=person.pk %}">Profile</a>
+                </td>
+            </tr>
+
+        {% empty %}
+            <tr>
+                <td>No records</td>
+            </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+
+
+{% endblock %}
+
+
+{% block extra_script %}
+    <script type="application/javascript">
+        /**
+         * Get the value of a named cookie.
+         */
+        function getCookie(name) {
+            for (const cookie of document.cookie.split(';')) {
+                const tokens = cookie.split('=');
+                if (tokens[0].trim() === name) {
+                    return tokens[1].trim();
+                }
+            }
+
+            return null;
+        }
+
+        /**
+         * Submit that user is attending this activity.
+         */
+        function clickAttend() {
+            $.ajax({
+                url: '{% url "activities:activity.attendance" pk=activity.pk %}',
+                type: 'POST',
+                contentType: 'application/json',
+                headers: {
+                    'X-CSRFToken': getCookie('csrftoken')
+                },
+                data: JSON.stringify({
+                    pk: {{ request.user.person.pk }}
+                }),
+                success: function() {
+                    location.reload()
+                }
+            })
+        }
+
+        /**
+         * Submit that user is not attending this activity.
+         */
+        function clickCancelAttend() {
+            $.ajax({
+                url: '{% url "activities:activity.attendance" pk=activity.pk %}',
+                type: 'DELETE',
+                contentType: 'application/json',
+                headers: {
+                    'X-CSRFToken': getCookie('csrftoken')
+                },
+                data: JSON.stringify({
+                    pk: {{ request.user.person.pk }}
+                }),
+                success: function() {
+                    location.reload()
+                }
+            })
+        }
+    </script>
 {% endblock %}