From ee3c76d3fba26badd647097fef65f794f30ae92a Mon Sep 17 00:00:00 2001
From: c9s <yoan@maicoin.com>
Date: Mon, 1 Feb 2021 18:23:26 +0800
Subject: [PATCH] add session form and page

---
 frontend/components/ExchangeSessionForm.js   | 134 +++++++++++++++++++
 frontend/components/ExchangeSessionReview.js |   3 +
 frontend/components/ExchangeSessionTest.js   |   4 +
 frontend/pages/setup/session.js              |  39 +++++-
 4 files changed, 177 insertions(+), 3 deletions(-)
 create mode 100644 frontend/components/ExchangeSessionForm.js
 create mode 100644 frontend/components/ExchangeSessionReview.js
 create mode 100644 frontend/components/ExchangeSessionTest.js

diff --git a/frontend/components/ExchangeSessionForm.js b/frontend/components/ExchangeSessionForm.js
new file mode 100644
index 000000000..fca9d2743
--- /dev/null
+++ b/frontend/components/ExchangeSessionForm.js
@@ -0,0 +1,134 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import TextField from '@material-ui/core/TextField';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+
+import Checkbox from '@material-ui/core/Checkbox';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+
+import {makeStyles} from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+    formControl: {
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(1),
+        minWidth: 120,
+    },
+}));
+
+export default function ExchangeSessionForm() {
+
+    const classes = useStyles();
+    const [exchangeType, setExchangeType] = React.useState('max');
+
+
+    const [isMargin, setIsMargin] = React.useState(false);
+    const [isIsolatedMargin, setIsIsolatedMargin] = React.useState(false);
+    const [isolatedMarginSymbol, setIsolatedMarginSymbol] = React.useState("");
+
+    const handleExchangeTypeChange = (event) => {
+        setExchangeType(event.target.value);
+    };
+
+    const handleIsMarginChange = (event) => {
+        setIsMargin(event.target.checked);
+    };
+
+    const handleIsIsolatedMarginChange = (event) => {
+        setIsIsolatedMargin(event.target.checked);
+    };
+
+    return (
+        <React.Fragment>
+            <Typography variant="h6" gutterBottom>
+                Add Exchange Session
+            </Typography>
+            <Grid container spacing={3}>
+
+                <Grid item xs={12}>
+                    <FormControl className={classes.formControl}>
+                        <InputLabel id="exchange-type-select-label">Exchange Type</InputLabel>
+                        <Select
+                            labelId="exchange-type-select-label"
+                            id="exchange-type-select"
+                            value={exchangeType}
+                            onChange={handleExchangeTypeChange}
+                        >
+                            <MenuItem value={"binance"}>Binance</MenuItem>
+                            <MenuItem value={"max"}>Max</MenuItem>
+                        </Select>
+                    </FormControl>
+                </Grid>
+
+                <Grid item xs={12} sm={12}>
+                    <TextField
+                        required
+                        id="name"
+                        name="name"
+                        label="Session Name"
+                        fullWidth
+                        autoComplete="given-name"
+                    />
+                </Grid>
+
+                <Grid item xs={12} sm={6}>
+                    <TextField id="state" name="state" label="State/Province/Region" fullWidth/>
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                    <TextField
+                        required
+                        id="zip"
+                        name="zip"
+                        label="Zip / Postal code"
+                        fullWidth
+                        autoComplete="shipping postal-code"
+                    />
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                    <TextField
+                        required
+                        id="country"
+                        name="country"
+                        label="Country"
+                        fullWidth
+                        autoComplete="shipping country"
+                    />
+                </Grid>
+
+                <Grid item xs={12}>
+                    <FormControlLabel
+                        control={<Checkbox color="secondary" name="isMargin" onChange={handleIsMarginChange}
+                                           value="1"/>}
+                        label="Use margin trading. This is only available for Binance"
+                    />
+                </Grid>
+
+                <Grid item xs={12}>
+                    <FormControlLabel
+                        control={<Checkbox color="secondary" name="isIsolatedMargin"
+                                           onChange={handleIsIsolatedMarginChange} value="1"/>}
+                        label="Use isolated margin trading, if this is set, you can only trade one symbol with one session. This is only available for Binance"
+                    />
+                </Grid>
+
+                {isIsolatedMargin ?
+                    <Grid item xs={12}>
+                        <TextField
+                            required
+                            id="isolatedMarginSymbol"
+                            name="isolatedMarginSymbol"
+                            label="Isolated Margin Symbol"
+                            fullWidth
+                        />
+                    </Grid>
+                    : null}
+
+
+            </Grid>
+        </React.Fragment>
+    );
+}
diff --git a/frontend/components/ExchangeSessionReview.js b/frontend/components/ExchangeSessionReview.js
new file mode 100644
index 000000000..9bd032dc6
--- /dev/null
+++ b/frontend/components/ExchangeSessionReview.js
@@ -0,0 +1,3 @@
+export default function ExchangeSessionReview() {
+    return <> </>;
+}
diff --git a/frontend/components/ExchangeSessionTest.js b/frontend/components/ExchangeSessionTest.js
new file mode 100644
index 000000000..8eb9a8385
--- /dev/null
+++ b/frontend/components/ExchangeSessionTest.js
@@ -0,0 +1,4 @@
+
+export default function ExchangeSessionTest() {
+    return <> </>;
+}
diff --git a/frontend/pages/setup/session.js b/frontend/pages/setup/session.js
index 833a1e60d..6d1b9c62d 100644
--- a/frontend/pages/setup/session.js
+++ b/frontend/pages/setup/session.js
@@ -4,20 +4,41 @@ import {makeStyles} from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+
+import ExchangeSessionForm from "../../components/ExchangeSessionForm";
+import ExchangeSessionReview from "../../components/ExchangeSessionReview";
+import ExchangeSessionTest from "../../components/ExchangeSessionTest";
 
 import PlainLayout from '../../layouts/PlainLayout';
 
 const useStyles = makeStyles((theme) => ({
     paper: {
-        height: 140,
-    },
-    control: {
         padding: theme.spacing(2),
     },
 }));
 
+const steps = ['Add Exchange Session', 'Review Settings', 'Test Connection'];
+
+function getStepContent(step) {
+    switch (step) {
+        case 0:
+            return <ExchangeSessionForm/>;
+        case 1:
+            return <ExchangeSessionReview/>;
+        case 2:
+            return <ExchangeSessionTest/>;
+        default:
+            throw new Error('Unknown step');
+    }
+}
+
 export default function SetupSession() {
     const classes = useStyles();
+    const [activeStep, setActiveStep] = React.useState(0);
+
     return (
         <PlainLayout>
             <Box m={4}>
@@ -25,6 +46,18 @@ export default function SetupSession() {
                     <Typography variant="h4" component="h2" gutterBottom>
                         Setup Session
                     </Typography>
+
+                    <Stepper activeStep={activeStep} className={classes.stepper}>
+                        {steps.map((label) => (
+                            <Step key={label}>
+                                <StepLabel>{label}</StepLabel>
+                            </Step>
+                        ))}
+                    </Stepper>
+
+                    <React.Fragment>
+                        {getStepContent(activeStep)}
+                    </React.Fragment>
                 </Paper>
             </Box>
         </PlainLayout>