Skip to content

Commit

Permalink
Add party row columns for variable number of machines
Browse files Browse the repository at this point in the history
  • Loading branch information
@blagoslav-mihaylov
blagoslav-mihaylov committed Jul 9, 2021
1 parent f86397c commit 26ec20d
Show file tree
Hide file tree
Showing 4 changed files with 163 additions and 161 deletions.
29 changes: 11 additions & 18 deletions src/components/process_protocols/VerifyProtocolInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,17 +150,18 @@ export default props => {
const [protocolType, setProtocolType] = useState('unset');
const [machineCount, setMachineCount] = useState(0);
const [isFinal, setIsFinal] = useState(false);

const [formState, setFormState] = useState(new ValidationFormState({ protocol: props.protocol, parties, allParties }));
const { fieldStatus, invalidFields, changedFields } = formState.getFieldStatus(props.protocol, parties, allParties, sectionData, protocolType);
const [formState, setFormState] = useState(() => new ValidationFormState({ protocol: props.protocol, parties, protocolType, machineCount }));
const { fieldStatus, invalidFields, changedFields } = formState.getFieldStatus(props.protocol, parties, protocolType, machineCount );
const ref = useRef();

useEffect(() => {
setFormState(new ValidationFormState({ protocol: props.protocol, parties, allParties }));
setFormState(new ValidationFormState({ protocol: props.protocol, parties, protocolType, machineCount }));
setMachineCount(0);
}, [protocolType]);

useEffect(() => {
setFormState(new ValidationFormState({ protocol: props.protocol, parties, allParties }));
setFormState(new ValidationFormState({ protocol: props.protocol, parties, protocolType, machineCount }));
}, [machineCount]);

useKeypress(['ArrowUp'], event => {
Expand Down Expand Up @@ -298,8 +299,6 @@ export default props => {
};

const replaceProtocol = async () => {
const results = formState.generateResults(sectionData.isMachine);

const postBody = {
section: { id: formState.formData.sectionId },
hasPaperBallots: protocolType === 'paper' || protocolType === 'paper-machine',
Expand All @@ -313,18 +312,12 @@ export default props => {
machineVotesCount: parseInt(formState.formData.machineVotesCount, 10),
invalidVotesCount: parseInt(formState.formData.invalidVotesCount, 10),
validVotesCount: parseInt(formState.formData.validVotesCount, 10),
results: {
results: Object.keys(results).map(key => {
return { party: parseInt(key, 10),
validVotesCount: results[key].validVotesCount,
machineVotesCount: results[key].machineVotesCount,
nonMachineVotesCount: results[key].nonMachineVotesCount,
};
})
},
results: formState.generateResults(parties, protocolType, machineCount),
pictures: props.protocol.pictures,
};

console.log(postBody);

props.setLoading(true);
try {
const res = await authPost(`/protocols/${props.protocol.id}/replace`, postBody);
Expand Down Expand Up @@ -386,6 +379,7 @@ export default props => {
setProtocolType={setProtocolType}
machineCount={machineCount}
setMachineCount={setMachineCount}
setIsFinal={setIsFinal}
/>
{
protocolType === 'unset' ||
Expand All @@ -396,11 +390,10 @@ export default props => {
handleNumberChange={handleNumberChange}
handleResultsChange={handleResultsChange}
formState={formState}
sectionData={sectionData}
parties={parties}
allParties={allParties}
protocolType={protocolType}
setIsFinal={setIsFinal}
machineCount={machineCount}
/>
}
{protocolType !== 'unset'? <hr/> : null}
Expand Down
162 changes: 75 additions & 87 deletions src/components/process_protocols/validation_form/ProtocolForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,16 +93,22 @@ const PartyResultsTable = styled.table`
cursor: pointer;
}
${props => props.isMachine? `
td:nth-child(1) { width: 8%; }
td:nth-child(2) { width: 42%; }
td:nth-child(3) { width: 30%; }
td:nth-child(4) { width: 20%; }
` : `
td:nth-child(1) { width: 8%; }
td:nth-child(2) { width: 72%; }
td:nth-child(3) { width: 20%; }
`}
${props => props.colCount === 1? `
td:nth-child(1), th:nth-child(1) { width: 8%; }
td:nth-child(2), th:nth-child(2) { width: 72%; }
td:nth-child(3), th:nth-child(3) { width: 20%; }
` : props.colCount === 2? `
td:nth-child(1), th:nth-child(1) { width: 8%; }
td:nth-child(2), th:nth-child(2) { width: 72%; }
td:nth-child(3), th:nth-child(3) { width: 10%; }
td:nth-child(4), th:nth-child(4) { width: 10%; }
` : props.colCount === 3? `
td:nth-child(1), th:nth-child(1) { width: 8%; }
td:nth-child(2), th:nth-child(2) { width: 71%; }
td:nth-child(3), th:nth-child(3) { width: 7%; }
td:nth-child(4), th:nth-child(4) { width: 7%; }
td:nth-child(5), th:nth-child(5) { width: 7%; }
` : ``}
`;

const PartyNumber = styled.span`
Expand All @@ -121,93 +127,66 @@ const svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><
export default props => {

const partyRow = (party, i) => {
const status = props.fieldStatus[`party${party.id}`];
const statusM = props.fieldStatus[`party${party.id}m`];
const statusNM = props.fieldStatus[`party${party.id}nm`];

return(
!props.sectionData.isMachine
?
<tr key={i}>
<td>{party.id.toString() === '0'? null :
party.color?
<PartyNumber color={party.color}>{party.id}</PartyNumber> :
<PartyNumber color={'white'} textColor={'555'}>{party.id}</PartyNumber>
}
</td>
<td>{party.displayName}</td>
<td>
<input type="text"
className={status.invalid? 'invalid' : status.changed? 'changed' : ''}
name={party.id}
value={props.formState.resultsData[party.id]}
onChange={props.handleResultsChange}
/>
</td>
</tr>
: <>
<tr key={i*3}>
<td>{party.id.toString() === '0'? null :
party.color?
<PartyNumber color={party.color}>{party.id}</PartyNumber> :
<PartyNumber color={'white'} textColor={'555'}>{party.id}</PartyNumber>
}
</td>
<td rowSpan="3" style={{
verticalAlign: 'top',
paddingTop: '5px',
borderBottom: '1px solid rgb(204, 204, 204)',
}}>
{party.displayName}
</td>
<td>от бюлетини</td>
<td>
<input type="text"
className={statusNM.invalid? 'invalid' : statusNM.changed? 'changed' : ''}
name={`${party.id}nm`}
value={props.formState.resultsData[`${party.id}nm`]}
onChange={props.handleResultsChange}
/>
</td>
</tr>
<tr key={i*3+1}>
<td></td>
<td>от маш. гласове</td>
<td>
<input type="text"
className={statusM.invalid? 'invalid' : statusM.changed? 'changed' : ''}
name={`${party.id}m`}
value={props.formState.resultsData[`${party.id}m`]}
onChange={props.handleResultsChange}
/>
</td>
</tr>
<tr key={i*3+2}>
<td></td>
<td style={{borderBottom: '1px solid #ccc'}}>общо Б + МГ</td>
<td>
<input type="text"
className={status.invalid? 'invalid' : status.changed? 'changed' : ''}
name={party.id}
value={props.formState.resultsData[party.id]}
onChange={props.handleResultsChange}
/>
</td>
</tr>
</>
<tr key={i}>
<td>{party.id.toString() === '0'? null :
party.color?
<PartyNumber color={party.color}>{party.id}</PartyNumber> :
<PartyNumber color={'white'} textColor={'555'}>{party.id}</PartyNumber>
}
</td>
<td>{party.displayName}</td>
{
props.protocolType === 'paper' || props.protocolType === 'paper-machine'?
<td>
<input type="text"
className={props.fieldStatus[`party${party.id}paper`].invalid? 'invalid' : props.fieldStatus[`party${party.id}paper`].changed? 'changed' : ''}
name={`party${party.id}paper`}
value={props.formState.resultsData[`party${party.id}paper`]}
onChange={props.handleResultsChange}
/>
</td>: null

}
{
[...Array(props.machineCount).keys()].map(i =>
<td>
<input type="text"
className={props.fieldStatus[`party${party.id}machine${i+1}`].invalid? 'invalid' : props.fieldStatus[`party${party.id}machine${i+1}`].changed? 'changed' : ''}
name={`party${party.id}machine${i+1}`}
value={props.formState.resultsData[`party${party.id}machine${i+1}`]}
onChange={props.handleResultsChange}
/>
</td>
)
}

</tr>
);
};

const calculateColCount = () => {
let count = 0;

if(props.protocolType === 'paper' || props.protocolType === 'paper-machine') {
count += 1;
}

count += props.machineCount;

console.log(count);

return count;
};

return(
<div>
<h1>ДАННИ ОТ ИЗБИРАТЕЛНИЯ СПИСЪК</h1>
<ProtocolDetailsTable>
<tbody>
<tr>
<td>
1. Брой на избирателите в избирателния списък при предаването му на СИК,
включително и вписаните в допълнителната страница (под чертата) на избирателния
списък в изборния ден
1. Брой на избирателите в избирателния списък при предаването му на СИК
</td>
<td>
<input
Expand Down Expand Up @@ -360,7 +339,16 @@ export default props => {
</ProtocolDetailsTable>
<hr/>
<h1>7. РАЗПРЕДЕЛЕНИЕ НА ГЛАСОВЕТЕ ПО КАНДИДАТСКИ ЛИСТИ</h1>
<PartyResultsTable isMachine={props.sectionData.isMachine}>
<PartyResultsTable colCount={calculateColCount()}>
<thead>
<th>#</th>
<th>Име</th>
{
props.protocolType === 'paper' || props.protocolType === 'paper-machine'?
<th>Х</th> : null
}
{[...Array(props.machineCount).keys()].map(i => <th>M{i+1}</th>)}
</thead>
<tbody>
{props.parties.filter(party => (props.allParties? true : party.isFeatured))
.map(partyRow)}
Expand Down
6 changes: 3 additions & 3 deletions src/components/process_protocols/validation_form/SectionDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export default props => {
<input type="radio" id="isNotFinal" name="isFinal" value="false" onClick={() => props.setIsFinal(false)}/>
<label for="isNotFinal">Чернова</label>
<input type="radio" id="isFinal" name="isFinal" value="true" onClick={() => props.setIsFinal(true)}/>
<label for="isFinal">Белова</label>
<label for="isFinal">Оригинал</label>
</ChooseProtocolType>
<h5 style={{margin: '10px 0'}}>Изберете вид протокол</h5>
<ChooseProtocolType>
Expand All @@ -158,9 +158,9 @@ export default props => {
<>
<h5 style={{margin: '10px 0'}}>Брой машини</h5>
<ChooseProtocolType>
<input type="radio" id="1machine" name="machineCount" value="1machine" onClick={() => props.setMachineCount(1)}/>
<input type="radio" id="1machine" name="machineCount" value="1machine" onClick={() => props.setMachineCount(1)} checked={props.machineCount === 1}/>
<label for="1machine">1 машина</label>
<input type="radio" id="2machines" name="machineCount" value="2machines" onClick={() => props.setMachineCount(2)}/>
<input type="radio" id="2machines" name="machineCount" value="2machines" onClick={() => props.setMachineCount(2)} checked={props.machineCount === 2}/>
<label for="2machines">2 машини</label>
</ChooseProtocolType>
</> : null
Expand Down
Loading

0 comments on commit 26ec20d

Please sign in to comment.