guilhermewerner/tomasulo-simulator
1
0
Fork 0
mirror of https://github.com/guilhermewerner/tomasulo-simulator synced 2025-06-15 13:24:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add formik

Browse Source
This commit is contained in:
Werner
2023-06-08 18:31:16 -03:00
parent a82cf2bf4e
commit b96b904d34
4 changed files with 195 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
pages/index.js
View File

@ -14,17 +14,58 @@ import Button from 'react-bootstrap/Button';
import { useRouter } from 'next/router';
import { useContext } from 'react';
import { ProgramContext } from '../src/ProgramContext';
import * as formik from "formik";
export default function Home() {
const { Formik } = formik;
const router = useRouter();
const { updateProgram } = useContext(ProgramContext);
const handleClick = () => {
updateProgram(instructionList);
const handleClick = async (values) => {
console.log(JSON.stringify(values));
updateProgram(values);
router.push('/runner');
};
let [instructionList, setInstructionList] = useState([{}, {}, {}, {}, {}, {}]);
let instructionList = [
{
operacao: "LD",
registradorR: "F6",
registradorS: "34",
registradorT: "R1",
},
{
operacao: "LD",
registradorR: "F2",
registradorS: "45",
registradorT: "R3",
},
{
operacao: "MULTD",
registradorR: "F0",
registradorS: "F2",
registradorT: "F4",
},
{
operacao: "SUBD",
registradorR: "F8",
registradorS: "F6",
registradorT: "F2",
},
{
operacao: "DIVD",
registradorR: "F10",
registradorS: "F0",
registradorT: "F6",
},
{
operacao: "ADDD",
registradorR: "F6",
registradorS: "F8",
registradorT: "F2",
}
];
return (
<>
@ -47,79 +88,96 @@ export default function Home() {
</Navbar>
<main>
<Container>
<Row className="row my-4">
<Col>
<h3>Instructions</h3>
</Col>
<Col className="text-end">
<Button className="ms-4" variant="primary" onClick={handleClick}>Execute</Button>
</Col>
</Row>
<Row className="row my-4">
<Col>
<Table bordered hover>
<thead>
<tr>
<th>OP</th>
<th>RD</th>
<th>RS</th>
<th>RT</th>
</tr>
</thead>
<tbody>
{instructionList.map((d, i) => (
<tr>
<td>
<Form.Select aria-label="Default select example">
<option value="">-- Select --</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>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={`formNameR{i}`}
id={`formIdR{i}`}
size="3"
maxLength="3"
/>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={`formNameS{i}`}
id={`formIdS{i}`}
size="3"
maxLength="5"
/>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={`formNameT{i}`}
id={`formIdT{i}`}
size="3"
maxLength="3"
/>
</td>
</tr>
))}
</tbody>
</Table>
</Col>
</Row>
<Formik
onSubmit={handleClick}
initialValues={instructionList}
>
{({ handleSubmit, handleChange, values, touched, errors }) => (
<Form noValidate onSubmit={handleSubmit}>
<Row className="row my-4">
<Col>
<h3>Instructions</h3>
</Col>
<Col className="text-end">
<Button className="ms-4" variant="primary" type="submit">Execute</Button>
</Col>
</Row>
<Row className="row my-4">
<Col>
<Table bordered hover>
<thead>
<tr>
<th>OP</th>
<th>RD</th>
<th>RS</th>
<th>RT</th>
</tr>
</thead>
<tbody>
{instructionList.map((d, i) => (
<tr>
<td>
<Form.Select
aria-label="Default select example"
value={values[i].operacao}
onChange={handleChange}
name={`[${i}].operacao`}
>
<option value="">-- Select --</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>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={`[${i}].registradorR`}
size="3"
maxLength="3"
value={values[i].registradorR}
onChange={handleChange}
/>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={`[${i}].registradorS`}
size="3"
maxLength="5"
value={values[i].registradorS}
onChange={handleChange}
/>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={`[${i}].registradorT`}
size="3"
maxLength="3"
value={values[i].registradorT}
onChange={handleChange}
/>
</td>
</tr>
))}
</tbody>
</Table>
</Col>
</Row>
</Form>
)}
</Formik>
</Container>
</main>
</>

69
pages/runner.js
View File

@ -15,6 +15,8 @@ import { ProgramContext } from '../src/ProgramContext';
export default function Home() {
const { program } = useContext(ProgramContext);
console.log(JSON.stringify(program));
let baseI = {
issue: null,
exeCompleta: null,
@ -22,68 +24,15 @@ export default function Home() {
busy: false,
}
let instructions = [
{
let instructions = [];
for (let i = 0; i < program.length; i++) {
instructions[i] = {
posicao: 0,
instrucao: {
operacao: "LD",
registradorR: "F6",
registradorS: "32",
registradorT: "R1",
},
instrucao: program[i],
...baseI,
},
{
posicao: 1,
instrucao: {
operacao: "LD",
registradorR: "F2",
registradorS: "45",
registradorT: "R3",
},
...baseI,
},
{
posicao: 2,
instrucao: {
operacao: "MULTD",
registradorR: "F0",
registradorS: "F2",
registradorT: "F4",
},
...baseI,
},
{
posicao: 3,
instrucao: {
operacao: "SUBD",
registradorR: "F8",
registradorS: "F6",
registradorT: "F2",
},
...baseI,
},
{
posicao: 4,
instrucao: {
operacao: "DIVD",
registradorR: "F10",
registradorS: "F0",
registradorT: "F6",
},
...baseI,
},
{
posicao: 5,
instrucao: {
operacao: "ADDD",
registradorR: "F6",
registradorS: "F8",
registradorT: "F2",
},
...baseI,
}
];
};
}
let baseFu = {
instrucao: null,