src/features/core/components/CoreIndex/CoreIndex.jsx

   1 import { connect } from 'react-redux'
   2 import {DropdownButton, MenuItem} from 'react-bootstrap'
   3 import componentClassNames from 'utility/componentClassNames'
   4 import { PageContent, PageTitle, ConsoleSection } from 'features/shared/components'
   5 import React from 'react'
   6 import styles from './CoreIndex.scss'
   7 import actions from 'actions'
   8 import {withNamespaces} from 'react-i18next'
   9
  10
  11 class CoreIndex extends React.Component {
  12   constructor(props) {
  13     super(props)
  14     this.state = {
  15       btmAmountUnit: 'BTM'
  16     }
  17     this.handleMiningState = this.handleMiningState.bind(this)
  18     this.handleAdvancedOptionChange = this.handleAdvancedOptionChange.bind(this)
  19     this.changeBTMamount = this.changeBTMamount.bind(this)
  20     this.consolePopup = this.consolePopup.bind(this)
  21   }
  22
  23   componentDidMount() {
  24     if(window.ipcRenderer){
  25       window.ipcRenderer.on('btmAmountUnitState', (event, arg) => {
  26         this.props.uptdateBtmAmountUnit(arg)
  27       })
  28     }
  29   }
  30
  31   changeBTMamount(value) {
  32     this.setState({ btmAmountUnit: value })
  33     this.props.uptdateBtmAmountUnit(value)
  34   }
  35
  36   handleAdvancedOptionChange(event) {
  37     const target = event.target
  38     if( target.checked ){
  39       this.props.showNavAdvanced()
  40     }else{
  41       this.props.hideNavAdvanced()
  42     }
  43   }
  44
  45   handleMiningState(event){
  46     const target = event.target
  47     if( target.checked ){
  48       this.props.updateMiningState(true)
  49     }else{
  50       this.props.updateMiningState(false)
  51     }
  52   }
  53
  54   consolePopup(e) {
  55     e.preventDefault()
  56     this.props.showModal(
  57       <ConsoleSection
  58         cmd={this.props.cmd}
  59       />
  60     )
  61   }
  62
  63   render() {
  64     let navState = this.props.navAdvancedState === 'advance'
  65     let miningState = this.props.core.mingStatus
  66     let coreData = this.props.core.coreData
  67
  68     const t = this.props.t
  69
  70     let configBlock = (
  71       <div className={[styles.left, styles.col].join(' ')}>
  72         <div>
  73           <h4>{t('coreIndex.configuration')}</h4>
  74           <table className={styles.table}>
  75             <tbody>
  76             <tr className={styles.row}>
  77               <td className={styles.row_label}>{t('coreIndex.version')}:</td>
  78               <td><code>{coreData? coreData['versionInfo']['version']: null}</code></td>
  79             </tr>
  80             <tr className={styles.row}>
  81               <td className={styles.row_label}>{t('commonWords.language')}:</td>
  82               <td>{t('languageFull')}</td>
  83             </tr>
  84             <tr className={styles.row}>
  85               <td colSpan={2}><hr /></td>
  86             </tr>
  87             <tr className={styles.row}>
  88               <td className={styles.row_label}>{t('coreIndex.advanced')}: </td>
  89               <td>
  90                 <label className={styles.switch}>
  91                   <input
  92                     type='checkbox'
  93                     onChange={this.handleAdvancedOptionChange}
  94                     checked={navState}
  95                   />
  96                   <span className={styles.slider}></span>
  97                 </label>
  98               </td>
  99             </tr>
 100             <tr className={styles.row}>
 101               <td className={styles.row_label} >{t('coreIndex.unit')} </td>
 102               <td>
 103                 <DropdownButton
 104                   bsSize='xsmall'
 105                   id='input-dropdown-amount'
 106                   title={this.props.core.btmAmountUnit || this.state.btmAmountUnit}
 107                   onSelect={this.changeBTMamount}
 108                 >
 109                   <MenuItem eventKey='BTM'>BTM</MenuItem>
 110                   <MenuItem eventKey='mBTM'>mBTM</MenuItem>
 111                   <MenuItem eventKey='NEU'>NEU</MenuItem>
 112                 </DropdownButton>
 113               </td>
 114             </tr>
 115             </tbody>
 116           </table>
 117         </div>
 118       </div>
 119     )
 120
 121     let requestStatusBlock
 122
 123
 124     if(!coreData){
 125       requestStatusBlock = (<div>loading...</div>)
 126     }else {
 127       requestStatusBlock = (
 128         <div>
 129           <h4>{t('coreIndex.networkStatus')}</h4>
 130           <table className={styles.table}>
 131             <tbody>
 132             <tr className={styles.row} key={'core-listening'}>
 133               <td className={styles.row_label}> {t('coreIndex.listening')}:</td>
 134               <td className={styles.row_value}><code>{(coreData['listening'])? t('coreIndex.connect'): t('coreIndex.disConnect')}</code></td>
 135             </tr>
 136             <tr className={styles.row} key={'core-syncing'}>
 137               <td className={styles.row_label}> {t('coreIndex.syncStatus')}:</td>
 138               <td className={styles.row_value}><code>{(coreData['syncing'])? t('coreIndex.synchronizing'): t('coreIndex.synced')}</code></td>
 139             </tr>
 140             <tr className={styles.row} key={'core-peerCount'}>
 141               <td className={styles.row_label}> {t('coreIndex.peer')}:</td>
 142               <td className={styles.row_value}><code>{String(coreData['peerCount'])}</code></td>
 143             </tr>
 144             <tr className={styles.row} key={'core-currentBlock'}>
 145               <td className={styles.row_label}> {t('coreIndex.currentBlock')}:</td>
 146               <td className={styles.row_value}><code>{String(coreData['currentBlock'])}</code></td>
 147             </tr>
 148             <tr className={styles.row} key={'core-highestBlock'}>
 149               <td className={styles.row_label}> {t('coreIndex.highestBlock')}:</td>
 150               <td className={styles.row_value}><code>{String(coreData['highestBlock'])}</code></td>
 151             </tr>
 152             <tr className={styles.row} key={'core-networkID'}>
 153               <td className={styles.row_label}> {t('coreIndex.networkId')}:</td>
 154               <td className={styles.row_value}><code>{String(coreData['networkId'])}</code></td>
 155             </tr>
 156             </tbody>
 157           </table>
 158         </div>
 159       )
 160     }
 161
 162     let networkStatusBlock = (
 163       <div className={[styles.right, styles.col].join(' ')}>
 164         {/*<div ref='requestComponent'>*/}
 165           {requestStatusBlock}
 166         {/*</div>*/}
 167       </div>
 168     )
 169
 170     return (
 171       <div className={componentClassNames(this, 'flex-container')}>
 172         <PageTitle
 173           title={t('coreIndex.coreStatus')}
 174           actions={[
 175             <button className='btn btn-link' onClick={this.consolePopup}>
 176               <img src={require('images/console-window.svg')}/>
 177             </button>
 178           ]}
 179         />
 180
 181         <PageContent>
 182           <div className={`${styles.flex} ${styles.mainContainer}`}>
 183             {configBlock}
 184             {networkStatusBlock}
 185           </div>
 186         </PageContent>
 187       </div>
 188     )
 189   }
 190 }
 191
 192 const mapStateToProps = (state) => ({
 193   core: state.core,
 194   navAdvancedState: state.app.navAdvancedState,
 195 })
 196
 197 const mapDispatchToProps = (dispatch) => ({
 198   showNavAdvanced: () => dispatch(actions.app.showNavAdvanced),
 199   hideNavAdvanced: () => dispatch(actions.app.hideNavAdvanced),
 200   uptdateBtmAmountUnit: (param) => dispatch(actions.core.updateBTMAmountUnit(param)),
 201   updateMiningState: (param) => dispatch(actions.core.updateMiningState(param)),
 202   showModal: (body) => dispatch(actions.app.showModal(
 203     body,
 204     actions.app.hideModal,
 205     null,
 206     {
 207       box: true,
 208       wide: true,
 209       noCloseBtn: true
 210     }
 211   )),
 212   cmd: (data) => dispatch(actions.app.cmd(data))
 213 })
 214
 215 export default connect(
 216   mapStateToProps,
 217   mapDispatchToProps
 218 )( withNamespaces('translations') (CoreIndex) )