Updated polls/models to include a field for storing the ballot selected by the user on the front end. A few bugs have been fixed on the event voting page and new functionality has been added which allows a voter to restart the voting process.

allauthdemo/polls/models.py

@@ -205,6 +205,7 @@ class PartialBallotDecryption(models.Model):
 class Ballot(models.Model):
     voter = models.ForeignKey(EmailUser, on_delete=models.CASCADE, related_name="ballots")
     poll = models.ForeignKey(Poll, on_delete=models.CASCADE, related_name="ballots")
+    selection = models.CharField(max_length=1)
     cast = models.BooleanField(default=False)
 
 

allauthdemo/polls/views.py

@@ -45,6 +45,9 @@ class EventDetailView(generic.DetailView):
         for poll in polls:
             result_json = poll.result_json
 
+            if result_json is None:
+                continue
+
             if result_json[len(result_json)-1] == ',':
                 result_json = result_json[0:len(result_json)-1]
 
@@ -173,6 +176,7 @@ def event_vote(request, event_id, poll_id):
 
     if request.method == "POST":
         data = json.loads(request.POST.lists()[0][0])
+        selection = data['selection']
         ballot_json = data['ballot']
         encrypted_votes_json = ballot_json['encryptedVotes']
 
@@ -191,6 +195,7 @@ def event_vote(request, event_id, poll_id):
                                             cipher_text_c2=fragment['C2'])
 
         ballot.cast = True
+        ballot.selection = selection
         ballot.save()
 
         combine_encrypted_votes.delay(email_key[0].user, poll)

allauthdemo/templates/polls/event_vote.html

@@ -28,9 +28,9 @@
         </div>
         <span><strong>Voting status:</strong>
             {% if has_voted %}
-                Voted - Re-Submitting will Change your Vote
+                <span style="color: green; font-weight: bold">Voted - Re-submitting will change your vote</span>
             {% else %}
-                Not Voted
+                <span style="color: red; font-weight: bold">Not Voted</span>
             {% endif %}
         </span>
         <br/>
@@ -104,13 +104,12 @@
         </div>
 
         <!-- Information Dialog called upon request -->
-        <div class="modal fade" id="modalDialog" role="dialog">
+        <div class="modal fade" id="modalDialog" role="dialog" tabindex="-1" data-backdrop="static">
-            <div class="modal-dialog">
+            <div class="modal-dialog" role="document">
 
               <!-- Dialog content-->
               <div class="modal-content">
                 <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h4 class="modal-title" style="text-align: center"><strong>Please Select a Ballot</strong></h4>
                 </div>
                 <div class="modal-body">
@@ -124,7 +123,9 @@
                     </div>
                 </div>
                 <div class="modal-footer">
-                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                  {% comment %}<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>{% endcomment %}
+                    <button id="cancelVoteBtn" type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
+                    <button id="closeDialogBtn" type="button" class="btn btn-primary hidden" data-dismiss="modal">Close</button>
                 </div>
               </div>
 

requirements.txt

@@ -8,4 +8,3 @@ django-simple-captcha
 django-nocaptcha-recaptcha
 django-recaptcha
 mysqlclient
-

static/js/event_vote.js

