mirror of
https://github.com/guilhermewerner/tomasulo-simulator
synced 2025-06-15 05:14:20 +00:00
Add formik
This commit is contained in:
Werner
@ -10,6 +10,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.3.0",
|
||||
"formik": "^2.4.1",
|
||||
"next": "13.4.4",
|
||||
"react": "18.2.0",
|
||||
"react-bootstrap": "^2.7.4",
|
||||
|
||||
210
pages/index.js
210
pages/index.js
@ -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>
|
||||
</>
|
||||
|
||||
@ -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,
|
||||
|
||||
52
yarn.lock
52
yarn.lock
@ -170,6 +170,11 @@ csstype@^3.0.2:
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
|
||||
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
|
||||
|
||||
deepmerge@^2.1.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
|
||||
integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
|
||||
|
||||
dequal@^2.0.2, dequal@^2.0.3:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
|
||||
@ -183,6 +188,26 @@ dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
|
||||
"@babel/runtime" "^7.8.7"
|
||||
csstype "^3.0.2"
|
||||
|
||||
formik@^2.4.1:
|
||||
version "2.4.1"
|
||||
resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.1.tgz#f2630b51a866c86144a5faf68d31200c9d8ceea9"
|
||||
integrity sha512-ajOB9EmFhXb4PACTlaooVEn7PLtLtBJEZ8fPs+wFZjL5KSGwgAoU+n9DHN8JcqNKcXkloEYYtn1lxrLav18ecQ==
|
||||
dependencies:
|
||||
deepmerge "^2.1.1"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
lodash "^4.17.21"
|
||||
lodash-es "^4.17.21"
|
||||
react-fast-compare "^2.0.1"
|
||||
tiny-warning "^1.0.2"
|
||||
tslib "^1.10.0"
|
||||
|
||||
hoist-non-react-statics@^3.3.0:
|
||||
version "3.3.2"
|
||||
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
|
||||
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
|
||||
dependencies:
|
||||
react-is "^16.7.0"
|
||||
|
||||
invariant@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
|
||||
@ -195,6 +220,16 @@ invariant@^2.2.4:
|
||||
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
|
||||
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
|
||||
|
||||
lodash-es@^4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
|
||||
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
|
||||
|
||||
lodash@^4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
|
||||
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
|
||||
@ -292,7 +327,12 @@ react-dom@18.2.0:
|
||||
loose-envify "^1.1.0"
|
||||
scheduler "^0.23.0"
|
||||
|
||||
react-is@^16.13.1, react-is@^16.3.2:
|
||||
react-fast-compare@^2.0.1:
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
|
||||
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
|
||||
|
||||
react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||
@ -348,6 +388,16 @@ styled-jsx@5.1.1:
|
||||
dependencies:
|
||||
client-only "0.0.1"
|
||||
|
||||
tiny-warning@^1.0.2:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
|
||||
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
|
||||
|
||||
tslib@^1.10.0:
|
||||
version "1.14.1"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
|
||||
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
|
||||
|
||||
tslib@^2.4.0:
|
||||
version "2.5.3"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
|
||||
|
||||
Reference in New Issue
Block a user