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

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

@ -5,12 +5,12 @@
{% block extra_head %}
<script>
const nb_options = {{ nb_options }};
var ranks_used = nb_options;
var rank_zones = new Array(nb_options + 1);
const rank_zones = new Array(nb_options + 1);
let ranks_used = nb_options;
var $unranked;
function getLabelText($input) {
var label = $input.closest('.field').querySelector('.label label').innerHTML;
function getLabelText(i) {
let label = _$('.label label', i.closest('.field'), false).innerHTML;
return label.substring(0, label.length - 1).trim();
}
@ -20,15 +20,15 @@
// On a au moins le tag avec le numéro du rang
if (rank_zones[i].childElementCount == 1) {
// 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++) {}
// On déplace les options
while (rank_zones[next_rank].childElementCount > 1) {
let $tile = rank_zones[next_rank].lastChild;
let $input = document.getElementById($tile.dataset.input);
$input.value = i.toString();
rank_zones[i].append($tile);
let t = rank_zones[next_rank].lastChild;
let $i = _id(t.dataset.input);
$i.value = i.toString();
rank_zones[i].append(t);
}
}
}
@ -36,14 +36,6 @@
// On recalcule 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
for (let i = 1; i <= nb_options; i++) {
if (i > (ranks_used + 1)) {
@ -55,19 +47,19 @@
}
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
const rank = parseInt($input.value);
var $tile = document.getElementById(`tile-${$input.id}`);
const rank = parseInt(i.value);
let t = _id(`tile-${i.id}`);
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');
ranks_used = Math.max(rank, ranks_used);
} else {
$unranked.appendChild($tile);
$unranked.appendChild(t);
// 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
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') {
ranks_used += 1;
$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);
const r = d.dataset.rank;
let t = _id(data);
let i = _id(t.dataset.input);
// 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
$target.appendChild($tile);
d.appendChild(t);
// On enregistre le rang dans le formulaire
$input.value = rank;
i.value = r;
}
collapseRanks();
@ -114,37 +99,35 @@
document.addEventListener('DOMContentLoaded', () => {
// Affiche le modal et remplit le récapitulatif
document.getElementById('confirm-button').addEventListener('click', () => {
var $modal_body = document.getElementById('modal-body');
_id('confirm-button').addEventListener('click', () => {
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 => {
var rank = parseInt($input.value) || nb_options;
let o = getLabelText(i)
var option = getLabelText($input)
if (rank > 0 && rank <= nb_options) {
ranks[rank] = (ranks[rank] || []).concat([option]);
if (r > 0 && r <= nb_options) {
ranks[r] = (ranks[r] || []).concat([o]);
} 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++) {
var option_list = '';
for (let j = 1; j <= nb_options; j++) {
let option_list = '';
if (!(typeof ranks[i] === 'undefined')) {
for (option of ranks[i]) {
if (!(typeof ranks[j] === 'undefined')) {
for (option of ranks[j]) {
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">
<thead>
<tr>
@ -153,62 +136,60 @@
</tr>
</thead>
<tbody>
${table_rows}
${trs}
</tbody>
</table>`;
});
// Change le mode de remplissge de formulaire (input vs drag & drop)
document.getElementById('change-method').addEventListener('click', () => {
var $hide = document.getElementById('hide-form');
var $drag_zone = document.getElementById('drag-zone');
var $method_button = document.getElementById('change-method');
_id('change-method').addEventListener('click', () => {
let h = _id('hide-form');
let d = _id('drag-zone');
let b = _id('change-method');
// On échange ce qui est visible
$hide.classList.toggle('is-hidden');
$drag_zone.classList.toggle('is-hidden');
h.classList.toggle('is-hidden');
d.classList.toggle('is-hidden');
if ($hide.classList.contains('is-hidden')) {
$method_button.innerHTML = "{% trans "Utiliser le formulaire classique" %}";
if (h.classList.contains('is-hidden')) {
b.innerHTML = "{% trans "Utiliser le formulaire classique" %}";
moveOptions();
collapseRanks();
} 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
$unranked = document.getElementById('unranked');
$unranked = _id('unranked');
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 => {
var option = getLabelText($input);
_$('.control .input').forEach(i => {
// 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');
$tile.id = `tile-${$input.id}`;
$tile.dataset.input = $input.id;
$tile.innerHTML = `<p class="tile is-child notification is-primary">${option}</p>`;
t.classList.add('tile', 'is-parent', 'is-flex-grow-0');
t.id = `tile-${i.id}`;
t.dataset.input = i.id;
t.innerHTML = `<p class="tile is-child notification is-primary is-grabable">${getLabelText(i)}</p>`;
$tile.setAttribute('draggable', true);
$tile.addEventListener('dragstart', dragstart_handler);
t.setAttribute('draggable', true);
t.addEventListener('dragstart', dragstart_handler);
// Par défaut on ajoute la tuile dans undefined
$unranked.appendChild($tile);
$unranked.appendChild(t);
});
moveOptions();
collapseRanks();
document.querySelectorAll('.drop-zone').forEach($zone => {
$zone.addEventListener('drop', drop_handler);
$zone.addEventListener('dragover', dragover_handler);
_$('.drop-zone').forEach(z => {
z.addEventListener('drop', drop_handler);
z.addEventListener('dragover', dragover_handler);
});
});
@ -236,23 +217,12 @@
</div>
</div>
{% endfor %}
</div>
<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 class="tile is-parent">
<div id="unranked" class="tile is-vertical drop-zone notification" data-rank="">
</div>
</div>
<div class="tile is-parent">
<div id="unranked" class="tile is-vertical drop-zone notification" data-rank="">
</div>
</div>
</div>
<div id="hide-form" class="block is-hidden">

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

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

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

@ -10586,6 +10586,10 @@ body {
background-color: #ffdd57;
}
.is-grabable {
cursor: move;
}
#scroll-button {
position: fixed;
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
background-color: $warning
.is-grabable
cursor: move
#scroll-button
position: fixed
bottom: 1em