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

Merge branch 'master' into feature/clement-release

Browse Source
pull/73/head
guhur 4 years ago committed by GitHub
parent 47a0dbef44 7b4f229bdb
commit 18b5df6363
8 changed files with 211 additions and 140 deletions
Show Stats Download Patch File Download Diff File

1
public/locale/i18n/de/common.json
Unescape View File

@ -0,0 +1 @@
{}

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

@ -53,4 +53,25 @@
"Support us !" : "Unterstützen Sie uns!", "Support us !" : "Unterstützen Sie uns!",
"PayPal - The safer, easier way to pay online!" : "PayPal - Die sicherere und einfachere Art, online zu bezahlen!", "PayPal - The safer, easier way to pay online!" : "PayPal - Die sicherere und einfachere Art, online zu bezahlen!",
"Number of votes:" : "Anzahl der Stimmen:" "Number of votes:" : "Anzahl der Stimmen:"
"Unknown error. Try again please.": "__STRING_NOT_TRANSLATED__",
"Ending date:": "__STRING_NOT_TRANSLATED__",
"If you list voters' emails, only them will be able to access the election": "__STRING_NOT_TRANSLATED__",
"Dates": "__STRING_NOT_TRANSLATED__",
"The election will take place from": "__STRING_NOT_TRANSLATED__",
"at": "__STRING_NOT_TRANSLATED__",
"to": "__STRING_NOT_TRANSLATED__",
"Grades": "__STRING_NOT_TRANSLATED__",
"Voters' list": "__STRING_NOT_TRANSLATED__",
"Voters received a link to vote by email. Each link can be used only once!": "__STRING_NOT_TRANSLATED__",
"Results of the election:": "__STRING_NOT_TRANSLATED__",
"Graph": "__STRING_NOT_TRANSLATED__",
"Preference profile": "__STRING_NOT_TRANSLATED__",
"Oops... The election is unknown.": "__STRING_NOT_TRANSLATED__",
"The election is still going on. You can't access now to the results.": "__STRING_NOT_TRANSLATED__",
"No votes have been recorded yet. Come back later.": "__STRING_NOT_TRANSLATED__",
"The election has not started yet.": "__STRING_NOT_TRANSLATED__",
"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__",
} }

34
src/Util.jsx
Unescape View File

@ -1,33 +1,33 @@
import i18n from './i18n.jsx'; import i18n from './i18n.jsx';
const colors = [ const colors = [
"#015411", '#6f0214',
"#019812", '#b20616',
"#6bca24", '#ff5d00',
"#ffb200", '#ffb200',
"#ff5d00", '#6bca24',
"#b20616", '#019812',
"#6f0214" '#015411',
]; ];
const gradeNames = [ const gradeNames = [
"Excellent", 'To reject',
"Very good", 'Insufficient',
"Good", 'Passable',
"Fair", 'Fair',
"Passable", 'Good',
"Insufficient", 'Very good',
"To reject", 'Excellent',
]; ];
export const grades = gradeNames.map((name, i) => ({ export const grades = gradeNames.map((name, i) => ({
label: name, label: name,
color: colors[i] color: colors[i],
})); }));
export const i18nGrades = () => { export const i18nGrades = () => {
return gradeNames.map((name, i) => ({ return gradeNames.map((name, i) => ({
label: i18n.t(name), label: i18n.t(name),
color: colors[i] color: colors[i],
})); }));
}; };

13
src/components/layouts/Footer.jsx
Unescape View File

