Skip to content

Commit

Permalink
useForm
Browse files Browse the repository at this point in the history
  • Loading branch information
@rollrat
rollrat committed Nov 27, 2022
1 parent 8765ab3 commit 2337828
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 103 deletions.
22 changes: 22 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-google-charts": "^4.0.0",
"react-hook-form": "^7.39.6",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"reactflow": "^11.3.0",
Expand Down
111 changes: 98 additions & 13 deletions src/components/InsertNodeButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,111 @@
import { Button, Modal } from "react-bootstrap";
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
import React from "react";
import NewInstancePage from "../pages/NewInstancePage";
import { useForm } from "react-hook-form";

const NewInstanceModal = (props: any) => {
const { register, handleSubmit, reset } = useForm();

const onCreateClick = function (data: any) {
console.log(data);
reset();
props.onHide();
};

return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Choose an instance to create
</Modal.Title>
</Modal.Header>
<Modal.Body>
<NewInstancePage></NewInstancePage>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Create</Button>
</Modal.Footer>
<Form onSubmit={handleSubmit(onCreateClick)}>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Choose an instance to create
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group as={Row} className="mb-3" controlId="formInstanceName">
<Form.Label column sm={2}>
Name
</Form.Label>
<Col sm={10}>
<Form.Control
{...register("instanceName")}
type="text"
placeholder="Insert your instance name"
/>
</Col>
</Form.Group>

<Form.Group as={Row} className="mb-3" controlId="formInstanceType">
<Form.Label as="legend" column sm={2}>
Types
</Form.Label>
<Col sm={10}>
<Form.Select
{...register("instanceType")}
aria-label="Type select example"
>
<option>Open this select menu</option>
<option value="normal">Normal</option>
<option value="spot">Spot</option>
<option value="mysql">MySQL</option>
<option value="redis">Redis</option>
</Form.Select>
</Col>
</Form.Group>

<Form.Group as={Row} className="mb-3" controlId="formInstanceSpec">
<Form.Label as="legend" column sm={2}>
Spec
</Form.Label>
<Col sm={10}>
<Form.Select
{...register("instanceSpec")}
aria-label="Spec select example"
>
<option>Open this select menu</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</Form.Select>
</Col>
</Form.Group>

<Form.Group as={Row} className="mb-3" controlId="formInitialScript">
<Form.Label column sm={2}>
Initial Script
</Form.Label>
<Col sm={10}>
<Form.Control
{...register("initialScript")}
as="textarea"
placeholder="Insert your initial script"
style={{ height: "100px" }}
/>
</Col>
</Form.Group>

<Form.Group as={Row} className="mb-3" controlId="formRunScript">
<Form.Label column sm={2}>
Run Script
</Form.Label>
<Col sm={10}>
<Form.Control
{...register("runScript")}
as="textarea"
placeholder="Insert your run script"
style={{ height: "100px" }}
/>
</Col>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button type="submit">Create</Button>
</Modal.Footer>
</Form>
</Modal>
);
};
Expand Down
32 changes: 26 additions & 6 deletions src/components/TempMain.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import { Accordion, Badge } from "react-bootstrap";
import { Accordion, Badge, Container, Navbar } from "react-bootstrap";
import MetricChart from "./chart/MetricChart";
import axios from "axios";
import { getScsContextInstance } from "../context/ScsContext";
import FlowPannel from "./diagram/FlowPannel";
import InsertNodeButton from "./InsertNodeButton";

const Body = styled.div`
min-height: calc(100vh - 180px);
Expand Down Expand Up @@ -75,6 +76,28 @@ function TempMain() {

return (
<Body>
<Navbar bg="dark" variant="dark">
<Container
style={{
flexDirection: "row",
alignItems: "stretch",
width: "100%",
margin: "0 auto",
}}
>
<Navbar.Brand href="#home">
<img
alt=""
src="/img/SCloudOnly.png"
width="30"
height="30"
className="d-inline-block align-top"
/>
{" Simple Cloud System"}
</Navbar.Brand>
<InsertNodeButton />
</Container>
</Navbar>
<MainContentLeft>
<Accordion defaultActiveKey={["0"]} alwaysOpen>
<Accordion.Item eventKey="0">
Expand All @@ -84,9 +107,7 @@ function TempMain() {
</Badge>{" "}
</Accordion.Header>
<Accordion.Body>
<DiagramWrap1>
<FlowPannel/>
</DiagramWrap1>
<DiagramWrap1>{/* <FlowPannel/> */}</DiagramWrap1>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
Expand All @@ -96,8 +117,7 @@ function TempMain() {
</Badge>{" "}
</Accordion.Header>
<Accordion.Body>
<DiagramWrap2>
</DiagramWrap2>
<DiagramWrap2></DiagramWrap2>
</Accordion.Body>
</Accordion.Item>
</Accordion>
Expand Down
8 changes: 4 additions & 4 deletions src/components/custom-node-ts/nodestyle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
border: 1px solid #555;
border-radius: 5px;
text-align: left;
width: 180px;
height: 130px;
width: 230px;
height: 120px;
padding: 10px;
}

Expand All @@ -26,7 +26,7 @@
border: 1px solid #555;
border-radius: 5px;
text-align: left;
width: 180px;
height: 130px;
width: 230px;
height: 120px;
padding: 10px;
}
74 changes: 0 additions & 74 deletions src/pages/NewInstancePage.tsx
View file

This file was deleted.

12 changes: 6 additions & 6 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5276,11 +5276,6 @@
"resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
"version" "1.0.0"

"fsevents@^2.3.2", "fsevents@~2.3.2":
"integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
"resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
"version" "2.3.2"

"function-bind@^1.1.1":
"integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
"resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
Expand Down Expand Up @@ -8191,6 +8186,11 @@
"resolved" "https://registry.npmjs.org/react-google-charts/-/react-google-charts-4.0.0.tgz"
"version" "4.0.0"

"react-hook-form@^7.39.6":
"integrity" "sha512-f6bghLpUm1nfUtuJ09Zsaz2AkuHAGghngYAsKFGarFpi/NQl6JcGQ/ETc34tvLtjVo6hSLYw+/4dgBt0X54Jvw=="
"resolved" "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.39.6.tgz"
"version" "7.39.6"

"react-is@^16.13.1":
"integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
"resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
Expand Down Expand Up @@ -8306,7 +8306,7 @@
"loose-envify" "^1.4.0"
"prop-types" "^15.6.2"

"react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>= 16.8.0", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.3.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0", "react@>=17", "react@16.* || 17.*", "react@18.*":
"react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>= 16.8.0", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.3.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0", "react@>=17", "react@16.* || 17.*", "react@18.*":
"integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
"resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
"version" "18.2.0"
Expand Down

0 comments on commit 2337828

Please sign in to comment.