Eos/eosweb/core/static/nunjucks/question/preferential/selections_make.html

{#
	Eos - Verifiable elections
	Copyright © 2017  RunasSudo (Yingtong Li)
	
	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.
	
	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.
	
	You should have received a copy of the GNU Affero General Public License
	along with this program.  If not, see <http://www.gnu.org/licenses/>.
#}

<h2>{{ questionNum + 1 }}. {{ election.questions.__getitem__(questionNum).prompt }}</h2>

<p><small>Vote for between {{ election.questions.__getitem__(questionNum).min_choices }} and {{ election.questions.__getitem__(questionNum).max_choices }} choices. Click and drag the choices from the grey box to the blue box in order from most-preferred to least-preferred. It is in your best interests to vote for as many choices as you can.</small></p>

<div id="question-choices-selected" class="preferential-choices">
	<div style="color: #3465a4;">Options voted for:</div>
	<div class="dragarea">
		<div class="dragarea-hint"></div>
	</div>
</div>

<div class="ui hidden message" id="message-max-choices">
	<p>You have now selected the maximum allowed number of choices. If you wish to add different choices, you must deselect some choices by dragging them from the blue box back to the grey box.</p>
</div>

<div id="question-choices-remaining" class="preferential-choices">
	<div>Options not yet voted for:</div>
	<div class="dragarea">
		<div class="dragarea-hint"></div>
		{% for choice in election.questions.__getitem__(questionNum).choices.impl %}
			<div class="preferential-choice" data-choiceno="{{ loop.index0 }}">
				<div class="number"></div>
				<div class="name">{{ choice }}</div>
			</div>
		{% endfor %}
	</div>
</div>

<script>
	var allowAdding = true;
	
	function choicesChanged() {
		// Recalculate numbers
		$(".preferential-choices .preferential-choice .number").each(function(i, el) {
			$(el).text("");
		});
		var selectedChoices = $("#question-choices-selected .preferential-choice .number");
		selectedChoices.each(function(i, el) {
			$(el).text(i + 1);
		});
		if (selectedChoices.length >= election.questions.__getitem__(booth.questionNum).max_choices) {
			// Prevent making any more selections
			allowAdding = false;
			$("#message-max-choices").removeClass("hidden");
		} else {
			allowAdding = true;
			$("#message-max-choices").addClass("hidden");
		}
	}
	
	// Fill in ballot with previous selections
	if (booth.answers[booth.questionNum]) {
		for (var selection of booth.answers[booth.questionNum].value.choices) { // Answer already serialised
			$(".preferential-choice[data-choiceno=" + selection + "]").detach().appendTo("#question-choices-selected .dragarea");
		}
		choicesChanged();
	}
	
	var dragulaChoices = dragula(
		[document.querySelector("#question-choices-selected .dragarea"), document.querySelector("#question-choices-remaining .dragarea")],
		{
			moves: function(el, source, handle, sibling) {
				if ("dragarea-hint" in el.classList) {
					return false;
				}
				if ($.contains(document.querySelector("#question-choices-remaining"), el)) {
					return allowAdding;
				}
				return true;
			}
		}
	);
	
	dragulaChoices.on("drop", function(el, target, source, sibling) {
		choicesChanged();
	});
	
	function saveSelections() {
		selections = [];
		$("#question-choices-selected .preferential-choice").each(function(i, el) {
			selections.push(parseInt(el.dataset.choiceno));
		});
		answer = eosjs.eos.base.election.__all__.PreferentialAnswer(eosjs.__kwargtrans__({choices: selections}));
		booth.answers[booth.questionNum] = eosjs.eos.core.objects.__all__.EosObject.serialise_and_wrap(answer);
	}
</script>