Instructions input table rework

This commit is contained in:
Caio Eduardo Ramos Arães
2023-06-08 17:47:06 -03:00
parent 5f56f11324
commit c8d0a29a64

View File

@ -25,75 +25,7 @@ export default function Home() {
router.push('/runner'); router.push('/runner');
}; };
const [instructionStatus, setInstructionStatus] = useState([]); const [instructionList, setInstructionList] = useState([]);
const geraTabelaParaInserirInstrucoes = (nInst) => {
let tabela = [];
for (let i = 0; i < nInst; i++) {
let d = "D" + i;
let r = "R" + i;
let s = "S" + i;
let t = "T" + i;
tabela.push(
<tr key={i}>
<td>
<select className="form-control" size="1" name={d} id={d}>
<option value="">Operand</option>
<option value="ADD">ADD</option>
<option value="ADDD">ADDD</option>
<option value="BEQ">BEQ</option>
<option value="BNEZ">BNEZ</option>
<option value="DADDUI">DADDUI</option>
<option value="DIVD">DIVD</option>
<option value="LD">LD</option>
<option value="MULTD">MULTD</option>
<option value="SD">SD</option>
<option value="SUBD">SUBD</option>
</select>
</td>
<td>
<input
className="form-control"
type="text"
name={r}
id={r}
size="3"
maxLength="3"
/>
</td>
<td>
<input
className="form-control"
type="text"
name={s}
id={s}
size="3"
maxLength="5"
/>
</td>
<td>
<input
className="form-control"
type="text"
name={t}
id={t}
size="3"
maxLength="3"
/>
</td>
</tr>
);
}
return tabela;
};
const handleGenerateTable = (event) => {
const nInst = event.target.value;
setInstructionStatus(geraTabelaParaInserirInstrucoes(nInst));
};
return ( return (
<> <>
@ -130,13 +62,12 @@ export default function Home() {
className="form-control-sm" className="form-control-sm"
type="number" type="number"
placeholder="Select number of instructions" placeholder="Select number of instructions"
onChange={handleGenerateTable}
/> />
</Col> </Col>
</Row> </Row>
<Row> <Row className="row my-4">
<Col> <Col>
<Table bordered> <Table bordered hover>
<thead> <thead>
<tr> <tr>
<th>Op</th> <th>Op</th>
@ -146,7 +77,54 @@ export default function Home() {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{instructionStatus} {instructionList.map((instr, index) => (
<tr>
<td>{`${instr.instrucao.operacao} ${instr.instrucao.registradorR} ${instr.instrucao.registradorS} ${instr.instrucao.registradorT}`}</td>
<td>
<option value="">Operand</option>
<option value="ADD">ADD</option>
<option value="ADDD">ADDD</option>
<option value="BEQ">BEQ</option>
<option value="BNEZ">BNEZ</option>
<option value="DADDUI">DADDUI</option>
<option value="DIVD">DIVD</option>
<option value="LD">LD</option>
<option value="MULTD">MULTD</option>
<option value="SD">SD</option>
<option value="SUBD">SUBD</option>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={r}
id={r}
size="3"
maxLength="3"
/>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={s}
id={s}
size="3"
maxLength="5"
/>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={t}
id={t}
size="3"
maxLength="3"
/>
</td>
</tr>
))}
</tbody> </tbody>
</Table> </Table>
</Col> </Col>