@ -1,6 +1,6 @@
import React , { Component } from 'react' ;
import React , { Component } from "react" ;
import { withTranslation } from 'react-i18next' ;
import { withTranslation } from "react-i18next" ;
import { resolve } from 'url' ;
import { resolve } from "url" ;
import {
import {
Container ,
Container ,
Row ,
Row ,
@ -9,12 +9,11 @@ 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" ;
class Result extends Component {
class Result extends Component {
static contextType = AppContext ;
static contextType = AppContext ;
@ -34,7 +33,7 @@ class Result extends Component {
collapseGraphics : false ,
collapseGraphics : false ,
collapseProfiles : false ,
collapseProfiles : false ,
electionGrades : i18nGrades ( ) ,
electionGrades : i18nGrades ( ) ,
errorMessage : '' ,
errorMessage : ""
} ;
} ;
}
}
@ -42,7 +41,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 ) ;
@ -55,7 +54,7 @@ class Result extends Component {
id : c . id ,
id : c . id ,
name : c . name ,
name : c . name ,
profile : c . profile ,
profile : c . profile ,
grade : c . grade ,
grade : c . grade
} ) ) ;
} ) ) ;
this . setState ( state => ( { candidates : candidates } ) ) ;
this . setState ( state => ( { candidates : candidates } ) ) ;
return response ;
return response ;
@ -64,13 +63,13 @@ class Result extends Component {
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 ,
@ -90,7 +89,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 ;
} ;
} ;
@ -98,38 +97,38 @@ class Result extends Component {
componentDidMount ( ) {
componentDidMount ( ) {
/ / g e t d e t a i l s o f t h e e l e c t i o n
/ / g e t d e t a i l s o f t h e e l e c t i o n
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 } ) ;
} 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 )
@ -142,9 +141,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 )
@ -167,10 +166,9 @@ class Result extends Component {
const { errorMessage , candidates , electionGrades } = this . state ;
const { errorMessage , candidates , electionGrades } = this . state ;
const { t } = this . props ;
const { t } = this . props ;
const i18nGradesObject = i18nGrades ( ) ;
const i18nGradesObject = i18nGrades ( ) ;
const offsetGrade = i18nGradesObject . length - ( this . state . numGrades ) ;
const offsetGrade = i18nGradesObject . length - this . state . numGrades ;
if ( errorMessage && errorMessage !== "" ) {
if ( errorMessage && errorMessage !== '' ) {
return < Error value = { errorMessage } / > ;
return < Error value = { errorMessage } / > ;
}
}
@ -192,11 +190,11 @@ 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 >
< h5 >
< small >
< small >
{ t ( 'Number of votes:' ) }
{ t ( "Number of votes:" ) }
{ ' ' + numVotes }
{ " " + numVotes }
< / small >
< / small >
< / h5 >
< / h5 >
< hr className = "mb-5" / >
< hr className = "mb-5" / >
@ -209,9 +207,12 @@ class Result extends Component {
< span
< span
className = "badge badge-light ml-2 mt-2"
className = "badge badge-light ml-2 mt-2"
style = { {
style = { {
backgroundColor : electionGrades . slice ( 0 ) . reverse ( ) [ ( candidate . grade ) ] . color ,
backgroundColor : electionGrades . slice ( 0 ) . reverse ( ) [
color : '#fff' ,
candidate . grade
} } >
] . color ,
color : "#fff"
} }
>
{ i18nGradesObject . slice ( 0 ) . reverse ( ) [ gradeValue ] . label }
{ i18nGradesObject . slice ( 0 ) . reverse ( ) [ gradeValue ] . label }
< / span >
< / span >
{ / * < s p a n c l a s s N a m e = " b a d g e b a d g e - d a r k m t - 2 m l - 2 " >
{ / * < s p a n c l a s s N a m e = " b a d g e b a d g e - d a r k m t - 2 m l - 2 " >
@ -230,10 +231,11 @@ 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 } >
@ -243,24 +245,27 @@ class Result extends Component {
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 >
{ gradeIds . slice ( 0 ) . reverse ( ) . map ( ( id , i ) => {
{ gradeIds
. slice ( 0 )
. reverse ( )
. map ( ( id , i ) => {
const value = candidate . profile [ id ] ;
const value = candidate . profile [ id ] ;
if ( value > 0 ) {
if ( value > 0 ) {
let percent =
let percent =
( value * 100 ) / numVotes + '%' ;
( value * 100 ) / numVotes + "%" ;
if ( i === 0 ) {
if ( i === 0 ) {
percent = 'auto' ;
percent = "auto" ;
}
}
return (
return (
< td
< td
@ -268,8 +273,9 @@ 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 >
) ;
) ;
@ -292,7 +298,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 >
) ;
) ;
@ -308,8 +314,9 @@ 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 >
) ;
) ;
@ -327,10 +334,11 @@ 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 } >
@ -347,9 +355,10 @@ 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 >
) ;
) ;
@ -361,7 +370,10 @@ class Result extends Component {
return (
return (
< tr key = { i } >
< tr key = { i } >
< td > { i + 1 } < / td >
< td > { i + 1 } < / td >
{ gradeIds . slice ( 0 ) . reverse ( ) . map ( ( id , i ) => {
{ gradeIds
. slice ( 0 )
. reverse ( )
. map ( ( id , i ) => {
const value = candidate . profile [ id ] ;
const value = candidate . profile [ id ] ;
const percent = (
const percent = (
( value / numVotes ) *
( value / numVotes ) *
@ -379,7 +391,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 >
) ;
) ;