Remove jquery dependency code (keep it for bootstrap-select)

.gitignore

@@ -36,6 +36,8 @@ secrets.py
 *.log
 media/
 output/
+static/
+
 # Virtualenv
 env/
 venv/

apps/eastereggs/__init__.py

@@ -1,4 +0,0 @@
-# Copyright (C) 2020 by Animath
-# SPDX-License-Identifier: GPL-3.0-or-later
-
-default_app_config = 'eastereggs.apps.EastereggsConfig'

apps/eastereggs/apps.py

@@ -1,8 +0,0 @@
-# Copyright (C) 2020 by Animath
-# SPDX-License-Identifier: GPL-3.0-or-later
-
-from django.apps import AppConfig
-
-
-class EastereggsConfig(AppConfig):
-    name = 'eastereggs'

apps/eastereggs/migrations/__init__.py

@@ -1,2 +0,0 @@
-# Copyright (C) 2020 by Animath
-# SPDX-License-Identifier: GPL-3.0-or-later

apps/eastereggs/templates/eastereggs/xp.html

@@ -1,19 +0,0 @@
-{% extends "index.html" %}
-
-{% block content %}
-    <div id="index-content"></div>
-{% include "eastereggs/xp_modal.html" %}
-{% endblock %}
-
-{% block extrajavascript %}
-    <script>
-        $(document).ready(function() {
-            $("#index-content").load("{% url "index" %} #content");
-            function displayModal() {
-                $("#xpModal").modal('toggle');
-                setTimeout(displayModal, 400);
-            }
-            displayModal();
-        });
-    </script>
-{% endblock %}

apps/eastereggs/templates/eastereggs/xp_modal.html

@@ -1,18 +0,0 @@
-{% load crispy_forms_filters i18n %}
-
-<div id="xpModal" class="modal fade" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">{% trans "Error" %}</h5>
-                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                {% trans "This task failed successfully." %}
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
-            </div>
-        </div>
-    </div>
-</div>

apps/eastereggs/urls.py

@@ -1,11 +0,0 @@
-# Copyright (C) 2020 by Animath
-# SPDX-License-Identifier: GPL-3.0-or-later
-
-from django.urls import path
-from django.views.generic import TemplateView
-
-app_name = "eastereggs"
-
-urlpatterns = [
-    path("xp/", TemplateView.as_view(template_name="eastereggs/xp.html")),
-]

apps/participation/templates/participation/participation_detail.html

@@ -63,12 +63,8 @@
 
 {% block extrajavascript %}
     <script>
-        $(document).ready(function () {
-            $('button[data-bs-target="#uploadSolutionModal"]').click(function() {
-                let modalBody = $("#uploadSolutionModal div.modal-body");
-                if (!modalBody.html().trim())
-                    modalBody.load("{% url "participation:upload_solution" pk=participation.pk %} #form-content")
-            });
-        });
+        document.addEventListener('DOMContentLoaded', () => {
+            initModal("uploadSolution", "{% url "participation:upload_solution" pk=participation.pk %}")
+        })
     </script>
 {% endblock %}

apps/participation/templates/participation/passage_detail.html

@@ -119,27 +119,15 @@
 
 {% block extrajavascript %}
     <script>
