OSDN Git Service

update account selection in transaction
[bytom/bytom-electron.git] / src / features / core / components / CoreIndex / CoreIndex.jsx
index 2af003e..98fb194 100644 (file)
@@ -1,14 +1,11 @@
-import { chainClient } from 'utility/environment'
 import { connect } from 'react-redux'
 import {DropdownButton, MenuItem} from 'react-bootstrap'
 import componentClassNames from 'utility/componentClassNames'
-import { PageContent, ErrorBanner, PageTitle } from 'features/shared/components'
+import { PageContent, PageTitle, ConsoleSection } from 'features/shared/components'
 import React from 'react'
 import styles from './CoreIndex.scss'
-import testnetUtils from 'features/testnet/utils'
-import { docsRoot } from 'utility/environment'
 import actions from 'actions'
-import {navAdvancedState} from '../../../app/reducers'
+import {withNamespaces} from 'react-i18next'
 
 
 class CoreIndex extends React.Component {
@@ -20,6 +17,7 @@ class CoreIndex extends React.Component {
     this.handleMiningState = this.handleMiningState.bind(this)
     this.handleAdvancedOptionChange = this.handleAdvancedOptionChange.bind(this)
     this.changeBTMamount = this.changeBTMamount.bind(this)
+    this.consolePopup = this.consolePopup.bind(this)
   }
 
   componentDidMount() {
@@ -53,25 +51,41 @@ class CoreIndex extends React.Component {
     }
   }
 
+  consolePopup(e) {
+    e.preventDefault()
+    this.props.showModal(
+      <ConsoleSection
+        cmd={this.props.cmd}
+      />
+    )
+  }
+
   render() {
     let navState = this.props.navAdvancedState === 'advance'
     let miningState = this.props.core.mingStatus
+    let coreData = this.props.core.coreData
+
+    const t = this.props.t
 
     let configBlock = (
       <div className={[styles.left, styles.col].join(' ')}>
         <div>
-          <h4>Configuration</h4>
+          <h4>{t('coreIndex.configuration')}</h4>
           <table className={styles.table}>
             <tbody>
-            <tr>
-              <td className={styles.row_label}>Language:</td>
-              <td>{this.props.core.lang === 'zh' ? '中文' : 'English'}</td>
+            <tr className={styles.row}>
+              <td className={styles.row_label}>{t('coreIndex.version')}:</td>
+              <td><code>{coreData? coreData['versionInfo']['version']: null}</code></td>
+            </tr>
+            <tr className={styles.row}>
+              <td className={styles.row_label}>{t('commonWords.language')}:</td>
+              <td>{t('languageFull')}</td>
             </tr>
-            <tr>
+            <tr className={styles.row}>
               <td colSpan={2}><hr /></td>
             </tr>
-            <tr>
-              <td className={styles.row_label}>Advanced: </td>
+            <tr className={styles.row}>
+              <td className={styles.row_label}>{t('coreIndex.advanced')}: </td>
               <td>
                 <label className={styles.switch}>
                   <input
@@ -83,21 +97,8 @@ class CoreIndex extends React.Component {
                 </label>
               </td>
             </tr>
-            <tr>
-              <td className={styles.row_label}>Mining: </td>
-              <td>
-                <label className={styles.switch}>
-                  <input
-                    type='checkbox'
-                    onChange={this.handleMiningState}
-                    checked={miningState}
-                  />
-                  <span className={styles.slider}></span>
-                </label>
-              </td>
-            </tr>
-            <tr>
-              <td className={styles.row_label} >Unit to show amount in </td>
+            <tr className={styles.row}>
+              <td className={styles.row_label} >{t('coreIndex.unit')} </td>
               <td>
                 <DropdownButton
                   bsSize='xsmall'
@@ -117,36 +118,68 @@ class CoreIndex extends React.Component {
       </div>
     )
 
-    let coreData = this.props.core.coreData
-    let requestStatusBlock =(
-      <div className={styles['sub-row']}>
-          <h4>Network status</h4>
+    let requestStatusBlock
+
+
+    if(!coreData){
+      requestStatusBlock = (<div>loading...</div>)
+    }else {
+      requestStatusBlock = (
+        <div>
+          <h4>{t('coreIndex.networkStatus')}</h4>
           <table className={styles.table}>
             <tbody>
-            {Object.keys(coreData).map(key => (
-              <tr key={key}>
-                <td className={styles.row_label}> {key.replace(/([a-z])([A-Z])/g, '$1 $2')}: </td>
-                <td className={styles.row_value}><code>{ String(coreData[key])}</code></td>
-              </tr>))}
+            <tr className={styles.row} key={'core-listening'}>
+              <td className={styles.row_label}> {t('coreIndex.listening')}:</td>
+              <td className={styles.row_value}><code>{(coreData['listening'])? t('coreIndex.connect'): t('coreIndex.disConnect')}</code></td>
+            </tr>
+            <tr className={styles.row} key={'core-syncing'}>
+              <td className={styles.row_label}> {t('coreIndex.syncStatus')}:</td>
+              <td className={styles.row_value}><code>{(coreData['syncing'])? t('coreIndex.synchronizing'): t('coreIndex.synced')}</code></td>
+            </tr>
+            <tr className={styles.row} key={'core-peerCount'}>
+              <td className={styles.row_label}> {t('coreIndex.peer')}:</td>
+              <td className={styles.row_value}><code>{String(coreData['peerCount'])}</code></td>
+            </tr>
+            <tr className={styles.row} key={'core-currentBlock'}>
+              <td className={styles.row_label}> {t('coreIndex.currentBlock')}:</td>
+              <td className={styles.row_value}><code>{String(coreData['currentBlock'])}</code></td>
+            </tr>
+            <tr className={styles.row} key={'core-highestBlock'}>
+              <td className={styles.row_label}> {t('coreIndex.highestBlock')}:</td>
+              <td className={styles.row_value}><code>{String(coreData['highestBlock'])}</code></td>
+            </tr>
+            <tr className={styles.row} key={'core-networkID'}>
+              <td className={styles.row_label}> {t('coreIndex.networkId')}:</td>
+              <td className={styles.row_value}><code>{String(coreData['networkId'])}</code></td>
+            </tr>
             </tbody>
           </table>
         </div>
       )
+    }
 
     let networkStatusBlock = (
-      <div className={styles.right}>
-        <div ref='requestComponent'>
+      <div className={[styles.right, styles.col].join(' ')}>
+        {/*<div ref='requestComponent'>*/}
           {requestStatusBlock}
-        </div>
+        {/*</div>*/}
       </div>
     )
 
     return (
-      <div className={componentClassNames(this, 'flex-container', styles.mainContainer)}>
-        <PageTitle title='Core' />
+      <div className={componentClassNames(this, 'flex-container')}>
+        <PageTitle
+          title={t('coreIndex.coreStatus')}
+          actions={[
+            <button className={`btn btn-link ${styles.actionBtn}`} onClick={this.consolePopup}>
+              <span>{t('console.title')}</span> <img src={require('images/console-window.svg')}/>
+            </button>
+          ]}
+        />
 
         <PageContent>
-          <div className={`${styles.flex}`}>
+          <div className={`${styles.flex} ${styles.mainContainer}`}>
             {configBlock}
             {networkStatusBlock}
           </div>
@@ -165,10 +198,21 @@ const mapDispatchToProps = (dispatch) => ({
   showNavAdvanced: () => dispatch(actions.app.showNavAdvanced),
   hideNavAdvanced: () => dispatch(actions.app.hideNavAdvanced),
   uptdateBtmAmountUnit: (param) => dispatch(actions.core.updateBTMAmountUnit(param)),
-  updateMiningState: (param) => dispatch(actions.core.updateMiningState(param))
+  updateMiningState: (param) => dispatch(actions.core.updateMiningState(param)),
+  showModal: (body) => dispatch(actions.app.showModal(
+    body,
+    actions.app.hideModal,
+    null,
+    {
+      box: true,
+      wide: true,
+      noCloseBtn: true
+    }
+  )),
+  cmd: (data) => dispatch(actions.app.cmd(data))
 })
 
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(CoreIndex)
+)( withNamespaces('translations') (CoreIndex) )