@@ -1,3 +1,5 @@
+var dialogOpen = false;
+
 function showDialogWithText(titleTxt, bodyTxt) {
     var modalDialog = $('#modalDialog');
     var title = modalDialog.find('.modal-title');
@@ -10,7 +12,10 @@ function showDialogWithText(titleTxt, bodyTxt) {
     body.empty();
     body.append( p );
 
-    modalDialog.modal('show');
+    if(!dialogOpen) {
+        modalDialog.modal('toggle');
+        dialogOpen = true;
+    }
 }
 
 // This should stop people ticking more than the maximum permitted
@@ -67,9 +72,16 @@ function isVotingInputValid() {
     // This will highlight when people haven't selected enough options
 
     if(!valid) {
-        let errText = "You've only selected " + selectedCount
+        let errText = "You've only selected " + selectedCount;
-            + " option(s). The minimum number you need to select is " + MIN_SELECTIONS
+
-            + " and the maximum is " + MAX_SELECTIONS + ". Please go back and correct this.";
+        if(selectedCount > 1) {
+            errText += " options.";
+        } else {
+            errText = " You haven't selected any options.";
+        }
+
+        errText += " The minimum number you need to select is " + MIN_SELECTIONS + " and the maximum is "
+            + MAX_SELECTIONS + ". Please go back and correct this.";
 
         let titleTxt = 'Voting Error';
 
@@ -203,6 +215,10 @@ function voteSuccessfullyReceived() {
     }
 
     showDialogWithText(titleTxt, bodyText);
+
+    // Update the dialog's btns
+    $('#cancelVoteBtn').addClass("hidden");
+    $('#closeDialogBtn').removeClass("hidden");
 }
 
 var CSRF = $( "input[name='csrfmiddlewaretoken']" ).val();
@@ -211,7 +227,8 @@ function csrfSafeMethod(method) {
     return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
 }
 
-function sendBallotToServer(ballot) {
+function sendBallotToServer(selection, ballot, ballotSelectionDialog) {
+    // Use ajax to send the selected ballot to server
     $.ajaxSetup({
         beforeSend: function(xhr, settings) {
             if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
@@ -223,11 +240,14 @@ function sendBallotToServer(ballot) {
     $.ajax({
          type : "POST",
          url : window.location,
-         data : JSON.stringify({ ballot: ballot}),
+         data : JSON.stringify({ selection: selection, ballot: ballot}),
          success : function() {
              voteSuccessfullyReceived();
          }
     });
+
+    // Update the client to inform the user that the vote is being processed
+    showDialogWithText("Please Wait", "Processing Vote. Please wait...");
 }
 
 var bytestostring = function(b) {
@@ -280,16 +300,12 @@ function onAfterBallotSend() {
     // TODO: a similar way that showBallotChoiceDialog does.
 }
 
-function processBallotSelection(selection, selectionHash, successFn) {
+function processBallotSelection(selection, selectedBallot, selectedBallotHash, dialog, successFn) {
     // Dispatch the ballot to the server
-    sendBallotToServer(selection);
+    sendBallotToServer(selection, selectedBallot, dialog);
-
-    // Close the choice selection dialog
-    var modalDialog = $('#modalDialog');
-    modal.modal('hide');
 
     // Call the successfn currently with the selection hash but this may not be needed
-    successFn(selectionHash);
+    successFn(selectedBallotHash);
 }
 
 function showBallotChoiceDialog(ballotA, ballotB) {
@@ -342,15 +358,22 @@ function showBallotChoiceDialog(ballotA, ballotB) {
     body.append(choiceGroupDiv);
     body.append(hashGroupDiv);
 
-    modalDialog.modal('show');
+    // Prepare the appropriate dialog buttons
+    $('#cancelVoteBtn').removeClass("hidden");
+    $('#closeDialogBtn').removeClass("hidden").addClass("hidden");
+
+    if(!dialogOpen) {
+        modalDialog.modal('toggle');
+        dialogOpen = true;
+    }
 
     // Register callback functions for the selection of either A or B
     $('#choice-A').click(function(e) {
-        processBallotSelection(ballotA, BALLOT_A_HASH, onAfterBallotSend);
+        processBallotSelection("A", ballotA, BALLOT_A_HASH, modalDialog, onAfterBallotSend);
     });
 
     $('#choice-B').click(function(e) {
-        processBallotSelection(ballotB, BALLOT_B_HASH, onAfterBallotSend);
+        processBallotSelection("B", ballotB, BALLOT_B_HASH, modalDialog, onAfterBallotSend);
     });
 }
 
@@ -374,3 +397,29 @@ function generateBallotsAndShowUsr() {
         generateBallotB(ballotA);
     }, 150);
 }
+
+$('#modalDialog').on('hide.bs.modal', function (e) {
+    var titleText = $(this).find('.modal-title').text();
+
+    if(titleText.indexOf("Received") > -1) {
+        // Update page to reflect the fact that a vote has taken place
+        location.reload();
+    } else {
+        // Reset poll voting to allow user to vote again
+        progressBar.setAttribute("style", "width: 0%;");
+        $('#gen-ballots-btn').toggleClass("hidden");
+        $('#progress-bar-description').toggleClass('hidden');
+        $('#progress-bar-container').toggleClass('hidden');
+
+        var inputs = $("label input[type=checkbox]");
+        inputs.each(function () {
+            var input = $(this);
+            input.prop('checked', false);
+            input.prop('disabled', false);
+        });
+
+        selectedCount = 0;
+    }
+
+    dialogOpen = false;
+});