mirror of
https://github.com/RoboSats/robosats.git
synced 2025-01-18 12:11:35 +00:00
Rework book as datagrid
This commit is contained in:
Reckless_Satoshi
parent
03653cb09a
commit
7a6cf943ee
@ -92,7 +92,7 @@ class Logics():
|
||||
premium = int(premium*100) # 2 decimals left
|
||||
price = order_rate
|
||||
|
||||
significant_digits = 6
|
||||
significant_digits = 5
|
||||
price = round(price, significant_digits - int(math.floor(math.log10(abs(price)))) - 1)
|
||||
|
||||
return price, premium
|
||||
|
||||
16
frontend/package-lock.json
generated
16
frontend/package-lock.json
generated
@ -1674,6 +1674,17 @@
|
||||
"react-is": "^17.0.2"
|
||||
}
|
||||
},
|
||||
"@mui/x-data-grid": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.2.2.tgz",
|
||||
"integrity": "sha512-FI/fwsMMATUdEHwiGGkBdiw/p3G6+iUlkoklBzzsB6MY0Mb+Voj+s/waoFM3uyNJ+h4jof8NTS/Gs8IfDiyciA==",
|
||||
"requires": {
|
||||
"@mui/utils": "^5.2.3",
|
||||
"clsx": "^1.1.1",
|
||||
"prop-types": "^15.8.0",
|
||||
"reselect": "^4.1.5"
|
||||
}
|
||||
},
|
||||
"@popperjs/core": {
|
||||
"version": "2.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
|
||||
@ -7049,6 +7060,11 @@
|
||||
"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
|
||||
"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
|
||||
},
|
||||
"reselect": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz",
|
||||
"integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.20.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
"@mui/icons-material": "^5.2.5",
|
||||
"@mui/material": "^5.2.7",
|
||||
"@mui/system": "^5.2.6",
|
||||
"@mui/x-data-grid": "^5.2.2",
|
||||
"material-ui-image": "^3.3.2",
|
||||
"react-countdown": "^2.3.2",
|
||||
"react-markdown": "^7.1.2",
|
||||
|
||||
@ -1,26 +1,27 @@
|
||||
import React, { Component } from "react";
|
||||
import { Paper, Button , Divider, CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material";
|
||||
import { Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material";
|
||||
import { Link } from 'react-router-dom'
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
|
||||
export default class BookPage extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
orders: new Array(),
|
||||
orders: new Array({id:0,}),
|
||||
currency: 0,
|
||||
type: 1,
|
||||
currencies_dict: {"0":"ANY"},
|
||||
loading: true,
|
||||
};
|
||||
this.getCurrencyDict()
|
||||
this.getOrderDetails(this.state.type,this.state.currency)
|
||||
this.getOrderDetails(this.state.type, this.state.currency)
|
||||
this.state.currencyCode = this.getCurrencyCode(this.state.currency)
|
||||
}
|
||||
|
||||
getOrderDetails(type,currency) {
|
||||
getOrderDetails(type, currency) {
|
||||
fetch('/api/book' + '?currency=' + currency + "&type=" + type)
|
||||
.then((response) => response.json())
|
||||
.then((data) =>
|
||||
.then((data) => console.log(data) &
|
||||
this.setState({
|
||||
orders: data,
|
||||
not_found: data.not_found,
|
||||
@ -28,7 +29,7 @@ export default class BookPage extends Component {
|
||||
}));
|
||||
}
|
||||
|
||||
handleCardClick=(e)=>{
|
||||
handleRowClick=(e)=>{
|
||||
console.log(e)
|
||||
this.props.history.push('/order/' + e);
|
||||
}
|
||||
@ -67,54 +68,56 @@ export default class BookPage extends Component {
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
|
||||
bookListItems=()=>{
|
||||
return (this.state.orders.map((order) =>
|
||||
<>
|
||||
<ListItemButton value={order.id} onClick={() => this.handleCardClick(order.id)}>
|
||||
bookListTable=()=>{
|
||||
return (
|
||||
<div style={{ height: 475, width: '100%' }}>
|
||||
<DataGrid
|
||||
rows={
|
||||
this.state.orders.map((order) =>
|
||||
({id: order.id,
|
||||
avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
|
||||
robosat: order.maker_nick,
|
||||
type: order.type ? "Sell": "Buy",
|
||||
amount: parseFloat(parseFloat(order.amount).toFixed(4)),
|
||||
currency: this.getCurrencyCode(order.currency),
|
||||
payment_method: order.payment_method,
|
||||
price: order.price,
|
||||
premium: order.premium,
|
||||
})
|
||||
)}
|
||||
|
||||
<ListItemAvatar >
|
||||
<Avatar
|
||||
alt={order.maker_nick}
|
||||
src={window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png'}
|
||||
/>
|
||||
</ListItemAvatar>
|
||||
|
||||
<ListItemText>
|
||||
<Typography variant="h6">
|
||||
{order.maker_nick+" "}
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
|
||||
<ListItemText align='left'>
|
||||
<Typography variant="subtitle1">
|
||||
<b>{order.type ? " Sells ": " Buys "} BTC </b> for {parseFloat(
|
||||
parseFloat(order.amount).toFixed(4))+" "+ this.getCurrencyCode(order.currency)+" "}
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
columns={[
|
||||
// { field: 'id', headerName: 'ID', width: 40 },
|
||||
{ field: 'robosat', headerName: 'RoboSat', width: 240,
|
||||
renderCell: (params) => {return (
|
||||
<ListItemButton style={{ cursor: "pointer" }}>
|
||||
<ListItemAvatar>
|
||||
<Avatar alt={params.row.robosat} src={params.row.avatar} />
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={params.row.robosat}/>
|
||||
</ListItemButton>
|
||||
);
|
||||
} },
|
||||
{ field: 'type', headerName: 'Type', width: 60 },
|
||||
{ field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
|
||||
{ field: 'currency', headerName: 'Currency', width: 100 },
|
||||
{ field: 'payment_method', headerName: 'Payment Method', width: 180 },
|
||||
{ field: 'price', headerName: 'Price', type: 'number', width: 140,
|
||||
renderCell: (params) => {return (
|
||||
<div style={{ cursor: "pointer" }}>{this.pn(params.row.price) + " " +params.row.currency+ "/BTC" }</div>
|
||||
)} },
|
||||
{ field: 'premium', headerName: 'Premium', type: 'number', width: 100,
|
||||
renderCell: (params) => {return (
|
||||
<div style={{ cursor: "pointer" }}>{parseFloat(parseFloat(params.row.premium).toFixed(4))+"%" }</div>
|
||||
)} },
|
||||
]}
|
||||
|
||||
<ListItemText align='left'>
|
||||
<Typography variant="subtitle1">
|
||||
via <b>{order.payment_method}</b>
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
|
||||
<ListItemText align='right'>
|
||||
<Typography variant="subtitle1">
|
||||
at <b>{this.pn(order.price) + " " + this.getCurrencyCode(order.currency)}/BTC</b>
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
|
||||
<ListItemText align='right'>
|
||||
<Typography variant="subtitle1">
|
||||
{order.premium > 1 ? "🔴" : "🔵" } <b>{parseFloat(parseFloat(order.premium).toFixed(4))}%</b>
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
|
||||
</ListItemButton>
|
||||
|
||||
<Divider/>
|
||||
</>
|
||||
));
|
||||
pageSize={7}
|
||||
onRowClick={(params) => this.handleRowClick(params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places.
|
||||
rowsPerPageOptions={[7]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -196,10 +199,10 @@ export default class BookPage extends Component {
|
||||
</Grid>)
|
||||
:
|
||||
<Grid item xs={12} align="center">
|
||||
<Paper elevation={0} style={{width: 900, maxHeight: 500, overflow: 'auto'}}>
|
||||
<List >
|
||||
{this.bookListItems()}
|
||||
</List>
|
||||
<Paper elevation={0} style={{width: 910, maxHeight: 500, overflow: 'auto'}}>
|
||||
|
||||
{this.state.loading ? null : this.bookListTable()}
|
||||
|
||||
</Paper>
|
||||
</Grid>
|
||||
}
|
||||
|
||||
1
setup.md
1
setup.md
@ -116,6 +116,7 @@ npm install react-markdown
|
||||
npm install websocket
|
||||
npm install react-countdown
|
||||
npm install @mui/icons-material
|
||||
npm install @mui/x-data-grid
|
||||
```
|
||||
Note we are using mostly MaterialUI V5 (@mui/material) but Image loading from V4 (@material-ui/core) extentions (so both V4 and V5 are needed)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user