Continue adding instructions input table

This commit is contained in:
Caio Eduardo Ramos Arães
2023-06-08 17:03:39 -03:00
parent 1daa28b462
commit 991b03cbad

View File

@ -1,10 +1,76 @@
import Head from 'next/head' import Head from 'next/head'
import Form from 'react-bootstrap/Form'; import Form from 'react-bootstrap/Form';
import Table from 'react-bootstrap/Table'
import { useState } from 'react'; import { useState } from 'react';
import { Container } from 'react-bootstrap'; import { Container, Row, Col } from 'react-bootstrap';
export default function Home() { export default function Home() {
const [instructionStatus, setInstructionStatus] = useState([]); const [instructionStatus, setInstructionStatus] = 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="">Instrução</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 (
<> <>
@ -22,92 +88,38 @@ export default function Home() {
</Head> </Head>
<main> <main>
<Container> <Container>
<Form.Select aria-label="Default select example"> <Row>
<option>Instrução 0</option> <div className="my-4">
<option value="ADD">ADD</option> <h3>Lista de Instruções</h3>
<option value="ADDD">ADDD</option> </div>
<option value="BEQ">BEQ</option> </Row>
<option value="BNEZ">BNEZ</option> <Row className="mb-3">
<option value="DADDUI">DADDUI</option> <Col>
<option value="DIVD">DIVD</option> <Form.Control
<option value="LD">LD</option> className="form-control-sm"
<option value="MULTD">MULTD</option> type="number"
<option value="SD">SD</option> placeholder="Selecione o número de instruções"
<option value="SUBD">SUBD</option> onChange={handleGenerateTable}
</Form.Select> />
<Form.Select aria-label="Default select example"> </Col>
<option>Instrução 1</option> </Row>
<option value="ADD">ADD</option> <Row>
<option value="ADDD">ADDD</option> <Col>
<option value="BEQ">BEQ</option> <Table bordered striped>
<option value="BNEZ">BNEZ</option> <thead>
<option value="DADDUI">DADDUI</option> <tr>
<option value="DIVD">DIVD</option> <th>Instrução</th>
<option value="LD">LD</option> <th>Operando 3</th>
<option value="MULTD">MULTD</option> <th>Operando 2</th>
<option value="SD">SD</option> <th>Operando 1</th>
<option value="SUBD">SUBD</option> </tr>
</Form.Select> </thead>
<Form.Select aria-label="Default select example"> <tbody>
<option>Instrução 2</option> {instructionStatus}
<option value="ADD">ADD</option> </tbody>
<option value="ADDD">ADDD</option> </Table>
<option value="BEQ">BEQ</option> </Col>
<option value="BNEZ">BNEZ</option> </Row>
<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>
</Form.Select>
<Form.Select aria-label="Default select example">
<option>Instrução 3</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>
</Form.Select>
<Form.Select aria-label="Default select example">
<option>Instrução 4</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>
</Form.Select>
<Form.Select aria-label="Default select example">
<option>Instrução 5</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>
</Form.Select>
<Form.Label htmlFor="inputOperand"></Form.Label>
<Form.Control
type="text"
id="inputOperand"
aria-describedby="passwordHelpBlock"
/>
</Container> </Container>
</main> </main>
</> </>