Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/multivoting visualization #58

Merged
merged 14 commits into from
Dec 17, 2023
Merged

Feature/multivoting visualization #58

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
93295d3
feat: show different types of voting views
MartaInes Dec 10, 2023
6804ad8
feat: change of colors of the voting list
MartaInes Dec 11, 2023
2ce26f5
fix: voting form
MartaInes Dec 14, 2023
01b51b1
fix: mutioption vote
MartaInes Dec 14, 2023
eb8e878
fix: change in the BoothView
MartaInes Dec 15, 2023
501eae5
Merge branch 'develop' into feature/multivoting-visualization
JMGarCas Dec 15, 2023
63a7215
style: add question type in list voting
MartaInes Dec 16, 2023
c0b6e20
Merge branch 'feature/multivoting-visualization' of github.com:EGC-za…
JMGarCas Dec 16, 2023
b639fa4
tests: simple and multiple voting selenium
JMGarCas Dec 16, 2023
f1a05ed
fix: selenium booth tests now works properly
JMGarCas Dec 16, 2023
a351b44
fix: change styles for the log in inside to votation
MartaInes Dec 17, 2023
8933b1f
Merge branch 'develop' into feature/multivoting-visualization
AntonioRodriguezRuiz Dec 17, 2023
aee70c8
fix: multiple option voting
MartaInes Dec 17, 2023
e5321c6
feat: added boolean voting
MartaInes Dec 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions decide/base/static/base/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
:root {
--primary-color: #3498db;
--primary-dark-color: #2980b9;
--primary-color: #be8c76;
--primary-dark-color: #af836f;
--green-dark-color: #2ecc71;
--green-color: #69dd9a;
--red-dark-color: #e74c3c;
--red-color: #ef8b80;
--neutral-background: #f5f5f5;
--neutral-background: #f9f7f6;
--card-background: #ffffff;
--card-semi-transparent: rgba(255, 255, 255, 0.9);
--text-color: #333333 ;
Expand Down
49 changes: 47 additions & 2 deletions decide/booth/static/booth/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,20 @@ table {
height: fit-content;
width: fit-content;
padding: 1em;
background-color: #efefef;
background-color: #eedbd3;
border-radius: 0.5em;
}

.card-voting {
height: 25em;
width:50em;
align-self: center;
background-color: #ead4ca;
padding: 1em;
margin: 50px;
border-radius: 0.5em;
gap: 20px;
position: relative;
}

.voting-card, .opinion-card {
Expand Down Expand Up @@ -112,7 +124,7 @@ textarea {
}

.voting-card:hover {
background-color: #e0e0e0;
background-color: #e5cfc6;
cursor: pointer;
transform: scale(1.01);
}
Expand Down Expand Up @@ -162,6 +174,39 @@ textarea {
.no-votings {
width: 100%;
}

.btn-vote {
background-color: var(--primary-color);
position: absolute;
bottom: 0px;
right: 0px;
margin-bottom: 20px;
margin-right: 20px;
}

.btn-vote:hover {
background-color: var(--primary-dark-color);
}

.voting-title {
font-weight: bold;
margin-left: 20px;
}

.voting-desc {
margin-left: 20px;
margin-top: 10px;
}

.voting-options {
margin-left: 20px;
margin-top: 20px;
}

.form-options {
margin-bottom: 15px;
}

.caja-mensaje {
padding: 10px;
margin: 10px 0;
Expand Down
207 changes: 105 additions & 102 deletions decide/booth/templates/booth/booth.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,78 +2,70 @@
{% load i18n static %}

{% block extrahead %}
<link type="text/css" rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="{% static "booth/style.css" %}" />
<head>
<title>Decide | {% block title %} Vote {% endblock %}</title>
<link rel="stylesheet" href="{% static "base/style.css" %}">
<link rel="stylesheet" href="{% static "booth/style.css" %}">
</head>
{% endblock %}

{% block content %}

<div id="app-booth">
<!-- Navbar -->
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<div class="navbar-brand" >Decide</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item" v-if="!signup">
<button v-on:click="decideLogout" class="btn btn-secondary">{% trans "Logout" %}</button>
</li>
<li class="nav-item" v-if="signup">
<!-- Button trigger modal -->
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#registerModal">
Login
</button>
</li>
</ul>
</div>
</div>
</nav>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
</symbol>
<symbol id="info-fill" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
</symbol>
<symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
</symbol>
</svg>
<div class="voting" >
<!-- Navbar -->
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<div class="navbar-brand" >Decide</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item" v-if="!signup">
<button v-on:click="decideLogout" class="btn btn-secondary">{% trans "Logout" %}</button>
</li>
<li class="nav-item" v-if="signup">
<!-- Button trigger modal -->
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#registerModal">
Login
</button>
</li>
</ul>
</div>
</div>
</nav>

<div class="alert alert-success d-flex align-items-center" role="alert" :variant="alertLvl" dismissible v-if="successVote">
<svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
</symbol>
<symbol id="info-fill" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
</symbol>
<symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
</symbol>
</svg>
<div>
[[ alertMsg ]]
</div>
</div>

<div class="alert alert-danger d-flex align-items-center" role="alert" :variant="alertLvl" dismissible v-if="!successVote && alertShow">
<svg class="bi flex-shrink-0 me-2" role="img" aria-label="Failure:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
[[ alertMsg ]]
</div>
</div>

<div class="voting" >
<div class="alert alert-primary d-flex align-items-center me-5" role="alert" :variant="alertLvl" dismissible v-if="signup">
{% comment %} <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg> {% endcomment %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-in-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z"/>
<path fill-rule="evenodd" d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>

<div class="alert alert-success d-flex align-items-center" role="alert" :variant="alertLvl" dismissible v-if="successVote">
<svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
</svg>
<div class="ms-2">
¡Debe iniciar sesión para poder acceder a la votación!
<div>
[[ alertMsg ]]
</div>
</div>

<div class="alert alert-danger d-flex align-items-center" role="alert" :variant="alertLvl" dismissible v-if="!successVote && alertShow">
<svg class="bi flex-shrink-0 me-2" role="img" aria-label="Failure:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
[[ alertMsg ]]
</div>
</div>

<div class="container-fluid">
<!-- Modal -->
<div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="registerModalLabel" aria-hidden="true">
Expand Down Expand Up @@ -114,24 +106,30 @@ <h5 class="modal-title" id="registerModalLabel">Login</h5>
</div>
</div>


<!-- Voting -->
<div v-if="!signup">
<h1>[[ voting.id ]] - [[ voting.name ]]</h1>
<h2>[[ voting.question.desc ]]</h2>
<form v-for="opt in voting.question.options" :key="opt.number">
<div class="form-group">
<input type="radio" v-model="selected"
:id="'q' + opt.number"
name="question"
:value="opt.number">
[[ opt.option ]]
</div>
</form>
<button class="btn btn-primary mt-3" v-on:click="decideSend">
{% trans "Vote" %}
</button>
<div class="card-container">
<div class="card-voting" v-if="!signup">
<h1 class="voting-title">[[ voting.name ]]</h1>
<h2 class="voting-desc">[[ voting.question.desc ]]</h2>
<form v-for="opt in voting.question.options" :key="opt.number">
<div class="form-options">
<input type="radio" v-model="selected" v-if="questionType == 'S'"
:id="'q' + opt.number"
name="question"
:value="opt.number">
<input type="checkbox" v-model="selected" v-if="questionType == 'M'"
:id="'q' + opt.number"
name="question"
:value="opt.number">
[[ opt.option ]]
</div>
</form>
<button class="btn btn-vote mt-3" v-on:click="decideSend">
{% trans "Vote" %}
</button>
</div>
</div>

</div>

</div>
Expand All @@ -151,22 +149,23 @@ <h2>[[ voting.question.desc ]]</h2>
<script src="{% static "crypto/elgamal.js" %}"></script>

<!-- Vuejs -->
<script src="https://unpkg.com/vue@latest"</script>
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap@5.2.2/dist/js/bootstrap.js"></script>

<script>
const { createApp } = Vue
var voting = {{voting|safe}};
var questionType = "{{ question_type }}";
createApp({
delimiters: ['[[', ']]'],
data() {
return {
voting: voting,
selected: "",
signup: true,
selected: [],
successVote: false,
alertShow: false,
signup: true,
alertMsg: "",
alertLvl: "info",
token: null,
Expand All @@ -180,7 +179,8 @@ <h2>[[ voting.question.desc ]]</h2>
g: BigInt.fromJSONObject(voting.pub_key.g.toString()),
y: BigInt.fromJSONObject(voting.pub_key.y.toString()),
},
keybits: {{ KEYBITS }}
keybits: {{ KEYBITS }},
questionType: questionType
}
},
beforeMount() {
Expand All @@ -199,7 +199,6 @@ <h2>[[ voting.question.desc ]]</h2>
});
},
postData(url, data) {
// Default options are marked with *
var fdata = {
body: JSON.stringify(data),
headers: {
Expand Down Expand Up @@ -263,26 +262,30 @@ <h2>[[ voting.question.desc ]]</h2>
},
decideSend(evt) {
evt.preventDefault();

// Check if the selected option is 'Voto en Blanco'
// Check if the selected option is 'Voto en Blanco'
// const selectedOption = this.voting.question.options.find(opt => opt.number === this.selected);


// if (selectedOption.option === 'Voto En blanco') {
// this.showAlert("danger", "No puedes votar en blanco");
// return;
// }

var v = this.decideEncrypt(this.selected.toString());

var data = {
vote: {a: v.alpha.toString(), b: v.beta.toString()},
voting: this.voting.id,
voter: this.user.id,
token: this.token
if (this.questionType === 'S'){
var v = this.decideEncrypt(this.selected.toString());
var data = {
vote: {a: v.alpha.toString(), b: v.beta.toString()},
voting: this.voting.id,
voter: this.user.id,
token: this.token
}
AntonioRodriguezRuiz marked this conversation as resolved.
Show resolved Hide resolved
}

else if (this.questionType === 'M') {
var selected = [2,1]
var vote = []
auroranavas marked this conversation as resolved.
Show resolved Hide resolved
for (i=0; i < selected.length; i++){
var v = this.decideEncrypt(selected[i].toString())
vote.push({a: v.alpha.toString(), b: v.beta.toString()})
}
var data = {
vote: vote,
voting: this.voting.id,
voter: this.user.id,
token: this.token
}
}

this.postData("{% url "gateway" "store" "/" %}", data)
.then(data => {
this.successVote = true;
Expand All @@ -304,4 +307,4 @@ <h2>[[ voting.question.desc ]]</h2>
</script>

</body>
{% endblock %}
{% endblock %}
7 changes: 7 additions & 0 deletions decide/booth/templates/booth/voting-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,13 @@ <h3 class="voting-name">{{ voting.name }}</h3>
<p class="voting-status voting-open">Voting Open</p>
{% endif %}
</div>
<div>
{% if voting.question.question_type == 'S' %}
<p class="question_type">Single </p>
{% elif voting.question.question_type == 'M' %}
<p class="question_type">Multiple </p>
{% endif %}
</div>
<p class="voting-description">{{ voting.desc }}</p>
</a>
<a id="opinions-button" class="opinions-card" href={% url 'opinions' voting_id=voting.id %}>Opiniones</a>
Expand Down
Loading