-        $(document).ready(function () {
+        document.addEventListener('DOMContentLoaded', () => {
             {% if notes is not None %}
-                $('button[data-bs-target="#updatePassageModal"]').click(function() {
-                    let modalBody = $("#updatePassageModal div.modal-body");
-                    if (!modalBody.html().trim())
-                        modalBody.load("{% url "participation:passage_update" pk=passage.pk %} #form-content")
-                });
+                initModal("updatePassage", "{% url "participation:passage_update" pk=passage.pk %}")
 
                 {% if my_note is not None %}
-                    $('button[data-bs-target="#updateNotesModal"]').click(function() {
-                        let modalBody = $("#updateNotesModal div.modal-body");
-                        if (!modalBody.html().trim())
-                            modalBody.load("{% url "participation:update_notes" pk=my_note.pk %} #form-content")
-                    });
+                    initModal("updateNotesModal", "{% url "participation:update_notes" pk=my_note.pk %}")
                 {% endif %}
             {% elif user.registration.participates %}
-                $('button[data-bs-target="#uploadSynthesisModal"]').click(function() {
-                    let modalBody = $("#uploadSynthesisModal div.modal-body");
-                    if (!modalBody.html().trim())
-                        modalBody.load("{% url "participation:upload_synthesis" pk=passage.pk %} #form-content")
-                });
+                initModal("uploadSynthesis", "{% url "participation:upload_synthesis" pk=passage.pk %}")
             {% endif %}
         });
     </script>

apps/participation/templates/participation/pool_detail.html

@@ -88,30 +88,11 @@
 
 {% block extrajavascript %}
     <script>
-        $(document).ready(function () {
-            $('button[data-bs-target="#updatePoolModal"]').click(function() {
-                let modalBody = $("#updatePoolModal div.modal-body");
-                if (!modalBody.html().trim())
-                    modalBody.load("{% url "participation:pool_update" pk=pool.pk %} #form-content")
-            });
-
-            $('button[data-bs-target="#updateTeamsModal"]').click(function() {
-                let modalBody = $("#updateTeamsModal div.modal-body");
-                if (!modalBody.html().trim())
-                    modalBody.load("{% url "participation:pool_update_teams" pk=pool.pk %} #form-content")
-            });
-
-            $('button[data-bs-target="#addPassageModal"]').click(function() {
-                let modalBody = $("#addPassageModal div.modal-body");
-                if (!modalBody.html().trim())
-                    modalBody.load("{% url "participation:passage_create" pk=pool.pk %} #form-content")
-            });
-
-            $('button[data-bs-target="#uploadNotesModal"]').click(function() {
-                let modalBody = $("#uploadNotesModal div.modal-body");
-                if (!modalBody.html().trim())
-                    modalBody.load("{% url "participation:pool_upload_notes" pk=pool.pk %} #form-content")
-            });
-        });
+        document.addEventListener('DOMContentLoaded', () => {
+            initModal("updatePool", "{% url "participation:pool_update" pk=pool.pk %}")
+            initModal("updateTeams", "{% url "participation:pool_update_teams" pk=pool.pk %}")
+            initModal("addPassage", "{% url "participation:passage_create" pk=pool.pk %}")
+            initModal("uploadNotes", "{% url "participation:pool_upload_notes" pk=pool.pk %}")
+        })
     </script>
 {% endblock %}

apps/participation/templates/participation/team_detail.html

@@ -199,22 +199,10 @@
 
 {% block extrajavascript %}
     <script>
-        $(document).ready(function() {
-            $('button[data-bs-target="#uploadMotivationLetterModal"]').click(function() {
-                let modalBody = $("#uploadMotivationLetterModal div.modal-body");
-                if (!modalBody.html().trim())
-                    modalBody.load("{% url "participation:upload_team_motivation_letter" pk=team.pk %} #form-content");
-            });
-            $('button[data-bs-target="#updateTeamModal"]').click(function() {
-                let modalBody = $("#updateTeamModal div.modal-body");
-                if (!modalBody.html().trim())
-                    modalBody.load("{% url "participation:update_team" pk=team.pk %} #form-content");
-            });
-            $('button[data-bs-target="#leaveTeamModal"]').click(function() {
-                let modalBody = $("#leaveTeamModal div.modal-body");
-                if (!modalBody.html().trim())
-                    modalBody.load("{% url "participation:team_leave" %} #form-content");
-            });
-        });
+        document.addEventListener('DOMContentLoaded', () => {
+            initModal("uploadMotivationLetter", "{% url "participation:upload_team_motivation_letter" pk=team.pk %}")
+            initModal("updateTeam", "{% url "participation:update_team" pk=team.pk %}")
+            initModal("leaveTeam", "{% url "participation:team_leave" %}")
+        })
     </script>
 {% endblock %}

apps/participation/templates/participation/tournament_detail.html

@@ -116,13 +116,9 @@
 
 {% block extrajavascript %}
     <script>
-        $(document).ready(function () {
+        document.addEventListener('DOMContentLoaded', () => {
             {% if user.registration.is_admin %}
-                $('button[data-bs-target="#addPoolModal"]').click(function() {
-                    let modalBody = $("#addPoolModal div.modal-body");
-                    if (!modalBody.html().trim())
-                        modalBody.load("{% url "participation:pool_create" %} #form-content")
-                });
+                initModal("addPool", "{% url "participation:pool_create" %}")
             {% endif %}
         });
     </script>

apps/registration/templates/registration/add_organizer.html

@@ -29,17 +29,3 @@
         {{ admin_registration_form|crispy }}
     </div>
 {% endblock %}
-
-{% block extrajavascript %}
-    <script>
-    $("#id_type").change(function() {
-        let selected_role = $("#id_type :selected");
-        if (selected_role.val() === "volunteer") {
-            $("#registration_form").html($("#volunteer_registration_form").html());
-        }
-        else {
-            $("#registration_form").html($("#admin_registration_form").html());
-        }
-    }).change();
-    </script>
-{% endblock %}

apps/registration/templates/registration/signup.html

@@ -30,14 +30,17 @@
 
 {% block extrajavascript %}
     <script>
-    $("#id_role").change(function() {
-        let selected_role = $("#id_role :selected");
-        if (selected_role.val() === "participant") {
-            $("#registration_form").html($("#student_registration_form").html());
-        }
-        else {
-            $("#registration_form").html($("#coach_registration_form").html());
-        }
-    }).change();
+        document.addEventListener('DOMContentLoaded', () => {
+            let role_elem = document.getElementById("id_role")
+            function updateView () {
+                let selected_role = role_elem.options[role_elem.selectedIndex].value
+                if (selected_role === "participant")
+                    document.getElementById("registration_form").innerHTML = document.getElementById("student_registration_form").innerHTML
+                else
+                    document.getElementById("registration_form").innerHTML = document.getElementById("coach_registration_form").innerHTML
+            }
+            role_elem.addEventListener('change', updateView)
+            updateView()
+        })
     </script>
 {% endblock %}

apps/registration/templates/registration/user_detail.html

@@ -209,35 +209,16 @@
 
 {% block extrajavascript %}
     <script>
-        $(document).ready(function() {
+        document.addEventListener('DOMContentLoaded', () => {
             {% if user_object.registration.team and not user_object.registration.team.participation.valid %}
-                $('button[data-bs-target="#uploadPhotoAuthorizationModal"]').click(function() {
-                    let modalBody = $("#uploadPhotoAuthorizationModal div.modal-body");
-                    if (!modalBody.html().trim())
-                        modalBody.load("{% url "registration:upload_user_photo_authorization" pk=user_object.registration.pk %} #form-content");
-                });
-                $('button[data-bs-target="#uploadHealthSheetModal"]').click(function() {
-                    let modalBody = $("#uploadHealthSheetModal div.modal-body");
-                    if (!modalBody.html().trim())
-                        modalBody.load("{% url "registration:upload_user_health_sheet" pk=user_object.registration.pk %} #form-content");
-                });
-                $('button[data-bs-target="#uploadVaccineSheetModal"]').click(function() {
-                    let modalBody = $("#uploadVaccineSheetModal div.modal-body");
-                    if (!modalBody.html().trim())
-                        modalBody.load("{% url "registration:upload_user_vaccine_sheet" pk=user_object.registration.pk %} #form-content");
-                });
-                $('button[data-bs-target="#uploadParentalAuthorizationModal"]').click(function() {
-                    let modalBody = $("#uploadParentalAuthorizationModal div.modal-body");
-                    if (!modalBody.html().trim())
-                        modalBody.load("{% url "registration:upload_user_parental_authorization" pk=user_object.registration.pk %} #form-content");
-                });
+                initModal("uploadPhotoAuthorization", "{% url "registration:upload_user_photo_authorization" pk=user_object.registration.pk %}")
+                initModal("uploadHealthSheet", "{% url "registration:upload_user_health_sheet" pk=user_object.registration.pk %}")
+                initModal("uploadVaccineSheet", "{% url "registration:upload_user_vaccine_sheet" pk=user_object.registration.pk %}")
+                initModal("uploadParentalAuthorization", "{% url "registration:upload_user_parental_authorization" pk=user_object.registration.pk %}")
             {% endif %}
+
             {% if user_object.registration.team.participation.valid %}
-                $('button[data-bs-target="#updatePaymentModal"]').click(function() {
-                    let modalBody = $("#updatePaymentModal div.modal-body");
-                    if (!modalBody.html().trim())
-                        modalBody.load("{% url "registration:update_payment" pk=user_object.registration.payment.pk %} #form-content");
-                });
+                initModal("updatePaymentModal", "{% url "registration:update_payment" pk=user_object.registration.payment.pk %}")
             {% endif %}
         });
     </script>

tfjm/settings.py

@@ -65,7 +65,6 @@ INSTALLED_APPS = [
     'rest_framework.authtoken',
 
     'api',
-    'eastereggs',
     'registration',
     'participation',
 ]

tfjm/templates/base.html

@@ -20,14 +20,15 @@
     <link rel="stylesheet" href="{% static 'fontawasome/css/all.css' %}">
     <link rel="stylesheet" href="{% static 'fontawasome/css/v4-shims.css' %}">
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/css/bootstrap-select.min.css">
+    <link rel="stylesheet" href="{% static 'bootstrap-select/css/bootstrap-select.min.css' %}">
 
-    {# JQuery and Bootstrap JavaScript #}
-    <script src="{% static 'jquery/jquery.min.js' %}"></script>
+    {# Bootstrap JavaScript #}
     <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/js/bootstrap-select.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/js/i18n/defaults-fr_FR.min.js"></script>
+    {# bootstrap-select for beautyful selects and JQuery dependency #}
+    <script src="{% static 'jquery/jquery.min.js' %}"></script>
+    <script src="{% static 'bootstrap-select/js/bootstrap-select.min.js' %}"></script>
+    <script src="{% static 'bootstrap-select/js/defaults-fr_FR.min.js' %}"></script>
 
     {# Si un formulaire requiert des données supplémentaires (notamment JS), les données sont chargées #}
     {% if form.media %}
@@ -249,49 +250,42 @@
 
 <script>
     CSRF_TOKEN = "{{ csrf_token }}";
-    $(".invalid-feedback").addClass("d-block");
+    document.querySelectorAll(".invalid-feedback").forEach(elem => elem.classList.add('d-block'))
 
-    $(document).ready(function () {
-        $('a[data-bs-target="#tournamentListModal"]').click(function() {
-            let modalBody = $("#tournamentListModal div.modal-body");
-            if (!modalBody.html().trim())
-                modalBody.load("{% url "participation:tournament_list" %} #form-content")
-        });
+    function initModal(target, url, content_id = 'form-content') {
+        document.querySelector('[data-bs-target="#' + target + 'Modal"]').addEventListener('click', () => {
+            let modalBody = document.querySelector("#" + target + "Modal div.modal-body")
+
+            if (!modalBody.innerHTML.trim()) {
+                if (url instanceof Function) url = url()
+
+                fetch(url)
+                    .then(resp => resp.text())
+                    .then(resp => new DOMParser().parseFromString(resp, 'text/html'))
+                    .then(res => modalBody.innerHTML = res.getElementById(content_id).outerHTML)
+            }
+        })
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+        initModal("tournamentList", "{% url "participation:tournament_list" %}")
 
         {% if user.is_authenticated and user.registration.is_admin %}
-            $('a[data-bs-target="#teamsModal"]').click(function() {
-                let modalBody = $("#teamsModal div.modal-body");
-                if (!modalBody.html().trim())
-                    modalBody.load("{% url "participation:team_list" %} #form-content")
-            });
-            $('button[data-bs-target="#searchModal"]').click(function() {
-                let modalBody = $("#searchModal div.modal-body");
-                let q = encodeURI($("#search-term").val());
-                modalBody.load("{% url "haystack_search" %}?q=" + q + " #search-results");
-            });
+            initModal("teams", "{% url "participation:team_list" %}")
+            initModal("search",
+                () => "{% url "haystack_search" %}?q=" + encodeURI(document.getElementById("search-term").value),
+                "search-results")
         {% endif %}
 
         {% if not user.is_authenticated %}
-        $('a[data-bs-target="#loginModal"]').click(function() {
-                let modalBody = $("#loginModal div.modal-body");
-                if (!modalBody.html().trim())
-                    modalBody.load("{% url "login" %} #form-content")
-            });
+            initModal("login", "{% url 'login' %}")
         {% endif %}
 
         {% if user.is_authenticated and user.registration.participates and not user.registration.team %}
-            $('a[data-bs-target="#createTeamModal"]').click(function() {
-                let modalBody = $("#createTeamModal div.modal-body");
-                if (!modalBody.html().trim())
-                    modalBody.load("{% url "participation:create_team" %} #form-content");
-            });
-            $('a[data-bs-target="#joinTeamModal"]').click(function() {
-                let modalBody = $("#joinTeamModal div.modal-body");
-                if (!modalBody.html().trim())
-                    modalBody.load("{% url "participation:join_team" %} #form-content");
-            });
+            initModal("createTeam", "{% url 'participation:create_team' %}")
+            initModal("joinTeam", "{% url 'participation:join_team' %}")
         {% endif %}
-    });
+    })
 </script>
 
 {% block extrajavascript %}{% endblock %}

tfjm/urls.py

@@ -57,8 +57,6 @@ urlpatterns = [
          name='solution'),
     path('media/syntheses/<str:filename>/', SynthesisView.as_view(),
          name='synthesis'),
-
-    path('', include('eastereggs.urls')),
 ]
 
 if 'cas_server' in settings.INSTALLED_APPS:  # pragma: no cover