You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
2.3 KiB
68 lines
2.3 KiB
import {useState} from 'react';
|
|
import {Container} from 'reactstrap';
|
|
import {useBallot} from '@services/BallotContext';
|
|
import CandidateCard from '@components/ballot/CandidateCard';
|
|
import TitleBar from '@components/ballot/TitleBar';
|
|
import GradeInput from '@components/ballot/GradeInput';
|
|
import {CandidatePayload} from '@services/api';
|
|
import CandidateModal from '@components/CandidateModalGet';
|
|
import {useTranslation} from 'next-i18next';
|
|
|
|
const BallotDesktop = ({hasVoted}) => {
|
|
const {t} = useTranslation();
|
|
|
|
const [ballot, dispatch] = useBallot();
|
|
const numGrades = ballot.election.grades.length;
|
|
const disabled = ballot.votes.length !== ballot.election.candidates.length;
|
|
|
|
const [candidate, setCandidate] = useState<CandidatePayload | null>(null);
|
|
|
|
return (
|
|
<div className="w-100 h-100 d-none d-md-block">
|
|
<TitleBar election={ballot.election} />
|
|
<Container
|
|
className="w-100 h-100 d-flex flex-column justify-content-center align-items-center"
|
|
style={{maxWidth: '1050px'}}
|
|
>
|
|
<h1 className="mb-5">{ballot.election.name}</h1>
|
|
{hasVoted && <h5 className="d-flex text-start">
|
|
{t("vote.already-voted")}
|
|
</h5>}
|
|
{ballot.election.candidates.map((candidate, candidateId) => {
|
|
return (
|
|
<div
|
|
key={candidateId}
|
|
className="bg-white justify-content-between d-flex my-2 py-2 w-100 px-3"
|
|
>
|
|
<CandidateCard
|
|
onClick={() => setCandidate(candidate)}
|
|
candidate={candidate}
|
|
/>
|
|
<div className="d-flex">
|
|
{ballot.election.grades.sort(
|
|
(a, b) => b.value - a.value
|
|
).map((_, gradeId) => {
|
|
console.assert(gradeId < numGrades);
|
|
return (
|
|
<GradeInput
|
|
key={gradeId}
|
|
gradeId={gradeId}
|
|
candidateId={candidateId}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
<CandidateModal
|
|
isOpen={candidate !== null}
|
|
toggle={() => setCandidate(null)}
|
|
candidate={candidate}
|
|
/>
|
|
</Container>
|
|
</div>
|
|
);
|
|
};
|
|
export default BallotDesktop;
|