bbgo_origin/frontend/components/ReviewStrategies.js

158 lines
3.9 KiB
JavaScript
Raw Normal View History

import React from 'react';
2022-06-12 15:11:42 +00:00
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import List from '@mui/material/List';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardContent from '@mui/material/CardContent';
import Avatar from '@mui/material/Avatar';
import IconButton from '@mui/material/IconButton';
import MoreVertIcon from '@mui/icons-material/MoreVert';
2022-06-12 15:11:42 +00:00
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
2022-06-12 15:19:39 +00:00
import { makeStyles } from '@mui/styles';
2022-06-11 00:57:54 +00:00
import { queryStrategies } from '../api/bbgo';
const useStyles = makeStyles((theme) => ({
2022-06-11 00:57:54 +00:00
strategyCard: {
margin: theme.spacing(1),
},
formControl: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
minWidth: 120,
},
buttons: {
display: 'flex',
justifyContent: 'flex-end',
marginTop: theme.spacing(2),
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
'& > *': {
marginLeft: theme.spacing(1),
},
2022-06-11 00:57:54 +00:00
},
}));
function configToTable(config) {
2022-06-11 00:57:54 +00:00
const rows = Object.getOwnPropertyNames(config).map((k) => {
return {
key: k,
val: config[k],
};
});
return (
<TableContainer>
<Table aria-label="strategy attributes">
<TableHead>
<TableRow>
<TableCell>Field</TableCell>
<TableCell align="right">Value</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.key}>
<TableCell component="th" scope="row">
{row.key}
</TableCell>
<TableCell align="right">{row.val}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
2022-06-11 00:57:54 +00:00
export default function ReviewStrategies({ onBack, onNext }) {
const classes = useStyles();
const [strategies, setStrategies] = React.useState([]);
React.useEffect(() => {
queryStrategies((strategies) => {
setStrategies(strategies || []);
}).catch((err) => {
console.error(err);
});
}, []);
const items = strategies.map((o, i) => {
const mounts = o.on || [];
delete o.on;
const config = o[o.strategy];
const titleComps = [o.strategy.toUpperCase()];
if (config.symbol) {
titleComps.push(config.symbol);
}
const title = titleComps.join(' ');
return (
2022-06-11 00:57:54 +00:00
<Card key={i} className={classes.strategyCard}>
<CardHeader
avatar={<Avatar aria-label="strategy">G</Avatar>}
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
title={title}
subheader={`Exchange ${mounts.map((m) => m.toUpperCase())}`}
/>
<CardContent>
<Typography variant="body2" color="textSecondary" component="p">
Strategy will be executed on session {mounts.join(',')} with the
following configuration:
</Typography>
{configToTable(config)}
</CardContent>
</Card>
);
2022-06-11 00:57:54 +00:00
});
return (
<React.Fragment>
<Typography variant="h6" gutterBottom>
Review Strategies
</Typography>
<List component="nav">{items}</List>
<div className={classes.buttons}>
<Button
onClick={() => {
if (onBack) {
onBack();
}
}}
>
Add New Strategy
</Button>
<Button
variant="contained"
color="primary"
onClick={() => {
if (onNext) {
onNext();
}
}}
>
Next
</Button>
</div>
</React.Fragment>
);
}