parent
114b07b9d9
commit
58379bfd53
@ -1,165 +0,0 @@
|
|||||||
/**
|
|
||||||
* A modal to details a candidate
|
|
||||||
*/
|
|
||||||
import {ElectionPayload} from '@services/api';
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
Col,
|
|
||||||
Container,
|
|
||||||
Row,
|
|
||||||
Modal,
|
|
||||||
ModalHeader,
|
|
||||||
ModalBody,
|
|
||||||
} from 'reactstrap';
|
|
||||||
|
|
||||||
interface CandidateModal {
|
|
||||||
isOpen: boolean;
|
|
||||||
toggle: Function;
|
|
||||||
election: ElectionPayload;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CandidateModal = ({isOpen, toggle, election}) =>
|
|
||||||
(
|
|
||||||
< Modal
|
|
||||||
isOpen={isOpen}
|
|
||||||
toggle={toggle}
|
|
||||||
keyboard={true}
|
|
||||||
className="modalVote voteDesktop"
|
|
||||||
>
|
|
||||||
<div className="my-auto">
|
|
||||||
<ModalHeader className="modalVoteHeader">{election.name}</ModalHeader>
|
|
||||||
<ModalBody className="modalVoteBody">
|
|
||||||
<form onSubmit={handleSubmit} autoComplete="off">
|
|
||||||
{election.candidates.map((candidate, candidateId) => {
|
|
||||||
return (
|
|
||||||
<Row key={candidateId} className="cardVote">
|
|
||||||
<Col className="cardVoteLabel">
|
|
||||||
<h5 className="m-0">{candidate.name}</h5>
|
|
||||||
<h5 className="m-0">{candidate.description}</h5>
|
|
||||||
</Col>
|
|
||||||
<Col className="cardVoteGrades">
|
|
||||||
{election.grades.map((grade, gradeId) => {
|
|
||||||
console.assert(gradeId < numGrades);
|
|
||||||
const gradeValue = grade.value;
|
|
||||||
const color = getGradeColor(gradeId, numGrades);
|
|
||||||
return (
|
|
||||||
<Col
|
|
||||||
key={gradeId}
|
|
||||||
className="text-lg-center mx-2 voteCheck"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
htmlFor={
|
|
||||||
'candidateGrade' +
|
|
||||||
candidateId +
|
|
||||||
'-' +
|
|
||||||
gradeValue
|
|
||||||
}
|
|
||||||
className="check"
|
|
||||||
>
|
|
||||||
<small
|
|
||||||
className="nowrap d-lg-none bold badge"
|
|
||||||
style={
|
|
||||||
judgments.find((judgment) => {
|
|
||||||
return (
|
|
||||||
JSON.stringify(judgment) ===
|
|
||||||
JSON.stringify({
|
|
||||||
id: candidate.id,
|
|
||||||
value: gradeValue,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
})
|
|
||||||
? {
|
|
||||||
backgroundColor: color,
|
|
||||||
color: '#fff',
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
color: '#000',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{grade.name}
|
|
||||||
</small>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name={'candidate' + candidateId}
|
|
||||||
id={
|
|
||||||
'candidateGrade' +
|
|
||||||
candidateId +
|
|
||||||
'-' +
|
|
||||||
gradeValue
|
|
||||||
}
|
|
||||||
data-index={candidateId}
|
|
||||||
data-id={candidate.id}
|
|
||||||
value={grade.value}
|
|
||||||
onClick={handleGradeClick}
|
|
||||||
defaultChecked={judgments.find((element) => {
|
|
||||||
return (
|
|
||||||
JSON.stringify(element) ===
|
|
||||||
JSON.stringify({
|
|
||||||
id: candidate.id,
|
|
||||||
value: gradeValue,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
className="checkmark candidateGrade "
|
|
||||||
style={
|
|
||||||
judgments.find(function (judgment) {
|
|
||||||
return (
|
|
||||||
JSON.stringify(judgment) ===
|
|
||||||
JSON.stringify({
|
|
||||||
id: candidate.id,
|
|
||||||
value: gradeValue,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
})
|
|
||||||
? {
|
|
||||||
backgroundColor: color,
|
|
||||||
color: '#fff',
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
backgroundColor: '#C3BFD8',
|
|
||||||
color: '#000',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<small
|
|
||||||
className="nowrap bold badge"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
color: '#fff',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{grade.name}
|
|
||||||
</small>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</Col>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
<Row>
|
|
||||||
<Col className="text-center">
|
|
||||||
{judgments.length !== election.candidates.length ? (
|
|
||||||
<VoteButtonWithConfirm
|
|
||||||
action={handleSubmitWithoutAllRate}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Button type="submit" className="mt-5 btn btn-transparent">
|
|
||||||
<FontAwesomeIcon icon={faCheck} />
|
|
||||||
{t('Submit my vote')}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</form>
|
|
||||||
</ModalBody>
|
|
||||||
</div>
|
|
||||||
<Footer />
|
|
||||||
</Modal >
|
|
Loading…
Reference in new issue