|
|
import React, { Component } from 'react';
|
|
|
|
|
|
import ContentLoader from 'react-content-loader'
|
|
|
|
|
|
import Tooltip from 'material-ui/Tooltip';
|
|
|
import Dialog, {
|
|
|
DialogActions,
|
|
|
DialogContent,
|
|
|
DialogContentText,
|
|
|
DialogTitle,
|
|
|
} from 'material-ui/Dialog';
|
|
|
import { CircularProgress } from 'material-ui/Progress';
|
|
|
|
|
|
import Button from 'material-ui/Button';
|
|
|
import IconButton from 'material-ui/IconButton';
|
|
|
|
|
|
import CommentContainer from '../../comment/CommentContainer'
|
|
|
import CommentInput from '../../comment/CommentInput'
|
|
|
|
|
|
import ChooseAnswerView from '../component/ChooseAnswerView'
|
|
|
|
|
|
import { withStyles } from 'material-ui/styles';
|
|
|
import { markdownToHTML } from 'educoder'
|
|
|
import AnswerListContainer from './answer/AnswerListContainer'
|
|
|
import './leftView.css'
|
|
|
|
|
|
import CodeEvaluateMultiLevelAnswerUnlock from './CodeEvaluateMultiLevelAnswerUnlock'
|
|
|
import MUIDialogStyleUtil from '../component/MUIDialogStyleUtil'
|
|
|
// http://danilowoz.com/create-react-content-loader/
|
|
|
const MyLoader = () => (
|
|
|
<ContentLoader
|
|
|
height={600}
|
|
|
width={400}
|
|
|
speed={2}
|
|
|
primaryColor={"#000000"}
|
|
|
secondaryColor={"#ecebeb"}
|
|
|
>
|
|
|
<rect x="0" y="10" rx="3" ry="3" width="320" height="6.4" />
|
|
|
<rect x="0" y="35" rx="3" ry="3" width="85" height="10" />
|
|
|
<rect x="0" y="60" rx="3" ry="3" width="350" height="6.4" />
|
|
|
<rect x="0" y="80" rx="3" ry="3" width="350" height="6.4" />
|
|
|
<rect x="0" y="100" rx="3" ry="3" width="350" height="6.4" />
|
|
|
<rect x="0" y="120" rx="3" ry="3" width="101" height="6.4" />
|
|
|
|
|
|
<rect x="0" y="145" rx="3" ry="3" width="65" height="10" />
|
|
|
<rect x="0" y="170" rx="3" ry="3" width="350" height="6.4" />
|
|
|
<rect x="0" y="190" rx="3" ry="3" width="350" height="6.4" />
|
|
|
<rect x="0" y="210" rx="3" ry="3" width="201" height="6.4" />
|
|
|
</ContentLoader>
|
|
|
)
|
|
|
|
|
|
const styles = MUIDialogStyleUtil.getTwoButtonStyle(
|
|
|
(theme) => { return {
|
|
|
iconButton: {
|
|
|
margin: theme.spacing.unit,
|
|
|
// background: '#05101A',
|
|
|
color: '#4CACFF',
|
|
|
top: '-7px',
|
|
|
width: '36px',
|
|
|
height: '36px',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
|
|
|
// const styles = theme => ();
|
|
|
|
|
|
class LeftView extends Component {
|
|
|
|
|
|
goToCertification() {
|
|
|
window.open('/account/professional_certification', '_blank');
|
|
|
}
|
|
|
// /shixuns/mnf6b7z3/shixun_discuss?challenge_id=88
|
|
|
render() {
|
|
|
let { challenge, shixun, tabIndex, tabIndexChange, loading, discusses_count
|
|
|
, dialogOpen, handleDialogClose, handleDialogReadAnswer, gameAnswer, loadingComments, st, user,
|
|
|
classes, onDrawerButtonClick, lockedAnswers, unlockedAnswers, isMultiLevelAnswer } = this.props
|
|
|
|
|
|
let propaedeutics = shixun ? shixun.propaedeutics : null;
|
|
|
let _hasAnswer = challenge.hasAnswer // st === 1 ||
|
|
|
// const actions = [
|
|
|
// <Button
|
|
|
// label="取消"
|
|
|
// primary={true}
|
|
|
// onClick={handleDialogClose}
|
|
|
// style={{marginRight: '6px'}}
|
|
|
// />,
|
|
|
// <Button
|
|
|
// variant="raised"
|
|
|
// label="确定"
|
|
|
// primary={true}
|
|
|
// onClick={handleDialogReadAnswer}
|
|
|
// />,
|
|
|
// ];
|
|
|
|
|
|
// TODO TEST
|
|
|
// isMultiLevelAnswer = true
|
|
|
const is_teacher = user.is_teacher
|
|
|
|
|
|
let contentText = is_teacher ?
|
|
|
<React.Fragment>
|
|
|
<p>{`已经过职业认证的教师可以免金币查看答案哟~`}</p>
|
|
|
<p>{`将扣除${challenge.score}点金币，是否确认查看答案`}</p>
|
|
|
<p><a onClick={()=>this.goToCertification()} style={{textDecoration: 'underline'}}>立即认证</a></p>
|
|
|
</React.Fragment>
|
|
|
:
|
|
|
<React.Fragment>
|
|
|
<p>{`先查看参考答案，再通过评测的学生，实训作业有可能是零分哦~`}</p>
|
|
|
<p>{`将扣除${challenge.score}点金币，是否确认查看答案`}</p>
|
|
|
</React.Fragment>;
|
|
|
|
|
|
// 多级别解锁
|
|
|
if (isMultiLevelAnswer) {
|
|
|
// power === 0 &&
|
|
|
contentText = ( is_teacher ) ?
|
|
|
<React.Fragment>
|
|
|
<p>{`已经过职业认证的教师可以免金币查看答案哟~`}</p>
|
|
|
<p><a style={{textDecoration: 'underline'}} onClick={()=>this.goToCertification()}
|
|
|
style={{ color: '#1890ff', 'margin-top': '6px', display: 'inline-block'}}>立即认证</a></p>
|
|
|
<CodeEvaluateMultiLevelAnswerUnlock
|
|
|
ref="answerUnlock" lockedAnswers={lockedAnswers} unlockedAnswers={unlockedAnswers}
|
|
|
challenge={challenge}
|
|
|
>
|
|
|
</CodeEvaluateMultiLevelAnswerUnlock>
|
|
|
</React.Fragment>
|
|
|
:
|
|
|
<React.Fragment>
|
|
|
<p>{`先查看参考答案，再通过评测的学生，实训作业将被扣分`}</p>
|
|
|
{/* { MultiLevelUnlockTable } */}
|
|
|
<CodeEvaluateMultiLevelAnswerUnlock
|
|
|
ref="answerUnlock" lockedAnswers={lockedAnswers} unlockedAnswers={unlockedAnswers}
|
|
|
challenge={challenge}
|
|
|
>
|
|
|
</CodeEvaluateMultiLevelAnswerUnlock>
|
|
|
</React.Fragment>;
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
|
|
|
{ is_teacher ? <Button size="small" variant="raised" style={{ marginRight: '20px'}}
|
|
|
onClick={()=>this.goToCertification()} color="primary">
|
|
|
{ '立即认证' }
|
|
|
</Button> : ''}
|
|
|
*/
|
|
|
|
|
|
return (
|
|
|
<React.Fragment>
|
|
|
<Dialog
|
|
|
open={dialogOpen}
|
|
|
onClose={handleDialogClose}
|
|
|
>
|
|
|
<DialogTitle id="alert-dialog-title">{"提示"}</DialogTitle>
|
|
|
<DialogContent id="dialog-content" >
|
|
|
<DialogContentText id="alert-dialog-description" style={{textAlign: 'center'}}>
|
|
|
{ contentText }
|
|
|
</DialogContentText>
|
|
|
</DialogContent>
|
|
|
{/* http://localhost:3000/account/professional_certification */}
|
|
|
<DialogActions id="dialog-actions">
|
|
|
|
|
|
<Button onClick={handleDialogClose} color="primary" className={`${classes.button} ${classes.buttonGray}`}>
|
|
|
取消
|
|
|
</Button>
|
|
|
{/* variant={ is_teacher ? "flat" : "raised"} */}
|
|
|
<Button size="medium" variant={"raised"}
|
|
|
className={`${classes.button} `}
|
|
|
onClick={() => handleDialogReadAnswer(this.refs.answerUnlock ? this.refs.answerUnlock.getSelectedId() : '')}
|
|
|
color="primary" autoFocus>
|
|
|
{ is_teacher ? '继续查看' : '确定'}
|
|
|
</Button>
|
|
|
</DialogActions>
|
|
|
|
|
|
</Dialog>
|
|
|
|
|
|
<div className="-fit -layout-v">
|
|
|
|
|
|
<div className="-layout-v -flex -bg-white -task-ml80">
|
|
|
|
|
|
{/*新界面关卡名称显示、关卡金币显示*/}
|
|
|
<div id="task_name_section" className="task_name_section">
|
|
|
|
|
|
{ loading ? "" :
|
|
|
<React.Fragment>
|
|
|
<Tooltip title={ "点击查看全部任务" } disableFocusListener={true}>
|
|
|
<IconButton color="default" mini={''} aria-label="edit" className={classes.iconButton}
|
|
|
onClick={onDrawerButtonClick}>
|
|
|
<i className={ "fa font-18 fa-list-ul" }></i>
|
|
|
</IconButton>
|
|
|
</Tooltip>
|
|
|
<h3 className="subject">第{challenge.position}关：{challenge.subject}</h3>
|
|
|
<span className="btn-cir-big fr mt8 mr15">{challenge.score}</span>
|
|
|
</React.Fragment>
|
|
|
}
|
|
|
</div>
|
|
|
|
|
|
<ul id="tab_nav" className="-tab-nav">
|
|
|
<li id="tab_nav_1" className={ tabIndex === 0 ? `tab_hover` : ''} onClick={() => tabIndexChange(0)}>
|
|
|
<a href="javascript:void(0);" className="tab_type" style={{fontSize: '16px'}}>过关任务</a>
|
|
|
</li>
|
|
|
{/**/}
|
|
|
{ propaedeutics && <li id="tab_nav_2" className={ tabIndex === 1 ? `tab_hover` : ''} onClick={() => tabIndexChange(1)}>
|
|
|
<a href="javascript:void(0);" className="tab_type">背景知识</a>
|
|
|
</li> }
|
|
|
{ _hasAnswer && <li id="tab_nav_3" className={ tabIndex === 2 ? `tab_hover` : ''} onClick={() => tabIndexChange(2)}>
|
|
|
<a href="javascript:void(0);" className="tab_type" style={{fontSize: '16px'}}>参考答案</a>
|
|
|
</li> }
|
|
|
<li id="tab_nav_5" className={ tabIndex === 4 ? `tab_hover` : ''} onClick={() => tabIndexChange(4)}
|
|
|
style={{display: 'none'}}>
|
|
|
<a href="javascript:void(0);" className="tab_type" style={{fontSize: '16px'}}>TA人解答</a>
|
|
|
</li>
|
|
|
<li id="tab_nav_4" className={ tabIndex === 3 ? `tab_hover` : ''} onClick={() => tabIndexChange(3)}>
|
|
|
<a href="javascript:void(0)" className="tab_type" style={{fontSize: '16px'}} data-remote="true">
|
|
|
评论<span id="discusses_count" className="edu-cir-grey1" style={{lineHeight: '18px!important'}}>{discusses_count||""}</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
{/*<span className="btn-cir-big fr mt8 mr15">经验值：{challenge.score}</span>*/}
|
|
|
</ul>
|
|
|
<div className="cl"></div>
|
|
|
<div className="-flex -relative greytab-inner">
|
|
|
{/*过关任务*/}
|
|
|
<div id="tab_con_1" className="tab-info" style={ tabIndex === 0 ? {display: 'block'} : {display: 'none'} }>
|
|
|
<div className="fit -scroll">
|
|
|
<div className="-layout-v -fit">
|
|
|
{ loading ?
|
|
|
<div className="-flex -scroll task-padding16 panel-box-sizing new_li break_word markdown-body editormd-html-preview"
|
|
|
unselectable="on">
|
|
|
<CircularProgress size={40} thickness={3} className="circularProgress"
|
|
|
style={{ marginLeft: 'auto', marginRight: 'auto', marginTop: '40% !important', display: 'block' }}/>
|
|
|
</div> : ""
|
|
|
}
|
|
|
|
|
|
<div className="-flex -scroll task-padding16 panel-box-sizing new_li break_word markdown-body editormd-html-preview"
|
|
|
unselectable="on" id="game_task_pass" style={loading ? {display:'none'} : {}}>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{/*背景知识*/}
|
|
|
<div id="tab_con_2" className="tab-info" style={ tabIndex === 1 ? {display: 'block'} : {display: 'none'} }>
|
|
|
<div className="fit -scroll">
|
|
|
<div className="-layout-v -fit">
|
|
|
<div className="-flex -scroll task-padding16 panel-box-sizing new_li markdown-body editormd-html-preview" unselectable="on" id="game_ready_knowledge">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{/* 参考答案*/}
|
|
|
<div id="tab_con_3" className="tab-info" style={ tabIndex === 2 ? {display: 'block'} : {display: 'none'} }>
|
|
|
<div className="fit -scroll">
|
|
|
<div className="-layout-v -fit" style={{ overflowY: 'scroll' }}>
|
|
|
{/* 只读markdown的写法 markdownToHTML 这个接口生成的markdown没有setMarkdown接口
|
|
|
<textarea style={{display:'none'}} id="editorMd_contents" value={gameAnswer}></textarea>*/}
|
|
|
|
|
|
|
|
|
{ (!unlockedAnswers || unlockedAnswers.length === 0) && (!lockedAnswers || lockedAnswers.length === 0) &&
|
|
|
<div className="-flex -scroll task-padding16 panel-box-sizing new_li" id="game_answer_show"
|
|
|
style={{ display: st === 0 ? 'block' : 'none' }}>
|
|
|
</div>
|
|
|
}
|
|
|
|
|
|
<style>{`
|
|
|
.multiLevelAnswer {
|
|
|
margin: 0px 12px;
|
|
|
}
|
|
|
.multiLevelAnswer .anwserSection {
|
|
|
padding: 20px;
|
|
|
border-bottom: 1px solid #EAEAEA;
|
|
|
}
|
|
|
.multiLevelAnswer .df {
|
|
|
display: flex;
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
.multiLevelAnswer .level {
|
|
|
color: #9A9A9A;
|
|
|
flex: 0 0 55px;
|
|
|
}
|
|
|
.multiLevelAnswer .name{
|
|
|
color: #4C4C4C;
|
|
|
flex: 1;
|
|
|
}
|
|
|
.multiLevelAnswer .status{
|
|
|
color: #CDCDCD;
|
|
|
flex: 0 0 45px;
|
|
|
}
|
|
|
.markdown-body ol, .markdown-body ul {
|
|
|
padding-left: 2.5em;
|
|
|
}
|
|
|
`}</style>
|
|
|
|
|
|
<div className="multiLevelAnswer">
|
|
|
{ unlockedAnswers && unlockedAnswers.map((item, index) => {
|
|
|
return <div className="anwserSection">
|
|
|
<div className="df">
|
|
|
<div className="level">级别{index + 1}：</div>
|
|
|
<div className="name">{item.name}</div>
|
|
|
<div className="status">已解锁</div>
|
|
|
</div>
|
|
|
<div className="contents markdown-body" dangerouslySetInnerHTML={{__html: markdownToHTML(item.contents)}}>
|
|
|
</div>
|
|
|
</div>
|
|
|
})}
|
|
|
|
|
|
{ lockedAnswers && lockedAnswers.map((item, index) => {
|
|
|
return <div class="anwserSection">
|
|
|
<div className="df">
|
|
|
<div className="level">级别{index + 1 + (unlockedAnswers ? unlockedAnswers.length : 0)}：</div>
|
|
|
<div className="name">{item.name}</div>
|
|
|
<div
|
|
|
className="status" onClick={ () => { this.props.showUnlockAnswerDialog(item) } }
|
|
|
style={{ color: '#4CACFF', cursor: 'pointer' }}
|
|
|
>解锁</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
})}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
{ st === 1 ?
|
|
|
<div className="-flex -scroll task-padding16 panel-box-sizing new_li" id="game_answer_show_choose"
|
|
|
>
|
|
|
<ChooseAnswerView gameAnswer={gameAnswer}></ChooseAnswerView>
|
|
|
</div>
|
|
|
: ''
|
|
|
}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{/* TA人解答*/}
|
|
|
<div id="tab_con_5" className="tab-info" style={ tabIndex === 4 ? {display: 'block'} : {display: 'none'} }>
|
|
|
<div className="fit -scroll">
|
|
|
<div className="-layout-v -fit">
|
|
|
<AnswerListContainer {...this.props}></AnswerListContainer>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="tab_con_4" className="tab-info commentsDelegateParent" style={ tabIndex === 3 ? {display: 'block'} : {display: 'none'} }>
|
|
|
{ loadingComments ?
|
|
|
<CircularProgress size={40} thickness={3} style={{ marginLeft: 'auto', marginRight: 'auto', marginTop: '40%', display: 'block' }}/> :
|
|
|
<CommentContainer {...this.props}></CommentContainer>
|
|
|
}
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="mini_comment_section">
|
|
|
{/*说点什么 */}
|
|
|
<CommentInput challenge={challenge} {...this.props}></CommentInput>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</React.Fragment>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
// <textarea style={{display:'none'}} value={challenge.task_pass ? `${challenge.task_pass}` : ''}></textarea>
|
|
|
// {/*<textarea style={{display:'none'}} value={propaedeutics ? `${propaedeutics}` : ''}></textarea>*/}
|
|
|
export default withStyles(styles)( LeftView );
|
