educoder/public/react/src/modules/tpm/shixunchild/Challenges/Challengesjupyter.js

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,
			username:"",
			booljupyterurls:false,
			loading:false,
		}
	}

	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);
		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.data.status === 403||response.data.status === 401||response.data.status === 500) {
				}else{
				  if(response.data.status===0){
				  	this.setState({
							jupyter_url:response.data.url,
							jupyter_port:response.data.port,
						})
					}else{
					}
				}
				this.setState({
					booljupyterurls:true,
				})
		}).catch((error) => {
			 this.setState({
				 booljupyterurls:true,
			 })
		});




	}

	updatamakedowns = () => {
		this.setState({
			loading:true,
		})
		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.data.status === 403||response.data.status === 401||response.data.status === 500) {
			}else{
				if(response.data.status===0){
					this.setState({
					   jupyter_url:response.data.url,
						jupyter_port:response.data.port,
					})
				}else{
				}
			}
			this.setState({
				booljupyterurls:true,
				loading:false,
			})
		}).catch((error) => {
			this.setState({
				booljupyterurls:true,
				loading:false,
			})
		});

	}

	// 关卡的上移下移操作
	operations = (sumid, type) => {

	}
	delOperations = (sumid) => {

	}

	clonedelOperationss = () => {

	}
	delOperationss = () => {

	}

	startgameid=(id)=>{




	}

	hidestartshixunsreplace=(url)=>{


	}

	//编辑实训题目选择题
	EditTraining=(type, ids, path)=>{

	}

	//开始实战按钮
	startshixunCombat = (type, ids, id) => {




	}
	hidestartshixunCombattype=()=>{

	}

	hideAccountProfile=()=>{

	};

	modifyjupyter=()=>{
		// //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.get(url,  {params: 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,booljupyterurls}=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";  //修改样式
// 		}

		const  is_teacher = this.props&&this.props.current_user&&this.props.current_user.is_teacher?this.props.current_user.is_teacher:false;



		return (
			<React.Fragment>
				<div className="mt30 pl20 pr20" >
					<Spin spinning={this.state.loading}>
					<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>
						{
							booljupyterurls===true?
								(
									this.state.jupyter_url === null?
										<div className="mt50">

											<p className="intermediatecenter sortinxdirection"><p className="colorbluetest">加载实训出错，是否</p><p className="colorbluetwo" onClick={()=>this.updatamakedowns()}>重新加载</p></p>

										</div>

										:""
								)
								:""
						}



						<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.state.jupyter_url === null || this.state.jupyter_url === undefined ?
								""
								:
								(
									is_teacher===true?
										<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.state)}><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>
						{
								is_teacher===true?
									<div className="mt35">
										<div className="pb47">
											{
												this.state.jupyter_url===null || this.state.jupyter_url===undefined?
													""
													:
													<iframe src={this.state.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>
					</Spin>
				</div>

			</React.Fragment>

		)
	}
}

export default Challengesjupyter;