|
|
|
@ -17,14 +17,17 @@ import Button from 'material-ui/Button';
|
|
|
|
import './tpiPage.css';
|
|
|
|
import './tpiPage.css';
|
|
|
|
import './tpiPageForMobile.css';
|
|
|
|
import './tpiPageForMobile.css';
|
|
|
|
const $ = window.$;
|
|
|
|
const $ = window.$;
|
|
|
|
|
|
|
|
const showIframeContent = window.location.search.indexOf('vnc=1') != -1;
|
|
|
|
class MainContent extends Component {
|
|
|
|
class MainContent extends Component {
|
|
|
|
componentDidMount() {
|
|
|
|
componentDidMount() {
|
|
|
|
// ios下图标位置有问题
|
|
|
|
// ios下图标位置有问题
|
|
|
|
setTimeout(()=>{
|
|
|
|
if (!showIframeContent) {
|
|
|
|
if (window.$('.b-label>.resize-helper').position().top < 100) {
|
|
|
|
setTimeout(()=>{
|
|
|
|
window.$('.b-label>.resize-helper').css('top', '200px')
|
|
|
|
if (window.$('.b-label>.resize-helper').position().top < 100) {
|
|
|
|
}
|
|
|
|
window.$('.b-label>.resize-helper').css('top', '200px')
|
|
|
|
}, 4000)
|
|
|
|
}
|
|
|
|
|
|
|
|
}, 4000)
|
|
|
|
|
|
|
|
}
|
|
|
|
$("body").css("padding-right","0px!important")
|
|
|
|
$("body").css("padding-right","0px!important")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
onResizeButtonClick = () => {
|
|
|
|
onResizeButtonClick = () => {
|
|
|
|
@ -45,7 +48,6 @@ class MainContent extends Component {
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
games_repository_contents_style = {overflow: 'hidden', height: '445px'}
|
|
|
|
games_repository_contents_style = {overflow: 'hidden', height: '445px'}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className="page--body -margin-t-64 -flex">
|
|
|
|
<div className="page--body -margin-t-64 -flex">
|
|
|
|
<div className="-layout -stretch -fit labelN" id="game_show_content">
|
|
|
|
<div className="-layout -stretch -fit labelN" id="game_show_content">
|
|
|
|
@ -65,6 +67,21 @@ class MainContent extends Component {
|
|
|
|
|
|
|
|
|
|
|
|
<div className="split-panel--second -layout -vertical -flex -relative -flex-basic50"
|
|
|
|
<div className="split-panel--second -layout -vertical -flex -relative -flex-basic50"
|
|
|
|
id="game_right_contents" style={{width: '996px'}}>
|
|
|
|
id="game_right_contents" style={{width: '996px'}}>
|
|
|
|
|
|
|
|
{/*
|
|
|
|
|
|
|
|
iframe模式下需要这两个样式来调整
|
|
|
|
|
|
|
|
.page--body { z-index: 9999; }
|
|
|
|
|
|
|
|
.resize-helper { top: 10px }
|
|
|
|
|
|
|
|
*/}
|
|
|
|
|
|
|
|
<style>{`
|
|
|
|
|
|
|
|
#contentIframe {
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.page--body { z-index: ${showIframeContent ? '7999': '1'} ; }
|
|
|
|
|
|
|
|
.b-label>.resize-helper { top: ${showIframeContent ? '10px': '50%'} }
|
|
|
|
|
|
|
|
`}</style>
|
|
|
|
|
|
|
|
{ showIframeContent ? <iframe src="http://106.75.27.125:42288/vnc.html" id="contentIframe" ></iframe> :
|
|
|
|
|
|
|
|
<React.Fragment>
|
|
|
|
{/* 旧版本、评测等待提示--更新提示块*/}
|
|
|
|
{/* 旧版本、评测等待提示--更新提示块*/}
|
|
|
|
{/*<div className="tip-panel-animate clearfix user_bg_shadow bor-grey-e">
|
|
|
|
{/*<div className="tip-panel-animate clearfix user_bg_shadow bor-grey-e">
|
|
|
|
<div className="fl tip-img">
|
|
|
|
<div className="fl tip-img">
|
|
|
|
@ -74,55 +91,57 @@ class MainContent extends Component {
|
|
|
|
</div>*/}
|
|
|
|
</div>*/}
|
|
|
|
|
|
|
|
|
|
|
|
<div className="-layout-v -flex">
|
|
|
|
<div className="-layout-v -flex">
|
|
|
|
<div className="-flex -relative">
|
|
|
|
<div className="-flex -relative">
|
|
|
|
<div className="split-panel -fit -vertical" id="games_repository_valuation">
|
|
|
|
<div className="split-panel -fit -vertical" id="games_repository_valuation">
|
|
|
|
<div className="-layout -stretch -fit -vertical centerH">
|
|
|
|
<div className="-layout -stretch -fit -vertical centerH">
|
|
|
|
<div className="-layout -vertical -flex -relative -flex-basic70 -bg-weightblack"
|
|
|
|
<div className="-layout -vertical -flex -relative -flex-basic70 -bg-weightblack"
|
|
|
|
id="games_repository_contents" style={games_repository_contents_style} >
|
|
|
|
id="games_repository_contents" style={games_repository_contents_style} >
|
|
|
|
|
|
|
|
|
|
|
|
{/* 选择题或编程题 */}
|
|
|
|
{/* 选择题或编程题 */}
|
|
|
|
{/* readRepoTimeout 如果读取代码超时，显示重新加载按钮，重新拉取代码 */}
|
|
|
|
{/* readRepoTimeout 如果读取代码超时，显示重新加载按钮，重新拉取代码 */}
|
|
|
|
{
|
|
|
|
{
|
|
|
|
st === 0
|
|
|
|
st === 0
|
|
|
|
?
|
|
|
|
?
|
|
|
|
readRepoTimeout === true ? <div className="readRepoFailed">
|
|
|
|
readRepoTimeout === true ? <div className="readRepoFailed">
|
|
|
|
代码加载失败，<a className="retry"
|
|
|
|
代码加载失败，<a className="retry"
|
|
|
|
onClick={() => this.props.fetchRepositoryCode(this.props, null, null, true)}>重试</a>
|
|
|
|
onClick={() => this.props.fetchRepositoryCode(this.props, null, null, true)}>重试</a>
|
|
|
|
</div> :
|
|
|
|
</div> :
|
|
|
|
<React.Fragment>
|
|
|
|
<React.Fragment>
|
|
|
|
<CircularProgress size={40} thickness={3}
|
|
|
|
<CircularProgress size={40} thickness={3}
|
|
|
|
style={{ display: (codeLoading ? 'block' : 'none') , marginLeft: 'auto', marginRight: 'auto', marginTop: '20%' }}/>
|
|
|
|
style={{ display: (codeLoading ? 'block' : 'none') , marginLeft: 'auto', marginRight: 'auto', marginTop: '20%' }}/>
|
|
|
|
<div style={{ display: (codeLoading ? 'none' : 'block') }}>
|
|
|
|
<div style={{ display: (codeLoading ? 'none' : 'block') }}>
|
|
|
|
<CodeRepositoryViewContainer { ...this.props } ></CodeRepositoryViewContainer>
|
|
|
|
<CodeRepositoryViewContainer { ...this.props } ></CodeRepositoryViewContainer>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</React.Fragment>
|
|
|
|
</React.Fragment>
|
|
|
|
: <ChooseRepositoryView ref="chooseQ" { ...this.props }></ChooseRepositoryView>
|
|
|
|
: <ChooseRepositoryView ref="chooseQ" { ...this.props }></ChooseRepositoryView>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
{/* */}
|
|
|
|
{/* */}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="h-center" style={{top: '438px'}}>
|
|
|
|
<div className="h-center" style={{top: '438px'}}>
|
|
|
|
{/*<div className="-changebg -bg-weightblack" id="-bg-change-color"></div>*/}
|
|
|
|
{/*<div className="-changebg -bg-weightblack" id="-bg-change-color"></div>*/}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="split-panel--second -layout -vertical -flex -relative -bg-black -flex-basic60"
|
|
|
|
<div className="split-panel--second -layout -vertical -flex -relative -bg-black -flex-basic60"
|
|
|
|
id="games_valuation_contents" style={{height: '258px'}}>
|
|
|
|
id="games_valuation_contents" style={{height: '258px'}}>
|
|
|
|
{/* 测试结果、评测信息区域 */}
|
|
|
|
{/* 测试结果、评测信息区域 */}
|
|
|
|
{ loading ? <CircularProgress size={40} thickness={3} style={{ marginLeft: 'auto', marginRight: 'auto', marginTop: '10%', display: 'block' }}/>
|
|
|
|
{ loading ? <CircularProgress size={40} thickness={3} style={{ marginLeft: 'auto', marginRight: 'auto', marginTop: '10%', display: 'block' }}/>
|
|
|
|
:
|
|
|
|
:
|
|
|
|
st === 0
|
|
|
|
st === 0
|
|
|
|
? <CodeEvaluateView output_sets={output_sets} latest_output={latest_output}
|
|
|
|
? <CodeEvaluateView output_sets={output_sets} latest_output={latest_output}
|
|
|
|
record={record} onTestSetHeaderClick={onTestSetHeaderClick} {...this.props}></CodeEvaluateView>
|
|
|
|
record={record} onTestSetHeaderClick={onTestSetHeaderClick} {...this.props}></CodeEvaluateView>
|
|
|
|
: <ChooseEvaluateView {...this.props}></ChooseEvaluateView>
|
|
|
|
: <ChooseEvaluateView {...this.props}></ChooseEvaluateView>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="actionView" className="-layout-h -center -bg-grey-90 -grey-20 -bg-darkblack" style={{height:'48px'}}>
|
|
|
|
<div id="actionView" className="-layout-h -center -bg-grey-90 -grey-20 -bg-darkblack" style={{height:'48px'}}>
|
|
|
|
<ActionView onRunCodeTest={onRunCodeTest} {...this.props}></ActionView>
|
|
|
|
<ActionView onRunCodeTest={onRunCodeTest} {...this.props}></ActionView>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
