From e14ceca91a7f6efd28718fdedc787f03141d2262 Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@ens.fr>
Date: Sat, 21 Aug 2021 15:17:52 +0200
Subject: [PATCH] Fix datetime picker modal detection and add _notif, _get and
 _post functions

---
 .../templates/elections/election_create.html  | 14 +++---
 .../templates/elections/election_update.html  | 14 +++---
 shared/templates/base.html                    | 44 ++++++++++++++++---
 3 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/elections/templates/elections/election_create.html b/elections/templates/elections/election_create.html
index 5003026..733bdbe 100644
--- a/elections/templates/elections/election_create.html
+++ b/elections/templates/elections/election_create.html
@@ -6,16 +6,16 @@
 {# 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 }}',
-    });
+  new DateTimePicker('input[name=start_date]', {
+    lang: '{{ LANGUAGE_CODE }}',
+  });
+  new DateTimePicker('input[name=end_date]', {
+    lang: '{{ LANGUAGE_CODE }}',
   });
 
 </script>
diff --git a/elections/templates/elections/election_update.html b/elections/templates/elections/election_update.html
index c27aca3..cf392b8 100644
--- a/elections/templates/elections/election_update.html
+++ b/elections/templates/elections/election_update.html
@@ -6,16 +6,16 @@
 {# 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 }}',
-    });
+  new DateTimePicker('input[name=start_date]', {
+    lang: '{{ LANGUAGE_CODE }}',
+  });
+  new DateTimePicker('input[name=end_date]', {
+    lang: '{{ LANGUAGE_CODE }}',
   });
 
 </script>
diff --git a/shared/templates/base.html b/shared/templates/base.html
index 8f8cb88..b9ec809 100644
--- a/shared/templates/base.html
+++ b/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>