Parity configuration settings, i.e. mode (#3212)
* Add initial page * Add parity icon * opacity for parity icon * Mode selector * Actually set mode when value changes
This commit is contained in:
parent
7b043047f0
commit
458ee4cbad
@ -31,7 +31,7 @@ import ContractInstances from './contracts';
|
||||
|
||||
import { initStore } from './redux';
|
||||
import { ContextProvider, muiTheme } from './ui';
|
||||
import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, Dapp, Dapps, Settings, SettingsBackground, SettingsProxy, SettingsViews, Signer, Status } from './views';
|
||||
import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, Dapp, Dapps, Settings, SettingsBackground, SettingsParity, SettingsProxy, SettingsViews, Signer, Status } from './views';
|
||||
|
||||
import { setApi } from './redux/providers/apiActions';
|
||||
|
||||
@ -81,6 +81,7 @@ ReactDOM.render(
|
||||
<Route path='background' component={ SettingsBackground } />
|
||||
<Route path='proxy' component={ SettingsProxy } />
|
||||
<Route path='views' component={ SettingsViews } />
|
||||
<Route path='parity' component={ SettingsParity } />
|
||||
</Route>
|
||||
<Route path='signer' component={ Signer } />
|
||||
<Route path='status' component={ Status } />
|
||||
|
17
js/src/views/Settings/Parity/index.js
Normal file
17
js/src/views/Settings/Parity/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './parity';
|
116
js/src/views/Settings/Parity/parity.js
Normal file
116
js/src/views/Settings/Parity/parity.js
Normal file
@ -0,0 +1,116 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { MenuItem } from 'material-ui';
|
||||
|
||||
import { Select, Container, ContainerTitle } from '../../../ui';
|
||||
|
||||
import layout from '../layout.css';
|
||||
|
||||
const MODES = {
|
||||
'active': 'Parity continuously syncs the chain',
|
||||
'passive': 'Parity syncs initially, then sleeps and wakes regularly to resync',
|
||||
'dark': 'Parity syncs only when the RPC is active',
|
||||
'offline': 'Parity doesn\'t sync'
|
||||
};
|
||||
|
||||
export default class Parity extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
state = {
|
||||
mode: 'active'
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
this.loadMode();
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<Container>
|
||||
<ContainerTitle title='Parity' />
|
||||
<div className={ layout.layout }>
|
||||
<div className={ layout.overview }>
|
||||
<div>Control the Parity node settings and mode of operation via this interface.</div>
|
||||
</div>
|
||||
<div className={ layout.details }>
|
||||
{ this.renderModes() }
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
renderModes () {
|
||||
const modes = Object
|
||||
.keys(MODES)
|
||||
.map((mode) => {
|
||||
const description = MODES[mode];
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
key={ mode }
|
||||
value={ mode }
|
||||
label={ description }>
|
||||
{ description }
|
||||
</MenuItem>
|
||||
);
|
||||
});
|
||||
|
||||
const { mode } = this.state;
|
||||
|
||||
return (
|
||||
<Select
|
||||
label='mode of operation'
|
||||
hint='the syning mode for the Parity node'
|
||||
value={ mode }
|
||||
onChange={ this.onChangeMode }>
|
||||
{ modes }
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
|
||||
onChangeMode = (event, index, mode) => {
|
||||
const { api } = this.context;
|
||||
|
||||
api.ethcore
|
||||
.setMode(mode)
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
this.setState({ mode });
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn('onChangeMode', error);
|
||||
});
|
||||
}
|
||||
|
||||
loadMode () {
|
||||
const { api } = this.context;
|
||||
|
||||
api.ethcore
|
||||
.mode()
|
||||
.then((mode) => {
|
||||
this.setState({ mode });
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn('loadMode', error);
|
||||
});
|
||||
}
|
||||
}
|
@ -17,6 +17,7 @@
|
||||
import settingsReducer from './reducers';
|
||||
import { toggleView, updateBackground } from './actions';
|
||||
import SettingsBackground from './Background';
|
||||
import SettingsParity from './Parity';
|
||||
import SettingsProxy from './Proxy';
|
||||
import SettingsViews, { defaultViews } from './Views';
|
||||
|
||||
@ -24,6 +25,7 @@ export default from './settings';
|
||||
|
||||
export {
|
||||
SettingsBackground,
|
||||
SettingsParity,
|
||||
SettingsProxy,
|
||||
SettingsViews,
|
||||
defaultViews,
|
||||
|
@ -61,3 +61,13 @@
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.imageIcon {
|
||||
height: 20px;
|
||||
margin: 2px 0.5em 2px 0 !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.tabactive .imageIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
@ -14,8 +14,6 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
// 0xecf69634885f27a8f78161e530f15a8d3b57d39e755c222c92cf297b6e25aaaa
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { Tab, Tabs } from 'material-ui';
|
||||
import ActionSettingsEthernet from 'material-ui/svg-icons/action/settings-ethernet';
|
||||
@ -23,6 +21,7 @@ import ImageBlurOn from 'material-ui/svg-icons/image/blur-on';
|
||||
import ImageRemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye';
|
||||
|
||||
import { Actionbar, Page } from '../../ui';
|
||||
import imagesEthcoreBlock from '../../../assets/images/parity-logo-white-no-text.svg';
|
||||
|
||||
import styles from './settings.css';
|
||||
|
||||
@ -37,11 +36,23 @@ export default class Settings extends Component {
|
||||
|
||||
render () {
|
||||
const { children } = this.props;
|
||||
const hash = (window.location.hash || '').split('?')[0].split('/')[2];
|
||||
const isProxied = window.location.hostname.indexOf('.parity') !== -1;
|
||||
let proxy = null;
|
||||
|
||||
if (!isProxied) {
|
||||
proxy = this.renderTab(hash, 'proxy', <ActionSettingsEthernet />);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.layout }>
|
||||
<Actionbar title='settings' className={ styles.bar }>
|
||||
{ this.renderTabs() }
|
||||
<Tabs className={ styles.tabs } value={ hash }>
|
||||
{ this.renderTab(hash, 'views', <ImageRemoveRedEye />) }
|
||||
{ this.renderTab(hash, 'background', <ImageBlurOn />) }
|
||||
{ proxy }
|
||||
{ this.renderTab(hash, 'parity', <img src={ imagesEthcoreBlock } className={ styles.imageIcon } />) }
|
||||
</Tabs>
|
||||
</Actionbar>
|
||||
<Page>
|
||||
{ children }
|
||||
@ -50,41 +61,15 @@ export default class Settings extends Component {
|
||||
);
|
||||
}
|
||||
|
||||
renderTabs () {
|
||||
const hash = (window.location.hash || '').split('?')[0].split('/')[2];
|
||||
const isProxied = window.location.hostname.indexOf('.parity') !== -1;
|
||||
let proxy = null;
|
||||
|
||||
if (!isProxied) {
|
||||
proxy = (
|
||||
<Tab
|
||||
className={ hash === 'proxy' ? styles.tabactive : styles.tab }
|
||||
value='proxy'
|
||||
key='proxy'
|
||||
icon={ <ActionSettingsEthernet /> }
|
||||
label={ <div className={ styles.menu }>proxy</div> }
|
||||
onActive={ this.onActivate('proxy') } />
|
||||
);
|
||||
}
|
||||
|
||||
renderTab (hash, section, icon) {
|
||||
return (
|
||||
<Tabs className={ styles.tabs } value={ hash }>
|
||||
<Tab
|
||||
className={ hash === 'views' ? styles.tabactive : styles.tab }
|
||||
value='views'
|
||||
key='views'
|
||||
icon={ <ImageRemoveRedEye /> }
|
||||
label={ <div className={ styles.menu }>views</div> }
|
||||
onActive={ this.onActivate('views') } />
|
||||
<Tab
|
||||
className={ hash === 'background' ? styles.tabactive : styles.tab }
|
||||
value='background'
|
||||
key='background'
|
||||
icon={ <ImageBlurOn /> }
|
||||
label={ <div className={ styles.menu }>background</div> }
|
||||
onActive={ this.onActivate('background') } />
|
||||
{ proxy }
|
||||
</Tabs>
|
||||
<Tab
|
||||
className={ hash === section ? styles.tabactive : styles.tab }
|
||||
value={ section }
|
||||
key={ section }
|
||||
icon={ icon }
|
||||
label={ <div className={ styles.menu }>{ section }</div> }
|
||||
onActive={ this.onActivate(section) } />
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -24,7 +24,7 @@ import Contracts from './Contracts';
|
||||
import Dapp from './Dapp';
|
||||
import Dapps from './Dapps';
|
||||
import ParityBar from './ParityBar';
|
||||
import Settings, { SettingsBackground, SettingsProxy, SettingsViews } from './Settings';
|
||||
import Settings, { SettingsBackground, SettingsParity, SettingsProxy, SettingsViews } from './Settings';
|
||||
import Signer from './Signer';
|
||||
import Status from './Status';
|
||||
|
||||
@ -41,6 +41,7 @@ export {
|
||||
ParityBar,
|
||||
Settings,
|
||||
SettingsBackground,
|
||||
SettingsParity,
|
||||
SettingsProxy,
|
||||
SettingsViews,
|
||||
Signer,
|
||||
|
Loading…
Reference in New Issue
Block a user