MieuxVoter
/
mvfront-react
mirror of https://github.com/MieuxVoter/mvfront-react
4
1
Fork 0
Code Issues Releases Wiki Polls Activity

add number of votes

Browse Source
pull/73/head
Pierre-Louis Guhur 4 years ago
parent 5b4fd0be04
commit 7b4f229bdb
5 changed files with 98 additions and 83 deletions
Show Stats Download Patch File Download Diff File

3
public/locale/i18n/de/resource.json
Unescape View File

@ -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__"
}

3
public/locale/i18n/en/resource.json
Unescape View File

@ -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:"
}

3
public/locale/i18n/es/resource.json
Unescape View File

@ -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__"
}

3
public/locale/i18n/fr/resource.json
Unescape View File

@ -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 :"
}

169
src/components/views/Result.jsx
Unescape View File

@ -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 <Error value={errorMessage} />;
}
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 {
<Row className="mt-5">
<Col>
<h1>{t("Results of the election:")}</h1>
<h1>{t('Results of the election:')}</h1>
<h5>
<small>
{t('Number of votes:')}
{' ' + numVotes}
</small>
</h5>
<hr className="mb-5" />
<ol>
{candidates.map((candidate, i) => {
return (
<li key={i} className="mt-2">
<span className="mt-2 ml-2">{candidate.name}</span>
<span className="mt-2 ml-2">{candidate.name}</span>
<span
className="badge badge-light ml-2 mt-2"
style={{
backgroundColor: electionGrades[candidate.grade].color,
color: "#fff"
}}
>
color: '#fff',
}}>
{grades[candidate.grade].label}
</span>
{ /* <span className="badge badge-dark mt-2 ml-2">
{/* <span className="badge badge-dark mt-2 ml-2">
{(100 * candidate.score).toFixed(1)}%
</span> */ }
</span> */}
</li>
);
})}
@ -226,11 +238,10 @@ class Result extends Component {
<CardHeader className="pointer" onClick={this.toggleGraphics}>
<h4
className={
"m-0 panel-title " +
(this.state.collapseGraphics ? "collapsed" : "")
}
>
{t("Graph")}
'm-0 panel-title ' +
(this.state.collapseGraphics ? 'collapsed' : '')
}>
{t('Graph')}
</h4>
</CardHeader>
<Collapse isOpen={this.state.collapseGraphics}>
@ -238,25 +249,26 @@ class Result extends Component {
<div>
<div
className="median"
style={{ height: candidates.length * 28 + 30 }}
style={{height: candidates.length * 28 + 30}}
/>
<table style={{ width: "100%" }}>
<table style={{width: '100%'}}>
<tbody>
{candidates.map((candidate, i) => {
return (
<tr key={i}>
<td style={{ width: "30px" }}>{i + 1}</td>
<td style={{width: '30px'}}>{i + 1}</td>
{/*candidate.label*/}
<td>
<table style={{ width: "100%" }}>
<table style={{width: '100%'}}>
<tbody>
<tr>
{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 (
<td
@ -264,9 +276,8 @@ class Result extends Component {
style={{
width: percent,
backgroundColor: this.state
.electionGrades[i].color
}}
>
.electionGrades[i].color,
}}>
&nbsp;
</td>
);
@ -289,7 +300,7 @@ class Result extends Component {
{candidates.map((candidate, i) => {
return (
<span key={i}>
{i > 0 ? ", " : ""}
{i > 0 ? ', ' : ''}
<b>{i + 1}</b>: {candidate.name}
</span>
);
@ -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}
</span>
);
@ -325,11 +335,10 @@ class Result extends Component {
<CardHeader className="pointer" onClick={this.toggleProfiles}>
<h4
className={
"m-0 panel-title " +
(this.state.collapseProfiles ? "collapsed" : "")
}
>
{t("Preference profile")}
'm-0 panel-title ' +
(this.state.collapseProfiles ? 'collapsed' : '')
}>
{t('Preference profile')}
</h4>
</CardHeader>
<Collapse isOpen={this.state.collapseProfiles}>
@ -346,10 +355,9 @@ class Result extends Component {
className="badge badge-light"
style={{
backgroundColor: grade.color,
color: "#fff"
}}
>
{grade.label}{" "}
color: '#fff',
}}>
{grade.label}{' '}
</span>
</th>
);
@ -363,7 +371,10 @@ class Result extends Component {
<td>{i + 1}</td>
{gradeIds.map((id, i) => {
const value = candidate.profile[id];
const percent = (value / numVotes * 100).toFixed(1);
const percent = (
(value / numVotes) *
100
).toFixed(1);
return <td key={i}>{percent} %</td>;
})}
</tr>
@ -376,7 +387,7 @@ class Result extends Component {
{candidates.map((candidate, i) => {
return (
<span key={i}>
{i > 0 ? ", " : ""}
{i > 0 ? ', ' : ''}
<b>{i + 1}</b>: {candidate.name}
</span>
);

Write Preview
Loading…
Cancel
Save