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

On utilise les nouvelles fonctions pour le vote

Browse source
This commit is contained in:
Tom Hubrecht 2021-08-20 21:14:01 +02:00
parent d8b0885772
commit ed15d137cc
5 changed files with 79 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

152
elections/templates/elections/vote/rank.html
View file

@ -5,12 +5,12 @@
{% block extra_head %} {% block extra_head %}
<script> <script>
const nb_options = {{ nb_options }}; const nb_options = {{ nb_options }};
var ranks_used = nb_options; const rank_zones = new Array(nb_options + 1);
var rank_zones = new Array(nb_options + 1); let ranks_used = nb_options;
var $unranked; var $unranked;
function getLabelText($input) { function getLabelText(i) {
var label = $input.closest('.field').querySelector('.label label').innerHTML; let label = _$('.label label', i.closest('.field'), false).innerHTML;
return label.substring(0, label.length - 1).trim(); return label.substring(0, label.length - 1).trim();
} }
@ -20,15 +20,15 @@
// On a au moins le tag avec le numéro du rang // On a au moins le tag avec le numéro du rang
if (rank_zones[i].childElementCount == 1) { if (rank_zones[i].childElementCount == 1) {
// On cherche le prochain rang avec des options // On cherche le prochain rang avec des options
var next_rank = i + 1; let next_rank = i + 1;
for (; next_rank < nb_options && rank_zones[next_rank].childElementCount == 1; next_rank++) {} for (; next_rank < nb_options && rank_zones[next_rank].childElementCount == 1; next_rank++) {}
// On déplace les options // On déplace les options
while (rank_zones[next_rank].childElementCount > 1) { while (rank_zones[next_rank].childElementCount > 1) {
let $tile = rank_zones[next_rank].lastChild; let t = rank_zones[next_rank].lastChild;
let $input = document.getElementById($tile.dataset.input); let $i = _id(t.dataset.input);
$input.value = i.toString(); $i.value = i.toString();
rank_zones[i].append($tile); rank_zones[i].append(t);
} }
} }
} }
@ -36,14 +36,6 @@
// On recalcule ranks_used // On recalcule ranks_used
for (ranks_used = 0; ranks_used < nb_options && rank_zones[ranks_used + 1].childElementCount > 1; ranks_used++) {} for (ranks_used = 0; ranks_used < nb_options && rank_zones[ranks_used + 1].childElementCount > 1; ranks_used++) {}
// On affiche le bouton + si besoin
// let $add_rank = document.getElementById('rank-add');
// if (ranks_used < (nb_options - 1)) {
// $add_rank.parentElement.classList.remove('is-hidden')
// } else {
// $add_rank.parentElement.classList.add('is-hidden')
// }
// On cache les zones non utilisées, sauf une // On cache les zones non utilisées, sauf une
for (let i = 1; i <= nb_options; i++) { for (let i = 1; i <= nb_options; i++) {
if (i > (ranks_used + 1)) { if (i > (ranks_used + 1)) {
@ -55,19 +47,19 @@
} }
function moveOptions() { function moveOptions() {
(document.querySelectorAll('.control .input') || []).forEach($input => { _$('.control .input').forEach(i => {
// On rajoute la tuile dans le classement ou dans les non classées // On rajoute la tuile dans le classement ou dans les non classées
const rank = parseInt($input.value); const rank = parseInt(i.value);
var $tile = document.getElementById(`tile-${$input.id}`); let t = _id(`tile-${i.id}`);
if (!(typeof rank === 'undefined') && rank > 0 && rank <= nb_options) { if (!(typeof rank === 'undefined') && rank > 0 && rank <= nb_options) {
rank_zones[rank].appendChild($tile); rank_zones[rank].appendChild(t);
rank_zones[rank].parentElement.classList.remove('is-hidden'); rank_zones[rank].parentElement.classList.remove('is-hidden');
ranks_used = Math.max(rank, ranks_used); ranks_used = Math.max(rank, ranks_used);
} else { } else {
$unranked.appendChild($tile); $unranked.appendChild(t);
// On enlève les valeurs non règlementaires // On enlève les valeurs non règlementaires
$input.value = ''; i.value = '';
} }
}); });
} }
@ -87,26 +79,19 @@
// On récupère l'id de la tuile à déplacer // On récupère l'id de la tuile à déplacer
const data = event.dataTransfer.getData('text/plain'); const data = event.dataTransfer.getData('text/plain');
var $target = event.target.closest('.drop-zone'); let d = event.target.closest('.drop-zone');
if ($target.id == 'rank-add') { const r = d.dataset.rank;
ranks_used += 1; let t = _id(data);
let i = _id(t.dataset.input);
$target = rank_zones[ranks_used];
$target.parentElement.classList.remove('is-hidden');
}
const rank = $target.dataset.rank;
var $tile = document.getElementById(data);
var $input = document.getElementById($tile.dataset.input);
// Si on ne change pas de rang, pas besoin de déplacer l'option // Si on ne change pas de rang, pas besoin de déplacer l'option
if ($input.value != rank) { if (i.value != r) {
// On déplace l'option // On déplace l'option
$target.appendChild($tile); d.appendChild(t);
// On enregistre le rang dans le formulaire // On enregistre le rang dans le formulaire
$input.value = rank; i.value = r;
} }
collapseRanks(); collapseRanks();
@ -114,37 +99,35 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// Affiche le modal et remplit le récapitulatif // Affiche le modal et remplit le récapitulatif
document.getElementById('confirm-button').addEventListener('click', () => { _id('confirm-button').addEventListener('click', () => {
var $modal_body = document.getElementById('modal-body'); let ranks = new Array(nb_options + 1);
var ranks = new Array(nb_options + 1); _$('.control .input').forEach(i => {
let r = parseInt(i.value) || nb_options;
(document.querySelectorAll('.control .input') || []).forEach($input => { let o = getLabelText(i)
var rank = parseInt($input.value) || nb_options;
var option = getLabelText($input) if (r > 0 && r <= nb_options) {
ranks[r] = (ranks[r] || []).concat([o]);
if (rank > 0 && rank <= nb_options) {
ranks[rank] = (ranks[rank] || []).concat([option]);
} else { } else {
ranks[nb_options] = (ranks[nb_options] || []).concat([option]); ranks[nb_options] = (ranks[nb_options] || []).concat([o]);
} }
}); });
var table_rows = ''; let trs = '';
for (let i = 1; i <= nb_options; i++) { for (let j = 1; j <= nb_options; j++) {
var option_list = ''; let option_list = '';
if (!(typeof ranks[i] === 'undefined')) { if (!(typeof ranks[j] === 'undefined')) {
for (option of ranks[i]) { for (option of ranks[j]) {
option_list += `${option}<br>`; option_list += `${option}<br>`;
} }
} }
table_rows += `<tr><th>${i}</th><td><div>${option_list}</div></td></tr>\n` trs += `<tr><th>${j}</th><td><div>${option_list}</div></td></tr>\n`
} }
$modal_body.innerHTML = ` _id('modal-body').innerHTML = `
<table class="table is-fullwidth is-striped"> <table class="table is-fullwidth is-striped">
<thead> <thead>
<tr> <tr>
@ -153,62 +136,60 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
${table_rows} ${trs}
</tbody> </tbody>
</table>`; </table>`;
}); });
// Change le mode de remplissge de formulaire (input vs drag & drop) // Change le mode de remplissge de formulaire (input vs drag & drop)
document.getElementById('change-method').addEventListener('click', () => { _id('change-method').addEventListener('click', () => {
var $hide = document.getElementById('hide-form'); let h = _id('hide-form');
var $drag_zone = document.getElementById('drag-zone'); let d = _id('drag-zone');
var $method_button = document.getElementById('change-method'); let b = _id('change-method');
// On échange ce qui est visible // On échange ce qui est visible
$hide.classList.toggle('is-hidden'); h.classList.toggle('is-hidden');
$drag_zone.classList.toggle('is-hidden'); d.classList.toggle('is-hidden');
if ($hide.classList.contains('is-hidden')) { if (h.classList.contains('is-hidden')) {
$method_button.innerHTML = "{% trans "Utiliser le formulaire classique" %}"; b.innerHTML = "{% trans "Utiliser le formulaire classique" %}";
moveOptions(); moveOptions();
collapseRanks(); collapseRanks();
} else { } else {
$method_button.innerHTML = "{% trans "Utiliser le cliquer-déposer" %}"; b.innerHTML = "{% trans "Utiliser le cliquer-déposer" %}";
} }
}); });
// Initialise les éléments pour le formulaire interactif // Initialise les éléments pour le formulaire interactif
$unranked = document.getElementById('unranked'); $unranked = _id('unranked');
for (let i = 1; i <= nb_options; i++) { for (let i = 1; i <= nb_options; i++) {
rank_zones[i] = document.getElementById(`rank-${i}`); rank_zones[i] = _id(`rank-${i}`);
} }
(document.querySelectorAll('.control .input') || []).forEach($input => { _$('.control .input').forEach(i => {
var option = getLabelText($input);
// On créé une tuile avec le nom de l'option // On créé une tuile avec le nom de l'option
var $tile = document.createElement('div'); let t = document.createElement('div');
$tile.classList.add('tile', 'is-parent', 'is-flex-grow-0'); t.classList.add('tile', 'is-parent', 'is-flex-grow-0');
$tile.id = `tile-${$input.id}`; t.id = `tile-${i.id}`;
$tile.dataset.input = $input.id; t.dataset.input = i.id;
$tile.innerHTML = `<p class="tile is-child notification is-primary">${option}</p>`; t.innerHTML = `<p class="tile is-child notification is-primary is-grabable">${getLabelText(i)}</p>`;
$tile.setAttribute('draggable', true); t.setAttribute('draggable', true);
$tile.addEventListener('dragstart', dragstart_handler); t.addEventListener('dragstart', dragstart_handler);
// Par défaut on ajoute la tuile dans undefined // Par défaut on ajoute la tuile dans undefined
$unranked.appendChild($tile); $unranked.appendChild(t);
}); });
moveOptions(); moveOptions();
collapseRanks(); collapseRanks();
document.querySelectorAll('.drop-zone').forEach($zone => { _$('.drop-zone').forEach(z => {
$zone.addEventListener('drop', drop_handler); z.addEventListener('drop', drop_handler);
$zone.addEventListener('dragover', dragover_handler); z.addEventListener('dragover', dragover_handler);
}); });
}); });
@ -236,17 +217,6 @@
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
<div class="tile is-parent is-flex-grow-0 is-hidden">
<div id="rank-add" class="tile is-child notification has-text-centered drop-zone">
<span class="icon-text subtitle has-text-primary">
<span class="icon">
<i class="fas fa-plus"></i>
</span>
<span>{% trans "Ajouter un rang" %}</span>
</span>
</div>
</div>
</div> </div>
<div class="tile is-parent"> <div class="tile is-parent">

