/**
* SPDX-License-Identifier: Apache-2.0
*/
import React, { Component } from 'react';
import compose from 'recompose/compose';
import { connect } from 'react-redux';
import { withStyles } from '@material-ui/core/styles';
import Select from '../Styled/Select';
import { Nav, Navbar, NavbarBrand, NavbarToggler, Collapse } from 'reactstrap';
import { HashRouter as Router, NavLink } from 'react-router-dom';
import Switch from '@material-ui/core/Switch';
import FontAwesome from 'react-fontawesome';
import Drawer from '@material-ui/core/Drawer';
import Websocket from 'react-websocket';
import Badge from '@material-ui/core/Badge';
import Dialog from '@material-ui/core/Dialog';
import Loader from 'react-loader-spinner';
import NotificationsPanel from '../Panels/NotificationsPanel';
import Logo from '../../static/images/Explorer_Logo.svg';
import AdminPanel from '../Panels/AdminPanel';
import { chartOperations, chartSelectors } from '../../state/redux/charts';
import { tableOperations, tableSelectors } from '../../state/redux/tables';
import { themeSelectors } from '../../state/redux/theme';
import {
currentChannelType,
channelsType,
getBlockListType,
getBlocksPerHourType,
getBlocksPerMinType,
getChaincodeListType,
getChangeChannelType,
getChannelsType,
getDashStatsType,
getPeerListType,
getPeerStatusType,
getTransactionByOrgType,
getTransactionPerHourType,
getTransactionPerMinType,
refreshType
} from '../types';
const {
blockPerHour,
blockPerMin,
transactionPerHour,
transactionPerMin,
transactionByOrg,
dashStats,
changeChannel,
blockActivity,
peerStatus
} = chartOperations;
const {
blockList,
chaincodeList,
channels,
peerList,
transactionList
} = tableOperations;
const { currentChannelSelector } = chartSelectors;
const { channelsSelector } = tableSelectors;
const styles = theme => {
const { type } = theme.palette;
const dark = type === 'dark';
const darkNavbar = dark && {
background: 'linear-gradient(to right, rgb(236, 233, 252), #4d4575)'
};
return {
logo: {
width: 260,
height: 50,
'@media (max-width: 1415px) and (min-width: 990px)': {
width: 200,
height: 40
}
},
navbarHeader: {
backgroundColor: '#e8e8e8',
...darkNavbar
},
tab: {
color: dark ? '#242036' : '#000000',
fontSize: '1.05rem',
fontWeight: 800,
height: 50,
margin: 10,
'&:hover': {
color: dark ? '#242036' : '#000000'
},
'@media (max-width: 1415px) and (min-width: 990px)': {
fontSize: '0.85rem'
}
},
activeTab: {
color: '#ffffff',
backgroundColor: dark ? '#453e68' : '#58c5c2',
height: 60,
marginTop: 20,
padding: 10,
'&:hover': {
color: '#ffffff'
},
'@media (max-width: 1415px) and (min-width: 990px)': {
padding: '8%'
}
},
adminButton: {
paddingTop: 0,
marginTop: 0
},
themeSwitch: {
height: 50,
lineHeight: '50px',
textAlign: 'center',
marginLeft: 20,
width: 100,
paddingTop: 0,
'@media (max-width: 1415px) and (min-width: 990px)': {
display: 'flex'
},
'@media (max-width: 990px)': {
marginLeft: 0
}
},
bell: {
color: dark ? 'rgb(139, 143, 148)' : '#5f6164',
fontSize: '18pt',
margin: 8,
float: 'none',
'&:hover': {
color: dark ? '#c1d7f0' : '#24272a'
}
},
channel: {
width: 200,
margin: 8,
float: 'none',
'@media (max-width: 1415px) and (min-width: 990px)': {
width: '9em'
}
},
channelLoader: {
textAlign: 'center',
padding: 20
},
loader: {
margin: '0 auto',
width: 100
},
sunIcon: {
color: dark ? 'rgb(247, 200, 92)' : 'rgb(245, 185, 47)',
'@media (max-width: 1415px) and (min-width: 990px)': {
marginTop: 15
}
},
moonIcon: {
color: dark ? '#9cd7f7' : 'rgb(104, 195, 245)',
'@media (max-width: 1415px) and (min-width: 990px)': {
marginTop: 15
}
},
toggleIcon: {
color: dark ? '#242136' : '#58c5c2',
fontSize: '1.75em',
'&:focus': {
outline: 'none'
}
}
};
};
export class HeaderView extends Component {
constructor(props) {
super(props);
this.state = {
isOpen: false,
notifyDrawer: false,
adminDrawer: false,
channels: [],
notifyCount: 0,
notifications: [],
isLoading: true,
modalOpen: false,
selectedChannel: {}
};
}
componentDidMount() {
const { channels, currentChannel } = this.props;
const arr = [];
let selectedValue = {};
channels.forEach(element => {
if (element.channel_genesis_hash === currentChannel) {
selectedValue = {
value: element.channel_genesis_hash,
label: element.channelname
};
}
arr.push({
value: element.channel_genesis_hash,
label: element.channelname
});
});
this.setState({
channels: arr,
isLoading: false,
selectedChannel: selectedValue
});
this.interVal = setInterval(() => {
this.syncData(currentChannel);
}, 60000);
}
componentWillUnmount() {
clearInterval(this.interVal);
}
componentWillReceiveProps(nextProps) {
const { currentChannel, getChangeChannel } = this.props;
const options = [];
let selectedValue = {};
if (nextProps.channels.length > 0) {
nextProps.channels.forEach(element => {
options.push({
value: element.channel_genesis_hash,
label: element.channelname
});
if (
nextProps.currentChannel == null ||
nextProps.currentChannel === undefined
) {
if (element.channel_genesis_hash != null) {
selectedValue = {
value: element.channel_genesis_hash,
label: element.channelname
};
}
} else if (element.channel_genesis_hash === nextProps.currentChannel) {
selectedValue = {
value: element.channel_genesis_hash,
label: element.channelname
};
}
});
}
if (
nextProps.currentChannel === null ||
nextProps.currentChannel === undefined
) {
getChangeChannel(selectedValue.value);
}
this.setState({
channels: options,
isLoading: false,
selectedChannel: selectedValue
});
if (nextProps.currentChannel !== currentChannel) {
this.syncData(nextProps.currentChannel);
}
}
toggle = () => {
const { isOpen } = this.state;
if (window.matchMedia('(max-width:992px)').matches) {
this.setState({
isOpen: !isOpen
});
}
};
closeToggle = () => this.state.isOpen && this.toggle();
handleChange = async selectedChannel => {
if (this.state.channels.length > 1) {
const { getChangeChannel } = this.props;
clearInterval(this.interVal);
await this.handleOpen();
this.setState({ selectedChannel });
getChangeChannel(selectedChannel.value);
await this.syncData(selectedChannel.value);
this.interVal = setInterval(() => {
this.syncData(selectedChannel.value);
}, 60000);
}
// this.handleClose();
};
handleOpen = () => {
this.setState({ modalOpen: true });
};
handleClose = () => {
this.setState({ modalOpen: false });
};
handleDrawOpen = drawer => {
switch (drawer) {
case 'notifyDrawer': {
this.setState({ notifyDrawer: true });
this.setState({ notifyCount: 0 });
break;
}
case 'adminDrawer': {
this.setState({ adminDrawer: true });
break;
}
default: {
break;
}
}
};
handleDrawClose = drawer => {
switch (drawer) {
case 'notifyDrawer': {
this.setState({ no
没有合适的资源?快使用搜索试试~ 我知道了~
components
共66个文件
js:66个
5星 · 超过95%的资源 需积分: 1 29 下载量 104 浏览量
2018-09-14
20:00:02
上传
评论
收藏 66KB RAR 举报
温馨提示
汉化 Hyperledger Explorer is a simple, powerful, easy-to-use, highly maintainable, open source browser for viewing activity on the underlying blockchain network. Users have the ability to configure & build Hyperledger Explorer natively on macOS and Ubuntu.
资源推荐
资源详情
资源评论
收起资源包目录
components.rar (66个子文件)
components
Charts
TimeChart.js 2KB
OrgPieChart.spec.js 1KB
OrgPieChart.js 3KB
TimeChart.spec.js 2KB
ChartStats.js 5KB
ChartStats.spec.js 13KB
App
App.spec.js 832B
index.js 46B
App.js 2KB
Header
HeaderView.js 16KB
HeaderView.spec.js 8KB
index.js 67B
Panels
AdminPanel.js 5KB
NotificationsPanel.js 3KB
NotificationsPanel.spec.js 1KB
Styled
Select.js 2KB
Modal.js 2KB
MultiSelect.js 2KB
View.js 949B
Table.js 2KB
DatePicker.js 2KB
View
BlockView.js 5KB
LandingPage.js 6KB
ChaincodeModal.spec.js 740B
NetworkView.js 389B
ChaincodeView.spec.js 674B
TransactionsView.spec.js 4KB
TransactionView.js 7KB
TransactionsView.js 1KB
TransactionView.spec.js 4KB
DashboardView.spec.js 6KB
BlocksView.js 1002B
ChannelsView.js 401B
NetworkView.spec.js 429B
ChaincodeModal.js 3KB
PageNotFound.js 1KB
ChannelsView.spec.js 722B
BlocksView.spec.js 4KB
DashboardView.js 8KB
LandingPage.spec.js 3KB
ChaincodeView.js 440B
Lists
Transactions.js 12KB
TimelineStream.js 4KB
PeersHealth.spec.js 970B
Peers.spec.js 4KB
Transactions.spec.js 11KB
PeersHealth.js 1KB
Chaincodes.spec.js 6KB
Channels.spec.js 3KB
Peers.js 2KB
Chaincodes.js 4KB
TimelineStream.spec.js 4KB
Blocks.js 15KB
Channels.js 2KB
Blocks.spec.js 14KB
Footer
index.js 67B
FooterView.js 989B
Main.spec.js 4KB
types
index.js 4KB
Forms
ChannelForm.js 2KB
ChaincodeForm.js 2KB
ChannelForm.spec.js 362B
Theme
index.js 52B
Theme.js 2KB
ErrorMesage.js 517B
Main.js 5KB
共 66 条
- 1
资源评论
一路追寻
- 粉丝: 146
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功