lukechilds
/
EasyDEX-GUI
mirror of https://github.com/lukechilds/EasyDEX-GUI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

added simple toaster message on activation click evt

all-modes
Petr Balashov 8 years ago
parent
5e551b1911
commit
621111883d
6 changed files with 96 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      assets/scripts/config.js
  2. 4
      assets/scripts/login.js
  3. 19
      react/src/actions/actionCreators.js
  4. 101
      react/src/components/addcoin/addcoin.js
  5. 23
      react/src/components/toaster/toaster.js
  6. 6
      react/src/reducers/toaster.js

2
assets/scripts/config.js
View File

@ -1,3 +1,3 @@
const config = { const config = {
'iguanaPort': 7778 'iguanaPort': 7772
}; };

4
assets/scripts/login.js
View File

@ -2,8 +2,8 @@ const toastrConfig = {
'closeButton': true, 'closeButton': true,
'debug': false, 'debug': false,
'positionClass': 'toast-bottom-right', 'positionClass': 'toast-bottom-right',
'showDuration': '5000', 'showDuration': '15000',
'hideDuration': '1000', 'hideDuration': '11000',
'timeOut': '5000', 'timeOut': '5000',
'extendedTimeOut': '1000', 'extendedTimeOut': '1000',
'showEasing': 'swing', 'showEasing': 'swing',

19
react/src/actions/actionCreators.js
View File

@ -1,3 +1,20 @@
import 'whatwg-fetch'; import 'whatwg-fetch';
export const ACTION = 'ACTION'; export const TOASTER_MESSAGE = 'TOASTER_MESSAGE';
function triggerToaster(display, message) {
return {
type: TOASTER_MESSAGE,
display,
message,
}
}
export function addCoin(coin, mode) {
return dispatch => {
dispatch(triggerToaster(true, 'Coin ' + coin + ' added in ' + mode))
/*return fetch(``)
.then(response => response.json())
.then(json => dispatch(r(json)))*/
}
}

101
react/src/components/addcoin/addcoin.js
View File

@ -1,5 +1,7 @@
import React from 'react'; import React from 'react';
import { translate } from '../../translate/translate'; import { translate } from '../../translate/translate';
import { addCoin } from '../../actions/actionCreators';
import Store from '../../store';
class AddCoin extends React.Component { class AddCoin extends React.Component {
constructor(props) { constructor(props) {
@ -18,30 +20,40 @@ class AddCoin extends React.Component {
disabled: true, disabled: true,
checked: false, checked: false,
}, },
mode: null,
}; };
this.updateSelectedCoin = this.updateSelectedCoin.bind(this); this.updateSelectedCoin = this.updateSelectedCoin.bind(this);
this.updateSelectedMode = this.updateSelectedMode.bind(this); this.updateSelectedMode = this.updateSelectedMode.bind(this);
this.setNativeMode = this.setNativeMode.bind(this); this.setNativeMode = this.setNativeMode.bind(this);
this.setBasiliskMode = this.setBasiliskMode.bind(this); this.setBasiliskMode = this.setBasiliskMode.bind(this);
this.setFullMode = this.setFullMode.bind(this); this.setFullMode = this.setFullMode.bind(this);
this.activateCoin = this.activateCoin.bind(this);
} }
updateSelectedCoin(e) { updateSelectedCoin(e) {
const coin = e.target.value.split(':'); const coin = e.target.value.split('|');
const defaultMode = coin[1];
const modeToValue = {
'full': 1,
'basilisk': 0,
'native': -1,
};
this.setState(Object.assign({}, this.state, { this.setState(Object.assign({}, this.state, {
[e.target.name]: e.target.value, [e.target.name]: e.target.value,
fullMode: { fullMode: {
disabled: coin[1].indexOf('full') > -1 ? false : true, disabled: e.target.value.indexOf('full') > -1 ? false : true,
checked: coin[1].indexOf('full') > -1 ? true : false, checked: defaultMode === 'full' ? true : false,
}, },
basiliskMode: { basiliskMode: {
disabled: coin[1].indexOf('basilisk') > -1 ? false : true, disabled: e.target.value.indexOf('basilisk') > -1 ? false : true,
checked: coin[1].indexOf('basilisk') > -1 ? true : false, checked: defaultMode === 'basilisk' ? true : false,
}, },
nativeMode: { nativeMode: {
disabled: coin[1].indexOf('native') > -1 ? false : true, disabled: e.target.value.indexOf('native') > -1 ? false : true,
checked: coin[1].indexOf('native') > -1 ? true : false, checked: defaultMode === 'native' ? true : false,
} },
mode: modeToValue[defaultMode]
})); }));
} }
@ -59,6 +71,7 @@ class AddCoin extends React.Component {
...this.state.nativeMode, ...this.state.nativeMode,
checked: _value === '-1' ? true : false, checked: _value === '-1' ? true : false,
}, },
mode: _value,
})); }));
} }
@ -76,7 +89,6 @@ class AddCoin extends React.Component {
handleForm(e) { handleForm(e) {
e.preventDefault(); e.preventDefault();
//Store.dispatch((this.state));
e.target.reset(); e.target.reset();
this.setState({ this.setState({
mode: '', mode: '',
@ -84,6 +96,11 @@ class AddCoin extends React.Component {
}); });
} }
activateCoin() {
console.log(this.state);
Store.dispatch(addCoin(this.state.selectedCoin.split('|')[0], this.state.mode));
}
render() { render() {
return ( return (
<div> <div>
@ -102,40 +119,40 @@ class AddCoin extends React.Component {
<select className="form-control form-material" name="selectedCoin" id="addcoin_select_coin_mdl_options-login" onChange={this.updateSelectedCoin}> <select className="form-control form-material" name="selectedCoin" id="addcoin_select_coin_mdl_options-login" onChange={this.updateSelectedCoin}>
<option>{translate('INDEX.SELECT')}</option> <option>{translate('INDEX.SELECT')}</option>
<optgroup label="Crypto Currencies"> <optgroup label="Crypto Currencies">
<option value="ANC:full" data-full-mode="true">AnonCoin (ANC)</option> <option value="ANC|full" data-full-mode="true">AnonCoin (ANC)</option>
<option value="BTC:full|basilisk">Bitcoin (BTC)</option> <option value="BTC|full|basilisk">Bitcoin (BTC)</option>
<option value="BTCD:full">BitcoinDark (BTCD)</option> <option value="BTCD|full">BitcoinDark (BTCD)</option>
<option value="BTM:full">Bitmark (BTM)</option> <option value="BTM|full">Bitmark (BTM)</option>
<option value="CARB:full">Carboncoin (CARB)</option> <option value="CARB|full">Carboncoin (CARB)</option>
<option value="DGB:full">Digibyte (DGB)</option> <option value="DGB|full">Digibyte (DGB)</option>
<option value="DOGE:full">Dogecoin (DOGE)</option> <option value="DOGE|full">Dogecoin (DOGE)</option>
<option value="FRK:full">Franko (FRK)</option> <option value="FRK|full">Franko (FRK)</option>
<option value="GMC:full">Gamerscoin (GMC)</option> <option value="GMC|full">Gamerscoin (GMC)</option>
<option value="KMD:basilisk|native">Komodo (KMD)</option> <option value="KMD|basilisk|native">Komodo (KMD)</option>
<option value="LTC:full">Litecoin (LTC)</option> <option value="LTC|full">Litecoin (LTC)</option>
<option value="MZC:full">MazaCoin (MZC)</option> <option value="MZC|full">MazaCoin (MZC)</option>
<option value="SYS:full">SysCoin (SYS)</option> <option value="SYS|full">SysCoin (SYS)</option>
<option value="UNO:full">Unobtanium (UNO)</option> <option value="UNO|full">Unobtanium (UNO)</option>
<option value="ZEC:full">Zcash (ZEC)</option> <option value="ZEC|full">Zcash (ZEC)</option>
<option value="ZET:full">Zetacoin (ZET)</option> <option value="ZET|full">Zetacoin (ZET)</option>
</optgroup> </optgroup>
<optgroup label="Assetchains"> <optgroup label="Assetchains">
<option value="BET:basilisk|native">BET (BET)</option> <option value="BET|basilisk|native">BET (BET)</option>
<option value="BOTS:basilisk|native">BOTS (BOTS)</option> <option value="BOTS|basilisk|native">BOTS (BOTS)</option>
<option value="CEAL:basilisk|native">CEAL NET (CEAL)</option> <option value="CEAL|basilisk|native">CEAL NET (CEAL)</option>
<option value="CRYPTO:basilisk|native">CRYPTO (CRYPTO)</option> <option value="CRYPTO|basilisk|native">CRYPTO (CRYPTO)</option>
<option value="HOD:basilisk|native">HODL (HODL)</option> <option value="HOD|basilisk|native">HODL (HODL)</option>
<option value="DEX:basilisk|native">InstantDEX (DEX)</option> <option value="DEX|basilisk|native">InstantDEX (DEX)</option>
<option value="JUMBLR:basilisk|native">JUMBLR (JUMBLR)</option> <option value="JUMBLR|basilisk|native">JUMBLR (JUMBLR)</option>
<option value="KV:basilisk|native">KV (KV)</option> <option value="KV|basilisk|native">KV (KV)</option>
<option value="MGW:basilisk|native">MultiGateway (MGW)</option> <option value="MGW|basilisk|native">MultiGateway (MGW)</option>
<option value="MVP:basilisk|native">MVP Lineup (MVP)</option> <option value="MVP|basilisk|native">MVP Lineup (MVP)</option>
<option value="PANGEA:basilisk|native">PANGEA (PANGEA)</option> <option value="PANGEA|basilisk|native">PANGEA (PANGEA)</option>
<option value="REVS:basilisk|native">REVS (REVS)</option> <option value="REVS|basilisk|native">REVS (REVS)</option>
<option value="SHARK:basilisk|native">SHARK (SHARK)</option> <option value="SHARK|basilisk|native">SHARK (SHARK)</option>
<option value="MESH:basilisk|native">SpaceMesh (MESH)</option> <option value="MESH|basilisk|native">SpaceMesh (MESH)</option>
<option value="SUPERNET:basilisk|native">SUPERNET (SUPERNET)</option> <option value="SUPERNET|basilisk|native">SUPERNET (SUPERNET)</option>
<option value="WIRELESS:basilisk|native">WIRELESS (WIRELESS)</option> <option value="WIRELESS|basilisk|native">WIRELESS (WIRELESS)</option>
</optgroup> </optgroup>
<optgroup label="Fiat Currencies"> <optgroup label="Fiat Currencies">
<option value="AUD:basilisk|native">Australian Dollar (AUD)</option> <option value="AUD:basilisk|native">Australian Dollar (AUD)</option>
@ -175,7 +192,7 @@ class AddCoin extends React.Component {
</div> </div>
</div> </div>
<div className="col-sm-4"> <div className="col-sm-4">
<button type="button" className="btn btn-primary mdl_addcoin_done_btn-login" data-toggle="modal" data-dismiss="modal" id="mdl_addcoin_done_btn-login" onClick={this.activateCoin}>{translate('INDEX.ACTIVATE_COIN')}</button> <button type="button" className="btn btn-primary mdl_addcoin_done_btn-login" data-toggle="modal" data-dismiss="modal" id="mdl_addcoin_done_btn-login" onClick={this.activateCoin} disabled={this.state.selectedCoin === '-Select-'}>{translate('INDEX.ACTIVATE_COIN')}</button>
</div> </div>
<div className="col-sm-12 text-center"> <div className="col-sm-12 text-center">
<div className="form-group col-lg-4 col-md-4 col-sm-6 col-xs-6 style-addcoin-lbl-mdl-login"> <div className="form-group col-lg-4 col-md-4 col-sm-6 col-xs-6 style-addcoin-lbl-mdl-login">

23
react/src/components/toaster/toaster.js
View File

@ -12,11 +12,11 @@ class Toaster extends React.Component {
} }
componentWillReceiveProps(props) { componentWillReceiveProps(props) {
if (props.message && props.message.text && props.message.type) { if (props && props.message && props.display) {
this.setState({ this.setState({
message: props.message.text, message: props.message,
display: true, display: props.display,
type: props.message.type, type: 'warning',
}); });
} }
} }
@ -33,17 +33,18 @@ class Toaster extends React.Component {
this.setInitialState(); this.setInitialState();
} }
renderMessage() { renderToast() {
setTimeout(() => { setTimeout(() => {
this.setInitialState(); //this.setInitialState();
}, 2000); }, 5000);
return ( return (
<div className="toaster"> <div id="toast-container" className="toast-bottom-right" aria-live="polite" role="alert">
<div className="toaster_text"> <div className={"toast toast-" + this.state.type}>
{ this.state.message } <button className="toast-close-button" role="button" onClick={this.dismissToast}>×</button>
<div className="toast-title">{ this.state.typeTitle }</div>
<div className="toast-message">{ this.state.message }</div>
</div> </div>
<button className="toaster_close" onClick={this.dismissToast}>x</button>
</div> </div>
); );
} }

6
react/src/reducers/toaster.js
View File

@ -1,10 +1,12 @@
import { } from '../actions/actionCreators'; import { TOASTER_MESSAGE } from '../actions/actionCreators';
export function toaster(state = { export function toaster(state = {
}, action) { }, action) {
switch (action.type) { switch (action.type) {
case '1234': case TOASTER_MESSAGE:
return Object.assign({}, state, { return Object.assign({}, state, {
display: action.display,
message: action.message,
}); });
default: default:
return state; return state;

Write Preview
Loading…
Cancel
Save