DGNum/kadenios
17
0
Fork 0
Code Issues 12 Pull requests Projects Wiki Activity

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

Browse source
This commit is contained in:
Tom Hubrecht 2021-04-12 01:50:27 +02:00
parent f83ba70acf
commit 3b1c98d1fe
1 changed files with 88 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
elections/templates/elections/vote.html
View file

@ -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>