98 lines
3.3 KiB
JavaScript
98 lines
3.3 KiB
JavaScript
import './header.scss';
|
|
import React, { Component } from 'react';
|
|
import { withStyles } from 'material-ui/styles';
|
|
import Drawer from 'material-ui/Drawer';
|
|
|
|
import TaskListContainer from './taskList/TaskListContainer'
|
|
import TaskResultLayer from './layers/TaskResultLayer'
|
|
import Tooltip from 'material-ui/Tooltip';
|
|
|
|
function pad(num) {
|
|
return ("0" + num).slice(-2);
|
|
}
|
|
function hhmmss(secs) {
|
|
var minutes = Math.floor(secs / 60);
|
|
secs = secs % 60;
|
|
var hours = Math.floor(minutes / 60)
|
|
minutes = minutes % 60;
|
|
return pad(hours) + ":" + pad(minutes) + ":" + pad(secs);
|
|
}
|
|
|
|
|
|
const styles = theme => ({
|
|
button: {
|
|
margin: theme.spacing.unit,
|
|
background: '#05101A',
|
|
color: '#4CACFF',
|
|
top: '-6px'
|
|
},
|
|
});
|
|
|
|
class Header extends Component {
|
|
|
|
|
|
goBack() {
|
|
const { shixun } = this.props
|
|
const url = `/shixuns/${shixun.identifier}/challenges`
|
|
window.location.href = url;
|
|
}
|
|
|
|
|
|
render() {
|
|
const { challenge, shixun, grade, user, game,
|
|
onChallengesDrawerClose, myshixun_manager,
|
|
onStarChange, saveChallengeStar, challengesDrawerOpen, taskListLoading, challenges, showSnackbar, closeTaskResultLayer } = this.props
|
|
return (
|
|
<div className="task-page-header tpi_content" id="myshixun_top">
|
|
<TaskResultLayer {...this.props} onStarChange={onStarChange} saveChallengeStar={saveChallengeStar}></TaskResultLayer>
|
|
<Drawer
|
|
className="leftNavDrawer"
|
|
width={500}
|
|
open={challengesDrawerOpen}
|
|
onClose={() => onChallengesDrawerClose()}
|
|
>
|
|
<TaskListContainer challenges={challenges} taskListLoading={taskListLoading} shixun={shixun}
|
|
challenge={challenge} onStarChange={onStarChange} saveChallengeStar={saveChallengeStar}
|
|
onChallengesDrawerClose={() => onChallengesDrawerClose()}
|
|
showSnackbar={showSnackbar} closeTaskResultLayer={closeTaskResultLayer}
|
|
myshixun_manager={myshixun_manager}
|
|
>
|
|
</TaskListContainer>
|
|
</Drawer>
|
|
<div className="headerLeft">
|
|
<div className="userInfo">
|
|
<a href={user.user_url} target="_blank">
|
|
{user.image_url && <img alt="0?1442652658" width="35" height="35" src={`../images/${user.image_url}`} />}
|
|
</a>
|
|
<a href={user.user_url} className="userInfoName" target="_blank">{user.username}</a>
|
|
</div>
|
|
{(grade || grade == 0) && <div className="-header-right clearfix">
|
|
<span style={{ width: '20px', height: '20px', background: '#FFD633', borderRadius: '10px', marginTop: '3px' }} className="fl"></span>
|
|
<span className="ml5 color-white fl" id="user_grade">
|
|
<span>{grade === 0 ? grade : (grade || '')}</span>
|
|
</span>
|
|
</div>}
|
|
</div>
|
|
<div className="-layout-h ml10 headerCenter">
|
|
<h2 className="-header-title task-hide color-white">{shixun ? shixun.name || '' : ''}</h2>
|
|
<Tooltip title="本关通关耗时">
|
|
<div className="timeRecord">{game && hhmmss(game.cost_time)}</div>
|
|
</Tooltip>
|
|
</div>
|
|
<div className="headerRight">
|
|
<div className="fr">
|
|
{shixun ?
|
|
<a href={`/shixuns/${shixun.identifier}/challenges`} className="mr20 mt8 exit_btn">
|
|
<i className="fa fa-power-off font-16"></i>
|
|
<span>{'退出实训'}</span>
|
|
</a>
|
|
: null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(Header);
|