Skip to content

Commit db15df2

Browse files
aminmarashiaminmarashi
committed
Fix account select in trade info panel
1 parent d5d1796 commit db15df2

File tree

4 files changed

+113
-97
lines changed

4 files changed

+113
-97
lines changed

‎src/botPage/view/TradeInfoPanel/Summary.js

Lines changed: 58 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -24,72 +24,64 @@ export default class Summary extends Component {
2424
color: totalProfit > 0 ? 'green' : 'red',
2525
};
2626
return (
27-
<div>
28-
<h3>
29-
<span>
30-
{translate('Summary')}
31-
</span>
32-
</h3>
33-
34-
<table>
35-
<thead>
36-
<tr>
37-
<th>
38-
{translate('Account')}
39-
</th>
40-
<th>
41-
{translate('No. of runs')}
42-
</th>
43-
<th>
44-
{translate('Total stake')}
45-
</th>
46-
<th>
47-
{translate('Total payout')}
48-
</th>
49-
<th>
50-
{translate('Win')}
51-
</th>
52-
<th>
53-
{translate('Loss')}
54-
</th>
55-
<th>
56-
{translate('Total profit/loss')}
57-
</th>
58-
<th>
59-
{translate('Balance')}
60-
</th>
61-
</tr>
62-
</thead>
63-
<tbody>
64-
<tr>
65-
<td className="accountID">
66-
{accountID}
67-
</td>
68-
<td className="totalRuns">
69-
{totalRuns}
70-
</td>
71-
<td className="totalStake">
72-
{totalStake}
73-
</td>
74-
<td className="totalPayout">
75-
{totalPayout}
76-
</td>
77-
<td style={style.green} className="totalWins">
78-
{totalWins}
79-
</td>
80-
<td style={style.red} className="totalLosses">
81-
{totalLosses}
82-
</td>
83-
<td style={profitColor} className="totalProfit">
84-
{totalProfit}
85-
</td>
86-
<td className="balance">
87-
{balance}
88-
</td>
89-
</tr>
90-
</tbody>
91-
</table>
92-
</div>
27+
<table>
28+
<thead>
29+
<tr>
30+
<th>
31+
{translate('Account')}
32+
</th>
33+
<th>
34+
{translate('No. of runs')}
35+
</th>
36+
<th>
37+
{translate('Total stake')}
38+
</th>
39+
<th>
40+
{translate('Total payout')}
41+
</th>
42+
<th>
43+
{translate('Win')}
44+
</th>
45+
<th>
46+
{translate('Loss')}
47+
</th>
48+
<th>
49+
{translate('Total profit/loss')}
50+
</th>
51+
<th>
52+
{translate('Balance')}
53+
</th>
54+
</tr>
55+
</thead>
56+
<tbody>
57+
<tr>
58+
<td className="accountID">
59+
{accountID}
60+
</td>
61+
<td className="totalRuns">
62+
{totalRuns}
63+
</td>
64+
<td className="totalStake">
65+
{totalStake}
66+
</td>
67+
<td className="totalPayout">
68+
{totalPayout}
69+
</td>
70+
<td style={style.green} className="totalWins">
71+
{totalWins}
72+
</td>
73+
<td style={style.red} className="totalLosses">
74+
{totalLosses}
75+
</td>
76+
<td style={profitColor} className="totalProfit">
77+
{totalProfit}
78+
</td>
79+
<td className="balance">
80+
{balance}
81+
</td>
82+
</tr>
83+
</tbody>
84+
</table>
9385
);
9486
}
9587
}

‎src/botPage/view/TradeInfoPanel/TradeTable.js

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,17 @@ const ProfitColor = ({ value }) =>
2424
</div>;
2525