15
elections/templates/elections/vote/select.html
View file

@ -5,19 +5,18 @@
{% block extra_head %} {% block extra_head %}
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
document.getElementById('confirm-button').addEventListener('click', () => { _id('confirm-button').addEventListener('click', () => {
var $modal_body = document.getElementById('modal-body'); let mb = _id('modal-body');
var selected_rows = ''; let selected_rows = '';
(document.querySelectorAll('.checkbox input') || []).forEach($checkbox => { _$('.checkbox input').forEach(c => {
if ($checkbox.checked) { if (c.checked) {
let option_text = $checkbox.nextSibling.textContent.trim(); selected_rows += `<tr><td>${c.nextSibling.textContent.trim()}</td></tr>\n`;
selected_rows += '<tr><td>' + option_text + '</td></tr>\n';
} }
}); });
$modal_body.innerHTML = ` mb.innerHTML = `
<table class="table is-fullwidth"> <table class="table is-fullwidth">
<thead> <thead>
<tr> <tr>

4
shared/static/css/main.css
View file

@ -10586,6 +10586,10 @@ body {
background-color: #ffdd57; background-color: #ffdd57;
} }
.is-grabable {
cursor: move;
}
#scroll-button { #scroll-button {
position: fixed; position: fixed;
bottom: 1em; bottom: 1em;

2
shared/static/css/main.css.map
View file

File diff suppressed because one or more lines are too long

3
shared/static/src/sass/main.sass
View file

@ -47,6 +47,9 @@ body
hr hr
background-color: $warning background-color: $warning
.is-grabable
cursor: move
#scroll-button #scroll-button
position: fixed position: fixed
bottom: 1em bottom: 1em