diff --git a/public/locale/i18n/de/resource.json b/public/locale/i18n/de/resource.json index 63e5dd7..76b4777 100644 --- a/public/locale/i18n/de/resource.json +++ b/public/locale/i18n/de/resource.json @@ -70,5 +70,6 @@ "The election is over. You can't vote anymore": "__STRING_NOT_TRANSLATED__", "You need a token to vote in this election": "__STRING_NOT_TRANSLATED__", "You seem to have already voted.": "__STRING_NOT_TRANSLATED__", - "The parameters of the election are incorrect.": "__STRING_NOT_TRANSLATED__" + "The parameters of the election are incorrect.": "__STRING_NOT_TRANSLATED__", + "Number of votes:": "__STRING_NOT_TRANSLATED__" } diff --git a/public/locale/i18n/en/resource.json b/public/locale/i18n/en/resource.json index 4860c47..ec94e02 100644 --- a/public/locale/i18n/en/resource.json +++ b/public/locale/i18n/en/resource.json @@ -77,5 +77,6 @@ "The election is over. You can't vote anymore": "The election is over. You can't vote anymore", "You need a token to vote in this election": "You need a token to vote in this election", "You seem to have already voted.": "You seem to have already voted.", - "The parameters of the election are incorrect.": "The parameters of the election are incorrect." + "The parameters of the election are incorrect.": "The parameters of the election are incorrect.", + "Number of votes:": "Number of votes:" } diff --git a/public/locale/i18n/es/resource.json b/public/locale/i18n/es/resource.json index 0d246ad..5ab4346 100644 --- a/public/locale/i18n/es/resource.json +++ b/public/locale/i18n/es/resource.json @@ -77,5 +77,6 @@ "The election is over. You can't vote anymore": "__STRING_NOT_TRANSLATED__", "You need a token to vote in this election": "__STRING_NOT_TRANSLATED__", "You seem to have already voted.": "__STRING_NOT_TRANSLATED__", - "The parameters of the election are incorrect.": "__STRING_NOT_TRANSLATED__" + "The parameters of the election are incorrect.": "__STRING_NOT_TRANSLATED__", + "Number of votes:": "__STRING_NOT_TRANSLATED__" } diff --git a/public/locale/i18n/fr/resource.json b/public/locale/i18n/fr/resource.json index 2f7d8fc..7e7de65 100644 --- a/public/locale/i18n/fr/resource.json +++ b/public/locale/i18n/fr/resource.json @@ -77,5 +77,6 @@ "The election is over. You can't vote anymore": "L'élection est terminée. Vous ne pouvez plus voter.", "You need a token to vote in this election": "Vous avez besoin d'un jeton pour voter dans cette élection", "You seem to have already voted.": "Il semble que vous ayez déjà voté.", - "The parameters of the election are incorrect.": "Les paramètres de l'élection sont incorrects." + "The parameters of the election are incorrect.": "Les paramètres de l'élection sont incorrects.", + "Number of votes:": "Nombre de votes :" } diff --git a/src/components/views/Result.jsx b/src/components/views/Result.jsx index d034945..edb3d7d 100644 --- a/src/components/views/Result.jsx +++ b/src/components/views/Result.jsx @@ -1,7 +1,7 @@ -import React, { Component } from "react"; -import { Redirect } from "react-router-dom"; -import { withTranslation } from "react-i18next"; -import { resolve } from "url"; +import React, {Component} from 'react'; +import {Redirect} from 'react-router-dom'; +import {withTranslation} from 'react-i18next'; +import {resolve} from 'url'; import { Container, Row, @@ -10,18 +10,20 @@ import { Card, CardHeader, CardBody, - Table -} from "reactstrap"; -import { i18nGrades } from "../../Util"; -import { AppContext } from "../../AppContext"; -import { errorMessage, Error } from "../../Errors"; + Table, +} from 'reactstrap'; +import {i18nGrades} from '../../Util'; +import {AppContext} from '../../AppContext'; +import {errorMessage, Error} from '../../Errors'; const meritProfileFromVotes = votes => { - const numGrades = Math.max( ...votes) - Math.min( ...votes ); + const numGrades = Math.max(...votes) - Math.min(...votes); const profile = Array(numGrades).fill(0); - votes.forEach(vote => {profile[vote] += 1 }); + votes.forEach(vote => { + profile[vote] += 1; + }); return profile; -} +}; class Result extends Component { static contextType = AppContext; @@ -41,7 +43,7 @@ class Result extends Component { collapseGraphics: false, collapseProfiles: false, electionGrades: i18nGrades(), - errorMessage: "", + errorMessage: '', }; } @@ -49,7 +51,7 @@ class Result extends Component { if (!response.ok) { response.json().then(response => { this.setState(state => ({ - errorMessage: errorMessage(response, this.props.t) + errorMessage: errorMessage(response, this.props.t), })); }); throw Error(response); @@ -65,20 +67,20 @@ class Result extends Component { grade: c.grade, })); console.log(response); - this.setState(state => ({ candidates: candidates })); + this.setState(state => ({candidates: candidates})); return response; }; detailsToState = response => { const numGrades = response.num_grades; const colSizeGradeLg = Math.floor( - (12 - this.state.colSizeCandidateLg) / numGrades + (12 - this.state.colSizeCandidateLg) / numGrades, ); const colSizeGradeMd = Math.floor( - (12 - this.state.colSizeCandidateMd) / numGrades + (12 - this.state.colSizeCandidateMd) / numGrades, ); const colSizeGradeXs = Math.floor( - (12 - this.state.colSizeCandidateXs) / numGrades + (12 - this.state.colSizeCandidateXs) / numGrades, ); this.setState(state => ({ title: response.title, @@ -98,7 +100,7 @@ class Result extends Component { 12 - colSizeGradeXs * numGrades > 0 ? 12 - colSizeGradeXs * numGrades : 12, - electionGrades: i18nGrades().slice(0, numGrades) + electionGrades: i18nGrades().slice(0, numGrades), })); return response; }; @@ -106,38 +108,38 @@ class Result extends Component { componentDidMount() { // get details of the election const electionSlug = this.props.match.params.slug; - if (electionSlug === "dev") { + if (electionSlug === 'dev') { const dataTest = [ { - name: "BB", + name: 'BB', id: 1, score: 1.0, profile: [1, 1, 0, 0, 0, 0, 0], - grade: 1 + grade: 1, }, { - name: "CC", + name: 'CC', id: 2, score: 1.0, profile: [0, 0, 2, 0, 0, 0, 0], - grade: 2 + grade: 2, }, { - name: "AA", + name: 'AA', id: 0, score: 1.0, profile: [1, 1, 0, 0, 0, 0, 0], - grade: 1 - } + grade: 1, + }, ]; - this.setState({ candidates: dataTest }); + this.setState({candidates: dataTest}); } else { const detailsEndpoint = resolve( this.context.urlServer, this.context.routesServer.getElection.replace( - new RegExp(":slug", "g"), - electionSlug - ) + new RegExp(':slug', 'g'), + electionSlug, + ), ); fetch(detailsEndpoint) @@ -150,9 +152,9 @@ class Result extends Component { const resultsEndpoint = resolve( this.context.urlServer, this.context.routesServer.getResultsElection.replace( - new RegExp(":slug", "g"), - electionSlug - ) + new RegExp(':slug', 'g'), + electionSlug, + ), ); fetch(resultsEndpoint) @@ -164,25 +166,29 @@ class Result extends Component { } toggleGraphics = () => { - this.setState(state => ({ collapseGraphics: !state.collapseGraphics })); + this.setState(state => ({collapseGraphics: !state.collapseGraphics})); }; toggleProfiles = () => { - this.setState(state => ({ collapseProfiles: !state.collapseProfiles })); + this.setState(state => ({collapseProfiles: !state.collapseProfiles})); }; render() { - const { errorMessage, candidates, electionGrades } = this.state; - const { t } = this.props; + const {errorMessage, candidates, electionGrades} = this.state; + const {t} = this.props; const grades = i18nGrades(); - - if (errorMessage && errorMessage !== "") { + + if (errorMessage && errorMessage !== '') { return ; } - const sum = seq => Object.values(seq).reduce((a,b) => a + b, 0) - const numVotes = candidates && candidates.length > 0 ? sum(candidates[0].profile) : 1 ; - const gradeIds = candidates && candidates.length > 0 ? Object.keys(candidates[0].profile) : []; + const sum = seq => Object.values(seq).reduce((a, b) => a + b, 0); + const numVotes = + candidates && candidates.length > 0 ? sum(candidates[0].profile) : 1; + const gradeIds = + candidates && candidates.length > 0 + ? Object.keys(candidates[0].profile) + : []; console.log(gradeIds); return ( @@ -195,24 +201,30 @@ class Result extends Component { -

{t("Results of the election:")}

+

{t('Results of the election:')}

+
+ + {t('Number of votes:')} + {' ' + numVotes} + +
+
    {candidates.map((candidate, i) => { return (
  1. - {candidate.name} + {candidate.name} + color: '#fff', + }}> {grades[candidate.grade].label} - { /* + {/* {(100 * candidate.score).toFixed(1)}% - */ } + */}
    2. ); })} @@ -226,11 +238,10 @@ class Result extends Component {

    - {t("Graph")} + 'm-0 panel-title ' + + (this.state.collapseGraphics ? 'collapsed' : '') + }> + {t('Graph')}

    @@ -238,25 +249,26 @@ class Result extends Component {
    - +
    {candidates.map((candidate, i) => { return ( - + {/*candidate.label*/}
    {i + 1}{i + 1} - +
    {gradeIds.map((id, i) => { const value = candidate.profile[id]; if (value > 0) { - let percent = (value * 100) / numVotes + "%"; + let percent = + (value * 100) / numVotes + '%'; if (i === 0) { - percent = "auto"; + percent = 'auto'; } return ( ); @@ -289,7 +300,7 @@ class Result extends Component { {candidates.map((candidate, i) => { return ( - {i > 0 ? ", " : ""} + {i > 0 ? ', ' : ''} {i + 1}: {candidate.name} ); @@ -305,9 +316,8 @@ class Result extends Component { className="badge badge-light mr-2 mt-2" style={{ backgroundColor: grade.color, - color: "#fff" - }} - > + color: '#fff', + }}> {grade.label} ); @@ -325,11 +335,10 @@ class Result extends Component {

    - {t("Preference profile")} + 'm-0 panel-title ' + + (this.state.collapseProfiles ? 'collapsed' : '') + }> + {t('Preference profile')}

    @@ -346,10 +355,9 @@ class Result extends Component { className="badge badge-light" style={{ backgroundColor: grade.color, - color: "#fff" - }} - > - {grade.label}{" "} + color: '#fff', + }}> + {grade.label}{' '} ); @@ -363,7 +371,10 @@ class Result extends Component { {gradeIds.map((id, i) => { const value = candidate.profile[id]; - const percent = (value / numVotes * 100).toFixed(1); + const percent = ( + (value / numVotes) * + 100 + ).toFixed(1); return ; })} @@ -376,7 +387,7 @@ class Result extends Component { {candidates.map((candidate, i) => { return ( - {i > 0 ? ", " : ""} + {i > 0 ? ', ' : ''} {i + 1}: {candidate.name} );
    + .electionGrades[i].color, + }}>   {i + 1}{percent} %