diff --git a/src/botPage/bot/TradeEngine/OpenContract.js b/src/botPage/bot/TradeEngine/OpenContract.js index 6f6a36fe8f..94effe6f64 100644 --- a/src/botPage/bot/TradeEngine/OpenContract.js +++ b/src/botPage/bot/TradeEngine/OpenContract.js @@ -1,6 +1,6 @@ import { roundBalance } from '../../common/tools'; import { doUntilDone } from '../tools'; -import { contractStatus, contract as broadcastContract } from '../broadcast'; +import { contractStatus, contractSettled, contract as broadcastContract } from '../broadcast'; import { sell, openContractReceived } from './state/actions'; const AFTER_FINISH_TIMEOUT = 5; @@ -27,7 +27,9 @@ export default Engine => contractStatus({ id : 'contract.sold', data: contract.transaction_ids.sell, + contract, }); + contractSettled(contract); this.contractId = ''; this.updateTotals(contract); if (this.afterPromise) { @@ -67,7 +69,9 @@ export default Engine => this.unsubscribeOpenContract(); doUntilDone(() => this.api.subscribeToOpenContract(contractId)).then(r => { - ({ proposal_open_contract: { id: this.openContractId } } = r); + ({ + proposal_open_contract: { id: this.openContractId }, + } = r); }); } resetSubscriptionTimeout(timeout = this.getContractDuration() + AFTER_FINISH_TIMEOUT) { diff --git a/src/botPage/bot/broadcast.js b/src/botPage/bot/broadcast.js index 7ffc8f3d03..4c9a236ac6 100644 --- a/src/botPage/bot/broadcast.js +++ b/src/botPage/bot/broadcast.js @@ -4,6 +4,8 @@ export const contract = c => globalObserver.emit('bot.contract', c); export const contractStatus = c => globalObserver.emit('contract.status', c); +export const contractSettled = c => globalObserver.emit('contract.settled', c); + export const info = i => globalObserver.emit('bot.info', i); export const notify = (className, message) => globalObserver.emit('Notify', { className, message, position: 'right' }); diff --git a/src/botPage/view/TradeInfoPanel/TradeTable.js b/src/botPage/view/TradeInfoPanel/TradeTable.js index fe5bdef7b1..adb7881c28 100644 --- a/src/botPage/view/TradeInfoPanel/TradeTable.js +++ b/src/botPage/view/TradeInfoPanel/TradeTable.js @@ -19,10 +19,18 @@ const getProfit = ({ sell_price: sellPrice, buy_price: buyPrice, currency }) => return ''; }; +const getTimestamp = date => { + const buyDate = new Date(date * 1000); + return `${buyDate.toISOString().split('T')[0]} ${buyDate.toTimeString().slice(0, 8)} ${ + buyDate.toTimeString().split(' ')[1] + }`; +}; + const minHeight = 290; const rowHeight = 25; -const ProfitColor = ({ value }) =>
0 ? style.green : style.red}>{value}
; +const ProfitColor = ({ value }) =>
0 ? style.greenLeft : style.redLeft}>{value}
; +const StatusFormat = ({ value }) =>
{value}
; export default class TradeTable extends Component { constructor({ accountID }) { @@ -39,15 +47,18 @@ export default class TradeTable extends Component { }; this.columns = [ { key: 'timestamp', width: 192, resizable: true, name: translate('Timestamp') }, - { key: 'reference', width: 142, resizable: true, name: translate('Reference') }, - { key: 'contract_type', width: 104, resizable: true, name: translate('Trade type') }, - { key: 'entry_tick', width: 80, resizable: true, name: translate('Entry spot') }, - { key: 'exit_tick', width: 70, resizable: true, name: translate('Exit spot') }, + { key: 'reference', width: 110, resizable: true, name: translate('Reference') }, + { key: 'contract_type', width: 70, resizable: true, name: translate('Trade type') }, + { key: 'entry_tick', width: 75, resizable: true, name: translate('Entry spot') }, + { key: 'exit_tick', width: 75, resizable: true, name: translate('Exit spot') }, { key: 'buy_price', width: 80, resizable: true, name: translate('Buy price') }, { key: 'profit', width: 80, resizable: true, name: translate('Profit/Loss'), formatter: ProfitColor }, + { key: 'contract_status', width: 70, resizable: true, name: translate('Status'), formatter: StatusFormat }, ]; } componentWillMount() { + const { api } = this.props; + globalObserver.register('summary.export', () => { const accountData = this.state[this.props.accountID]; if (accountData && accountData.rows.length > 0) { @@ -68,16 +79,14 @@ export default class TradeTable extends Component { if (!info) { return; } - const buyDate = new Date(info.date_start * 1000); - const timestamp = `${buyDate.toISOString().split('T')[0]} ${buyDate.toTimeString().slice(0, 8)} ${ - buyDate.toTimeString().split(' ')[1] - }`; + const timestamp = getTimestamp(info.date_start); const tradeObj = { reference: info.transaction_ids.buy, ...info, timestamp }; const { accountID } = tradeObj; const trade = { ...tradeObj, - profit: getProfit(tradeObj), + profit : getProfit(tradeObj), + contract_status: translate('Pending'), }; const accountStat = this.getAccountStat(accountID); @@ -93,6 +102,45 @@ export default class TradeTable extends Component { this.setState({ [accountID]: appendRow(trade, accountStat) }); } }); + globalObserver.register('contract.settled', contract => { + this.registerTimeout(api, contract); + }); + } + registerTimeout = (api, contract) => { + setTimeout(() => { + const contractID = contract.contract_id; + this.refreshContract(api, contractID); + }, 3000); + }; + refreshContract(api, contractID) { + api.getContractInfo(contractID).then(r => { + const contract = r.proposal_open_contract; + const timestamp = getTimestamp(contract.date_start); + const tradeObj = { reference: contract.transaction_ids.buy, ...contract, timestamp }; + const { accountID } = this.props; + + const trade = { + ...tradeObj, + profit: getProfit(tradeObj), + }; + + if (trade.is_expired && trade.is_sold && !trade.exit_tick) trade.exit_tick = '-'; + + const { id } = this.state[accountID]; + const rows = this.state[accountID].rows.slice(); + const updatedRows = rows.map(row => { + const { reference } = row; + if (reference === trade.reference) { + return { + contract_status: translate('Settled'), + reference, + ...trade, + }; + } + return row; + }); + this.setState({ [accountID]: { id, rows: updatedRows } }); + }); } rowGetter(i) { const { accountID } = this.props; diff --git a/src/botPage/view/TradeInfoPanel/index.js b/src/botPage/view/TradeInfoPanel/index.js index 20c70827a9..125828dc4c 100644 --- a/src/botPage/view/TradeInfoPanel/index.js +++ b/src/botPage/view/TradeInfoPanel/index.js @@ -171,7 +171,7 @@ export default class TradeInfoPanel extends Component {
- +
diff --git a/src/botPage/view/View.js b/src/botPage/view/View.js index dbbcca6148..d54b3df8ce 100644 --- a/src/botPage/view/View.js +++ b/src/botPage/view/View.js @@ -688,6 +688,6 @@ function renderReactComponents() { />, $('#footer')[0] ); - ReactDOM.render(, $('#summaryPanel')[0]); + ReactDOM.render(, $('#summaryPanel')[0]); ReactDOM.render(, $('#logTable')[0]); } diff --git a/src/botPage/view/style.js b/src/botPage/view/style.js index 9061ff5507..ca2935034c 100644 --- a/src/botPage/view/style.js +++ b/src/botPage/view/style.js @@ -75,10 +75,16 @@ export const bottomWarningLink = { textDecoration: 'underline' }; export const green = { color: 'green' }; +export const greenLeft = { color: 'green', float: 'left' }; + export const red = { color: 'red' }; +export const redLeft = { color: 'red', float: 'left' }; + export const tradePanelAccount = { float: 'right' }; +export const left = { float: 'left' }; + export const warningText = { 'font-size': '12px', color : 'lightgray', diff --git a/static/css/_panel.scss b/static/css/_panel.scss index 56037bc5df..e4b7dcd604 100644 --- a/static/css/_panel.scss +++ b/static/css/_panel.scss @@ -53,7 +53,7 @@ $disabled-color: #F2F2F2; margin-bottom: 1em; } p { - margin: 0em; + margin: 0em; } #sync-warning { font-size: 11px;