From 1e7cee6cf1341e3f4869cda2b9fe80438c388fd2 Mon Sep 17 00:00:00 2001 From: Khalid Ibrahim Date: Fri, 26 Apr 2019 18:30:10 +0800 Subject: [PATCH 01/11] added auto refresh of contracts --- gulpfile.babel.js | 2 +- src/botPage/bot/TradeEngine/OpenContract.js | 8 +- src/botPage/bot/broadcast.js | 2 + src/botPage/view/TradeInfoPanel/TradeTable.js | 97 ++++++++++++++++++- src/botPage/view/TradeInfoPanel/index.js | 2 +- src/botPage/view/View.js | 2 +- 6 files changed, 104 insertions(+), 9 deletions(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index e0c39d11fa..18765b8a4a 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -12,7 +12,7 @@ gulp.task( gulp.series(done => { connect.server({ root : 'www', - port : 8080, + port : 80, livereload: true, }); done(); 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..05b87f0d0f 100644 --- a/src/botPage/view/TradeInfoPanel/TradeTable.js +++ b/src/botPage/view/TradeInfoPanel/TradeTable.js @@ -1,3 +1,4 @@ +/* eslint-disable no-debugger */ import json2csv from 'json2csv'; import React, { Component } from 'react'; import ReactDataGrid from 'react-data-grid'; @@ -19,6 +20,13 @@ 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; @@ -36,6 +44,7 @@ export default class TradeTable extends Component { id : 0, rows: [], }, + test: {}, }; this.columns = [ { key: 'timestamp', width: 192, resizable: true, name: translate('Timestamp') }, @@ -48,6 +57,8 @@ export default class TradeTable extends Component { ]; } componentWillMount() { + const { api } = this.props; + globalObserver.register('summary.export', () => { const accountData = this.state[this.props.accountID]; if (accountData && accountData.rows.length > 0) { @@ -68,10 +79,7 @@ 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; @@ -93,6 +101,87 @@ export default class TradeTable extends Component { this.setState({ [accountID]: appendRow(trade, accountStat) }); } }); + globalObserver.register('contract.settled', contract => { + const registerTimeout = contract => { + setTimeout(() => { + const contractID = contract.contract_id; + this.refreshContract(api, contractID); + // globalObserver.emit('ui.log.success', contractId); + + // const accountStat = this.getAccountStat(this.props.accountID); + // const { id } = this.state[this.props.accountID]; + + // const rows = accountStat.rows.slice(); + // const updatedRows = rows.map(row => { + // if (row.contract_id === contractId) { + // row.contract_type = 'Settled'; + // return row; + // } + // return row; + // }); + // this.setState({ [this.props.accountID]: { id, 'rows': updatedRows } }); + }, 3000); + }; + + registerTimeout(contract); + }); + } + refreshContract(api, contractID) { + api.getContractInfo(contractID).then(r => { + const contract = r.proposal_open_contract; + // this.updateTable(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 { + reference, + ...trade, + }; + } + return row; + }); + this.setState({ [accountID]: { id, rows: updatedRows } }); + }); + } + updateTable(info) { + const timestamp = getTimestamp(info.date_start); + const tradeObj = { reference: info.transaction_ids.buy, ...info, timestamp }; + const { accountID } = tradeObj; + + 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 { + 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 cb626fbd12..d7a345798b 100644 --- a/src/botPage/view/View.js +++ b/src/botPage/view/View.js @@ -684,6 +684,6 @@ function renderReactComponents() { />, $('#footer')[0] ); - ReactDOM.render(, $('#summaryPanel')[0]); + ReactDOM.render(, $('#summaryPanel')[0]); ReactDOM.render(, $('#logTable')[0]); } From ed5551d4b04e9f9f033370cfe738536ca0019d4f Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Thu, 25 Apr 2019 16:20:23 +0800 Subject: [PATCH 02/11] Set node to v10.15.3 and force npm to 6.9.0 --- .travis.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index e9a7dd52cc..6c6e7f05a9 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,7 @@ language: node_js -node_js: node +node_js: "10.15.3" +before_install: npm i -g npm@6.9.0 +install: npm ci cache: directories: - node_modules From a9b2ee3de3fc20f4b6196e38fcaf7a42f42bf030 Mon Sep 17 00:00:00 2001 From: Khalid Ibrahim Date: Fri, 26 Apr 2019 18:30:10 +0800 Subject: [PATCH 03/11] added auto refresh of contracts --- gulpfile.babel.js | 2 +- src/botPage/bot/TradeEngine/OpenContract.js | 8 +- src/botPage/bot/broadcast.js | 2 + src/botPage/view/TradeInfoPanel/TradeTable.js | 97 ++++++++++++++++++- src/botPage/view/TradeInfoPanel/index.js | 2 +- src/botPage/view/View.js | 2 +- 6 files changed, 104 insertions(+), 9 deletions(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index e0c39d11fa..18765b8a4a 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -12,7 +12,7 @@ gulp.task( gulp.series(done => { connect.server({ root : 'www', - port : 8080, + port : 80, livereload: true, }); done(); 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..05b87f0d0f 100644 --- a/src/botPage/view/TradeInfoPanel/TradeTable.js +++ b/src/botPage/view/TradeInfoPanel/TradeTable.js @@ -1,3 +1,4 @@ +/* eslint-disable no-debugger */ import json2csv from 'json2csv'; import React, { Component } from 'react'; import ReactDataGrid from 'react-data-grid'; @@ -19,6 +20,13 @@ 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; @@ -36,6 +44,7 @@ export default class TradeTable extends Component { id : 0, rows: [], }, + test: {}, }; this.columns = [ { key: 'timestamp', width: 192, resizable: true, name: translate('Timestamp') }, @@ -48,6 +57,8 @@ export default class TradeTable extends Component { ]; } componentWillMount() { + const { api } = this.props; + globalObserver.register('summary.export', () => { const accountData = this.state[this.props.accountID]; if (accountData && accountData.rows.length > 0) { @@ -68,10 +79,7 @@ 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; @@ -93,6 +101,87 @@ export default class TradeTable extends Component { this.setState({ [accountID]: appendRow(trade, accountStat) }); } }); + globalObserver.register('contract.settled', contract => { + const registerTimeout = contract => { + setTimeout(() => { + const contractID = contract.contract_id; + this.refreshContract(api, contractID); + // globalObserver.emit('ui.log.success', contractId); + + // const accountStat = this.getAccountStat(this.props.accountID); + // const { id } = this.state[this.props.accountID]; + + // const rows = accountStat.rows.slice(); + // const updatedRows = rows.map(row => { + // if (row.contract_id === contractId) { + // row.contract_type = 'Settled'; + // return row; + // } + // return row; + // }); + // this.setState({ [this.props.accountID]: { id, 'rows': updatedRows } }); + }, 3000); + }; + + registerTimeout(contract); + }); + } + refreshContract(api, contractID) { + api.getContractInfo(contractID).then(r => { + const contract = r.proposal_open_contract; + // this.updateTable(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 { + reference, + ...trade, + }; + } + return row; + }); + this.setState({ [accountID]: { id, rows: updatedRows } }); + }); + } + updateTable(info) { + const timestamp = getTimestamp(info.date_start); + const tradeObj = { reference: info.transaction_ids.buy, ...info, timestamp }; + const { accountID } = tradeObj; + + 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 { + 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 cb626fbd12..d7a345798b 100644 --- a/src/botPage/view/View.js +++ b/src/botPage/view/View.js @@ -684,6 +684,6 @@ function renderReactComponents() { />, $('#footer')[0] ); - ReactDOM.render(, $('#summaryPanel')[0]); + ReactDOM.render(, $('#summaryPanel')[0]); ReactDOM.render(, $('#logTable')[0]); } From 05ccace099ded86156209f186e49d17cf6d64fdc Mon Sep 17 00:00:00 2001 From: Khalid Ibrahim Date: Mon, 29 Apr 2019 14:07:11 +0800 Subject: [PATCH 04/11] code cleanup --- src/botPage/view/TradeInfoPanel/TradeTable.js | 58 +++---------------- 1 file changed, 7 insertions(+), 51 deletions(-) diff --git a/src/botPage/view/TradeInfoPanel/TradeTable.js b/src/botPage/view/TradeInfoPanel/TradeTable.js index 05b87f0d0f..641c3da353 100644 --- a/src/botPage/view/TradeInfoPanel/TradeTable.js +++ b/src/botPage/view/TradeInfoPanel/TradeTable.js @@ -44,7 +44,6 @@ export default class TradeTable extends Component { id : 0, rows: [], }, - test: {}, }; this.columns = [ { key: 'timestamp', width: 192, resizable: true, name: translate('Timestamp') }, @@ -102,35 +101,18 @@ export default class TradeTable extends Component { } }); globalObserver.register('contract.settled', contract => { - const registerTimeout = contract => { - setTimeout(() => { - const contractID = contract.contract_id; - this.refreshContract(api, contractID); - // globalObserver.emit('ui.log.success', contractId); - - // const accountStat = this.getAccountStat(this.props.accountID); - // const { id } = this.state[this.props.accountID]; - - // const rows = accountStat.rows.slice(); - // const updatedRows = rows.map(row => { - // if (row.contract_id === contractId) { - // row.contract_type = 'Settled'; - // return row; - // } - // return row; - // }); - // this.setState({ [this.props.accountID]: { id, 'rows': updatedRows } }); - }, 3000); - }; - - registerTimeout(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; - // this.updateTable(contract); - const timestamp = getTimestamp(contract.date_start); const tradeObj = { reference: contract.transaction_ids.buy, ...contract, timestamp }; const { accountID } = this.props; @@ -157,32 +139,6 @@ export default class TradeTable extends Component { this.setState({ [accountID]: { id, rows: updatedRows } }); }); } - updateTable(info) { - const timestamp = getTimestamp(info.date_start); - const tradeObj = { reference: info.transaction_ids.buy, ...info, timestamp }; - const { accountID } = tradeObj; - - 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 { - reference, - ...trade, - }; - } - return row; - }); - this.setState({ [accountID]: { id, rows: updatedRows } }); - } rowGetter(i) { const { accountID } = this.props; const { rows } = this.state[accountID]; From 2aa1e56af88138bef069ceb033c41bb7772fc64d Mon Sep 17 00:00:00 2001 From: Khalid Ibrahim Date: Mon, 29 Apr 2019 14:16:35 +0800 Subject: [PATCH 05/11] port update --- gulpfile.babel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 18765b8a4a..e0c39d11fa 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -12,7 +12,7 @@ gulp.task( gulp.series(done => { connect.server({ root : 'www', - port : 80, + port : 8080, livereload: true, }); done(); From 01bbe738fddd11cdf676b0fd4aacdbabef429d77 Mon Sep 17 00:00:00 2001 From: Khalid Ibrahim Date: Fri, 26 Apr 2019 18:30:10 +0800 Subject: [PATCH 06/11] added auto refresh of contracts --- gulpfile.babel.js | 2 +- src/botPage/bot/TradeEngine/OpenContract.js | 8 +- src/botPage/bot/broadcast.js | 2 + src/botPage/view/TradeInfoPanel/TradeTable.js | 97 ++++++++++++++++++- src/botPage/view/TradeInfoPanel/index.js | 2 +- src/botPage/view/View.js | 2 +- 6 files changed, 104 insertions(+), 9 deletions(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index e0c39d11fa..18765b8a4a 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -12,7 +12,7 @@ gulp.task( gulp.series(done => { connect.server({ root : 'www', - port : 8080, + port : 80, livereload: true, }); done(); 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..05b87f0d0f 100644 --- a/src/botPage/view/TradeInfoPanel/TradeTable.js +++ b/src/botPage/view/TradeInfoPanel/TradeTable.js @@ -1,3 +1,4 @@ +/* eslint-disable no-debugger */ import json2csv from 'json2csv'; import React, { Component } from 'react'; import ReactDataGrid from 'react-data-grid'; @@ -19,6 +20,13 @@ 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; @@ -36,6 +44,7 @@ export default class TradeTable extends Component { id : 0, rows: [], }, + test: {}, }; this.columns = [ { key: 'timestamp', width: 192, resizable: true, name: translate('Timestamp') }, @@ -48,6 +57,8 @@ export default class TradeTable extends Component { ]; } componentWillMount() { + const { api } = this.props; + globalObserver.register('summary.export', () => { const accountData = this.state[this.props.accountID]; if (accountData && accountData.rows.length > 0) { @@ -68,10 +79,7 @@ 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; @@ -93,6 +101,87 @@ export default class TradeTable extends Component { this.setState({ [accountID]: appendRow(trade, accountStat) }); } }); + globalObserver.register('contract.settled', contract => { + const registerTimeout = contract => { + setTimeout(() => { + const contractID = contract.contract_id; + this.refreshContract(api, contractID); + // globalObserver.emit('ui.log.success', contractId); + + // const accountStat = this.getAccountStat(this.props.accountID); + // const { id } = this.state[this.props.accountID]; + + // const rows = accountStat.rows.slice(); + // const updatedRows = rows.map(row => { + // if (row.contract_id === contractId) { + // row.contract_type = 'Settled'; + // return row; + // } + // return row; + // }); + // this.setState({ [this.props.accountID]: { id, 'rows': updatedRows } }); + }, 3000); + }; + + registerTimeout(contract); + }); + } + refreshContract(api, contractID) { + api.getContractInfo(contractID).then(r => { + const contract = r.proposal_open_contract; + // this.updateTable(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 { + reference, + ...trade, + }; + } + return row; + }); + this.setState({ [accountID]: { id, rows: updatedRows } }); + }); + } + updateTable(info) { + const timestamp = getTimestamp(info.date_start); + const tradeObj = { reference: info.transaction_ids.buy, ...info, timestamp }; + const { accountID } = tradeObj; + + 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 { + 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]); } From 077b7460ef5807722bbabe6ba945bc407e2bc5f3 Mon Sep 17 00:00:00 2001 From: Khalid Ibrahim Date: Mon, 29 Apr 2019 14:07:11 +0800 Subject: [PATCH 07/11] code cleanup --- src/botPage/view/TradeInfoPanel/TradeTable.js | 58 +++---------------- 1 file changed, 7 insertions(+), 51 deletions(-) diff --git a/src/botPage/view/TradeInfoPanel/TradeTable.js b/src/botPage/view/TradeInfoPanel/TradeTable.js index 05b87f0d0f..641c3da353 100644 --- a/src/botPage/view/TradeInfoPanel/TradeTable.js +++ b/src/botPage/view/TradeInfoPanel/TradeTable.js @@ -44,7 +44,6 @@ export default class TradeTable extends Component { id : 0, rows: [], }, - test: {}, }; this.columns = [ { key: 'timestamp', width: 192, resizable: true, name: translate('Timestamp') }, @@ -102,35 +101,18 @@ export default class TradeTable extends Component { } }); globalObserver.register('contract.settled', contract => { - const registerTimeout = contract => { - setTimeout(() => { - const contractID = contract.contract_id; - this.refreshContract(api, contractID); - // globalObserver.emit('ui.log.success', contractId); - - // const accountStat = this.getAccountStat(this.props.accountID); - // const { id } = this.state[this.props.accountID]; - - // const rows = accountStat.rows.slice(); - // const updatedRows = rows.map(row => { - // if (row.contract_id === contractId) { - // row.contract_type = 'Settled'; - // return row; - // } - // return row; - // }); - // this.setState({ [this.props.accountID]: { id, 'rows': updatedRows } }); - }, 3000); - }; - - registerTimeout(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; - // this.updateTable(contract); - const timestamp = getTimestamp(contract.date_start); const tradeObj = { reference: contract.transaction_ids.buy, ...contract, timestamp }; const { accountID } = this.props; @@ -157,32 +139,6 @@ export default class TradeTable extends Component { this.setState({ [accountID]: { id, rows: updatedRows } }); }); } - updateTable(info) { - const timestamp = getTimestamp(info.date_start); - const tradeObj = { reference: info.transaction_ids.buy, ...info, timestamp }; - const { accountID } = tradeObj; - - 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 { - reference, - ...trade, - }; - } - return row; - }); - this.setState({ [accountID]: { id, rows: updatedRows } }); - } rowGetter(i) { const { accountID } = this.props; const { rows } = this.state[accountID]; From a2672cf84a497e45d8c79fc0c5390388027fb5b8 Mon Sep 17 00:00:00 2001 From: Khalid Ibrahim Date: Mon, 29 Apr 2019 14:16:35 +0800 Subject: [PATCH 08/11] port update --- gulpfile.babel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 18765b8a4a..e0c39d11fa 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -12,7 +12,7 @@ gulp.task( gulp.series(done => { connect.server({ root : 'www', - port : 80, + port : 8080, livereload: true, }); done(); From a808528e6697f0fe1b2eca57302431b52f00effd Mon Sep 17 00:00:00 2001 From: Khalid Ibrahim Date: Thu, 2 May 2019 17:22:41 +0800 Subject: [PATCH 09/11] added contract settled message --- src/botPage/view/TradeInfoPanel/TradeTable.js | 14 +++++++++----- src/botPage/view/style.js | 4 ++-- static/css/_panel.scss | 2 +- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/botPage/view/TradeInfoPanel/TradeTable.js b/src/botPage/view/TradeInfoPanel/TradeTable.js index 641c3da353..fd19493c6e 100644 --- a/src/botPage/view/TradeInfoPanel/TradeTable.js +++ b/src/botPage/view/TradeInfoPanel/TradeTable.js @@ -31,6 +31,7 @@ const minHeight = 290; const rowHeight = 25; const ProfitColor = ({ value }) =>
0 ? style.green : style.red}>{value}
; +const StatusColor = ({ value }) =>
{value}
; export default class TradeTable extends Component { constructor({ accountID }) { @@ -47,12 +48,13 @@ 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: 65, resizable: true, name: translate('Status'), formatter: StatusColor }, ]; } componentWillMount() { @@ -84,7 +86,8 @@ export default class TradeTable extends Component { const trade = { ...tradeObj, - profit: getProfit(tradeObj), + profit : getProfit(tradeObj), + contract_status: 'Pending', }; const accountStat = this.getAccountStat(accountID); @@ -130,6 +133,7 @@ export default class TradeTable extends Component { const { reference } = row; if (reference === trade.reference) { return { + contract_status: 'Settled', reference, ...trade, }; diff --git a/src/botPage/view/style.js b/src/botPage/view/style.js index 9061ff5507..dbc1cea536 100644 --- a/src/botPage/view/style.js +++ b/src/botPage/view/style.js @@ -73,9 +73,9 @@ export const bottomWarning = { export const bottomWarningLink = { textDecoration: 'underline' }; -export const green = { color: 'green' }; +export const green = { color: 'green', float: 'left' }; -export const red = { color: 'red' }; +export const red = { color: 'red', float: 'left' }; export const tradePanelAccount = { float: 'right' }; 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; From 25b5e53a33525c8aa812eb25abf7c0ea32ce4b4b Mon Sep 17 00:00:00 2001 From: Khalid Ibrahim Date: Fri, 3 May 2019 11:33:48 +0800 Subject: [PATCH 10/11] added translate and fixed style --- src/botPage/view/TradeInfoPanel/TradeTable.js | 13 +++++++------ src/botPage/view/style.js | 8 ++++++-- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/botPage/view/TradeInfoPanel/TradeTable.js b/src/botPage/view/TradeInfoPanel/TradeTable.js index fd19493c6e..76cda663aa 100644 --- a/src/botPage/view/TradeInfoPanel/TradeTable.js +++ b/src/botPage/view/TradeInfoPanel/TradeTable.js @@ -1,4 +1,3 @@ -/* eslint-disable no-debugger */ import json2csv from 'json2csv'; import React, { Component } from 'react'; import ReactDataGrid from 'react-data-grid'; @@ -30,8 +29,10 @@ const getTimestamp = date => { const minHeight = 290; const rowHeight = 25; -const ProfitColor = ({ value }) =>
0 ? style.green : style.red}>{value}
; -const StatusColor = ({ value }) =>
{value}
; +const ProfitColor = ({ value }) =>
0 ? style.greenLeft : style.redLeft}>{value}
; +const StatusColor = ({ value }) => ( +
{value}
+); export default class TradeTable extends Component { constructor({ accountID }) { @@ -54,7 +55,7 @@ export default class TradeTable extends Component { { 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: 65, resizable: true, name: translate('Status'), formatter: StatusColor }, + { key: 'contract_status', width: 70, resizable: true, name: translate('Status'), formatter: StatusColor }, ]; } componentWillMount() { @@ -87,7 +88,7 @@ export default class TradeTable extends Component { const trade = { ...tradeObj, profit : getProfit(tradeObj), - contract_status: 'Pending', + contract_status: translate('Pending'), }; const accountStat = this.getAccountStat(accountID); @@ -133,7 +134,7 @@ export default class TradeTable extends Component { const { reference } = row; if (reference === trade.reference) { return { - contract_status: 'Settled', + contract_status: translate('Settled'), reference, ...trade, }; diff --git a/src/botPage/view/style.js b/src/botPage/view/style.js index dbc1cea536..522502c9e5 100644 --- a/src/botPage/view/style.js +++ b/src/botPage/view/style.js @@ -73,9 +73,13 @@ export const bottomWarning = { export const bottomWarningLink = { textDecoration: 'underline' }; -export const green = { color: 'green', float: 'left' }; +export const green = { color: 'green' }; -export const red = { color: 'red', float: 'left' }; +export const greenLeft = { color: 'green', float: 'left' }; + +export const red = { color: 'red' }; + +export const redLeft = { color: 'red', float: 'left' }; export const tradePanelAccount = { float: 'right' }; From 65cedfb8bd145bb6a904e3684e8764ba7c17f4e7 Mon Sep 17 00:00:00 2001 From: Khalid Ibrahim Date: Mon, 6 May 2019 12:20:21 +0800 Subject: [PATCH 11/11] status color --- src/botPage/view/TradeInfoPanel/TradeTable.js | 6 ++---- src/botPage/view/style.js | 2 ++ 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/botPage/view/TradeInfoPanel/TradeTable.js b/src/botPage/view/TradeInfoPanel/TradeTable.js index 76cda663aa..adb7881c28 100644 --- a/src/botPage/view/TradeInfoPanel/TradeTable.js +++ b/src/botPage/view/TradeInfoPanel/TradeTable.js @@ -30,9 +30,7 @@ const minHeight = 290; const rowHeight = 25; const ProfitColor = ({ value }) =>
0 ? style.greenLeft : style.redLeft}>{value}
; -const StatusColor = ({ value }) => ( -
{value}
-); +const StatusFormat = ({ value }) =>
{value}
; export default class TradeTable extends Component { constructor({ accountID }) { @@ -55,7 +53,7 @@ export default class TradeTable extends Component { { 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: StatusColor }, + { key: 'contract_status', width: 70, resizable: true, name: translate('Status'), formatter: StatusFormat }, ]; } componentWillMount() { diff --git a/src/botPage/view/style.js b/src/botPage/view/style.js index 522502c9e5..ca2935034c 100644 --- a/src/botPage/view/style.js +++ b/src/botPage/view/style.js @@ -83,6 +83,8 @@ 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',