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

1
package.json
View File

@ -10,6 +10,7 @@
}, },
"dependencies": { "dependencies": {
"bootstrap": "^5.3.0", "bootstrap": "^5.3.0",
"formik": "^2.4.1",
"next": "13.4.4", "next": "13.4.4",
"react": "18.2.0", "react": "18.2.0",
"react-bootstrap": "^2.7.4", "react-bootstrap": "^2.7.4",

210
pages/index.js
View File

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

69
pages/runner.js
View File

@ -15,6 +15,8 @@ import { ProgramContext } from '../src/ProgramContext';
export default function Home() { export default function Home() {
const { program } = useContext(ProgramContext); const { program } = useContext(ProgramContext);
console.log(JSON.stringify(program));
let baseI = { let baseI = {
issue: null, issue: null,
exeCompleta: null, exeCompleta: null,
@ -22,68 +24,15 @@ export default function Home() {
busy: false, busy: false,
} }
let instructions = [ let instructions = [];
{
for (let i = 0; i < program.length; i++) {
instructions[i] = {
posicao: 0, posicao: 0,
instrucao: { instrucao: program[i],
operacao: "LD",
registradorR: "F6",
registradorS: "32",
registradorT: "R1",
},
...baseI, ...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 = { let baseFu = {
instrucao: null, instrucao: null,

52
yarn.lock
View File

@ -170,6 +170,11 @@ csstype@^3.0.2:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== 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: dequal@^2.0.2, dequal@^2.0.3:
version "2.0.3" version "2.0.3"
resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be" 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" "@babel/runtime" "^7.8.7"
csstype "^3.0.2" 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: invariant@^2.2.4:
version "2.2.4" version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" 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" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== 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: loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0" version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" 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" loose-envify "^1.1.0"
scheduler "^0.23.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" version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -348,6 +388,16 @@ styled-jsx@5.1.1:
dependencies: dependencies:
client-only "0.0.1" 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: tslib@^2.4.0:
version "2.5.3" version "2.5.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"