2626
export default class TradeTable extends Component {
27-
constructor() {
27+
constructor({ accountID }) {
2828
super();
2929
this.state = {
3030
initial: {
3131
id : 0,
3232
rows: [],
3333
},
34-
accountID: 'initial',
34+
[accountID]: {
35+
id : 0,
36+
rows: [],
37+
},
3538
};
3639
this.columns = [
3740
{ key: 'id', width: 70, resizable: true, name: translate('Number') },
@@ -57,9 +60,8 @@ export default class TradeTable extends Component {
5760
profit: getProfit(tradeObj),
5861
};
5962

60-
const accountStat = this.getaccountStat(accountID);
63+
const accountStat = this.getAccountStat(accountID);
6164

62-
this.setState({ accountID });
6365
const rows = accountStat.rows;
6466
const prevRowIndex = rows.findIndex(t => t.reference === trade.reference);
6567

@@ -71,11 +73,11 @@ export default class TradeTable extends Component {
7173
});
7274
}
7375
rowGetter(i) {
74-
const { accountID } = this.state;
76+
const { accountID } = this.props;
7577
return this.state[accountID].rows[i];
7678
}
7779
export() {
78-
const { accountID } = this.state;
80+
const { accountID } = this.props;
7981

8082
const data = json2csv({
8183
data : this.state[accountID].rows,
@@ -92,7 +94,7 @@ export default class TradeTable extends Component {
9294
});
9395
saveAs({ data, filename: 'logs.csv', type: 'text/csv;charset=utf-8' });
9496
}
95-
getaccountStat(accountID) {
97+
getAccountStat(accountID) {
9698
if (!(accountID in this.state)) {
9799
const initialInfo = this.state.initial;
98100
this.setState({ [accountID]: { ...initialInfo } });
@@ -101,21 +103,16 @@ export default class TradeTable extends Component {
101103
return this.state[accountID];
102104
}
103105
render() {
104-
const { accountID } = this.state;
106+
const { accountID } = this.props;
107+
const rows = accountID in this.state ? this.state[accountID].rows : [];
105108

106109
return (
107110
<div>
108-
<h3>
109-
<span>
110-
{translate('Trades')}
111-
</span>
112-
</h3>
113-
114111
<ExportButton onClick={() => this.export()} customStyle={style.tradeTableExport} />
115112
<ReactDataGrid
116113
columns={this.columns}
117114
rowGetter={this.rowGetter.bind(this)}
118-
rowsCount={this.state[accountID].rows.length}
115+
rowsCount={rows.length}
119116
minHeight={minHeight}
120117
/>
121118
</div>

‎src/botPage/view/TradeInfoPanel/index.js

Lines changed: 41 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,67 @@
11
import React, { Component } from 'react';
22
import { observer as globalObserver } from 'binary-common-utils/lib/observer';
3+
import { translate } from '../../../common/i18n';
4+
import { tradePanelAccount } from '../style';
35
import Summary from './Summary';
46
import TradeTable from './TradeTable';
57

68
export default class TradeInfoPanel extends Component {
79
constructor() {
810
super();
9-
this.state = { accountID: 'initial', accountIDList: ['initial'], currentAccountID: '' };
11+
this.state = { accountID: '', accountIDList: [], currentAccountID: '' };
1012
}
1113
componentWillMount() {
1214
globalObserver.register('bot.info', ({ accountID }) => {
1315
const { accountIDList } = this.state;
1416
if (!accountIDList.includes(accountID)) {
1517
this.setState({ accountIDList: [...accountIDList, accountID] });
1618
}
17-
this.setState({ accountID, currentAccountID: accountID });
19+
if (!this.state.accountID) {
20+
this.setState({ accountID });
21+
}
22+
this.setState({ currentAccountID: accountID });
1823
});
1924
}
2025
render() {
2126
const { accountID, currentAccountID } = this.state;
2227

2328
return (
2429
<div>
25-
<select
26-
value={accountID}
27-
rel={el => (this.accountIDDropdown = el)}
28-
onChange={e => this.setState({ accountID: e.target.value })}
29-
>
30-
{this.state.accountIDList.map(account =>
31-
<option value={account}>
32-
{`${account}${account === currentAccountID ? '*' : ''}`}
33-
</option>
34-
)}
35-
</select>
36-
3730
<div className="content">
38-
<Summary accountID={accountID} />
39-
<TradeTable accountID={accountID} />
31+
<div>
32+
<label style={tradePanelAccount}>
33+
{`${translate('Account')}: `}
34+
<select
35+
value={accountID}
36+
rel={el => (this.accountIDDropdown = el)}
37+
onChange={e => this.setState({ accountID: e.target.value })}
38+
>
39+
{this.state.accountIDList.map(account =>
40+
<option value={account}>
41+
{`${account}${account !== currentAccountID
42+
? ` - ${translate('Stopped')}`
43+
: ''}`}
44+
</option>
45+
)}
46+
</select>
47+
</label>
48+
<h3>
49+
<span>
50+
{translate('Summary')}
51+
</span>
52+
</h3>
53+
54+
<Summary accountID={accountID} />
55+
</div>
56+
<div>
57+
<h3>
58+
<span>
59+
{translate('Trades')}
60+
</span>
61+
</h3>
62+
63+
<TradeTable accountID={accountID} />
64+
</div>
4065
</div>
4166
</div>
4267
);

‎src/botPage/view/style.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,3 +79,5 @@ export const bottomWarningLink = { textDecoration: 'underline' };
7979
export const green = { color: 'green' };
8080

8181
export const red = { color: 'red' };
82+
83+
export const tradePanelAccount = { float: 'right' };

0 commit comments

Comments
 (0)