Merge pull request #38 from MieuxVoter/feature/clement

Feature/clement

src/Util.jsx

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

src/components/layouts/Footer.jsx

@@ -33,7 +33,6 @@ class Footer extends Component {
           style={linkStyle}>
           {t('Who are we?')}
         </a>
-        <span className="m-2">-</span>
         <div className="mt-3">
           <Paypal btnColor="btn-primary" />
         </div>

src/components/views/Result.jsx

@@ -166,7 +166,9 @@ class Result extends Component {
   render() {
     const {errorMessage, candidates, electionGrades} = this.state;
     const {t} = this.props;
-    const grades = i18nGrades();
+    const i18nGradesObject = i18nGrades();
+    const offsetGrade = i18nGradesObject.length-(this.state.numGrades);
+
 
     if (errorMessage && errorMessage !== '') {
       return <Error value={errorMessage} />;
@@ -201,16 +203,17 @@ class Result extends Component {
             <hr className="mb-5" />
             <ol>
               {candidates.map((candidate, i) => {
+                const gradeValue=candidate.grade+offsetGrade;
                 return (
                   <li key={i} className="mt-2">
                     <span className="mt-2 ml-2">{candidate.name}</span>
                     <span
                       className="badge badge-light ml-2 mt-2"
                       style={{
-                        backgroundColor: electionGrades[candidate.grade].color,
+                        backgroundColor: electionGrades.slice(0).reverse()[(candidate.grade)].color,
                         color: '#fff',
                       }}>
-                      {grades[candidate.grade].label}
+                      {i18nGradesObject.slice(0).reverse()[gradeValue].label}
                     </span>
                     {/* <span className="badge badge-dark mt-2 ml-2">
                       {(100 * candidate.score).toFixed(1)}%
@@ -252,7 +255,7 @@ class Result extends Component {
                                 <table style={{width: '100%'}}>
                                   <tbody>
                                     <tr>
-                                      {gradeIds.map((id, i) => {
+                                      {gradeIds.slice(0).reverse().map((id, i) => {
                                         const value = candidate.profile[id];
                                         if (value > 0) {
                                           let percent =
@@ -359,7 +362,7 @@ class Result extends Component {
                           return (
                             <tr key={i}>
                               <td>{i + 1}</td>
-                              {gradeIds.map((id, i) => {
+                              {gradeIds.slice(0).reverse().map((id, i) => {
                                 const value = candidate.profile[id];
                                 const percent = (
                                   (value / numVotes) *

src/components/views/Vote.jsx

@@ -169,6 +169,7 @@ class Vote extends Component {
   render() {
     const {t} = this.props;
     const {redirectTo, candidates, electionGrades} = this.state;
+    const offsetGrade = i18nGrades().length-this.state.numGrades;
 
     if (redirectTo) {
       return <Redirect to={redirectTo} />;
@@ -220,7 +221,8 @@ class Vote extends Component {
                   <hr className="d-lg-none" />
                 </Col>
                 {this.state.electionGrades.map((grade, gradeId) => {
-                  console.assert(gradeId < this.state.numGrades) 
+                  console.assert(gradeId < this.state.numGrades)
+                  const gradeValue = grade.value-offsetGrade;
                   return (
                     <Col
                       xs={this.state.colSizeGradeXs}
@@ -229,7 +231,7 @@ class Vote extends Component {
                       key={gradeId}
                       className="text-lg-center">
                       <label
-                        htmlFor={'candidateGrade' + candidateId + '-' + gradeId}
+                        htmlFor={'candidateGrade' + candidateId + '-' + gradeValue}
                         className="check">
                         <small
                           className="nowrap d-lg-none ml-2 bold badge"
@@ -239,7 +241,7 @@ class Vote extends Component {
                             ) {
                               return (
                                 JSON.stringify(ratedCandidat) ===
-                                JSON.stringify({id: candidate.id, value: gradeId})
+                                JSON.stringify({id: candidate.id, value: gradeValue})
                               );
                             })
                               ? {backgroundColor: grade.color, color: '#fff'}
@@ -253,16 +255,16 @@ class Vote extends Component {
                         <input
                           type="radio"
                           name={'candidate' + candidateId}
-                          id={'candidateGrade' + candidateId + '-' + gradeId}
+                          id={'candidateGrade' + candidateId + '-' + gradeValue}
                           data-index={candidateId}
                           data-id={candidate.id}
-                          value={gradeId}
+                          value={grade.value-offsetGrade}
                           onClick={this.handleGradeClick}
                           defaultChecked={this.state.ratedCandidates.find(
                             function(element) {
                               return (
                                 JSON.stringify(element) ===
-                                JSON.stringify({id: candidate.id, value: gradeId})
+                                JSON.stringify({id: candidate.id, value: gradeValue})
                               );
                             },
                           )}
@@ -275,7 +277,7 @@ class Vote extends Component {
                             ) {
                               return (
                                 JSON.stringify(ratedCandidat) ===
-                                JSON.stringify({id: candidate.id, value: gradeId})
+                                JSON.stringify({id: candidate.id, value: gradeValue})
                               );
                             })
                               ? {backgroundColor: grade.color, color: '#fff'}