diff options
Diffstat (limited to 'cmd/web/js/poloniex.jsx')
-rw-r--r-- | cmd/web/js/poloniex.jsx | 154 |
1 files changed, 82 insertions, 72 deletions
diff --git a/cmd/web/js/poloniex.jsx b/cmd/web/js/poloniex.jsx index 8b577b4..96384fd 100644 --- a/cmd/web/js/poloniex.jsx +++ b/cmd/web/js/poloniex.jsx | |||
@@ -1,14 +1,18 @@ | |||
1 | var Api = require('./api.js').Api; | 1 | import Api from './api.js'; |
2 | var classNames = require('classnames'); | 2 | import classNames from 'classnames'; |
3 | 3 | import React from 'react'; | |
4 | module.exports.PoloniexController = React.createClass({ | 4 | |
5 | getInitialState: function() { | 5 | class PoloniexController extends React.Component { |
6 | return {'apiKey': '', 'apiSecret': '', 'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null}; | 6 | constructor(props) { |
7 | }, | 7 | super(props); |
8 | handleCredentialsChange: function(key, secret) { | 8 | this.state = {'apiKey': '', 'apiSecret': '', 'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null}; |
9 | } | ||
10 | |||
11 | handleCredentialsChange = (key, secret) => { | ||
9 | this.setState({'apiKey': key, 'apiSecret': secret}); | 12 | this.setState({'apiKey': key, 'apiSecret': secret}); |
10 | }, | 13 | } |
11 | handleCredentialsSubmit: function() { | 14 | |
15 | handleCredentialsSubmit = () => { | ||
12 | if (!this.state.apiKey || !this.state.apiSecret) { | 16 | if (!this.state.apiKey || !this.state.apiSecret) { |
13 | return; | 17 | return; |
14 | } | 18 | } |
@@ -21,8 +25,9 @@ module.exports.PoloniexController = React.createClass({ | |||
21 | this.setState({'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null}); | 25 | this.setState({'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null}); |
22 | this.loadBalance(); | 26 | this.loadBalance(); |
23 | }.bind(this)); | 27 | }.bind(this)); |
24 | }, | 28 | } |
25 | loadBalance: function() { | 29 | |
30 | loadBalance = () => { | ||
26 | Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) { | 31 | Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) { |
27 | if (err) { | 32 | if (err) { |
28 | console.error(err, data); | 33 | console.error(err, data); |
@@ -34,8 +39,9 @@ module.exports.PoloniexController = React.createClass({ | |||
34 | 39 | ||
35 | this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance}); | 40 | this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance}); |
36 | }.bind(this)); | 41 | }.bind(this)); |
37 | }, | 42 | } |
38 | componentDidMount: function() { | 43 | |
44 | componentDidMount = () => { | ||
39 | Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) { | 45 | Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) { |
40 | if (err) { | 46 | if (err) { |
41 | console.error(err, data); | 47 | console.error(err, data); |
@@ -51,8 +57,9 @@ module.exports.PoloniexController = React.createClass({ | |||
51 | 57 | ||
52 | this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'flag': flag}); | 58 | this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'flag': flag}); |
53 | }.bind(this)); | 59 | }.bind(this)); |
54 | }, | 60 | } |
55 | render: function() { | 61 | |
62 | render = () => { | ||
56 | var displayText = null; | 63 | var displayText = null; |
57 | switch (this.state.flag) { | 64 | switch (this.state.flag) { |
58 | case 'loading': | 65 | case 'loading': |
@@ -81,13 +88,15 @@ module.exports.PoloniexController = React.createClass({ | |||
81 | </div> | 88 | </div> |
82 | ); | 89 | ); |
83 | } | 90 | } |
84 | }); | 91 | } |
92 | |||
93 | class PoloniexBalance extends React.Component { | ||
94 | constructor(props) { | ||
95 | super(props); | ||
96 | this.state = {'hideMsg': true, 'msg': '', 'msgOk': false}; | ||
97 | } | ||
85 | 98 | ||
86 | var PoloniexBalance = React.createClass({ | 99 | render = () => { |
87 | getInitialState: function() { | ||
88 | return {'hideMsg': true, 'msg': '', 'msgOk': false}; | ||
89 | }, | ||
90 | render: function() { | ||
91 | var dashboard = null; | 100 | var dashboard = null; |
92 | 101 | ||
93 | if (this.props.balanceValue !== null) { | 102 | if (this.props.balanceValue !== null) { |
@@ -96,36 +105,33 @@ var PoloniexBalance = React.createClass({ | |||
96 | return <div key={currency}><i className={classNames('cc', currency)}></i> {this.props.balance[currency]}</div>; | 105 | return <div key={currency}><i className={classNames('cc', currency)}></i> {this.props.balance[currency]}</div>; |
97 | }.bind(this)); | 106 | }.bind(this)); |
98 | 107 | ||
99 | dashboard = ( | 108 | dashboard = |
100 | <div className='row'> | 109 | <div className="row"> |
101 | <div className='col-4 align-self-center h-100'> | 110 | <div className="col-4 align-self-center h-100"> |
102 | <div> | 111 | <div> |
103 | {balance} | 112 | {balance} |
104 | </div> | 113 | </div> |
105 | </div> | 114 | </div> |
106 | <div className='offset-1 col-7 h-100 align-self-center'> | 115 | <div className="offset-1 col-7 h-100 align-self-center"> |
107 | <div className='text-center'> | 116 | <div className="text-center"> |
108 | Balance ({this.props.balanceCurrency}): <span>{this.props.balanceValue} <i className={classNames('cc', this.props.balanceCurrency)}></i></span> | 117 | Balance ({this.props.balanceCurrency}): <span>{this.props.balanceValue} <i className={classNames('cc', this.props.balanceCurrency)}></i></span> |
109 | </div> | 118 | </div> |
110 | </div> | 119 | </div> |
111 | </div> | 120 | </div>; |
112 | ); | 121 | } else { |
113 | } else { | 122 | dashboard = |
114 | dashboard = ( | 123 | <div className="row"> |
115 | <div className='row'> | 124 | <div className="col-12 text-center"> |
116 | <div className='col-12 text-center'> | ||
117 | <span>{this.props.displayText}</span> | 125 | <span>{this.props.displayText}</span> |
118 | </div> | 126 | </div> |
119 | </div> | 127 | </div>; |
120 | 128 | } | |
121 | ); | ||
122 | } | ||
123 | 129 | ||
124 | return ( | 130 | return ( |
125 | <div className='row'> | 131 | <div className="row"> |
126 | <div className='box offset-2 col-8'> | 132 | <div className="box offset-2 col-8"> |
127 | <div className='row'> | 133 | <div className="row"> |
128 | <div className='col-4'>Portfolio</div> | 134 | <div className="col-4">Portfolio</div> |
129 | </div> | 135 | </div> |
130 | <hr/> | 136 | <hr/> |
131 | {dashboard} | 137 | {dashboard} |
@@ -133,53 +139,57 @@ var PoloniexBalance = React.createClass({ | |||
133 | </div> | 139 | </div> |
134 | ); | 140 | ); |
135 | } | 141 | } |
136 | }); | 142 | } |
137 | 143 | ||
138 | module.exports.PoloniexBalance = PoloniexBalance; | 144 | class PoloniexCredentialsForm extends React.Component { |
145 | constructor(props) { | ||
146 | super(props); | ||
147 | this.state = {'hideMsg': true, 'msg': '', 'editMode': false, 'msgOk': false}; | ||
148 | } | ||
139 | 149 | ||
140 | var PoloniexCredentialsForm = React.createClass({ | 150 | handleSubmit = (e) => { |
141 | getInitialState: function() { | ||
142 | return {'hideMsg': true, 'msg': '', 'editMode': false, 'msgOk': false}; | ||
143 | }, | ||
144 | handleSubmit: function(e) { | ||
145 | this.props.onCredentialsSubmit(); | 151 | this.props.onCredentialsSubmit(); |
146 | this.setState({'editMode': false}); | 152 | this.setState({'editMode': false}); |
147 | e.preventDefault(); | 153 | e.preventDefault(); |
148 | }, | 154 | } |
149 | handleApiKeyChange: function(event) { | 155 | |
156 | handleApiKeyChange = (event) => { | ||
150 | this.props.onCredentialsChange(event.target.value, this.props.apiSecret); | 157 | this.props.onCredentialsChange(event.target.value, this.props.apiSecret); |
151 | }, | 158 | } |
152 | handleApiSecretChange: function(event) { | 159 | |
160 | handleApiSecretChange = (event) => { | ||
153 | this.props.onCredentialsChange(this.props.apiKey, event.target.value); | 161 | this.props.onCredentialsChange(this.props.apiKey, event.target.value); |
154 | }, | 162 | } |
155 | onEditClick: function() { | 163 | |
164 | onEditClick = () => { | ||
156 | this.setState({'editMode': true}); | 165 | this.setState({'editMode': true}); |
157 | }, | 166 | } |
158 | render: function() { | 167 | |
159 | var submitType = (this.state.editMode === true) ? 'submit' : 'hidden'; | 168 | render = () => { |
160 | var buttonDisplay = (this.state.editMode === true) ? 'none' : 'inline'; | 169 | var submitType = this.state.editMode === true ? 'submit' : 'hidden'; |
161 | var secretDisplayed = (this.state.editMode === true) ? this.props.apiSecret : 'XXXXXXX'; | 170 | var buttonDisplay = this.state.editMode === true ? 'none' : 'inline'; |
162 | var keyDisplayed = (this.state.editMode === true) ? this.props.apiKey : 'XXXXXXX'; | 171 | var secretDisplayed = this.state.editMode === true ? this.props.apiSecret : 'XXXXXXX'; |
172 | var keyDisplayed = this.state.editMode === true ? this.props.apiKey : 'XXXXXXX'; | ||
163 | 173 | ||
164 | return ( | 174 | return ( |
165 | <div className='row api-credentials-form'> | 175 | <div className="row api-credentials-form"> |
166 | <div className='offset-3 col-6 box'> | 176 | <div className="offset-3 col-6 box"> |
167 | <span className='text-center'>Poloniex credentials</span> | 177 | <span className="text-center">Poloniex credentials</span> |
168 | <hr/> | 178 | <hr/> |
169 | <form role='form' onSubmit={this.handleSubmit}> | 179 | <form role="form" onSubmit={this.handleSubmit}> |
170 | <label className='w-100'>Key: | 180 | <label className="w-100">Key: |
171 | <input className='form-control' type='text' placeholder='key' value={keyDisplayed} onChange={this.handleApiKeyChange} disabled={!this.state.editMode}/> | 181 | <input className="form-control" type="text" placeholder="key" value={keyDisplayed} onChange={this.handleApiKeyChange} disabled={!this.state.editMode}/> |
172 | </label> | 182 | </label> |
173 | <label className='w-100'>Secret: | 183 | <label className="w-100">Secret: |
174 | <input className='form-control' type='text' placeholder='secret' value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.state.editMode}/> | 184 | <input className="form-control" type="text" placeholder="secret" value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.state.editMode}/> |
175 | </label> | 185 | </label> |
176 | <input className='form-control submit' type={submitType} value='Save' /> | 186 | <input className="form-control submit" type={submitType} value="Save" /> |
177 | <button className='form-control submit' style={{display: buttonDisplay}} onSubmit={null} onClick={this.onEditClick} type='button'>Show/Edit</button> | 187 | <button className="form-control submit" style={{display: buttonDisplay}} onSubmit={null} onClick={this.onEditClick} type="button">Show/Edit</button> |
178 | </form> | 188 | </form> |
179 | </div> | 189 | </div> |
180 | </div> | 190 | </div> |
181 | ); | 191 | ); |
182 | } | 192 | } |
183 | }); | 193 | } |
184 | 194 | ||
185 | module.exports.PoloniexCredentialsForm = PoloniexCredentialsForm; | 195 | export default PoloniexController; |