@ -1,4 +1,4 @@
import React, { Component } from "react"; import React, { Component, Fragment } from "react";
import {withTranslation} from 'react-i18next'; import {withTranslation} from 'react-i18next';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import Paypal from "../banner/Paypal"; import Paypal from "../banner/Paypal";
@ -23,6 +23,17 @@ class Footer extends Component {
<a href="https://github.com/MieuxVoter" target="_blank" rel="noopener noreferrer" style={linkStyle}>{t("Source code")}</a> <a href="https://github.com/MieuxVoter" target="_blank" rel="noopener noreferrer" style={linkStyle}>{t("Source code")}</a>
<span className="m-2">-</span> <span className="m-2">-</span>
<a href="https://mieuxvoter.fr/" target="_blank" rel="noopener noreferrer" style={linkStyle} >{t("Who are we?")}</a> <a href="https://mieuxvoter.fr/" target="_blank" rel="noopener noreferrer" style={linkStyle} >{t("Who are we?")}</a>
<span className="m-2">-</span>
{
countries.map(({l, flag}, i) => (
<Fragment key={i} >
<button style={buttonStyle} onClick={() => i18n.changeLanguage(l)}>
<FlagIcon code={flag} />
</button>
{" "}
</Fragment>
))
}
<div className="mt-3"> <div className="mt-3">
<Paypal btnColor="btn-primary"/> <Paypal btnColor="btn-primary"/>
</div> </div>

48
src/components/views/CreateElection.jsx
Unescape View File

@ -40,6 +40,11 @@ import ButtonWithConfirm from '../form/ButtonWithConfirm';
import Loader from '../wait'; import Loader from '../wait';
import i18n from '../../i18n' import i18n from '../../i18n'
// Error messages
const AT_LEAST_2_CANDIDATES_ERROR = 'Please add at least 2 candidates.'
const NO_TITLE_ERROR = 'Please add a title.'
// Convert a Date object into YYYY-MM-DD // Convert a Date object into YYYY-MM-DD
const dateToISO = date => date.toISOString().substring(0, 10); const dateToISO = date => date.toISOString().substring(0, 10);
@ -157,7 +162,6 @@ class CreateElection extends Component {
this.state = { this.state = {
candidates: [{label: ''}, {label: ''}], candidates: [{label: ''}, {label: ''}],
numCandidatesWithLabel: 0,
title: title || '', title: title || '',
isVisibleTipsDragAndDropCandidate: true, isVisibleTipsDragAndDropCandidate: true,
numGrades: 7, numGrades: 7,
@ -213,7 +217,6 @@ class CreateElection extends Component {
}); });
this.setState({ this.setState({
candidates: candidates, candidates: candidates,
numCandidatesWithLabel: numLabels,
}); });
}; };
@ -242,6 +245,28 @@ class CreateElection extends Component {
this.setState({isAdvancedOptionsOpen: !this.state.isAdvancedOptionsOpen}); this.setState({isAdvancedOptionsOpen: !this.state.isAdvancedOptionsOpen});
}; };
checkFields() {
const { candidates, title } = this.state;
if (!candidates) {
return {ok: false, msg: AT_LEAST_2_CANDIDATES_ERROR};
}
let numCandidates = 0;
candidates.forEach(c => {
if (c !== "") numCandidates += 1;
})
if (numCandidates < 2) {
return {ok: false, msg: AT_LEAST_2_CANDIDATES_ERROR};
}
if (!title || title === "") {
return {ok: false, msg: NO_TITLE_ERROR};
}
return {ok: true, msg: "OK"};
}
handleSubmit() { handleSubmit() {
const { const {
candidates, candidates,
@ -259,6 +284,15 @@ class CreateElection extends Component {
const {t} = this.props; const {t} = this.props;
const locale=i18n.language.substring(0,2).toLowerCase()==="fr"?"fr":"en"; const locale=i18n.language.substring(0,2).toLowerCase()==="fr"?"fr":"en";
const check = this.checkFields();
if (!check.ok) {
toast.error(t(check.msg), {
position: toast.POSITION.TOP_CENTER,
});
return
}
this.setState({waiting: true}); this.setState({waiting: true});
fetch(endpoint, { fetch(endpoint, {
@ -301,9 +335,9 @@ class CreateElection extends Component {
.catch(error => error); .catch(error => error);
} }
handleSendWithoutCandidate = () => { handleSendNotReady = (msg) => {
const {t} = this.props; const {t} = this.props;
toast.error(t('Please add at least 2 candidates.'), { toast.error(t(msg), {
position: toast.POSITION.TOP_CENTER, position: toast.POSITION.TOP_CENTER,
}); });
}; };
@ -319,12 +353,12 @@ class CreateElection extends Component {
candidates, candidates,
numGrades, numGrades,
isAdvancedOptionsOpen, isAdvancedOptionsOpen,
numCandidatesWithLabel, electorEmails,
electorEmails
} = this.state; } = this.state;
const {t} = this.props; const {t} = this.props;
const grades = i18nGrades(); const grades = i18nGrades();
const check = this.checkFields();
if (successCreate) return <Redirect to={redirectTo} />; if (successCreate) return <Redirect to={redirectTo} />;
@ -579,7 +613,7 @@ class CreateElection extends Component {
</Collapse> </Collapse>
<Row className="justify-content-end mt-2"> <Row className="justify-content-end mt-2">
<Col xs="12" md="3"> <Col xs="12" md="3">
{numCandidatesWithLabel >= 2 ? ( {check.ok ? (
<ButtonWithConfirm <ButtonWithConfirm
className="btn btn-success float-right btn-block" className="btn btn-success float-right btn-block"
tabIndex={candidates.length + 4}> tabIndex={candidates.length + 4}>

1
src/components/views/CreateSuccess.jsx
Unescape View File

@ -85,6 +85,7 @@ class CreateSuccess extends Component {
<h4 className="m-0 p-0 text-center"> <h4 className="m-0 p-0 text-center">
<FontAwesomeIcon icon={faExclamationTriangle} className="mr-2" /> <FontAwesomeIcon icon={faExclamationTriangle} className="mr-2" />
{t('Keep these links carefully')} {t('Keep these links carefully')}
</h4> </h4>
<p className="small m-2 p-0"> <p className="small m-2 p-0">
<Trans i18nKey="t"> <Trans i18nKey="t">

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

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, {Component} from 'react';
import { Redirect } from "react-router-dom"; import {Redirect} from 'react-router-dom';
import { withTranslation } from "react-i18next"; import {withTranslation} from 'react-i18next';
import { resolve } from "url"; import {resolve} from 'url';
import { import {
Container, Container,
Row, Row,
@ -10,11 +10,20 @@ import {
Card, Card,
CardHeader, CardHeader,
CardBody, CardBody,
Table Table,
} from "reactstrap"; } from 'reactstrap';
import { i18nGrades } from "../../Util"; import {i18nGrades} from '../../Util';
import { AppContext } from "../../AppContext"; import {AppContext} from '../../AppContext';
import { errorMessage, Error } from "../../Errors"; import {errorMessage, Error} from '../../Errors';
const meritProfileFromVotes = votes => {
const numGrades = Math.max(...votes) - Math.min(...votes);
const profile = Array(numGrades).fill(0);
votes.forEach(vote => {
profile[vote] += 1;
});
return profile;
};
class Result extends Component { class Result extends Component {
static contextType = AppContext; static contextType = AppContext;
@ -34,8 +43,7 @@ class Result extends Component {
collapseGraphics: false, collapseGraphics: false,
collapseProfiles: false, collapseProfiles: false,
electionGrades: i18nGrades(), electionGrades: i18nGrades(),
errorMessage: "", errorMessage: '',
numVotes:"..."
}; };
} }
@ -43,7 +51,7 @@ class Result extends Component {
if (!response.ok) { if (!response.ok) {
response.json().then(response => { response.json().then(response => {
this.setState(state => ({ this.setState(state => ({
errorMessage: errorMessage(response, this.props.t) errorMessage: errorMessage(response, this.props.t),
})); }));
}); });
throw Error(response); throw Error(response);
@ -57,24 +65,21 @@ class Result extends Component {
name: c.name, name: c.name,
profile: c.profile, profile: c.profile,
grade: c.grade, grade: c.grade,
score: c.score,
numVotes: c.num_votes
})); }));
console.log(response); this.setState(state => ({candidates: candidates}));
this.setState(state => ({ candidates: candidates, numVotes : candidates[0].numVotes }));
return response; return response;
}; };
detailsToState = response => { detailsToState = response => {
const numGrades = response.num_grades; const numGrades = response.num_grades;
const colSizeGradeLg = Math.floor( const colSizeGradeLg = Math.floor(
(12 - this.state.colSizeCandidateLg) / numGrades (12 - this.state.colSizeCandidateLg) / numGrades,
); );
const colSizeGradeMd = Math.floor( const colSizeGradeMd = Math.floor(
(12 - this.state.colSizeCandidateMd) / numGrades (12 - this.state.colSizeCandidateMd) / numGrades,
); );
const colSizeGradeXs = Math.floor( const colSizeGradeXs = Math.floor(
(12 - this.state.colSizeCandidateXs) / numGrades (12 - this.state.colSizeCandidateXs) / numGrades,
); );
this.setState(state => ({ this.setState(state => ({
title: response.title, title: response.title,
@ -94,7 +99,7 @@ class Result extends Component {
12 - colSizeGradeXs * numGrades > 0 12 - colSizeGradeXs * numGrades > 0
? 12 - colSizeGradeXs * numGrades ? 12 - colSizeGradeXs * numGrades
: 12, : 12,
electionGrades: i18nGrades().slice(0, numGrades) electionGrades: i18nGrades().slice(0, numGrades),
})); }));
return response; return response;
}; };
@ -102,39 +107,38 @@ class Result extends Component {
componentDidMount() { componentDidMount() {
// get details of the election // get details of the election
const electionSlug = this.props.match.params.slug; const electionSlug = this.props.match.params.slug;
if (electionSlug === "dev") { if (electionSlug === 'dev') {
const dataTest = [ const dataTest = [
{ {
name: "BB", name: 'BB',
id: 1, id: 1,
score: 1.0, score: 1.0,
profile: [1, 1, 0, 0, 0, 0, 0], profile: [1, 1, 0, 0, 0, 0, 0],
grade: 1 grade: 1,
}, },
{ {
name: "CC", name: 'CC',
id: 2, id: 2,
score: 1.0, score: 1.0,
profile: [0, 0, 2, 0, 0, 0, 0], profile: [0, 0, 2, 0, 0, 0, 0],
grade: 2 grade: 2,
}, },
{ {
name: "AA", name: 'AA',
id: 0, id: 0,
score: 1.0, score: 1.0,
profile: [1, 1, 0, 0, 0, 0, 0], profile: [1, 1, 0, 0, 0, 0, 0],
grade: 1 grade: 1,
} },
]; ];
this.setState({ candidates: dataTest }); this.setState({candidates: dataTest});
console.log(this.state.candidates);
} else { } else {
const detailsEndpoint = resolve( const detailsEndpoint = resolve(
this.context.urlServer, this.context.urlServer,
this.context.routesServer.getElection.replace( this.context.routesServer.getElection.replace(
new RegExp(":slug", "g"), new RegExp(':slug', 'g'),
electionSlug electionSlug,
) ),
); );
fetch(detailsEndpoint) fetch(detailsEndpoint)
@ -147,9 +151,9 @@ class Result extends Component {
const resultsEndpoint = resolve( const resultsEndpoint = resolve(
this.context.urlServer, this.context.urlServer,
this.context.routesServer.getResultsElection.replace( this.context.routesServer.getResultsElection.replace(
new RegExp(":slug", "g"), new RegExp(':slug', 'g'),
electionSlug electionSlug,
) ),
); );
fetch(resultsEndpoint) fetch(resultsEndpoint)
@ -161,30 +165,30 @@ class Result extends Component {
} }
toggleGraphics = () => { toggleGraphics = () => {
this.setState(state => ({ collapseGraphics: !state.collapseGraphics })); this.setState(state => ({collapseGraphics: !state.collapseGraphics}));
}; };
toggleProfiles = () => { toggleProfiles = () => {
this.setState(state => ({ collapseProfiles: !state.collapseProfiles })); this.setState(state => ({collapseProfiles: !state.collapseProfiles}));
}; };
render() { render() {
const { errorMessage, candidates, electionGrades } = this.state; const {errorMessage, candidates, electionGrades} = this.state;
const { t } = this.props; const {t} = this.props;
const grades = i18nGrades(); const grades = i18nGrades();
if (errorMessage && errorMessage !== "") { if (errorMessage && errorMessage !== '') {
return <Error value={errorMessage} />; return <Error value={errorMessage} />;
} }
let totalOfVote = 0; const sum = seq => Object.values(seq).reduce((a, b) => a + b, 0);
const numVotes =
//based on the first candidate candidates && candidates.length > 0 ? sum(candidates[0].profile) : 1;
if (candidates.length > 0) { const gradeIds =
candidates[0].profile.map((value, i) => (totalOfVote += value)); candidates && candidates.length > 0
} else { ? Object.keys(candidates[0].profile)
totalOfVote = 1; : [];
} console.log(gradeIds);
return ( return (
<Container> <Container>
@ -196,27 +200,30 @@ class Result extends Component {
<Row className="mt-5"> <Row className="mt-5">
<Col> <Col>
<h1>{t("Results of the election:")}</h1> <h1>{t('Results of the election:')}</h1>
<h5><small>{t("Number of votes:")}{" "+this.state.numVotes}</small></h5> <h5>
<hr className="mb-5"/> <small>
{t('Number of votes:')}
{' ' + numVotes}
</small>
</h5>
<hr className="mb-5" />
<ol> <ol>
{candidates.map((candidate, i) => { {candidates.map((candidate, i) => {
console.log(candidate);
return ( return (
<li key={i} className="mt-2"> <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 <span
className="badge badge-light ml-2 mt-2" className="badge badge-light ml-2 mt-2"
style={{ style={{
backgroundColor: electionGrades[candidate.grade].color, backgroundColor: electionGrades[candidate.grade].color,
color: "#fff" color: '#fff',
}} }}>
>
{grades[candidate.grade].label} {grades[candidate.grade].label}
</span> </span>
<span className="badge badge-dark mt-2 ml-2"> {/* <span className="badge badge-dark mt-2 ml-2">
{(100 * candidate.score).toFixed(1)}% {(100 * candidate.score).toFixed(1)}%
</span> </span> */}
</li> </li>
); );
})} })}
@ -230,11 +237,10 @@ class Result extends Component {
<CardHeader className="pointer" onClick={this.toggleGraphics}> <CardHeader className="pointer" onClick={this.toggleGraphics}>
<h4 <h4
className={ className={
"m-0 panel-title " + 'm-0 panel-title ' +
(this.state.collapseGraphics ? "collapsed" : "") (this.state.collapseGraphics ? 'collapsed' : '')
} }>
> {t('Graph')}
{t("Graph")}
</h4> </h4>
</CardHeader> </CardHeader>
<Collapse isOpen={this.state.collapseGraphics}> <Collapse isOpen={this.state.collapseGraphics}>
@ -242,27 +248,26 @@ class Result extends Component {
<div> <div>
<div <div
className="median" className="median"
style={{ height: candidates.length * 28 + 30 }} style={{height: candidates.length * 28 + 30}}
/> />
<table style={{ width: "100%" }}> <table style={{width: '100%'}}>
<tbody> <tbody>
{candidates.map((candidate, i) => { {candidates.map((candidate, i) => {
return ( return (
<tr key={i}> <tr key={i}>
<td style={{ width: "30px" }}>{i + 1}</td> <td style={{width: '30px'}}>{i + 1}</td>
{/*candidate.label*/} {/*candidate.label*/}
<td> <td>
<table style={{ width: "100%" }}> <table style={{width: '100%'}}>
<tbody> <tbody>
<tr> <tr>
{candidate.profile.map((value, i) => { {gradeIds.map((id, i) => {
const value = candidate.profile[id];
if (value > 0) { if (value > 0) {
let percent = let percent =
Math.round( (value * 100) / numVotes + '%';
(value * 100) / totalOfVote
) + "%";
if (i === 0) { if (i === 0) {
percent = "auto"; percent = 'auto';
} }
return ( return (
<td <td
@ -270,9 +275,8 @@ class Result extends Component {
style={{ style={{
width: percent, width: percent,
backgroundColor: this.state backgroundColor: this.state
.electionGrades[i].color .electionGrades[i].color,
}} }}>
>
&nbsp; &nbsp;
</td> </td>
); );
@ -295,7 +299,7 @@ class Result extends Component {
{candidates.map((candidate, i) => { {candidates.map((candidate, i) => {
return ( return (
<span key={i}> <span key={i}>
{i > 0 ? ", " : ""} {i > 0 ? ', ' : ''}
<b>{i + 1}</b>: {candidate.name} <b>{i + 1}</b>: {candidate.name}
</span> </span>
); );
@ -311,9 +315,8 @@ class Result extends Component {
className="badge badge-light mr-2 mt-2" className="badge badge-light mr-2 mt-2"
style={{ style={{
backgroundColor: grade.color, backgroundColor: grade.color,
color: "#fff" color: '#fff',
}} }}>
>
{grade.label} {grade.label}
</span> </span>
); );
@ -331,11 +334,10 @@ class Result extends Component {
<CardHeader className="pointer" onClick={this.toggleProfiles}> <CardHeader className="pointer" onClick={this.toggleProfiles}>
<h4 <h4
className={ className={
"m-0 panel-title " + 'm-0 panel-title ' +
(this.state.collapseProfiles ? "collapsed" : "") (this.state.collapseProfiles ? 'collapsed' : '')
} }>
> {t('Preference profile')}
{t("Preference profile")}
</h4> </h4>
</CardHeader> </CardHeader>
<Collapse isOpen={this.state.collapseProfiles}> <Collapse isOpen={this.state.collapseProfiles}>
@ -352,10 +354,9 @@ class Result extends Component {
className="badge badge-light" className="badge badge-light"
style={{ style={{
backgroundColor: grade.color, backgroundColor: grade.color,
color: "#fff" color: '#fff',
}} }}>
> {grade.label}{' '}
{grade.label}{" "}
</span> </span>
</th> </th>
); );
@ -367,13 +368,13 @@ class Result extends Component {
return ( return (
<tr key={i}> <tr key={i}>
<td>{i + 1}</td> <td>{i + 1}</td>
{/*candidate.label*/} {gradeIds.map((id, i) => {
{candidate.profile.map((value, i) => { const value = candidate.profile[id];
let percent = const percent = (
Math.round( (value / numVotes) *
((value * 100) / totalOfVote) * 100 100
) / 100; ).toFixed(1);
return <td key={i}>{percent}%</td>; return <td key={i}>{percent} %</td>;
})} })}
</tr> </tr>
); );
@ -385,7 +386,7 @@ class Result extends Component {
{candidates.map((candidate, i) => { {candidates.map((candidate, i) => {
return ( return (
<span key={i}> <span key={i}>
{i > 0 ? ", " : ""} {i > 0 ? ', ' : ''}
<b>{i + 1}</b>: {candidate.name} <b>{i + 1}</b>: {candidate.name}
</span> </span>
); );

36
src/components/views/Vote.jsx
Unescape View File

@ -190,13 +190,13 @@ class Vote extends Component {
lg={this.state.colSizeCandidateLg}> lg={this.state.colSizeCandidateLg}>
<h5>&nbsp;</h5> <h5>&nbsp;</h5>
</Col> </Col>
{electionGrades.map((grade, j) => { {electionGrades.map((grade, gradeId) => {
return j < this.state.numGrades ? ( return gradeId < this.state.numGrades ? (
<Col <Col
xs={this.state.colSizeGradeXs} xs={this.state.colSizeGradeXs}
md={this.state.colSizeGradeMd} md={this.state.colSizeGradeMd}
lg={this.state.colSizeGradeLg} lg={this.state.colSizeGradeLg}
key={j} key={gradeId}
className="text-center p-0" className="text-center p-0"
style={{lineHeight: 2}}> style={{lineHeight: 2}}>
<small <small
@ -209,9 +209,9 @@ class Vote extends Component {
})} })}
</Row> </Row>
{candidates.map((candidate, i) => { {candidates.map((candidate, candidateId) => {
return ( return (
<Row key={i} className="cardVote"> <Row key={candidateId} className="cardVote">
<Col <Col
xs={this.state.colSizeCandidateXs} xs={this.state.colSizeCandidateXs}
md={this.state.colSizeCandidateMd} md={this.state.colSizeCandidateMd}
@ -219,16 +219,17 @@ class Vote extends Component {
<h5 className="m-0">{candidate.label}</h5> <h5 className="m-0">{candidate.label}</h5>
<hr className="d-lg-none" /> <hr className="d-lg-none" />
</Col> </Col>
{this.state.electionGrades.map((grade, j) => { {this.state.electionGrades.map((grade, gradeId) => {
return j < this.state.numGrades ? ( console.assert(gradeId < this.state.numGrades)
return (
<Col <Col
xs={this.state.colSizeGradeXs} xs={this.state.colSizeGradeXs}
md={this.state.colSizeGradeMd} md={this.state.colSizeGradeMd}
lg={this.state.colSizeGradeLg} lg={this.state.colSizeGradeLg}
key={j} key={gradeId}
className="text-lg-center"> className="text-lg-center">
<label <label
htmlFor={'candidateGrade' + i + '-' + j} htmlFor={'candidateGrade' + candidateId + '-' + gradeId}
className="check"> className="check">
<small <small
className="nowrap d-lg-none ml-2 bold badge" className="nowrap d-lg-none ml-2 bold badge"
@ -238,7 +239,7 @@ class Vote extends Component {
) { ) {
return ( return (
JSON.stringify(ratedCandidat) === JSON.stringify(ratedCandidat) ===
JSON.stringify({id: candidate.id, value: j}) JSON.stringify({id: candidate.id, value: gradeId})
); );
}) })
? {backgroundColor: grade.color, color: '#fff'} ? {backgroundColor: grade.color, color: '#fff'}
@ -251,17 +252,17 @@ class Vote extends Component {
</small> </small>
<input <input
type="radio" type="radio"
name={'candidate' + i} name={'candidate' + candidateId}
id={'candidateGrade' + i + '-' + j} id={'candidateGrade' + candidateId + '-' + gradeId}
data-index={i} data-index={candidateId}
data-id={candidate.id} data-id={candidate.id}
value={j} value={gradeId}
onClick={this.handleGradeClick} onClick={this.handleGradeClick}
defaultChecked={this.state.ratedCandidates.find( defaultChecked={this.state.ratedCandidates.find(
function(element) { function(element) {
return ( return (
JSON.stringify(element) === JSON.stringify(element) ===
JSON.stringify({id: candidate.id, value: j}) JSON.stringify({id: candidate.id, value: gradeId})
); );
}, },
)} )}
@ -274,7 +275,7 @@ class Vote extends Component {
) { ) {
return ( return (
JSON.stringify(ratedCandidat) === JSON.stringify(ratedCandidat) ===
JSON.stringify({id: candidate.id, value: j}) JSON.stringify({id: candidate.id, value: gradeId})
); );
}) })
? {backgroundColor: grade.color, color: '#fff'} ? {backgroundColor: grade.color, color: '#fff'}
@ -286,7 +287,8 @@ class Vote extends Component {
/> />
</label> </label>
</Col> </Col>
) : null;
)
})} })}
</Row> </Row>
); );

Write Preview
Loading…
Cancel
Save