Fix datetime picker modal detection and add _notif, _get and _post functions

elections/templates/elections/election_create.html

@@ -6,17 +6,17 @@
 {# DateTimePicker #}
 <script src="{% static 'vendor/datetimepicker/picker.js' %}"></script>
 <link rel="stylesheet" href="{% static 'vendor/datetimepicker/picker.css' %}">
+{% endblock %}
 
+{% block custom_js %}
 <script>
   {% get_current_language as LANGUAGE_CODE %}
-  document.addEventListener('DOMContentLoaded', () => {
   new DateTimePicker('input[name=start_date]', {
     lang: '{{ LANGUAGE_CODE }}',
   });
   new DateTimePicker('input[name=end_date]', {
     lang: '{{ LANGUAGE_CODE }}',
   });
-  });
 
 </script>
 {% endblock %}

elections/templates/elections/election_update.html

@@ -6,17 +6,17 @@
 {# DateTimePicker #}
 <script src="{% static 'vendor/datetimepicker/picker.js' %}"></script>
 <link rel="stylesheet" href="{% static 'vendor/datetimepicker/picker.css' %}">
+{% endblock %}
 
+{% block custom_js %}
 <script>
   {% get_current_language as LANGUAGE_CODE %}
-  document.addEventListener('DOMContentLoaded', () => {
   new DateTimePicker('input[name=start_date]', {
     lang: '{{ LANGUAGE_CODE }}',
   });
   new DateTimePicker('input[name=end_date]', {
     lang: '{{ LANGUAGE_CODE }}',
   });
-  });
 
 </script>
 {% endblock %}

shared/templates/base.html

@@ -28,13 +28,48 @@
 
     const _id = s => document.getElementById(s);
 
+    const _get = (u, f) => {
+      const xhr = new XMLHttpRequest();
+
+      xhr.responseType = 'json';
+      xhr.addEventListener('load', () => {
+        f(xhr.response);
+      });
+      xhr.open('GET', u);
+      xhr.send();
+    };
+
+    const _post = (u, d, f) => {
+      const xhr = new XMLHttpRequest();
+      const fd = new FormData(d);
+
+      xhr.responseType = 'json';
+      xhr.addEventListener('load', () => {
+        f(xhr.response);
+      });
+      xhr.open('POST', u);
+      xhr.send(fd);
+    };
+
+    const _notif = (m, c = 'success') => {
+      const n = document.createElement('div');
+      n.classList.add('notification', `is-${c}`, 'is-light');
+      n.innerHTML = `${m}<button class="delete"></button>`;
+
+      _id('notifications').insertBefore(n, _id('content'))
+
+      _$('.delete', n, false).addEventListener('click', () => {
+        n.remove();
+      });
+    }
+
     document.addEventListener('DOMContentLoaded', () => {
       // Delete notifications
       _$('.notification .delete').forEach(d => {
         const n = d.parentNode;
 
         d.addEventListener('click', () => {
-          n.parentNode.removeChild(n);
+          n.remove();
         });
       });
 
@@ -270,9 +305,8 @@
   <div class="main-content">
     <div class="columns is-centered">
       <div class="column is-two-thirds-fullhd is-12-desktop is-12-widescreen">
-        <section class="section pt-3">
+        <section id="notifications" class="section pt-3">
 
-          {% if messages %}
           {% for message in messages %}
           <div class="notification is-{{ message.level_tag|bulma_message_tag }} is-light">
             {% if 'safe' in message.tags %}
@@ -283,9 +317,8 @@
             <button class="delete"></button>
           </div>
           {% endfor %}
-          {% endif %}
 
-          <div class="box">
+          <div id="content" class="box">
             {% block content %}
             {% endblock content %}
           </div>
@@ -299,6 +332,7 @@
       {% blocktrans %}Développé par <a class="tag is-light is-danger" href="https://www.eleves.ens.fr/kde">KDEns</a>. En cas de pépin, contacter <span class="tag is-info is-light">klub-dev [at] ens [dot] fr</span>.{% endblocktrans %}
     </p>
   </footer>
+  {% block custom_js %}{% endblock %}
 </body>
 
 </html>