|
|
import React, { Component } from 'react';
|
|
|
import axios from 'axios'
|
|
|
import { Spin, Icon } from 'antd'
|
|
|
import ClipboardJS from 'clipboard'
|
|
|
|
|
|
import VNCDisplay from './VNCDisplay'
|
|
|
import FloatButton from './component/FloatButton'
|
|
|
import SecondDrawer from './component/SecondDrawer'
|
|
|
import RepoTree from './component/repo/RepoTree'
|
|
|
import TPIMonaco from './component/monaco/TPIMonaco'
|
|
|
import notEditablePathImg from '../../images/tpi/notEditablePath.png'
|
|
|
|
|
|
import { Drawer } from "antd";
|
|
|
|
|
|
import './VNC.css'
|
|
|
const $ = window.$;
|
|
|
const firstDrawerWidth = 260;
|
|
|
class VNCContainer extends Component {
|
|
|
constructor(props) {
|
|
|
super(props)
|
|
|
|
|
|
this.state = {
|
|
|
fileTreeSelectedKeys: [],
|
|
|
repositoryCode: '',
|
|
|
displayKey: 1,
|
|
|
vnc_reseting: false,
|
|
|
saving: false,
|
|
|
}
|
|
|
}
|
|
|
componentDidMount() {
|
|
|
if (!this.clipboard) {
|
|
|
const clipboard = new ClipboardJS('.copybtn');
|
|
|
clipboard.on('success', (e) => {
|
|
|
this.props.showSnackbar('复制成功')
|
|
|
});
|
|
|
this.clipboard = clipboard
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// shouldComponentUpdate () {
|
|
|
// return false;
|
|
|
// }
|
|
|
|
|
|
getSecondDrawerWidth = () => {
|
|
|
return $('#game_right_contents').width() - firstDrawerWidth
|
|
|
}
|
|
|
onEditBlur = () => {
|
|
|
console.log('blurblur')
|
|
|
this.doFileUpdateRequestOnCodeMirrorBlur()
|
|
|
}
|
|
|
doFileUpdateRequestOnCodeMirrorBlur = () => {
|
|
|
if (!this.currentPath) {
|
|
|
console.error('未找到文件path')
|
|
|
return;
|
|
|
}
|
|
|
const { myshixun, game } = this.props
|
|
|
var url = `/myshixuns/${myshixun.identifier}/update_file.json`
|
|
|
const codeContent = window.editor_monaco.getValue()
|
|
|
|
|
|
this.setState({saving: true})
|
|
|
axios.post(url, {
|
|
|
content: codeContent,
|
|
|
// 评测的时候传1，其它情况不用传，主要是为了区分是用户自己提交还是自动提交
|
|
|
// evaluate: 0,
|
|
|
game_id : game.id,
|
|
|
path: this.currentPath
|
|
|
}
|
|
|
).then(res => {
|
|
|
this.setState({saving: false})
|
|
|
}).catch(e => {
|
|
|
this.setState({saving: false})
|
|
|
console.error('update_file error')
|
|
|
})
|
|
|
}
|
|
|
renderSecondDrawerChildren = () => {
|
|
|
const { readingCodeLoading, repositoryCode, saving } = this.state;
|
|
|
const { shixun } = this.props
|
|
|
const height = $(window).height() - 130
|
|
|
|
|
|
const isEditablePath = false;
|
|
|
return (
|
|
|
<Spin tip={saving ? "保存中..." : "加载中..."} spinning={readingCodeLoading || saving}>
|
|
|
<div style={{ height: `${height}px` }}>
|
|
|
{/* (isEditablePath ? 'none' : 'block') */}
|
|
|
<div className="codemirrorBackground"
|
|
|
style={{ backgroundImage: `url('${notEditablePathImg}')`, display: (shixun.code_edit_permission ? 'none' : 'block') }}></div>
|
|
|
<TPIMonaco
|
|
|
{...this.state}
|
|
|
codeLoading={readingCodeLoading}
|
|
|
repositoryCode={repositoryCode}
|
|
|
isEditablePath={shixun.code_edit_permission}
|
|
|
shixun={this.props.shixun}
|
|
|
doFileUpdateRequestOnCodeMirrorBlur={this.doFileUpdateRequestOnCodeMirrorBlur}
|
|
|
onEditBlur={this.onEditBlur}
|
|
|
></TPIMonaco>
|
|
|
|
|
|
</div>
|
|
|
</Spin>);
|
|
|
}
|
|
|
fetchReadRepositoryCode = (path) => {
|
|
|
this.currentPath = path;
|
|
|
const status = 1
|
|
|
const fetchRepoCodeUrl = `/tasks/${this.props.game.identifier}/rep_content.json?path=${path}&status=${status}`
|
|
|
this.setState({ readingCodeLoading: true });
|
|
|
axios.get(fetchRepoCodeUrl, {
|
|
|
}).then((fetchReadRepositoryCodeResponse) => {
|
|
|
|
|
|
|
|
|
if (fetchReadRepositoryCodeResponse.data.content || fetchReadRepositoryCodeResponse.data.content == "") {
|
|
|
this.setState({
|
|
|
repositoryCode: fetchReadRepositoryCodeResponse.data.content,
|
|
|
readingCodeLoading: false
|
|
|
})
|
|
|
} else {
|
|
|
this.setState({ readingCodeLoading: false });
|
|
|
}
|
|
|
// this.setState({ isEditablePath, currentPath: path });
|
|
|
|
|
|
}).catch(error =>{
|
|
|
console.log(error)
|
|
|
this.setState({ readingCodeLoading: false });
|
|
|
this.props.showSnackbar(`服务端异常，请联系管理员！`);
|
|
|
})
|
|
|
}
|
|
|
onTreeSelect = (selectedKeys, info) => {
|
|
|
const isLeaf = info.node.isLeaf();
|
|
|
if (isLeaf) { // 叶子节点
|
|
|
selectedKeys.length && this.setState({
|
|
|
fileTreeSelectedKeys: selectedKeys
|
|
|
})
|
|
|
this.refs["secondDrawer"].showSecondDrawer()
|
|
|
|
|
|
console.log('leaf clicked')
|
|
|
const nodePath = info.node.props.eventKey;
|
|
|
if (nodePath) {
|
|
|
const filetype = nodePath.split('.').pop().toLowerCase();
|
|
|
if (filetype == 'jpg' || filetype == 'png' || filetype == 'gif' || filetype == 'jpeg'
|
|
|
|| filetype == 'jar' || filetype == 'exe'
|
|
|
|| filetype == 'doc' || filetype == 'pdf' || filetype == 'xsl' || filetype == 'ppt') {
|
|
|
this.props.showSnackbar(`不支持加载${filetype}类型的文件。`)
|
|
|
return;
|
|
|
}
|
|
|
this.fetchReadRepositoryCode(nodePath);
|
|
|
} else {
|
|
|
console.error('no eventKey:', info.node)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
onBottomDrawerClose = () => {
|
|
|
this.setState({ bottomDrawer: false })
|
|
|
}
|
|
|
swtichBottomDrawer = () => {
|
|
|
this.setState({ bottomDrawer: !this.state.bottomDrawer })
|
|
|
}
|
|
|
showCodeEvaluate = () => {
|
|
|
this.setState({ bottomDrawer: true })
|
|
|
}
|
|
|
onResetVNC = () => {
|
|
|
if (this.state.vnc_reseting) return;
|
|
|
// 桌面系统将恢复到初始状态，您在系统中创建的数据可能会丢失
|
|
|
// 请确保您的数据已保存（如：版本库代码已推送到服务器）
|
|
|
// 是否确认重置？
|
|
|
this.props.confirm({
|
|
|
content: <div style={{textAlign: 'center'}}>
|
|
|
<div>桌面系统将恢复到初始状态，您在系统中创建的数据可能会丢失</div>
|
|
|
<div>请确保您的数据已保存（如：版本库代码已推送到服务器）</div>
|
|
|
<div>是否确认重置？</div>
|
|
|
</div>,
|
|
|
onOk: () => {
|
|
|
const url = `/tasks/${this.props.game.identifier}/reset_vnc_link.json`
|
|
|
this.setState({ vnc_reseting: true })
|
|
|
axios.get(url, {
|
|
|
}).then((response) => {
|
|
|
if (response.data.data && response.data.data.vnc_url) {
|
|
|
// reset
|
|
|
this.setState({
|
|
|
displayKey: this.state.displayKey + 1,
|
|
|
vnc_url: response.data.data.vnc_url,
|
|
|
vnc_reseting: false
|
|
|
})
|
|
|
} else {
|
|
|
}
|
|
|
// this.setState({ isEditablePath, currentPath: path });
|
|
|
|
|
|
}).catch(error =>{
|
|
|
console.log(error)
|
|
|
this.setState({ vnc_reseting: false });
|
|
|
this.props.showSnackbar(`服务端异常，请联系管理员！`);
|
|
|
})
|
|
|
|
|
|
console.log('doooo')
|
|
|
},
|
|
|
onCancel() {
|
|
|
console.log('Cancel');
|
|
|
},
|
|
|
})
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
selectedKeys={fileTreeSelectedKeys}
|
|
|
onSelect={onTreeSelect}
|
|
|
*/
|
|
|
render() {
|
|
|
const { challenge, vnc_url, git_url } = this.props
|
|
|
|
|
|
const secondDrawerChildren = this.renderSecondDrawerChildren();
|
|
|
return (
|
|
|
<React.Fragment>
|
|
|
<SecondDrawer
|
|
|
ref="secondDrawer"
|
|
|
floatText={'版本库'}
|
|
|
maskClosable={false}
|
|
|
secondDrawerChildren={secondDrawerChildren}
|
|
|
firstDrawerWidth={firstDrawerWidth}
|
|
|
getSecondDrawerWidth={this.getSecondDrawerWidth}
|
|
|
|
|
|
firstDrawerClassName="repoFilesDrawer vncDrawer"
|
|
|
secondDrawerClassName="codeInDrawer"
|
|
|
>
|
|
|
<style>{`
|
|
|
/* 评测结果 */
|
|
|
.codeEvaluateDrawer #game_test_set_results {
|
|
|
height: 198px;
|
|
|
}
|
|
|
.codeEvaluateDrawer .ant-drawer-body {
|
|
|
padding: 0px;
|
|
|
}
|
|
|
.codeEvaluateDrawer .ant-drawer-content-wrapper, .codeEvaluateDrawer .ant-drawer-mask {
|
|
|
position: absolute;
|
|
|
}
|
|
|
|
|
|
|
|
|
.codeEvaluateFloatButton {
|
|
|
bottom: 180px !important;
|
|
|
left: unset;
|
|
|
right: 0px;
|
|
|
top: unset;
|
|
|
}
|
|
|
.codeEvaluateFloatButton .text {
|
|
|
left: 10px;
|
|
|
}
|
|
|
|
|
|
.vncDrawer .ant-drawer-body {
|
|
|
padding: 0px;
|
|
|
}
|
|
|
.vncDrawer .rc-tree {
|
|
|
padding: 16px;
|
|
|
max-width: 220px;
|
|
|
color: #CBCBCB;
|
|
|
}
|
|
|
|
|
|
.vncDrawer .ant-drawer-wrapper-body {
|
|
|
background: #242324;
|
|
|
}
|
|
|
.codeInDrawer .ant-drawer-wrapper-body {
|
|
|
background: #1D1C1D;
|
|
|
}
|
|
|
|
|
|
.vncDrawer .ant-drawer-header, .codeInDrawer .ant-drawer-header {
|
|
|
border-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.vncDrawer > div:nth-child(1) {
|
|
|
opacity: 1 !important;
|
|
|
}
|
|
|
.vncDrawer > div:nth-child(2) {
|
|
|
top: 0px !important;
|
|
|
height: 100% !important;
|
|
|
min-width: unset;
|
|
|
}
|
|
|
|
|
|
.codeInDrawer .ant-spin-nested-loading > div > .ant-spin .ant-spin-text {
|
|
|
text-shadow: none;
|
|
|
}
|
|
|
|
|
|
.resetVNC {
|
|
|
top: 30px;
|
|
|
writing-mode: initial;
|
|
|
left: calc(100% - 120px);
|
|
|
background-image: none;
|
|
|
width: auto;
|
|
|
background: #081516;
|
|
|
height: 30px;
|
|
|
padding: 0 6px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
.resetVNC .text {
|
|
|
top: 0px;
|
|
|
writing-mode: initial;
|
|
|
left: unset;
|
|
|
}
|
|
|
.resetVNC .text span {
|
|
|
vertical-align: middle;
|
|
|
margin-left: 2px;
|
|
|
}
|
|
|
.float_button:hover .text {
|
|
|
color: #4CACFF;
|
|
|
}
|
|
|
`}</style>
|
|
|
<div style={{ 'padding': '16px', 'border-bottom': '1px solid #3A383A' }}>
|
|
|
<div style={{ color: '#888888' }}>网址克隆</div>
|
|
|
<div>
|
|
|
<input value={git_url} readonly={true} style={{ color: '#BABABA', width: '203px', background: 'transparent', border: 'none' }}></input>
|
|
|
<i class="iconfont icon-fuzhi font-14 ml10 copybtn"
|
|
|
style={{color: '#4CACFF', cursor: 'pointer', verticalAlign: 'baseline'}} data-clipboard-text={git_url} ></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<RepoTree
|
|
|
{...this.props}
|
|
|
fileTreeSelectedKeys={this.state.fileTreeSelectedKeys}
|
|
|
onTreeSelect={this.onTreeSelect}
|
|
|
|
|
|
></RepoTree>
|
|
|
</SecondDrawer>
|
|
|
<FloatButton className="resetVNC" onClick={this.onResetVNC}>
|
|
|
{/* <i className="iconfont icon-zhongzhi2 font-16 "></i> */}
|
|
|
{this.state.vnc_reseting ? <Icon type="loading" style={{verticalAlign: 'sub'}} />
|
|
|
: <i className="iconfont icon-zhongzhi2 font-16 "></i>}
|
|
|
<span>重置桌面系统</span>
|
|
|
</FloatButton>
|
|
|
|
|
|
{/* <Spin tip="加载中..." spinning={this.state.vnc_reseting}>
|
|
|
</Spin> */}
|
|
|
|
|
|
|
|
|
<VNCDisplay
|
|
|
{...this.props}
|
|
|
key={this.state.displayKey}
|
|
|
vnc_url={this.state.vnc_url || this.props.vnc_url}
|
|
|
>
|
|
|
<Spin tip="加载中..." spinning={this.state.vnc_reseting}>
|
|
|
</Spin>
|
|
|
<Drawer
|
|
|
mask={true}
|
|
|
title=""
|
|
|
width={firstDrawerWidth}
|
|
|
closable={false}
|
|
|
onClose={this.onBottomDrawerClose}
|
|
|
visible={this.state.bottomDrawer===undefined?false:this.state.bottomDrawer}
|
|
|
className={'codeEvaluateDrawer'}
|
|
|
placement="bottom"
|
|
|
getContainer={false}
|
|
|
style={{ position: 'absolute', bottom: '-25px', zIndex: 1 }}
|
|
|
afterVisibleChange={(visible) => {
|
|
|
if (visible) {
|
|
|
const canvas = $('.vncDisply canvas')[0]
|
|
|
canvas && canvas.focus()
|
|
|
}
|
|
|
|
|
|
}}
|
|
|
>
|
|
|
{ this.props.codeEvaluate }
|
|
|
</Drawer>
|
|
|
<FloatButton onClick={this.swtichBottomDrawer}
|
|
|
className="codeEvaluateFloatButton"
|
|
|
>测试集</FloatButton>
|
|
|
</VNCDisplay>
|
|
|
|
|
|
|
|
|
</React.Fragment>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default VNCContainer;
|
