Skip to content
Snippets Groups Projects
Commit 380753b0 authored by Alexis POYEN's avatar Alexis POYEN
Browse files

Merge branch '57-display-detailed-results' into 'master' 

Resolve "Display detailed results"

Closes #57

See merge request apoyen/elections!55
parents 0120eb56 edaaec0c
No related branches found
No related tags found
1 merge request!55Resolve "Display detailed results"
Pipeline #6252 passed
Stage: sonar-analysis
Stage: build
Hide whitespace changes
Inline Side-by-side
web/components/visualization/results-section.js
+ 203
− 5
View file @ 380753b0
......@@ -100,7 +100,14 @@ class ResultComponent {
</header>
<div class="card-content">
<div id="detailed-results" class="content">
<h5 class="title is-5">Résultats détaillés du tour</h5>
<div class="control select">
<select id="select-areas" class="input"></select>
</div>
<div class="control select">
<select id="select-sections" class="input"></select>
</div>
<div id="zone-results"></div>
<div id="zone-detaileds-results" style="display:none"></div>
</div>
</div>
</div>
......@@ -129,14 +136,27 @@ class ResultComponent {
>
${candidateList.Name +
" (" +
candidateList.VoiceNumber +
" voix soit : " +
(candidateList.VoiceNumber != null
? candidateList.VoiceNumber + " votes soit : "
: "") +
candidateList.Percentage +
"%)"}
</div>
</div>`;
}
showWarningResults(text) {
return /* HTML */ `<br />
<article class="message is-warning">
<div class="message-header">
<p>Warning</p>
</div>
<div class="message-body">
${text}
</div>
</article>`;
}
handleDom() {
let resultHandler = this;
document.getElementById("areas").addEventListener("click", function () {
......@@ -175,6 +195,35 @@ class ResultComponent {
this.displayResults();
});
}
document.addEventListener(
"input",
function __listener(event) {
if (event.target.id == "select-areas") {
if (event.target.value != 0) {
let area = resultHandler.results.areasResults.find(
(area) => area.ID == event.target.value
);
if (resultHandler.zone === "areas")
resultHandler.displayZoneResults(area);
else if (resultHandler.zone === "sections") {
resultHandler.refreshSections(area);
resultHandler.displayZoneResults(area.Sections[0]);
}
}
} else if (event.target.id == "select-sections") {
let area = resultHandler.results.areasResults.find(
(area) => area.ID == document.getElementById("select-areas").value
);
let section = area.Sections.find(
(section) => section.ID == event.target.value
);
resultHandler.displayZoneResults(section);
}
},
false
);
}
zoomMap() {
......@@ -205,6 +254,7 @@ class ResultComponent {
let resultHandler = this;
document.getElementById("results-section").parentElement.className =
"column is-full";
document.getElementById("results-section").style.height = "70vh";
document.getElementById("map-section").parentElement.className = "column";
document.getElementById("map-section").parentElement.style.display = "none";
document.getElementById("news-flow-section").style.display = "none";
......@@ -213,18 +263,21 @@ class ResultComponent {
.addEventListener("click", function () {
resultHandler.unZoom();
});
document.getElementById("zone-detaileds-results").style.display = "block";
}
unZoom() {
document.getElementById("map-section").parentElement.className =
"column is-half";
document.getElementById("news-flow-section").style.height = "45vh";
document.getElementById("results-section").style.height = "25vh";
document.getElementById("news-flow-section").parentElement.className =
"column is-half";
document.getElementById("map-section").parentElement.style.display =
"block";
document.getElementById("results-section").style.display = "block";
document.getElementById("news-flow-section").style.display = "block";
document.getElementById("zone-detaileds-results").style.display = "none";
this.handleDom();
}
......@@ -238,10 +291,11 @@ class ResultComponent {
document.getElementById("news-flow").innerHTML = "";
if (this.zone === "areas") {
this.displayFlowAreas();
this.displayAreasResults();
} else if (this.zone === "sections") {
this.displayFlowSections();
this.displaySectionsResults();
}
this.displayRoundResults();
Scroller.scrollInit("news-flow");
}
......@@ -305,7 +359,9 @@ class ResultComponent {
}
displayRoundResults() {
document.getElementById("detailed-results").innerHTML = `<h5 class="title is-5">Résultats détaillés du tour</h5>`;
document.getElementById(
"detailed-results"
).innerHTML = `<h5 class="title is-5">Résultats détaillés du tour</h5>`;
for (let i in this.results.roundResults) {
document.getElementById(
"detailed-results"
......@@ -315,4 +371,146 @@ class ResultComponent {
);
}
}
displayAreasResults() {
let selectAreas = document.getElementById("select-areas");
document.getElementById("select-sections").parentNode.style.display =
"none";
for (let i = selectAreas.options.length - 1; i >= 0; i--) {
selectAreas.remove(i);
}
this.results.areasResults.forEach((area) => {
let el = document.createElement("option");
el.textContent = area.Name;
el.value = area.ID;
selectAreas.appendChild(el);
});
this.displayZoneResults(this.results.areasResults[0]);
}
displaySectionsResults() {
let selectAreas = document.getElementById("select-areas");
document.getElementById("select-sections").parentNode.style.display =
"block";
for (let i = selectAreas.options.length - 1; i >= 0; i--) {
selectAreas.remove(i);
}
this.results.areasResults.forEach((area) => {
let el = document.createElement("option");
el.textContent = area.Name;
el.value = area.ID;
selectAreas.appendChild(el);
});
this.refreshSections(this.results.areasResults[0]);
this.displayZoneResults(this.results.areasResults[0].Sections[0]);
}
async displayZoneResults(zone) {
if (zone.status !== this.filter) {
console.log(zone);
if (zone.status == "no_results") {
document.getElementById(
"zone-results"
).innerHTML = this.showWarningResults(
"Aucun résultats n'ont étaient saisis sur cette zone"
);
} else if (zone.status == "incompleted") {
document.getElementById(
"zone-results"
).innerHTML = this.showWarningResults(
"Les résultats pour cette zone ne sont pas complets"
);
} else if (zone.status == "not validated") {
document.getElementById(
"zone-results"
).innerHTML = this.showWarningResults(
"Les résultats pour cette zone n'ont pas étaient validés"
);
}
document.getElementById("zone-detaileds-results").innerHTML = "";
} else {
document.getElementById("zone-results").innerHTML =
'<br/><h5 class="title is-5">Résultats</h5>';
for (let i in zone.candidateLists) {
let party = await this.PartyModel.getParty(
zone.candidateLists[i].PartyID
);
document.getElementById(
"zone-results"
).innerHTML += this.progressBarTemplate(
zone.candidateLists[i],
party.Color
);
}
this.displayZoneDetailedResults(zone);
}
}
displayZoneDetailedResults(zone) {
document.getElementById("zone-detaileds-results").innerHTML =
'<br/><h5 class="title is-5">Statistiques</h5>';
if (this.filter === "partial")
document.getElementById(
"zone-detaileds-results"
).innerHTML += this.progressBarTemplate(
{
Name: "Pourcentage de saisie",
Percentage: zone.stats.PercentageConsiderated,
VoiceNumber: null,
},
"grey"
);
document.getElementById(
"zone-detaileds-results"
).innerHTML += this.progressBarTemplate(
{
Name: "Abstention",
Percentage: zone.stats.Abstention,
VoiceNumber: null,
},
"grey"
);
document.getElementById(
"zone-detaileds-results"
).innerHTML += this.progressBarTemplate(
{
Name: "Votes blancs",
Percentage: zone.stats.BlankPercentage,
VoiceNumber: zone.stats.BlankVoiceNumber,
},
"grey"
);
document.getElementById(
"zone-detaileds-results"
).innerHTML += this.progressBarTemplate(
{
Name: "Votes nuls",
Percentage: zone.stats.NullVotePercentage,
VoiceNumber: zone.stats.NullVoteVoiceNumber,
},
"grey"
);
}
refreshSections(area) {
let selectSections = document.getElementById("select-sections");
selectSections.parentNode.style.display = "block";
for (let i = selectSections.options.length - 1; i >= 0; i--) {
selectSections.remove(i);
}
for (let i in area.Sections) {
let el = document.createElement("option");
el.textContent = area.Sections[i].Name;
el.value = area.Sections[i].ID;
selectSections.appendChild(el);
}
}
}
web/services/election/calculate-election-generic.js
+ 10
− 2
View file @ 380753b0
......@@ -330,10 +330,15 @@ class DirectMetropolitanCalculator {
let nullVote = 0;
let totalVotes = 0;
let VotesExpressed = 0;
let completed = 0;
for (let i in deskRounds) {
let desk = await this.DeskModel.getDesk(deskRounds[i].DeskID);
subscribed += desk.Subscribed;
if (deskRounds[i].Completed) {
completed += desk.Subscribed;
console.log("test")
}
deskRounds[i].Votes.forEach((vote) => {
totalVotes += vote.VoiceNumber;
if (vote.Blank) blank += vote.VoiceNumber;
......@@ -345,9 +350,12 @@ class DirectMetropolitanCalculator {
Abstention: Number(
((subscribed - totalVotes) / subscribed) * 100
).toFixed(2),
Blank: Number((blank / totalVotes) * 100).toFixed(2),
NullVote: Number((nullVote / totalVotes) * 100).toFixed(2),
BlankPercentage: Number((blank / totalVotes) * 100).toFixed(2),
BlankVoiceNumber: blank,
NullVotePercentage: Number((nullVote / totalVotes) * 100).toFixed(2),
NullVoteVoiceNumber: nullVote,
VotesExpressed: VotesExpressed,
PercentageConsiderated: Number((completed / subscribed) * 100).toFixed(2),
};
}
......
web/style.css
+ 18
− 3
View file @ 380753b0
......@@ -121,18 +121,22 @@ select {
#round-desks .column,
#candidate-lists .column,
#news-flow {
#news-flow,
#detailed-results {
overflow-y: auto;
}
#news-flow,
#news-flow .content {
#detailed-results,
#news-flow .content,
#detailed-results .content {
flex: 1;
}
#round-desks .columns,
#candidate-lists .columns,
#news-flow-section .card-content {
#news-flow-section .card-content,
#results-section .card-content {
max-height: 90%;
display: flex;
}
......@@ -171,11 +175,18 @@ select {
margin-bottom: 15px;
}
#results-section {
height: 25vh;
padding-bottom: 20px;
}
.progressBar {
width: 99%;
margin: 3px;
background-color: lightgray;
border-radius: 5px;
text-overflow: clip;
overflow: hidden;
}
.progressBarValue {
......@@ -184,3 +195,7 @@ select {
padding: 4px;
border-radius: 5px;
}
.is-warning .message-body {
border: solid;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment