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
   9
  10 class CoreIndex extends React.Component {
  11   constructor(props) {
  12     super(props)
  13     this.state = {
  14       btmAmountUnit: 'BTM'
  15     }
  16     this.handleMiningState = this.handleMiningState.bind(this)
  17     this.handleAdvancedOptionChange = this.handleAdvancedOptionChange.bind(this)
  18     this.changeBTMamount = this.changeBTMamount.bind(this)
  19     this.consolePopup = this.consolePopup.bind(this)
  20   }
  21
  22   componentDidMount() {
  23     if(window.ipcRenderer){
  24       window.ipcRenderer.on('btmAmountUnitState', (event, arg) => {
  25         this.props.uptdateBtmAmountUnit(arg)
  26       })
  27     }
  28   }
  29
  30   changeBTMamount(value) {
  31     this.setState({ btmAmountUnit: value })
  32     this.props.uptdateBtmAmountUnit(value)
  33   }
  34
  35   handleAdvancedOptionChange(event) {
  36     const target = event.target
  37     if( target.checked ){
  38       this.props.showNavAdvanced()
  39     }else{
  40       this.props.hideNavAdvanced()
  41     }
  42   }
  43
  44   handleMiningState(event){
  45     const target = event.target
  46     if( target.checked ){
  47       this.props.updateMiningState(true)
  48     }else{
  49       this.props.updateMiningState(false)
  50     }
  51   }
  52
  53   consolePopup(e) {
  54     e.preventDefault()
  55     this.props.showModal(
  56       <ConsoleSection
  57         cmd={this.props.cmd}
  58         lang={this.props.core.lang}
  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 lang = this.props.core.lang
  69
  70     let configBlock = (
  71       <div className={[styles.left, styles.col].join(' ')}>
  72         <div>
  73           <h4>{lang === 'zh' ? '配置' : 'Configuration'}</h4>
  74           <table className={styles.table}>
  75             <tbody>
  76             <tr className={styles.row}>
  77               <td className={styles.row_label}>{lang === 'zh' ? '核心版本号' : 'Core Versions'}:</td>
  78               <td><code>{coreData? coreData['version'] : null}</code></td>
  79             </tr>
  80             <tr className={styles.row}>
  81               <td className={styles.row_label}>{lang === 'zh' ? '语言' : 'Language'}:</td>
  82               <td>{lang === 'zh' ? '中文' : 'English'}</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}>{lang === 'zh' ? '高级导航选项' : '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}>{lang === 'zh' ? '挖矿' : 'Mining'}: </td>
 102               <td>
 103                 <label className={styles.switch}>
 104                   <input
 105                     type='checkbox'
 106                     onChange={this.handleMiningState}
 107                     checked={miningState}
 108                   />
 109                   <span className={styles.slider}></span>
 110                 </label>
 111               </td>
 112             </tr>
 113             <tr className={styles.row}>
 114               <td className={styles.row_label} >{lang === 'zh' ? '比原数量单位显示' : 'Unit to show amount in'} </td>
 115               <td>
 116                 <DropdownButton
 117                   bsSize='xsmall'
 118                   id='input-dropdown-amount'
 119                   title={this.props.core.btmAmountUnit || this.state.btmAmountUnit}
 120                   onSelect={this.changeBTMamount}
 121                 >
 122                   <MenuItem eventKey='BTM'>BTM</MenuItem>
 123                   <MenuItem eventKey='mBTM'>mBTM</MenuItem>
 124                   <MenuItem eventKey='NEU'>NEU</MenuItem>
 125                 </DropdownButton>
 126               </td>
 127             </tr>
 128             </tbody>
 129           </table>
 130         </div>
 131       </div>
 132     )
 133
 134     let requestStatusBlock
 135
 136
 137     if(!coreData){
 138       requestStatusBlock = (<div>loading...</div>)
 139     }else {
 140       requestStatusBlock = (
 141         <div>
 142           <h4>{lang === 'zh' ? '网络状态' : 'Network status'}</h4>
 143           <table className={styles.table}>
 144             <tbody>
 145             <tr className={styles.row} key={'core-listening'}>
 146               <td className={styles.row_label}> {lang === 'zh' ? '节点监听' : 'Peer Listening'}:</td>
 147               <td className={styles.row_value}>{(coreData['listening'])? (lang === 'zh' ? '连接' : <code>true</code>): (lang === 'zh' ? '断开' : <code>false</code>)}</td>
 148             </tr>
 149             <tr className={styles.row} key={'core-syncing'}>
 150               <td className={styles.row_label}> {lang === 'zh' ? '网络同步' : 'Syncing'}:</td>
 151               <td className={styles.row_value}>{(coreData['syncing'])? (lang === 'zh' ? '同步中' : <code>true</code>): (lang === 'zh' ? '同步完成' : <code>false</code>)}</td>
 152             </tr>
 153             <tr className={styles.row} key={'core-mining'}>
 154               <td className={styles.row_label}> {lang === 'zh' ? '挖矿状态' : 'Mining'}:</td>
 155               <td className={styles.row_value}>{(coreData['mining'])? (lang === 'zh' ? '运行' : <code>true</code>): (lang === 'zh' ? '停止' :  <code>false</code>)}</td>
 156             </tr>
 157             <tr className={styles.row} key={'core-peerCount'}>
 158               <td className={styles.row_label}> {lang === 'zh' ? '连接数' : 'Peer Count'}:</td>
 159               <td className={styles.row_value}><code>{String(coreData['peerCount'])}</code></td>
 160             </tr>
 161             <tr className={styles.row} key={'core-currentBlock'}>
 162               <td className={styles.row_label}> {lang === 'zh' ? '当前高度' : 'Current Block'}:</td>
 163               <td className={styles.row_value}><code>{String(coreData['currentBlock'])}</code></td>
 164             </tr>
 165             <tr className={styles.row} key={'core-highestBlock'}>
 166               <td className={styles.row_label}> {lang === 'zh' ? '最高高度' : 'Highest Block'}:</td>
 167               <td className={styles.row_value}><code>{String(coreData['highestBlock'])}</code></td>
 168             </tr>
 169             <tr className={styles.row} key={'core-networkID'}>
 170               <td className={styles.row_label}> {lang === 'zh' ? '网络ID' : 'Network Id'}:</td>
 171               <td className={styles.row_value}><code>{String(coreData['networkId'])}</code></td>
 172             </tr>
 173             </tbody>
 174           </table>
 175         </div>
 176       )
 177     }
 178
 179     let networkStatusBlock = (
 180       <div className={[styles.right, styles.col].join(' ')}>
 181         {/*<div ref='requestComponent'>*/}
 182           {requestStatusBlock}
 183         {/*</div>*/}
 184       </div>
 185     )
 186
 187     return (
 188       <div className={componentClassNames(this, 'flex-container', styles.mainContainer)}>
 189         <PageTitle
 190           title={lang === 'zh' ? '核心状态' :'Core Status'}
 191           actions={[
 192             <button className='btn btn-link' onClick={this.consolePopup}>
 193               <img src={require('images/console-window.svg')}/>
 194             </button>
 195           ]}
 196         />
 197
 198         <PageContent>
 199           <div className={`${styles.flex}`}>
 200             {configBlock}
 201             {networkStatusBlock}
 202           </div>
 203         </PageContent>
 204       </div>
 205     )
 206   }
 207 }
 208
 209 const mapStateToProps = (state) => ({
 210   core: state.core,
 211   navAdvancedState: state.app.navAdvancedState,
 212 })
 213
 214 const mapDispatchToProps = (dispatch) => ({
 215   showNavAdvanced: () => dispatch(actions.app.showNavAdvanced),
 216   hideNavAdvanced: () => dispatch(actions.app.hideNavAdvanced),
 217   uptdateBtmAmountUnit: (param) => dispatch(actions.core.updateBTMAmountUnit(param)),
 218   updateMiningState: (param) => dispatch(actions.core.updateMiningState(param)),
 219   showModal: (body) => dispatch(actions.app.showModal(
 220     body,
 221     actions.app.hideModal,
 222     null,
 223     {
 224       box: true,
 225       wide: true
 226     }
 227   )),
 228   cmd: (data) => dispatch(actions.app.cmd(data))
 229 })
 230
 231 export default connect(
 232   mapStateToProps,
 233   mapDispatchToProps
 234 )(CoreIndex)