Much better progress tracker in voting booth #9

This commit is contained in:
Yingtong Li 2018-01-07 20:54:07 +08:00
parent 7bbffb47af
commit 4ebdd8450c
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
4 changed files with 82 additions and 63 deletions

View File

@ -19,6 +19,7 @@
"semantic": "semantic-ui#^2.2.13", "semantic": "semantic-ui#^2.2.13",
"nunjucks": "^3.0.1", "nunjucks": "^3.0.1",
"dragula.js": "dragula#^3.7.2", "dragula.js": "dragula#^3.7.2",
"fingerprintjs2": "^1.5.1" "fingerprintjs2": "^1.5.1",
"progress-tracker": "^1.4.0"
} }
} }

View File

@ -1,6 +1,6 @@
{# {#
Eos - Verifiable elections Eos - Verifiable elections
Copyright © 2017 RunasSudo (Yingtong Li) Copyright © 2017-18 RunasSudo (Yingtong Li)
This program is free software: you can redistribute it and/or modify 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 it under the terms of the GNU Affero General Public License as published by
@ -23,7 +23,7 @@
{# Convert the template name to a numerical index for comparison #} {# Convert the template name to a numerical index for comparison #}
{% if template == 'booth/welcome.html' %} {% if template == 'booth/welcome.html' %}
{% set menuindex = 1 %} {% set menuindex = 1 %}
{% elif template == 'booth/selections.html' %} {% elif template == 'booth/selections.html' or template == 'booth/encrypt.html' %}
{% set menuindex = 2 %} {% set menuindex = 2 %}
{% elif template == 'booth/review.html' %} {% elif template == 'booth/review.html' %}
{% set menuindex = 3 %} {% set menuindex = 3 %}
@ -35,14 +35,23 @@
{% set menuindex = 6 %} {% set menuindex = 6 %}
{% endif %} {% endif %}
<div class="ui secondary pointing menu" id="election-tab-menu"> {% macro menuitem(index, text) %}
{# oh dear god #} <li class="progress-step{% if menuindex > index %} is-complete{% elif menuindex == index %} is-active{% endif %}">
<span class="ui{% if menuindex >= 1 %} active{% endif %} item"{% if menuindex != 1 %} style="color: #767676;{% if menuindex > 1 %} font-weight: 400;{% endif %}"{% endif %}>1. Welcome</span> <span class="progress-marker">{% if menuindex > index or menuindex == 6 %}<span style="font-family: Icons;">&#xf00c;</span>{% else %}{{ index }}{% endif %}</span>
<span class="ui{% if menuindex >= 2 %} active{% endif %} item"{% if menuindex != 2 %} style="color: #767676;{% if menuindex > 2 %} font-weight: 400;{% endif %}"{% endif %}>2. Make selections</span> <span class="progress-text">
<span class="ui{% if menuindex >= 3 %} active{% endif %} item"{% if menuindex != 3 %} style="color: #767676;{% if menuindex > 3 %} font-weight: 400;{% endif %}"{% endif %}>3. Review selections</span> {{ text }}
<span class="ui{% if menuindex >= 4 %} active{% endif %} item"{% if menuindex != 4 %} style="color: #767676;{% if menuindex > 4 %} font-weight: 400;{% endif %}"{% endif %}>4. Audit ballot</span> </span>
<span class="ui{% if menuindex >= 5 %} active{% endif %} item"{% if menuindex != 5 %} style="color: #767676;{% if menuindex > 5 %} font-weight: 400;{% endif %}"{% endif %}>5. Cast ballot</span> </li>
</div> {% endmacro %}
<ul class="progress-tracker progress-tracker--word progress-tracker--word-center" id="election-tab-menu" style="margin-bottom: 20px;">
{{ menuitem(1, "Welcome") }}
{{ menuitem(2, "Select") }}
{{ menuitem(3, "Review") }}
{{ menuitem(4, "Audit") }}
{{ menuitem(5, "Cast") }}
{{ menuitem(6, "Finish") }}
</ul>
<div class="ui container"> <div class="ui container">
{% block content %}{% endblock %} {% block content %}{% endblock %}

View File

@ -1,6 +1,8 @@
{% extends templates['booth/base.html'] %}
{# {#
Eos - Verifiable elections Eos - Verifiable elections
Copyright © 2017 RunasSudo (Yingtong Li) Copyright © 2017-18 RunasSudo (Yingtong Li)
This program is free software: you can redistribute it and/or modify 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 it under the terms of the GNU Affero General Public License as published by
@ -16,62 +18,68 @@
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
#} #}
<div class="ui active text loader">Preparing your ballot. Please wait.</div> {% block content %}
<div class="ui basic segment" style="min-height: 4em;">
<div class="ui active text loader">Preparing your ballot. Please wait.</div>
</div>
{% endblock %}
<script> {% block after %}
boothWorker.onmessage = function(msg) { <script>
try { boothWorker.onmessage = function(msg) {
rawAnswers = []; try {
for (var answer_json of booth.answers) { rawAnswers = [];
rawAnswers.push(eosjs.eos.core.objects.__all__.EosObject.deserialise_and_unwrap(answer_json, null)); for (var answer_json of booth.answers) {
} rawAnswers.push(eosjs.eos.core.objects.__all__.EosObject.deserialise_and_unwrap(answer_json, null));
}
encryptedAnswers = [];
for (var encrypted_answer_json of msg.data.encrypted_answers) { encryptedAnswers = [];
encryptedAnswers.push(eosjs.eos.core.objects.__all__.EosObject.deserialise_and_unwrap(encrypted_answer_json, null)); for (var encrypted_answer_json of msg.data.encrypted_answers) {
} encryptedAnswers.push(eosjs.eos.core.objects.__all__.EosObject.deserialise_and_unwrap(encrypted_answer_json, null));
}
booth.ballot = eosjs.eos.base.election.__all__.Ballot();
booth.ballot.answers = rawAnswers; booth.ballot = eosjs.eos.base.election.__all__.Ballot();
booth.ballot.encrypted_answers = encryptedAnswers; booth.ballot.answers = rawAnswers;
booth.ballot.election_id = election._id; booth.ballot.encrypted_answers = encryptedAnswers;
booth.ballot.election_hash = eosjs.eos.core.hashing.__all__.SHA256().update_obj(election).hash_as_b64(); booth.ballot.election_id = election._id;
booth.ballot.election_hash = eosjs.eos.core.hashing.__all__.SHA256().update_obj(election).hash_as_b64();
if (should_do_fingerprint) {
// String.prototype.join confuses fingerprintjs2 if (should_do_fingerprint) {
var strjoin = String.prototype.join; // String.prototype.join confuses fingerprintjs2
String.prototype.join = undefined; var strjoin = String.prototype.join;
try { String.prototype.join = undefined;
new Fingerprint2().get(function(result, components) { try {
String.prototype.join = strjoin; new Fingerprint2().get(function(result, components) {
booth.fingerprint = components; String.prototype.join = strjoin;
booth.fingerprint = components;
nextTemplate();
});
} catch (ex) {
console.error(ex);
nextTemplate(); nextTemplate();
}); }
} catch (ex) { } else {
console.error(ex);
nextTemplate(); nextTemplate();
} }
} else { } catch (err) {
nextTemplate(); boothError(err);
throw err;
} }
}
boothWorker.onerror = function(err) {
boothError(err);
throw err;
}
try {
boothWorker.postMessage({
"action": "generateEncryptedVote",
"static_base_url": "{{ static_base_url }}",
"election": eosjs.eos.core.objects.__all__.EosObject.serialise_and_wrap(election, null),
"answers": booth.answers
});
} catch (err) { } catch (err) {
boothError(err); boothError(err);
throw err; throw err;
} }
} </script>
boothWorker.onerror = function(err) { {% endblock %}
boothError(err);
throw err;
}
try {
boothWorker.postMessage({
"action": "generateEncryptedVote",
"static_base_url": "{{ static_base_url }}",
"election": eosjs.eos.core.objects.__all__.EosObject.serialise_and_wrap(election, null),
"answers": booth.answers
});
} catch (err) {
boothError(err);
throw err;
}
</script>

View File

@ -2,7 +2,7 @@
{# {#
Eos - Verifiable elections Eos - Verifiable elections
Copyright © 2017 RunasSudo (Yingtong Li) Copyright © 2017-18 RunasSudo (Yingtong Li)
This program is free software: you can redistribute it and/or modify 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 it under the terms of the GNU Affero General Public License as published by
@ -23,6 +23,7 @@
{% block head %} {% block head %}
{{ super() }} {{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='bower_components/dragula.js/dist/dragula.min.css') }}" type="text/css"> <link rel="stylesheet" href="{{ url_for('static', filename='bower_components/dragula.js/dist/dragula.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url_for('static', filename='bower_components/progress-tracker/app/styles/progress-tracker.css') }}" type="text/css">
{% endblock %} {% endblock %}
{% block content %} {% block content %}