You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
317 lines
7.6 KiB
317 lines
7.6 KiB
import React, { Component } from 'react';
|
|
|
|
import { Redirect } from 'react-router';
|
|
|
|
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import { getImageUrl ,markdownToHTML, configShareForCustom} from 'educoder'
|
|
|
|
import { CircularProgress } from 'material-ui/Progress';
|
|
|
|
import { Modal, Spin, Tooltip ,message,Icon} from 'antd';
|
|
|
|
import 'antd/lib/pagination/style/index.css';
|
|
|
|
import '../shixunchildCss/Challenges.css'
|
|
import ReactDOM from 'react-dom';
|
|
import axios from 'axios';
|
|
import AccountProfile from"../../../user/AccountProfile";
|
|
const $ = window.$;
|
|
|
|
|
|
class Challengesjupyter extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
ChallengesDataList: undefined,
|
|
operate: true,
|
|
startbtns: false,
|
|
iFrameHeight: '0px',
|
|
jupyter_port:0,
|
|
jupyter_url:null,
|
|
}
|
|
}
|
|
|
|
ChallengesList = () => {
|
|
let id = this.props.match.params.shixunId;
|
|
let ChallengesURL = `/shixuns/` + id + `/challenges.json`;
|
|
|
|
axios.get(ChallengesURL).then((response) => {
|
|
if (response.status === 200) {
|
|
if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {
|
|
|
|
}else{
|
|
configShareForCustom(this.props.shixunsDetails.name, response.data.description)
|
|
this.setState({
|
|
ChallengesDataList: response.data,
|
|
sumidtype: false,
|
|
});
|
|
}
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
});
|
|
}
|
|
|
|
componentDidMount() {
|
|
setTimeout(this.ChallengesList(), 1000);
|
|
|
|
// console.log("componentDidMount");
|
|
// console.log("Challengesjupyter");
|
|
// console.log(this.props);
|
|
let id = this.props.match.params.shixunId;
|
|
let ChallengesURL = `/jupyters/get_info_with_tpm.json`;
|
|
let datas={
|
|
identifier:id,
|
|
}
|
|
axios.get(ChallengesURL, {params: datas}).then((response) => {
|
|
if (response.status === 200) {
|
|
if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {
|
|
|
|
}else{
|
|
console.log("componentDidMountChallengesjupyter");
|
|
console.log(response.data);
|
|
if(response.data.status===0){
|
|
this.setState({
|
|
jupyter_url:response.data.url,
|
|
jupyter_port:response.data.port,
|
|
})
|
|
|
|
|
|
}else{
|
|
|
|
}
|
|
}
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
updatamakedown = (id) => {
|
|
|
|
}
|
|
|
|
// 关卡的上移下移操作
|
|
operations = (sumid, type) => {
|
|
|
|
}
|
|
delOperations = (sumid) => {
|
|
|
|
}
|
|
|
|
clonedelOperationss = () => {
|
|
|
|
}
|
|
delOperationss = () => {
|
|
|
|
}
|
|
|
|
startgameid=(id)=>{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
hidestartshixunsreplace=(url)=>{
|
|
|
|
|
|
}
|
|
|
|
//编辑实训题目选择题
|
|
EditTraining=(type, ids, path)=>{
|
|
|
|
}
|
|
|
|
//开始实战按钮
|
|
startshixunCombat = (type, ids, id) => {
|
|
|
|
|
|
|
|
|
|
}
|
|
hidestartshixunCombattype=()=>{
|
|
|
|
}
|
|
|
|
hideAccountProfile=()=>{
|
|
|
|
};
|
|
|
|
modifyjupyter=(propsysl)=>{
|
|
// console.log("propsysl");
|
|
// console.log(propsysl);
|
|
let id=this.props.match.params.shixunId;
|
|
var jupyter_port="";
|
|
try{
|
|
jupyter_port= parseInt(this.state.jupyter_port);
|
|
}catch (e) {
|
|
jupyter_port=this.state.jupyter_port;
|
|
|
|
}
|
|
const url=`/jupyters/save_with_tpm.json`;
|
|
const data={
|
|
identifier:id,
|
|
jupyter_port:jupyter_port,
|
|
}
|
|
axios.post(url, data)
|
|
.then((result) => {
|
|
if (result.data.status === 0) {
|
|
this.props.showNotification(`应用成功`);
|
|
}
|
|
}).catch((error) => {
|
|
})
|
|
}
|
|
|
|
sendToken=()=>{
|
|
// console.log("sendToken");
|
|
// const iframe = document.getElementById('iframe');
|
|
// console.log("modifyjupyter");
|
|
// const frameWindow = iframe.contentWindow;
|
|
// console.log("frameWindow");
|
|
// console.log(frameWindow);
|
|
}
|
|
|
|
render() {
|
|
let{ChallengesDataList}=this.state;
|
|
let id = this.props.match.params.shixunId;
|
|
// var deptObjs=document.getElementById("IFRAMEID").contentWindow.document.getElementById("TAGID");
|
|
// //判断此元素是否存在
|
|
// if(deptObjs!=null){
|
|
// //设置该元素的样式或其他属性
|
|
// deptObjs.setAttribute('style',' height: 20px !important;'); //!important用来提升指定样式条目的应用优先权
|
|
// }
|
|
// var submitObj = document.getElementById('submit');
|
|
// if(submitObj){
|
|
// submitObj.style.color = 'green';
|
|
// }
|
|
// const dom = document.getElementById('shutdown');
|
|
// ReactDOM.unmountComponentAtNode(dom)
|
|
// // window.$('#picture_display').hide();
|
|
// window.$('.data-tip-right').hide()
|
|
// window.onload=()=>{
|
|
// debugger
|
|
// var _iframe = document.getElementById('header');
|
|
// console.log(_iframe);
|
|
// // .contentWindow.document.getElementById('shutdown_widget') //get iframe下的id
|
|
// // _iframe.style.display= "none"; //修改样式
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<div className="mt30 pl20 pr20" >
|
|
<p className="clearfix mb20">
|
|
<span className="font-16 fl">简介</span>
|
|
<Tooltip placement="bottom" title={"编辑"}>
|
|
<a style={{ display: this.props.identity < 5 && ChallengesDataList&&ChallengesDataList.shixun_status < 3 ? "block" : 'none' }}
|
|
href={"/shixuns/" + id + "/settings?edit=1"} className="ring-green fr">
|
|
<img src={getImageUrl("images/educoder/icon/edit.svg")} className="fl mt3 ml2" />
|
|
</a>
|
|
</Tooltip>
|
|
|
|
</p>
|
|
|
|
<div className="justify break_full_word new_li "
|
|
id="challenge_editorMd_description">
|
|
<p id="ReactMarkdown" style={{overflow:'hidden'}}>
|
|
{ChallengesDataList === undefined ? "" :ChallengesDataList&&ChallengesDataList.description===null?"":
|
|
<div className={"markdown-body"} dangerouslySetInnerHTML={{__html: markdownToHTML(ChallengesDataList.description).replace(/▁/g,"▁▁▁")}}></div>
|
|
}
|
|
</p>
|
|
<style>
|
|
{
|
|
`
|
|
.intermediatecenter{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sortinxdirection{
|
|
display: flex;
|
|
flex-direction:row;
|
|
}
|
|
|
|
.xaxisreverseorder{
|
|
display: flex;
|
|
flex-direction:row-reverse;
|
|
}
|
|
`
|
|
}
|
|
</style>
|
|
{
|
|
this.props.jupyter_url === null || this.props.jupyter_url === undefined ?
|
|
""
|
|
:
|
|
<div className="sortinxdirection mt60">
|
|
<div className="renwuxiangssi sortinxdirection">
|
|
<div><p className="renwuxiangqdiv">任务详情</p></div>
|
|
<div><p className="renwuxiangqdivtest ml24">示例</p></div>
|
|
</div>
|
|
<div className="renwuxiangssit xaxisreverseorder">
|
|
<div className="challenbaocun" onClick={() => this.modifyjupyter(this.props)}><p
|
|
className="challenbaocuntest">应用到实训</p></div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<style>
|
|
{
|
|
`
|
|
iframe {
|
|
border-width: 0px;
|
|
border-style: inset;
|
|
border-color: initial;
|
|
border-image: initial;
|
|
}
|
|
iframe {
|
|
border-left: 1px solid #eeeeee;
|
|
border-top: 1px solid #eeeeee;
|
|
border-right: 1px solid #eeeeee;
|
|
border-bottom: 1px solid #eeeeee;
|
|
}
|
|
#header{
|
|
visibility:hidden;
|
|
}
|
|
`
|
|
}
|
|
</style>
|
|
<div className="mt35">
|
|
{/*https://48888.jupyter.educoder.net/tree?*/}
|
|
|
|
<div className="pb47">
|
|
{
|
|
this.props.jupyter_url===null || this.props.jupyter_url===undefined?
|
|
""
|
|
:
|
|
<iframe src={this.props.jupyter_url}
|
|
sandbox="allow-same-origin allow-scripts allow-top-navigation " scrolling="no" id="frame"
|
|
name="framename" width="100%" height="700" frameBorder="0"
|
|
></iframe>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</React.Fragment>
|
|
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Challengesjupyter;
|