mirror of
https://github.com/guilhermewerner/tomasulo-simulator
synced 2025-06-15 13:24:20 +00:00
Instructions input table rework
This commit is contained in:
124
pages/index.js
124
pages/index.js
@ -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>
|
||||||
|
Reference in New Issue
Block a user