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

Resolve "Display detailed results"

parent 0120eb56
No related branches found
No related tags found
No related merge requests found
...@@ -100,7 +100,14 @@ class ResultComponent { ...@@ -100,7 +100,14 @@ class ResultComponent {
</header> </header>
<div class="card-content"> <div class="card-content">
<div id="detailed-results" class="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> </div>
</div> </div>
...@@ -129,14 +136,27 @@ class ResultComponent { ...@@ -129,14 +136,27 @@ class ResultComponent {
> >
${candidateList.Name + ${candidateList.Name +
" (" + " (" +
candidateList.VoiceNumber + (candidateList.VoiceNumber != null
" voix soit : " + ? candidateList.VoiceNumber + " votes soit : "
: "") +
candidateList.Percentage + candidateList.Percentage +
"%)"} "%)"}
</div> </div>
</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() { handleDom() {
let resultHandler = this; let resultHandler = this;
document.getElementById("areas").addEventListener("click", function () { document.getElementById("areas").addEventListener("click", function () {
...@@ -175,6 +195,35 @@ class ResultComponent { ...@@ -175,6 +195,35 @@ class ResultComponent {
this.displayResults(); 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() { zoomMap() {
...@@ -205,6 +254,7 @@ class ResultComponent { ...@@ -205,6 +254,7 @@ class ResultComponent {
let resultHandler = this; let resultHandler = this;
document.getElementById("results-section").parentElement.className = document.getElementById("results-section").parentElement.className =
"column is-full"; "column is-full";
document.getElementById("results-section").style.height = "70vh";
document.getElementById("map-section").parentElement.className = "column"; document.getElementById("map-section").parentElement.className = "column";
document.getElementById("map-section").parentElement.style.display = "none"; document.getElementById("map-section").parentElement.style.display = "none";
document.getElementById("news-flow-section").style.display = "none"; document.getElementById("news-flow-section").style.display = "none";
...@@ -213,18 +263,21 @@ class ResultComponent { ...@@ -213,18 +263,21 @@ class ResultComponent {
.addEventListener("click", function () { .addEventListener("click", function () {
resultHandler.unZoom(); resultHandler.unZoom();
}); });
document.getElementById("zone-detaileds-results").style.display = "block";
} }
unZoom() { unZoom() {
document.getElementById("map-section").parentElement.className = document.getElementById("map-section").parentElement.className =
"column is-half"; "column is-half";
document.getElementById("news-flow-section").style.height = "45vh"; document.getElementById("news-flow-section").style.height = "45vh";
document.getElementById("results-section").style.height = "25vh";
document.getElementById("news-flow-section").parentElement.className = document.getElementById("news-flow-section").parentElement.className =
"column is-half"; "column is-half";
document.getElementById("map-section").parentElement.style.display = document.getElementById("map-section").parentElement.style.display =
"block"; "block";
document.getElementById("results-section").style.display = "block"; document.getElementById("results-section").style.display = "block";
document.getElementById("news-flow-section").style.display = "block"; document.getElementById("news-flow-section").style.display = "block";
document.getElementById("zone-detaileds-results").style.display = "none";
this.handleDom(); this.handleDom();
} }
...@@ -238,10 +291,11 @@ class ResultComponent { ...@@ -238,10 +291,11 @@ class ResultComponent {
document.getElementById("news-flow").innerHTML = ""; document.getElementById("news-flow").innerHTML = "";
if (this.zone === "areas") { if (this.zone === "areas") {
this.displayFlowAreas(); this.displayFlowAreas();
this.displayAreasResults();
} else if (this.zone === "sections") { } else if (this.zone === "sections") {
this.displayFlowSections(); this.displayFlowSections();
this.displaySectionsResults();
} }
this.displayRoundResults();
Scroller.scrollInit("news-flow"); Scroller.scrollInit("news-flow");
} }
...@@ -305,7 +359,9 @@ class ResultComponent { ...@@ -305,7 +359,9 @@ class ResultComponent {
} }
displayRoundResults() { 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) { for (let i in this.results.roundResults) {
document.getElementById( document.getElementById(
"detailed-results" "detailed-results"
...@@ -315,4 +371,146 @@ class ResultComponent { ...@@ -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);
}
}
} }
...@@ -330,10 +330,15 @@ class DirectMetropolitanCalculator { ...@@ -330,10 +330,15 @@ class DirectMetropolitanCalculator {
let nullVote = 0; let nullVote = 0;
let totalVotes = 0; let totalVotes = 0;
let VotesExpressed = 0; let VotesExpressed = 0;
let completed = 0;
for (let i in deskRounds) { for (let i in deskRounds) {
let desk = await this.DeskModel.getDesk(deskRounds[i].DeskID); let desk = await this.DeskModel.getDesk(deskRounds[i].DeskID);
subscribed += desk.Subscribed; subscribed += desk.Subscribed;
if (deskRounds[i].Completed) {
completed += desk.Subscribed;
console.log("test")
}
deskRounds[i].Votes.forEach((vote) => { deskRounds[i].Votes.forEach((vote) => {
totalVotes += vote.VoiceNumber; totalVotes += vote.VoiceNumber;
if (vote.Blank) blank += vote.VoiceNumber; if (vote.Blank) blank += vote.VoiceNumber;
...@@ -345,9 +350,12 @@ class DirectMetropolitanCalculator { ...@@ -345,9 +350,12 @@ class DirectMetropolitanCalculator {
Abstention: Number( Abstention: Number(
((subscribed - totalVotes) / subscribed) * 100 ((subscribed - totalVotes) / subscribed) * 100
).toFixed(2), ).toFixed(2),
Blank: Number((blank / totalVotes) * 100).toFixed(2), BlankPercentage: Number((blank / totalVotes) * 100).toFixed(2),
NullVote: Number((nullVote / totalVotes) * 100).toFixed(2), BlankVoiceNumber: blank,
NullVotePercentage: Number((nullVote / totalVotes) * 100).toFixed(2),
NullVoteVoiceNumber: nullVote,
VotesExpressed: VotesExpressed, VotesExpressed: VotesExpressed,
PercentageConsiderated: Number((completed / subscribed) * 100).toFixed(2),
}; };
} }
......
...@@ -121,18 +121,22 @@ select { ...@@ -121,18 +121,22 @@ select {
#round-desks .column, #round-desks .column,
#candidate-lists .column, #candidate-lists .column,
#news-flow { #news-flow,
#detailed-results {
overflow-y: auto; overflow-y: auto;
} }
#news-flow, #news-flow,
#news-flow .content { #detailed-results,
#news-flow .content,
#detailed-results .content {
flex: 1; flex: 1;
} }
#round-desks .columns, #round-desks .columns,
#candidate-lists .columns, #candidate-lists .columns,
#news-flow-section .card-content { #news-flow-section .card-content,
#results-section .card-content {
max-height: 90%; max-height: 90%;
display: flex; display: flex;
} }
...@@ -171,11 +175,18 @@ select { ...@@ -171,11 +175,18 @@ select {
margin-bottom: 15px; margin-bottom: 15px;
} }
#results-section {
height: 25vh;
padding-bottom: 20px;
}
.progressBar { .progressBar {
width: 99%; width: 99%;
margin: 3px; margin: 3px;
background-color: lightgray; background-color: lightgray;
border-radius: 5px; border-radius: 5px;
text-overflow: clip;
overflow: hidden;
} }
.progressBarValue { .progressBarValue {
...@@ -184,3 +195,7 @@ select { ...@@ -184,3 +195,7 @@ select {
padding: 4px; padding: 4px;
border-radius: 5px; border-radius: 5px;
} }
.is-warning .message-body {
border: solid;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment