forked from Gitlink/forgeplus-react
1350 lines
46 KiB
JavaScript
1350 lines
46 KiB
JavaScript
import React, { Component } from 'react';
|
||
import { Link } from "react-router-dom";
|
||
import { Modal, Input, Radio, Rate, Pagination, message, Spin, Icon, Tooltip, Button, Popover, Progress } from 'antd';
|
||
import AccountProfile from "../user/AccountProfile";
|
||
import axios from 'axios'
|
||
import Modals from '../modals/Modals';
|
||
import './shixuns/css/TPMBanner.css';
|
||
|
||
const Search = Input.Search;
|
||
const RadioGroup = Radio.Group;
|
||
const { TextArea } = Input;
|
||
|
||
class TPMBanner extends Component {
|
||
constructor(props) {
|
||
super(props)
|
||
this.state = {
|
||
Forkvisible: false,
|
||
Senttothetype: false,
|
||
Senttothevcalue: undefined,
|
||
courses_count: 1,
|
||
course_list: [],
|
||
pagenum: 1,
|
||
publishbox: "",
|
||
publishboxstatus: 0,
|
||
pages: 1,
|
||
Issuevisible: false,
|
||
evaluation_set_position: [],
|
||
tag_position: [],
|
||
Forkauthentication: false,
|
||
can_fork: undefined,
|
||
certi_url: undefined,
|
||
showradios: false,
|
||
startbtn: false,
|
||
Searchvalue: "",
|
||
startshixunCombattype: false,
|
||
shixunsmessage: "",
|
||
shixunsreplace: false,
|
||
hidestartshixunsreplacevalue: "",
|
||
isIE: false,
|
||
Forkvisibletype: false,
|
||
isSpin: false,
|
||
Senttothevcaluetype: false,
|
||
jupyterbool: false,
|
||
openknow: false,
|
||
openshowpublictype: false,
|
||
Radiovalue: 1,
|
||
TextAreaintshow: false,
|
||
cancelText: undefined,
|
||
okText: undefined,
|
||
}
|
||
}
|
||
|
||
|
||
IEVersion = () => {
|
||
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
|
||
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
|
||
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
|
||
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
|
||
if (isIE) {
|
||
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
|
||
reIE.test(userAgent);
|
||
var fIEVersion = parseFloat(RegExp["$1"]);
|
||
if (fIEVersion == 7) {
|
||
return 7;
|
||
} else if (fIEVersion == 8) {
|
||
return 8;
|
||
} else if (fIEVersion == 9) {
|
||
return 9;
|
||
} else if (fIEVersion == 10) {
|
||
return 10;
|
||
} else {
|
||
return 6;//IE版本<=7
|
||
}
|
||
} else if (isEdge) {
|
||
return 'edge';//edge
|
||
} else if (isIE11) {
|
||
return 11; //IE11
|
||
} else {
|
||
return -1;//不是ie浏览器
|
||
}
|
||
}
|
||
|
||
openknow = () => {
|
||
let storage = window.localStorage;
|
||
this.setState({
|
||
openknow: false
|
||
})
|
||
let shixunopenprocess = this.props.user && this.props.user.user_id + 'shixunopenprocess';
|
||
storage.setItem(shixunopenprocess, true);
|
||
}
|
||
|
||
openshowpublic = () => {
|
||
let storage = window.localStorage;
|
||
this.setState({
|
||
openshowpublictype: false
|
||
})
|
||
let openopenpublictype = this.props.user && this.props.user.user_id + 'openopenpublictype';
|
||
storage.setItem(openopenpublictype, true);
|
||
}
|
||
|
||
|
||
componentDidUpdate(prevProps, prevState) {
|
||
if (prevProps != this.props) {
|
||
|
||
if (prevProps.user != this.props.user) {
|
||
if (this.props.user && this.props.user.admin === true || this.props.user && this.props.user.business === true) {
|
||
this.setState({
|
||
TextArea: "云上实验室使用"
|
||
})
|
||
}
|
||
}
|
||
let getshixunopenprocess = this.props.user && this.props.user.user_id + 'shixunopenprocess';
|
||
let getopenopenpublictype = this.props.user && this.props.user.user_id + 'openopenpublictype';
|
||
let shixunopenprocess = window.localStorage.getItem(getshixunopenprocess)
|
||
let openopenpublictype = window.localStorage.getItem(getopenopenpublictype)
|
||
if (this.props.status === 0 && this.props.openknows === false) {
|
||
|
||
if (this.props.shixunsDetails && this.props.shixunsDetails.shixun_status === 0 && this.props.identity < 5) {
|
||
if (this.props.user && this.props.user.user_id) {
|
||
if (shixunopenprocess === undefined || shixunopenprocess === false || shixunopenprocess === null) {
|
||
this.setState({
|
||
openknow: true
|
||
})
|
||
setTimeout(() => {
|
||
this.openknow()
|
||
this.setState({
|
||
openknow: false
|
||
})
|
||
}, 10000);
|
||
|
||
} else {
|
||
this.setState({
|
||
openknow: false
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
} else {
|
||
this.setState({
|
||
openknow: false
|
||
})
|
||
}
|
||
|
||
|
||
|
||
if (this.props.public === 0 && this.props.status > 1 && this.props.openknows === false) {
|
||
if (this.props.shixunsDetails && this.props.shixunsDetails.shixun_status === 2 && this.props.shixunsDetails && this.props.shixunsDetails.public === 0 && this.props.identity < 5) {
|
||
if (this.props.user && this.props.user.user_id) {
|
||
if (openopenpublictype === undefined || openopenpublictype === false || openopenpublictype === null) {
|
||
this.setState({
|
||
openshowpublictype: true
|
||
})
|
||
setTimeout(() => {
|
||
this.openshowpublic()
|
||
this.setState({
|
||
openshowpublictype: false
|
||
})
|
||
}, 10000);
|
||
} else {
|
||
this.setState({
|
||
openshowpublictype: false
|
||
})
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
this.setState({
|
||
openshowpublictype: false
|
||
})
|
||
}
|
||
|
||
|
||
|
||
|
||
}
|
||
}
|
||
|
||
|
||
componentDidMount() {
|
||
|
||
let thiisie = this.IEVersion();
|
||
if (thiisie != -1) {
|
||
this.setState({
|
||
isIE: true
|
||
})
|
||
} else {
|
||
this.setState({
|
||
isIE: false
|
||
})
|
||
}
|
||
|
||
if (this.props.user && this.props.user.admin === true || this.props.user && this.props.user.business === true) {
|
||
this.setState({
|
||
TextArea: "云上实验室使用"
|
||
})
|
||
}
|
||
}
|
||
/*
|
||
* Fork
|
||
* */
|
||
copyForkvisible = () => {
|
||
let { shixunsDetails } = this.props;
|
||
if (shixunsDetails.can_fork === null) {
|
||
this.setState({
|
||
Forkvisible: true
|
||
})
|
||
} else {
|
||
this.setState({
|
||
Forkvisible: false,
|
||
Forkauthentication: true,
|
||
can_fork: shixunsDetails.can_fork.can_fork,
|
||
certi_url: shixunsDetails.can_fork.certi_url,
|
||
})
|
||
}
|
||
|
||
}
|
||
|
||
hideForkvisible = () => {
|
||
this.setState({
|
||
Forkvisible: false,
|
||
Forkauthentication: false
|
||
})
|
||
}
|
||
|
||
changeTextArea = (e) => {
|
||
this.setState({
|
||
TextArea: e.target.value
|
||
})
|
||
}
|
||
|
||
addForkvisible = () => {
|
||
let reason;
|
||
switch (this.state.Radiovalue) {
|
||
case 1:
|
||
reason = "Shixun";
|
||
break;
|
||
case 2:
|
||
reason = "Course";
|
||
break;
|
||
case 3:
|
||
reason = "Subject";
|
||
break;
|
||
case 4:
|
||
reason = this.state.TextArea;
|
||
}
|
||
|
||
if (this.state.Radiovalue === 4) {
|
||
if (this.state.TextArea === null || this.state.TextArea === undefined || this.state.TextArea === "") {
|
||
this.setState({
|
||
TextAreaintshow: true
|
||
})
|
||
return
|
||
}
|
||
}
|
||
|
||
this.setState({
|
||
Forkvisibletype: true,
|
||
})
|
||
|
||
let id = this.props.match.params.shixunId;
|
||
let url = "/shixuns/" + id + "/copy.json";
|
||
axios.post(url, {
|
||
reason: reason,
|
||
}).then((response) => {
|
||
if (response.data.status === 401) {
|
||
|
||
} else {
|
||
this.setState({
|
||
Forkvisible: false,
|
||
Forkauthentication: false,
|
||
// Forkvisibletype:false
|
||
})
|
||
window.location.href = "/shixuns/" + response.data.shixun + "/challenges";
|
||
}
|
||
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
});
|
||
|
||
}
|
||
/*
|
||
* 发送至按钮
|
||
* */
|
||
Senttothe = () => {
|
||
if (this.props.checkIfLogin() === false) {
|
||
this.props.showLoginDialog()
|
||
return
|
||
}
|
||
|
||
let id = this.props.match.params.shixunId;
|
||
let url = "/shixuns/" + id + "/search_user_courses.json";
|
||
this.setState({
|
||
Senttothetype: true
|
||
})
|
||
|
||
axios.get(url, {
|
||
params: {
|
||
page: 1,
|
||
limit: 10
|
||
}
|
||
}).then((response) => {
|
||
this.setState({
|
||
courses_count: response.data.courses_count,
|
||
course_list: response.data.course_list
|
||
})
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
});
|
||
}
|
||
|
||
SenttotheSearch = (value) => {
|
||
let id = this.props.match.params.shixunId;
|
||
let url = "/shixuns/" + id + "/search_user_courses.json?search=" + value;
|
||
axios.get(encodeURI(url), {
|
||
params: {
|
||
page: 1,
|
||
limit: 10
|
||
}
|
||
}).then((response) => {
|
||
this.setState({
|
||
courses_count: response.data.courses_count,
|
||
course_list: response.data.course_list,
|
||
pages: 1,
|
||
Searchvalue: value
|
||
})
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
});
|
||
}
|
||
|
||
onChangeSenttothevcalue = (e) => {
|
||
this.setState({
|
||
Senttothevcalue: e.target.value
|
||
})
|
||
}
|
||
onChangesendeSenttothe = (pageNumber) => {
|
||
let { Searchvalue } = this.state;
|
||
let id = this.props.match.params.shixunId;
|
||
let url = "/shixuns/" + id + "/search_user_courses.json?search=" + Searchvalue;
|
||
axios.get(url, {
|
||
params: {
|
||
page: pageNumber,
|
||
limit: 10
|
||
}
|
||
}).then((response) => {
|
||
this.setState({
|
||
courses_count: response.data.courses_count,
|
||
course_list: response.data.course_list,
|
||
pagenum: pageNumber,
|
||
pages: pageNumber
|
||
})
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
});
|
||
}
|
||
sendeSenttothevcalue = () => {
|
||
|
||
let { Senttothevcalue } = this.state;
|
||
|
||
if (Senttothevcalue === undefined) {
|
||
this.setState({
|
||
Senttothevcaluetype: true
|
||
})
|
||
return
|
||
}
|
||
let id = this.props.match.params.shixunId;
|
||
let url = "/shixuns/" + id + "/send_to_course.json";
|
||
axios.post(url, {
|
||
course_id: Senttothevcalue
|
||
}).then((response) => {
|
||
|
||
this.props.showSnackbar(response.data.message);
|
||
this.setState({
|
||
Senttothetype: false,
|
||
Searchvalue: "",
|
||
pages: 1
|
||
})
|
||
this.props.history.replace(response.data.first_category_url);
|
||
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
});
|
||
|
||
}
|
||
|
||
hideSenttothevcalue = () => {
|
||
this.setState({
|
||
Senttothetype: false,
|
||
Searchvalue: "",
|
||
pages: 1
|
||
})
|
||
|
||
|
||
}
|
||
|
||
/*
|
||
* 撤销发布按钮
|
||
* */
|
||
|
||
ModalCancel = () => {
|
||
this.setState({
|
||
Modalstype: false,
|
||
Modalstopval: "",
|
||
modalsMidval: undefined,
|
||
ModalsBottomval: "",
|
||
modalstyles: "",
|
||
cancelText: undefined,
|
||
okText: undefined,
|
||
Loadtype: false,
|
||
})
|
||
}
|
||
ModalSave = () => {
|
||
let id = this.props.match.params.shixunId;
|
||
let url = "/shixuns/" + id + "/cancel_publish.json";
|
||
axios.get(url).then((response) => {
|
||
this.props.showSnackbar(response.data.message);
|
||
this.ModalCancel()
|
||
this.props.getcomponentdidmount()
|
||
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
});
|
||
}
|
||
|
||
cancel_publish = () => {
|
||
this.setState({
|
||
Modalstype: true,
|
||
Modalstopval: "是否确认撤销发布？",
|
||
modalsMidval: "撤销发布后，学员将无法进行练习，若您新增关",
|
||
ModalsBottomval: "卡，学员需要重新体验实训",
|
||
ModalCancel: this.ModalCancel,
|
||
ModalSave: this.ModalSave,
|
||
modalstyles: "848282"
|
||
})
|
||
}
|
||
ModalSaveopenpublic = () => {
|
||
this.setState({
|
||
Modalstype: true,
|
||
Modalstopval: "公开实训需经过平台标准化审核，审核周期为1-2天，",
|
||
modalsMidval: "公开的实训将对平台所有人可见。若仅本人教学使用",
|
||
ModalsBottomval: "则无需申请公开, 直接发送到课堂即可。",
|
||
cancelText: "取消申请",
|
||
okText: "确定申请",
|
||
ModalCancel: this.ModalCancel,
|
||
ModalSave: this.eopenpublicupdatadata,
|
||
})
|
||
}
|
||
eopenpublicupdatadata = () => {
|
||
this.ModalCancel()
|
||
this.props.getcomponentdidmount()
|
||
}
|
||
openpublic = () => {
|
||
let id = this.props.match.params.shixunId;
|
||
let url = `/shixuns/${id}/apply_public.json`;
|
||
axios.get(url).then((response) => {
|
||
if (response.data.status === 0) {
|
||
this.ModalSaveopenpublic()
|
||
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
});
|
||
}
|
||
|
||
ModalhidenpublicSave = () => {
|
||
let id = this.props.match.params.shixunId;
|
||
let url = `/shixuns/${id}/cancel_apply_public.json`;
|
||
axios.get(url).then((response) => {
|
||
if (response.data.status === 0) {
|
||
this.ModalCancel()
|
||
this.props.getcomponentdidmount()
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
});
|
||
}
|
||
|
||
hidenpublic = () => {
|
||
this.setState({
|
||
Modalstype: true,
|
||
Modalstopval: "是否确认撤销申请公开？",
|
||
modalsMidval: " ",
|
||
ModalsBottomval: " ",
|
||
ModalCancel: this.ModalCancel,
|
||
ModalSave: this.ModalhidenpublicSave,
|
||
})
|
||
|
||
}
|
||
/*
|
||
* 申请发布按钮
|
||
* */
|
||
applyrelease = () => {
|
||
let id = this.props.match.params.shixunId;
|
||
let url = "/shixuns/" + id + "/publish.json";
|
||
axios.get(url).then((response) => {
|
||
let evaluation_set_position
|
||
if (response.data.evaluation_set_position === null) {
|
||
evaluation_set_position = []
|
||
} else {
|
||
evaluation_set_position = response.data.evaluation_set_position
|
||
}
|
||
if (response.data.status === 0) {
|
||
this.applyreleaseopen()
|
||
// this.ModalCancel()
|
||
this.props.getcomponentdidmount()
|
||
} else {
|
||
this.setState({
|
||
Issuevisible: true,
|
||
tag_position: response.data.tag_position,
|
||
evaluation_set_position: evaluation_set_position,
|
||
publishboxstatus: response.data.status,
|
||
})
|
||
}
|
||
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
});
|
||
};
|
||
applyreleaseopen = () => {
|
||
|
||
this.setState({
|
||
Modalstype: true,
|
||
Loadtype: true,
|
||
Modalstopval: "实训发布后即可发送课堂使用",
|
||
ModalSave: this.ModalCancel,
|
||
})
|
||
}
|
||
hiddenIssuevisible = (val) => {
|
||
this.setState({
|
||
Issuevisible: false
|
||
})
|
||
if (val === 0 || val === 1) {
|
||
this.ModalCancel()
|
||
this.props.getcomponentdidmount()
|
||
}
|
||
|
||
}
|
||
|
||
// reset_my_game
|
||
hidestartshixunsreplace = (url) => {
|
||
this.setState({
|
||
isSpin: true,
|
||
})
|
||
axios.get(url).then((response) => {
|
||
if (response.status === 200) {
|
||
message.success('重置成功，正在进入实训！');
|
||
this.startshixunCombat(response.data.shixun_identifier, 1);
|
||
this.setState({
|
||
shixunsreplace: false,
|
||
isSpin: false,
|
||
})
|
||
}
|
||
}
|
||
).catch((error) => {
|
||
this.setState({
|
||
startbtn: false,
|
||
shixunsreplace: false,
|
||
isSpin: false
|
||
})
|
||
});
|
||
|
||
}
|
||
|
||
|
||
//开始实战按钮
|
||
startshixunCombat = (id, reset) => {
|
||
|
||
if (this.props.shixunsDetails && this.props.shixunsDetails.is_jupyter === true) {
|
||
if (this.props.checkIfLogin() === false) {
|
||
this.props.showLoginDialog()
|
||
return
|
||
}
|
||
|
||
if (this.props.checkIfProfileCompleted() === false) {
|
||
this.setState({
|
||
AccountProfiletype: true
|
||
})
|
||
return
|
||
}
|
||
|
||
let { shixunsDetails } = this.props
|
||
if (shixunsDetails.shixun_status > 1) {
|
||
this.setState({
|
||
startbtn: true,
|
||
hidestartshixunsreplacevalue: ""
|
||
})
|
||
} else {
|
||
this.setState({
|
||
hidestartshixunsreplacevalue: ""
|
||
})
|
||
}
|
||
|
||
|
||
let url = "/shixuns/" + id + "/jupyter_exec.json";
|
||
if (reset) {
|
||
url += '?reset=' + reset
|
||
}
|
||
axios.get(url).then((response) => {
|
||
if (response.status === 200) {
|
||
if (response.data.status === -2) {
|
||
// this.resetshixunCombat(response.data.message);
|
||
this.setState({
|
||
startbtn: false,
|
||
shixunsreplace: true,
|
||
hidestartshixunsreplacevalue: response.data.message + ".json"
|
||
})
|
||
// this.shixunexec(response.data.message+".json")
|
||
} else if (response.data.status === -1) {
|
||
|
||
} else if (response.data.status === -3) {
|
||
this.setState({
|
||
shixunsmessage: response.data.message,
|
||
startshixunCombattype: true,
|
||
startbtn: false
|
||
})
|
||
} else {
|
||
if (response.data.status != 401) {
|
||
window.location.href = "/tasks/" + response.data.identifier + `/jupyter`;
|
||
}
|
||
|
||
}
|
||
}
|
||
}).catch((error) => {
|
||
this.setState({
|
||
startbtn: false
|
||
})
|
||
});
|
||
} else {
|
||
if (this.props.checkIfLogin() === false) {
|
||
this.props.showLoginDialog()
|
||
return
|
||
}
|
||
|
||
if (this.props.checkIfProfileCompleted() === false) {
|
||
this.setState({
|
||
AccountProfiletype: true
|
||
})
|
||
return
|
||
}
|
||
|
||
let { shixunsDetails } = this.props
|
||
if (shixunsDetails.shixun_status > 1) {
|
||
this.setState({
|
||
startbtn: true,
|
||
hidestartshixunsreplacevalue: ""
|
||
})
|
||
} else {
|
||
this.setState({
|
||
hidestartshixunsreplacevalue: ""
|
||
})
|
||
}
|
||
|
||
|
||
let url = "/shixuns/" + id + "/shixun_exec.json";
|
||
if (reset) {
|
||
url += '?reset=' + reset
|
||
}
|
||
axios.get(url).then((response) => {
|
||
if (response.status === 200) {
|
||
if (response.data.status === -2) {
|
||
// this.resetshixunCombat(response.data.message);
|
||
this.setState({
|
||
startbtn: false,
|
||
shixunsreplace: true,
|
||
hidestartshixunsreplacevalue: response.data.message + ".json"
|
||
})
|
||
// this.shixunexec(response.data.message+".json")
|
||
} else if (response.data.status === -1) {
|
||
|
||
} else if (response.data.status === -3) {
|
||
this.setState({
|
||
shixunsmessage: response.data.message,
|
||
startshixunCombattype: true,
|
||
startbtn: false
|
||
})
|
||
} else {
|
||
if (response.data.status != 401) {
|
||
window.location.href = "/tasks/" + response.data.game_identifier;
|
||
}
|
||
|
||
}
|
||
}
|
||
}).catch((error) => {
|
||
this.setState({
|
||
startbtn: false
|
||
})
|
||
});
|
||
}
|
||
|
||
|
||
}
|
||
|
||
tocertification = () => {
|
||
let { certi_url } = this.state;
|
||
this.setState({
|
||
Forkauthentication: false
|
||
})
|
||
window.location.href = certi_url;
|
||
}
|
||
|
||
SenttotheValue = (e) => {
|
||
this.setState({
|
||
Searchvalue: e.target.value
|
||
})
|
||
}
|
||
|
||
hidestartshixunCombattype = () => {
|
||
this.setState({
|
||
startshixunCombattype: false
|
||
})
|
||
}
|
||
|
||
hideAccountProfile = () => {
|
||
this.setState({
|
||
AccountProfiletype: false
|
||
})
|
||
}
|
||
|
||
|
||
onChangeRadiovalue = (e) => {
|
||
this.setState({
|
||
Radiovalue: e.target.value
|
||
})
|
||
if (e.target.value != 4) {
|
||
this.setState({
|
||
TextAreaintshow: false
|
||
})
|
||
}
|
||
}
|
||
|
||
|
||
setCollect = () => {
|
||
let { shixunsDetails } = this.props;
|
||
let url = "/collections.json";
|
||
axios.post(url, {
|
||
container_id: shixunsDetails.id,
|
||
container_type: "Shixun"
|
||
}).then((result) => {
|
||
const status = result.data.status
|
||
if (status === 0) {
|
||
this.props.getcomponentdidmount()
|
||
this.props.showNotification(result.data.message);
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
cancelCollect = () => {
|
||
let { shixunsDetails } = this.props;
|
||
let url = `/collections/cancel.json`;
|
||
axios.delete(url, {
|
||
data: {
|
||
container_id: shixunsDetails.id,
|
||
container_type: "Shixun"
|
||
}
|
||
}).then((response) => {
|
||
const status = response.data.status
|
||
if (status === 0) {
|
||
this.props.getcomponentdidmount()
|
||
this.props.showNotification(response.data.message);
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
|
||
render() {
|
||
let {
|
||
Forkvisible,
|
||
Senttothetype,
|
||
Senttothevcalue,
|
||
evaluation_set_position,
|
||
Forkauthentication,
|
||
can_fork,
|
||
tag_position,
|
||
courses_count,
|
||
course_list,
|
||
Issuevisible,
|
||
publishboxstatus,
|
||
startbtn,
|
||
Searchvalue,
|
||
startshixunCombattype,
|
||
shixunsmessage,
|
||
pages,
|
||
shixunsreplace,
|
||
hidestartshixunsreplacevalue,
|
||
Forkvisibletype,
|
||
AccountProfiletype,
|
||
} = this.state;
|
||
let { shixunsDetails, shixunId, star_info, star_infos } = this.props;
|
||
const radioStyle = {
|
||
display: 'block',
|
||
height: '30px',
|
||
lineHeight: '30px',
|
||
};
|
||
|
||
const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
|
||
const MyRate = ({ defaultValue, ...rest }) => {
|
||
return <Rate {...rest} value={defaultValue} className='simple-rate' />;
|
||
};
|
||
return (
|
||
shixunsDetails === undefined ? null :
|
||
<div className="shixunDetail" id="shixunDetail">
|
||
<style>
|
||
{
|
||
`
|
||
.shixunDetail_top{
|
||
height: 180px !important;
|
||
padding-top:50px !important;
|
||
}
|
||
.ant-popover{
|
||
z-index:1000 !important;
|
||
}
|
||
`
|
||
}
|
||
</style>
|
||
<div className="shixunDetail_top">
|
||
|
||
{AccountProfiletype === true ? <AccountProfile
|
||
hideAccountProfile={() => this.hideAccountProfile()}
|
||
{...this.props}
|
||
{...this.state}
|
||
/> : ""}
|
||
|
||
|
||
{this.state.Modalstype === true ? <Modals
|
||
modalsType={this.state.Modalstype}
|
||
modalsTopval={this.state.Modalstopval}
|
||
modalCancel={this.state.ModalCancel}
|
||
modalSave={this.state.ModalSave}
|
||
modalsBottomval={this.state.ModalsBottomval}
|
||
modalsMidval={this.state.modalsMidval}
|
||
loadtype={this.state.Loadtype}
|
||
modalstyles={this.state.modalstyles}
|
||
cancelText={this.state.cancelText}
|
||
okText={this.state.okText}
|
||
/> : ""}
|
||
|
||
<div className="educontent clearfix">
|
||
<p className="clearfix">
|
||
<a href={"/shixuns/" + shixunsDetails.identifier + "/challenges"}
|
||
className="font-28 color-white mr10 fl">{shixunsDetails.name}</a>
|
||
{
|
||
shixunsDetails.fork_from === undefined || shixunsDetails.fork_from === null ? "" :
|
||
<a href={"/shixuns/" + shixunsDetails.fork_from.fork_identifier + "/challenges"}
|
||
className="fl mt5"
|
||
target="_blank"
|
||
data-tip-right={"forked from " + shixunsDetails.fork_from.username + " / " + shixunsDetails.fork_from.name}>
|
||
<i className="iconfont icon-fork color-grey-74 font-20 fl"></i>
|
||
</a>
|
||
}
|
||
|
||
</p>
|
||
<div className="clearfix mt10">
|
||
|
||
<ul className="fl color-grey-c pathInfo mt20">
|
||
{shixunsDetails && shixunsDetails.stu_num === 0 ? "" : <li>
|
||
<span>学习人数</span>
|
||
<span className="mt3">{shixunsDetails.stu_num}</span>
|
||
</li>}
|
||
<li>
|
||
<span>难度级别</span>
|
||
<span className="shixunsdiffcult mt3">{shixunsDetails.diffcult}</span>
|
||
</li>
|
||
</ul>
|
||
{this.props.is_jupyter === true ? "" :
|
||
<Popover placement="right" content={
|
||
<div style={{ "width": "530px" }} >
|
||
<div className="pr">
|
||
<span className="rateTrangle"></span>
|
||
<div className="pr clearfix" style={{ height: '177px' }}>
|
||
<div className="fl totalScore ml10">
|
||
<div>
|
||
<span className="font-24 color-yellow-ff lineh-20 mb10 mlbanner36">{star_infos[0]}分</span>
|
||
<span className="displayblock mt20">总评分</span>
|
||
<div className="rateYo">
|
||
<MyRate allowHalf defaultValue={star_info[0]} disabled />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="fr mt20 mr20" style={{ width: '375px' }}>
|
||
<div className='flex-container'>
|
||
<MyRate allowHalf defaultValue={5} disabled />
|
||
<div className='progress-container'>
|
||
<Progress percent={star_infos[1]} type='line' ></Progress>
|
||
</div>
|
||
</div>
|
||
<div className='flex-container'>
|
||
<MyRate allowHalf defaultValue={4} disabled />
|
||
<div className='progress-container'>
|
||
<Progress percent={star_infos[2]} type='line' ></Progress>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex-container'>
|
||
<MyRate allowHalf defaultValue={3} disabled />
|
||
<div className='progress-container'>
|
||
<Progress percent={star_infos[3]} type='line' ></Progress>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex-container'>
|
||
<MyRate allowHalf defaultValue={2} disabled />
|
||
<div className='progress-container'>
|
||
<Progress percent={star_infos[4]} type='line' ></Progress>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex-container'>
|
||
<MyRate allowHalf defaultValue={1} disabled />
|
||
<div className='progress-container'>
|
||
<Progress percent={star_infos[5]} type='line' ></Progress>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}>
|
||
<div className="pr fl mt15" id="commentsStar">
|
||
<div className={"color-grey-c ml15"} style={{ color: "#fff", textAlign: "center" }}>学员评分</div>
|
||
<div className="rateYo">
|
||
<MyRate allowHalf defaultValue={star_info[0]} disabled />
|
||
</div>
|
||
</div>
|
||
</Popover>}
|
||
|
||
|
||
{
|
||
startbtn === false && shixunsDetails.shixun_status != -1 ?
|
||
<Tooltip placement="bottom" title={
|
||
shixunsDetails.task_operation === undefined ? "" : shixunsDetails.task_operation[0] === "开始实战" ? "开始学习并完成实战任务" : shixunsDetails.task_operation[0] === "继续挑战" ? "继续完成后续学习和实战任务" :
|
||
shixunsDetails.task_operation[0] === "查看实战" ? "查看我的实战光辉历史" :
|
||
shixunsDetails.task_operation[0] === "模拟实战" ? "模拟完成实战任务" : shixunsDetails.task_operation[0] === "开启挑战" ? "开始学习并完成实战任务" : ""
|
||
}>
|
||
<a onClick={() => this.startshixunCombat(this.props.match.params.shixunId)}
|
||
className="fr user_default_btn task-btn-orange font-18"
|
||
id="shixun_operation" data-remote="true"
|
||
>
|
||
{shixunsDetails.task_operation === undefined ? "" : shixunsDetails.shixun_status > 1 ? shixunsDetails.task_operation[0] : "模拟实战"}
|
||
</a>
|
||
</Tooltip>
|
||
: ""
|
||
}
|
||
|
||
<Modal
|
||
keyboard={false}
|
||
title="提示"
|
||
visible={startshixunCombattype}
|
||
closable={false}
|
||
footer={null}
|
||
>
|
||
<div className="task-popup-content">
|
||
<p className="task-popup-text-center font-16 pb20">目前该实训项目尚在内测中，将于{shixunsmessage}之后开放，谢谢！</p>
|
||
</div>
|
||
<div className="task-popup-submit clearfix">
|
||
<a className="task-btn task-btn-orange fr mr51" onClick={this.hidestartshixunCombattype}>知道啦</a>
|
||
</div>
|
||
</Modal>
|
||
|
||
<Modal
|
||
keyboard={false}
|
||
title="提示"
|
||
visible={shixunsreplace}
|
||
closable={false}
|
||
footer={null}
|
||
>
|
||
<Spin indicator={antIcon} spinning={this.state.isSpin}>
|
||
<div className="task-popup-content">
|
||
<p className="task-popup-text-center font-16 pb20">实训已经更新了，正在为您重置!</p>
|
||
</div>
|
||
<div className="task-popup-submit clearfix">
|
||
<a className="task-btn task-btn-orange fr mr51"
|
||
onClick={() => this.hidestartshixunsreplace(hidestartshixunsreplacevalue)}>知道了</a>
|
||
</div>
|
||
</Spin>
|
||
</Modal>
|
||
|
||
<Modal
|
||
keyboard={false}
|
||
visible={startbtn}
|
||
closable={false}
|
||
footer={null}
|
||
className="startbtnModal"
|
||
>
|
||
<Spin size="large" />
|
||
</Modal>
|
||
|
||
{
|
||
startbtn === true ?
|
||
<a className="fr kaike kkbths mr15 font-18">开启中</a> : ""
|
||
}
|
||
{shixunsDetails.shixun_status === 0 && this.props.identity < 5 ?
|
||
<Popover
|
||
content={
|
||
<pre className={"bannerpd201"}>
|
||
<div>点击发布后，可以马上应用到自</div>
|
||
<div className={"wechatcenter mt10"}>己的课堂和课程</div>
|
||
<div className={"wechatcenter mt15"}><Button type="primary" onClick={this.openknow} >我知道了</Button></div>
|
||
</pre>
|
||
}
|
||
trigger="click"
|
||
placement="bottom"
|
||
visible={this.state.openknow}
|
||
>
|
||
<Tooltip placement="bottom" title={"发布后，可以使用到自己的课堂和课程"}>
|
||
<a onClick={this.applyrelease} className="fr kaike kkbths mr20 font-18 height39"
|
||
id="challenge_begin">发布</a>
|
||
</Tooltip>
|
||
</Popover> : ""
|
||
}
|
||
|
||
<Modal
|
||
keyboard={false}
|
||
title="提示"
|
||
visible={Issuevisible}
|
||
closable={false}
|
||
footer={null}
|
||
>
|
||
{
|
||
publishboxstatus === 0 ? <div className="task-popup-content">
|
||
<p className="task-popup-text-center font-16 mt10 mb10">
|
||
发布申请已提交，请等待管理员的审核<br />
|
||
</p>
|
||
</div> : publishboxstatus === 1 ?
|
||
<div className="task-popup-content">
|
||
<p className="task-popup-text-center font-16 mt10 mb10">
|
||
发布申请已提交，请等待管理员的审核<br />
|
||
<span className="font-12 color-grey-8"> • 我们将在1-2个工作日内完成审核</span>
|
||
</p>
|
||
</div> : publishboxstatus === 2 ? <div className="task-popup-content">
|
||
<p className="task-popup-text-center font-16 mt10 mb10">
|
||
第
|
||
{
|
||
evaluation_set_position.map((item, key) => {
|
||
return (
|
||
<span key={key}>{item}<span
|
||
style={{ display: key != evaluation_set_position.length - 1 ? "inline-block" : 'none' }}>,</span></span>
|
||
)
|
||
})
|
||
}
|
||
关评测设置尚未完成，无法申请发布
|
||
</p>
|
||
</div> : publishboxstatus === 3 ?
|
||
<div className="task-popup-content">
|
||
<p className="task-popup-text-center font-16 mt10 mb10">
|
||
每一个关卡至少需要一个技能标签<br />
|
||
第
|
||
{
|
||
tag_position.map((item, key) => {
|
||
return (
|
||
<span key={key}>{item}<span
|
||
style={{ display: key != tag_position.length - 1 ? "inline-block" : 'none' }}>,</span></span>
|
||
)
|
||
})
|
||
}
|
||
关尚未设置技能标签，请补充
|
||
</p>
|
||
</div> :
|
||
<div className="task-popup-content">
|
||
<p className="task-popup-text-center font-16 mt10 mb10">
|
||
尚未创建任务的实训，不能申请发布
|
||
</p>
|
||
</div>
|
||
}
|
||
<div className="mb15 clearfix edu-txt-center">
|
||
<a onClick={() => this.hiddenIssuevisible(publishboxstatus)}
|
||
className="task-btn task-btn-orange pop_close">知道啦</a>
|
||
</div>
|
||
|
||
</Modal>
|
||
|
||
{shixunsDetails.shixun_status === 2 && shixunsDetails.public === 0 && this.props.identity < 5 ?
|
||
<Popover
|
||
content={
|
||
<pre className={"bannerpd201"}>
|
||
<div>平台审核完成后，您的实训将会录入到平台的公共实训项目列表</div>
|
||
<div className={"wechatcenter mt10"}>您将获得实训<span className={"FF6802"}>对应的经验值和金币</span>～ </div>
|
||
<div className={"wechatcenter mt15"}><Button type="primary" onClick={this.openshowpublic} >我知道了</Button></div>
|
||
</pre>
|
||
}
|
||
trigger="click"
|
||
placement="bottom"
|
||
visible={this.state.openshowpublictype}
|
||
>
|
||
<Tooltip placement="bottom" title={"审核通过后，平台用户可以查看实训"}>
|
||
<Button type="primary" ghost id="challenge_begin" onClick={this.openpublic} className="fr kaike kkbths mr20 font-18 height39">
|
||
申请公开
|
||
</Button>
|
||
</Tooltip>
|
||
</Popover> : ""
|
||
}
|
||
|
||
{shixunsDetails.shixun_status === 2 && shixunsDetails.public === 1 && this.props.identity < 5 ?
|
||
<Tooltip placement="bottom" title={"撤销后，仅可以使用到自己的课堂和课程"}>
|
||
<Button type="primary" ghost id="challenge_begin" onClick={this.hidenpublic} className="fr kaike kkbths mr20 font-18 height39" style={{ 'width': '140px' }}>
|
||
撤销申请公开
|
||
</Button>
|
||
</Tooltip> : ""
|
||
}
|
||
|
||
{shixunsDetails.shixun_status === 2 && shixunsDetails.public === 0 && this.props.identity < 5 ?
|
||
<Tooltip placement="bottom" title={"撤销发布后，学员将无法进行练习"}>
|
||
<a onClick={this.cancel_publish} className="fr kaike kkbths mr20 font-18 height39"
|
||
id="challenge_begin">撤销发布</a>
|
||
</Tooltip>
|
||
: ""
|
||
}
|
||
|
||
{
|
||
this.props.shixunsDetails && this.props.shixunsDetails.is_jupyter === true ? "" : <a onClick={this.Senttothe}
|
||
className="fr kaike kkbths mr20 font-18"
|
||
data-tip-down=""
|
||
style={{ display: shixunsDetails.shixun_status === 0 || shixunsDetails.shixun_status === 3 || shixunsDetails.shixun_status === 1 || shixunsDetails.shixun_status === -1 ? "none" : "block" }}
|
||
data-remote="true">
|
||
<Tooltip placement="bottom" title={"以实训作业的形式发送到我的课堂"}>
|
||
发送至
|
||
</Tooltip>
|
||
</a>
|
||
}
|
||
|
||
{this.props && this.props.user && this.props.user.login === "" ? "" : shixunsDetails && shixunsDetails.is_collect === false ?
|
||
<a onClick={() => this.setCollect()}
|
||
className="fr kaike kkbths mr20 font-18"
|
||
// style={{'width':'65px'}}
|
||
>
|
||
收藏
|
||
</a> : ""
|
||
}
|
||
|
||
{this.props && this.props.user && this.props.user.login === "" ? "" : shixunsDetails && shixunsDetails.is_collect === true ?
|
||
<a onClick={() => this.cancelCollect()}
|
||
className="fr kaike kkbths mr20 font-18"
|
||
>
|
||
取消收藏
|
||
</a> : ""
|
||
}
|
||
|
||
<Modal
|
||
keyboard={false}
|
||
title="发送实训"
|
||
visible={Senttothetype}
|
||
closable={false}
|
||
footer={null}
|
||
>
|
||
<div className="">
|
||
<div className="newupload_conbox">
|
||
|
||
<div className="mb15 font-14 edu-txt-center color-orange-tip">
|
||
选择的实训将会发送到指定课堂
|
||
</div>
|
||
|
||
<div className="mb10 edu-position">
|
||
<Search
|
||
placeholder="输入课堂名称的关键字进行搜索"
|
||
value={Searchvalue}
|
||
onInput={this.SenttotheValue}
|
||
onSearch={(value) => this.SenttotheSearch(value)}
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</div>
|
||
<style>
|
||
{`
|
||
.edu-h270{
|
||
height:270px;
|
||
overflow-y: auto;
|
||
}
|
||
`}
|
||
</style>
|
||
|
||
<div id="search_course_list" className={courses_count > 12 ? "cdefault " : "cdefault "}>
|
||
<div className="clearfix mb20 edu-bg-light-blue edu-h270">
|
||
<ul>
|
||
<RadioGroup onChange={this.onChangeSenttothevcalue} value={Senttothevcalue}>
|
||
{
|
||
course_list === undefined ? "" : course_list.map((item, key) => {
|
||
return (
|
||
<Radio style={radioStyle} value={item.course_id}
|
||
key={key}>{item.name}</Radio>
|
||
)
|
||
})
|
||
}
|
||
</RadioGroup>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
{this.state.Senttothevcaluetype === true ? <div className={"color-red"}>请选择你要发送的课堂</div> : ""}
|
||
<div className="mt10 marginauto" style={{ display: courses_count > 12 ? "block" : "none" }}>
|
||
<Pagination size="small" className="mb20"
|
||
showQuickJumper defaultCurrent={1} current={pages} pageSize={10}
|
||
total={courses_count} onChange={this.onChangesendeSenttothe} />
|
||
</div>
|
||
|
||
<div className="mt10 marginauto flexbannerright">
|
||
<div className={"-flex"}></div>
|
||
<div className={"-flex"}></div>
|
||
<div className={"-flex"}>
|
||
<a onClick={this.hideSenttothevcalue}
|
||
className="pop_close task-btn mr10 ml25 margin-tp26">取消</a>
|
||
<a className="task-btn task-btn-orange margin-tp26"
|
||
onClick={this.sendeSenttothevcalue}
|
||
id="submit_send_shixun">确定</a>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
|
||
{shixunsDetails.shixun_status === 3 &&
|
||
<a className="fr kaike kkbths mr15 font-18">已关闭</a>
|
||
}
|
||
|
||
{shixunsDetails.shixun_status === -1 &&
|
||
<a className="fr kaike kkbths mr15 font-18">已删除</a>
|
||
}
|
||
|
||
|
||
{this.props.identity < 8 && shixunsDetails.shixun_status != -1 && shixunsDetails.shixun_status != 0 ?
|
||
<div className="fr kaike kkbth mr20"
|
||
style={{ display: shixunsDetails.can_copy === false || shixunsDetails.can_copy === null ? "none" : "flex" }}>
|
||
<Tooltip placement="bottom" title={"基于这个实训修改形成新的实训"}>
|
||
<span className="flex1 edu-txt-center fl font-18"
|
||
onClick={this.copyForkvisible}
|
||
style={{ display: shixunsDetails.can_copy === false || shixunsDetails.can_copy === null ? "none" : "inline-block" }}
|
||
>
|
||
复制
|
||
</span>
|
||
</Tooltip>
|
||
|
||
|
||
{Forkvisible === true ? <style>
|
||
{
|
||
`
|
||
.ant-modal-body{
|
||
padding: 10px;
|
||
}
|
||
`
|
||
}
|
||
</style> : ""}
|
||
|
||
{
|
||
this.state.TextAreaintshow === true ? <style>
|
||
{
|
||
`
|
||
.ant-input:hover {
|
||
border: 1px solid red !important;
|
||
}
|
||
.ant-input:focus {
|
||
border: 1px solid red !important;
|
||
}
|
||
`
|
||
}
|
||
</style> : ""
|
||
}
|
||
{Forkvisible === true ? <Modal
|
||
keyboard={false}
|
||
title="复制原因"
|
||
visible={Forkvisible}
|
||
closable={false}
|
||
footer={null}
|
||
>
|
||
{Forkvisibletype === true ?
|
||
<Spin
|
||
tip="请等待正在复制中..."
|
||
style={{ marginLeft: '38%' }}
|
||
>
|
||
</Spin> :
|
||
<div>
|
||
<div className="task-popup-content">
|
||
<div className={"forkfactors"}>请根据实际情况，填写复制本实训的原因</div>
|
||
<Radio.Group onChange={this.onChangeRadiovalue} value={this.state.Radiovalue} className={"ml20 mt20 mb20"} style={{ width: "100%" }}>
|
||
<Radio style={radioStyle} value={1}>
|
||
实训内容升级
|
||
</Radio>
|
||
<Radio style={radioStyle} value={2}>
|
||
课堂教学使用
|
||
</Radio>
|
||
<Radio style={radioStyle} value={3}>
|
||
实践课程使用
|
||
</Radio>
|
||
<Radio style={radioStyle} value={4}>
|
||
其它原因
|
||
</Radio>
|
||
{this.state.Radiovalue === 4 ?
|
||
<TextArea className={this.state.TextAreaintshow === true ? "bor-red mt10" : "mt10"}
|
||
placeholder="请填写fork原因（60字以内)"
|
||
value={this.state.TextArea}
|
||
rows={4} style={{ width: '85%', marginLeft: '30px' }} onInput={this.changeTextArea}
|
||
maxlength={60}
|
||
/> : null}
|
||
{this.state.TextAreaintshow === true ? <div className={"color-red ml30"}>不能为空</div> : ""}
|
||
</Radio.Group>
|
||
</div>
|
||
<div className="task-popup-submit clearfix">
|
||
<a onClick={this.hideForkvisible} className="task-btn fl">取消</a>
|
||
<a className="task-btn task-btn-orange fr" onClick={this.addForkvisible}>确定</a>
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
|
||
</Modal> : ""}
|
||
|
||
<Modal
|
||
keyboard={false}
|
||
title="提示"
|
||
visible={Forkauthentication}
|
||
closable={false}
|
||
footer={null}
|
||
>
|
||
<div className="task-popup-content"><p
|
||
className="task-popup-text-center font-16 pb20">{can_fork}<br />请问是否前往进行认证？</p>
|
||
</div>
|
||
<div className="task-popup-submit clearfix">
|
||
<a onClick={this.hideForkvisible} className="task-btn fl">取消</a>
|
||
<a className="task-btn task-btn-orange fr" onClick={this.tocertification}>确定</a>
|
||
</div>
|
||
</Modal>
|
||
{!!shixunsDetails.fork_num &&
|
||
<Link to={"/shixuns/" + shixunId + "/fork_list"} className="forkNumst" data-tip-down="复制实训列表">
|
||
{shixunsDetails.fork_num}
|
||
</Link>
|
||
}
|
||
|
||
</div> : ""}
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div className="alert alert-orange mb15 mt15 clearfix"
|
||
style={{ display: shixunsDetails.shixun_status === 1 ? "block" : "none" }}
|
||
>正在等待管理员的审核。在审核通过前，可以随时撤销发布
|
||
</div>
|
||
</div>
|
||
|
||
);
|
||
}
|
||
}
|
||
|
||
export default TPMBanner;
|
||
|