On rajoute un menu de confirmation rempli avec du JS pour les options sélectionnées

elections/templates/elections/vote.html

@@ -2,6 +2,62 @@
 {% load i18n %}
 
 
+{% block extra_head %}
+{% if question.vote_type == 'select' %}
+<script>
+  var selected = [];
+
+  document.addEventListener('DOMContentLoaded', () => {
+    // À l'initialisation on remplit selected
+    (document.querySelectorAll('.checkbox input') || []).forEach(($checkbox) => {
+      if ($checkbox.checked) {
+        selected.push($checkbox.id);
+      }
+    });
+
+    (document.querySelectorAll('.checkbox input') || []).forEach(($checkbox) => {
+      $checkbox.addEventListener('change', () => {
+        var c_id = $checkbox.id;
+        if ($checkbox.checked) {
+          selected.push($checkbox.id);
+        } else {
+          selected = selected.filter(s_id => s_id != $checkbox.id);
+        }
+      });
+    });
+
+    document.getElementById('confirm-button').addEventListener('click', () => {
+      var $modal_body = document.getElementById('modal-body');
+
+      var selected_rows = '';
+
+      for (const s_id of selected) {
+        let option_text = document.getElementById(s_id).nextSibling.textContent.trim();
+        selected_rows += '<tr><td>' + option_text + '</td></tr>\n';
+      }
+
+      console.log(selected_rows);
+
+      $modal_body.innerHTML = `
+      <table class="table is-fullwidth">
+        <thead>
+          <tr>
+            <th>{% trans "Option(s) selectionnée(s)" %}</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${selected_rows}
+        </tbody>
+      </table>`;
+    });
+
+  });
+
+</script>
+{% elif question.vote_type == 'rank' %}
+{% endif %}
+{% endblock %}
+
 {% block content %}
 
 <div class="level">
@@ -32,13 +88,14 @@
 
       <div class="field is-grouped is-centered">
         <div class="control is-expanded">
-          <button class="button is-fullwidth is-outlined is-primary is-light">
+          <a class="button is-fullwidth is-outlined is-primary is-light modal-button" data-target="modal-confirm" id="confirm-button">
             <span class="icon is-small">
               <i class="fas fa-check"></i>
             </span>
             <span>{% trans "Enregistrer" %}</span>
-          </button>
+          </a>
         </div>
+
         <div class="control">
           <a class="button is-primary" href="{% url 'election.view' question.election.pk %}">
             <span class="icon is-small">
@@ -47,6 +104,35 @@
             <span>{% trans "Retour" %}</span>
           </a>
         </div>
+
+        <div class="modal" id="modal-confirm">
+          <div class="modal-background"></div>
+          <div class="modal-card">
+            <header class="modal-card-head">
+              <p class="modal-card-title">{% trans "Confirmation du vote" %}</p>
+              <a class="delete" aria-label="close"></a>
+            </header>
+
+            <section class="modal-card-body" id="modal-body">
+            </section>
+
+            <footer class="modal-card-foot">
+              <button class="button is-fullwidth is-outlined is-primary is-light">
+                <span class="icon is-small">
+                  <i class="fas fa-check"></i>
+                </span>
+                <span>{% trans "Confirmer" %}</span>
+              </button>
+
+              <a class="button is-primary button-close">
+                <span class="icon is-small">
+                  <i class="fas fa-times"></i>
+                </span>
+                <span>{% trans "Annuler" %}</span>
+              </a>
+          </div>
+        </div>
+
       </div>
     </form>
   </div>