m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

调整 全局esc 刷新问题

Browse Source
dev_forum
杨树明 6 years ago
parent 69097619b3
commit 3eb10b62fa
7 changed files with 1403 additions and 1393 deletions
Show Stats Download Patch File Download Diff File

1
public/react/src/context/TPIContextProvider.js
Unescape View File

@ -892,6 +892,7 @@ pop_box_new(htmlvalue, 480, 182);
<Dialog
id="tpi-dialog"
open={this.state.gDialogOpen}
disableEscapeKeyDown={true}
onClose={() => this.handleGdialogClose()}
>
<DialogTitle id="alert-dialog-title">{"提示"}</DialogTitle>

2
public/react/src/modules/comment/Comments.js
Unescape View File

@ -505,6 +505,7 @@ class Comments extends Component {
</Modals> :
<Dialog
open={dialogOpen}
disableEscapeKeyDown={true}
onClose={this.handleDialogClose}
>
<DialogTitle id="alert-dialog-title">{"提示"}</DialogTitle>
@ -531,6 +532,7 @@ class Comments extends Component {
<Dialog
open={goldRewardDialogOpen}
disableEscapeKeyDown={true}
onClose={this.handleGoldRewardDialogClose}
>
<DialogTitle id="alert-dialog-title">{"奖励设置"}</DialogTitle>

177
public/react/src/modules/common/RewardDialog.js
Unescape View File

@ -1,88 +1,89 @@
import React, { Component } from 'react';
import Dialog, {
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from 'material-ui/Dialog';
import Button from 'material-ui/Button';
import { FormControl, FormHelperText } from 'material-ui/Form';
import Input, { InputLabel } from 'material-ui/Input';
class RewardDialog extends Component {
constructor(props) {
super(props)
this.handleGoldRewardDialogClose = this.handleGoldRewardDialogClose.bind(this)
this.state = {
// goldRewardDialogOpen: false,
goldRewardInput: '',
}
}
showGoldRewardDialog(comment, childComment) {
if (comment.admin === true) {
this.comment = comment;
this.childComment = childComment;
this.setState({goldRewardDialogOpen: true})
}
}
handleGoldRewardDialogClose() {
this.props.setRewardDialogVisible(false)
}
onGoldRewardDialogOkBtnClick() {
console.log('onGoldRewardDialogOkBtnClick')
const { goldRewardInput } = this.state;
if (!goldRewardInput || goldRewardInput === '0' || goldRewardInput.indexOf('-') !== -1) {
this.setState({ goldRewardInputError: true})
return;
} else {
this.props.setRewardDialogVisible( false )
this.props.rewardCode(goldRewardInput)
}
}
onGoldRewardInputChange(event) {
this.setState({ goldRewardInput: event.target.value, goldRewardInputError: false });
}
render() {
const { goldRewardDialogOpen } = this.props;
const { goldRewardInputError } = this.state;
const goldRewardInputErrorObj = goldRewardInputError ? {'error': 'error'} : {}
return (
<Dialog
open={goldRewardDialogOpen}
onClose={this.handleGoldRewardDialogClose}
>
<DialogTitle id="alert-dialog-title">{"奖励设置"}</DialogTitle>
<DialogContent>
<FormControl { ...goldRewardInputErrorObj } aria-describedby="name-error-text">
<InputLabel htmlFor="goldReward">请输入奖励的金币数量</InputLabel>
<Input id="goldReward" type="number" value={this.state.goldRewardInput} onChange={(e) => this.onGoldRewardInputChange(e)} />
{ goldRewardInputError ? <FormHelperText id="name-error-text">奖励金币不能为空或负数</FormHelperText> : ''}
</FormControl>
{/*<DialogContentText id="alert-dialog-description" style={{textAlign: 'center'}}> </DialogContentText>*/}
</DialogContent>
<DialogActions>
<Button onClick={this.handleGoldRewardDialogClose} color="primary">
取消
</Button>
<Button variant="raised"
onClick={() => this.onGoldRewardDialogOkBtnClick() } color="primary" autoFocus>
确定
</Button>
</DialogActions>
</Dialog>
);
}
}
export default RewardDialog;
import React, { Component } from 'react';
import Dialog, {
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from 'material-ui/Dialog';
import Button from 'material-ui/Button';
import { FormControl, FormHelperText } from 'material-ui/Form';
import Input, { InputLabel } from 'material-ui/Input';
class RewardDialog extends Component {
constructor(props) {
super(props)
this.handleGoldRewardDialogClose = this.handleGoldRewardDialogClose.bind(this)
this.state = {
// goldRewardDialogOpen: false,
goldRewardInput: '',
}
}
showGoldRewardDialog(comment, childComment) {
if (comment.admin === true) {
this.comment = comment;
this.childComment = childComment;
this.setState({goldRewardDialogOpen: true})
}
}
handleGoldRewardDialogClose() {
this.props.setRewardDialogVisible(false)
}
onGoldRewardDialogOkBtnClick() {
console.log('onGoldRewardDialogOkBtnClick')
const { goldRewardInput } = this.state;
if (!goldRewardInput || goldRewardInput === '0' || goldRewardInput.indexOf('-') !== -1) {
this.setState({ goldRewardInputError: true})
return;
} else {
this.props.setRewardDialogVisible( false )
this.props.rewardCode(goldRewardInput)
}
}
onGoldRewardInputChange(event) {
this.setState({ goldRewardInput: event.target.value, goldRewardInputError: false });
}
render() {
const { goldRewardDialogOpen } = this.props;
const { goldRewardInputError } = this.state;
const goldRewardInputErrorObj = goldRewardInputError ? {'error': 'error'} : {}
return (
<Dialog
open={goldRewardDialogOpen}
disableEscapeKeyDown={true}
onClose={this.handleGoldRewardDialogClose}
>
<DialogTitle id="alert-dialog-title">{"奖励设置"}</DialogTitle>
<DialogContent>
<FormControl { ...goldRewardInputErrorObj } aria-describedby="name-error-text">
<InputLabel htmlFor="goldReward">请输入奖励的金币数量</InputLabel>
<Input id="goldReward" type="number" value={this.state.goldRewardInput} onChange={(e) => this.onGoldRewardInputChange(e)} />
{ goldRewardInputError ? <FormHelperText id="name-error-text">奖励金币不能为空或负数</FormHelperText> : ''}
</FormControl>
{/*<DialogContentText id="alert-dialog-description" style={{textAlign: 'center'}}> </DialogContentText>*/}
</DialogContent>
<DialogActions>
<Button onClick={this.handleGoldRewardDialogClose} color="primary">
取消
</Button>
<Button variant="raised"
onClick={() => this.onGoldRewardDialogOkBtnClick() } color="primary" autoFocus>
确定
</Button>
</DialogActions>
</Dialog>
);
}
}
export default RewardDialog;

1
public/react/src/modules/login/LoginDialog.js
Unescape View File

@ -381,6 +381,7 @@ class LoginDialog extends Component {
return (
<Dialog open={true} id="DialogID"
style={{ display: isRender==false? 'none' : ''}}
disableEscapeKeyDown={true}
onClose={() => this.handleDialogClose()}
>
<div className={dialogBox}>

1
public/react/src/modules/login/Trialapplication.js
Unescape View File

@ -538,6 +538,7 @@ class Trialapplication extends Component {
style={{height: '0', width: '0', border: 'none', display: "none"}}/>
<Dialog open={true} id="DialogIDysl"
disableEscapeKeyDown={true}
style={{display: isRenders == false ? 'none' : '', "border-radius": "10px"}}
>
<div id="closeIcon" onClick={() => {

1895
public/react/src/modules/page/MainContentContainer.js
View File

File diff suppressed because it is too large Load Diff

719
public/react/src/modules/page/main/LeftView.js
Unescape View File

@ -1,359 +1,360 @@
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 );
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}
disableEscapeKeyDown={true}
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 );

Write Preview
Loading…
Cancel
Save