update monaco-editor

dev_aliyun2
harry 5 years ago
parent afadd23dfd
commit 29d4501aab

@ -1,35 +1,33 @@
import React,{ Component } from "react";
import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin,Button,Form,Icon,message,Progress,notification} from "antd";
import { WordsBtn,on, off, trigger,markdownToHTML,getImageUrl} from 'educoder';
import React, { Component } from "react";
import { Modal, Spin, Button, Form, Icon, message, Progress, notification } from "antd";
import './myelearning.css'
import axios from 'axios';
import YslDetailCards from "./YslDetailCards.js";
import Jointheclass from '../../modals/Jointheclass';
import LoginDialog from "../../login/LoginDialog";
import NoneData from '../../../modules/courses/coursesPublic/NoneData'
//在线学习
class Elearning extends Component{
constructor(props){
class Elearning extends Component {
constructor(props) {
super(props);
this.state={
description:"", //简介
isSpin:true,
start_learning:undefined, //是否要开始学习 没开始学习 点击第一个是开始学习 就是学习下面的从第一个开始
learned:0, //学习进度
last_shixun:"", //上次学习的实训
stages:[], //实践课程的章节
yslJointhe:false,
shixunsreplace:false,
hidestartshixunsreplacevalue:"",
shixunsmessage:"",
startshixunCombattype:false,
isSpins:false,
userlogin:"",
isRender:false,
subject_id:0,
myupdataleftNavs:this.myupdataleftNav
this.state = {
description: "", //简介
isSpin: true,
start_learning: undefined, //是否要开始学习 没开始学习 点击第一个是开始学习 就是学习下面的从第一个开始
learned: 0, //学习进度
last_shixun: "", //上次学习的实训
stages: [], //实践课程的章节
yslJointhe: false,
shixunsreplace: false,
hidestartshixunsreplacevalue: "",
shixunsmessage: "",
startshixunCombattype: false,
isSpins: false,
userlogin: "",
isRender: false,
subject_id: 0,
myupdataleftNavs: this.myupdataleftNav
}
}
@ -41,42 +39,42 @@ class Elearning extends Component{
this.getdata();
}
getdata=()=>{
getdata = () => {
console.log("更新了数据了");
let url = `/courses/${this.props.match.params.coursesId}/online_learning.json`;
// //
axios.get(url).then((response) => {
if(response){
if(response.data){
if (response) {
if (response.data) {
// console.log("获取到到数据");
// console.log(response);
this.setState({
description: response.data.description,
start_learning:response.data.start_learning,
learned:response.data.learned,
last_shixun:response.data.last_shixun,
stages:response.data.stages,
subject_id:response.data.subject_id,
start_learning: response.data.start_learning,
learned: response.data.learned,
last_shixun: response.data.last_shixun,
stages: response.data.stages,
subject_id: response.data.subject_id,
});
}
}
this.setState({
isSpin:false,
isSpin: false,
})
}).catch((error) => {
console.log(error);
this.setState({
isSpin:false,
isSpin: false,
})
});
try {
if(this.props.current_user!==undefined){
if (this.props.current_user !== undefined) {
this.setState({
userlogin :this.props.current_user.login,
userlogin: this.props.current_user.login,
})
}
}catch (e) {
} catch (e) {
console.log("12312312312")
console.log(e);
}
@ -85,18 +83,18 @@ class Elearning extends Component{
console.log("componentDidUpdate");
// console.log(prevProps);
// console.log(this.props);
if(prevProps.current_user!=this.props.current_user){
if(this.props.current_user!==undefined){
if (prevProps.current_user != this.props.current_user) {
if (this.props.current_user !== undefined) {
// console.log(this.props.current_user.login);
// console.log(prevProps.current_user.login);
this.setState({
userlogin :this.props.current_user.login,
userlogin: this.props.current_user.login,
})
}
}
if(prevProps.yslElearning===this.props.yslElearning) {
if(prevProps.yslElearning===true && this.props.yslElearning===true){
if (prevProps.yslElearning === this.props.yslElearning) {
if (prevProps.yslElearning === true && this.props.yslElearning === true) {
// console.log("=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-");
// console.log(prevProps.yslElearning);
// console.log(this.props.yslElearning);
@ -109,8 +107,8 @@ class Elearning extends Component{
//开始学习
Startlearning=()=>{
let {userlogin} = this.state;
Startlearning = () => {
let { userlogin } = this.state;
console.log("userlogin");
console.log(userlogin);
if (userlogin === undefined) {
@ -125,38 +123,38 @@ class Elearning extends Component{
})
return;
}
if(this.props.isNotMember()===true){
if (this.props.isNotMember() === true) {
this.setState({
yslJointhe:true
yslJointhe: true
})
}else {
let {stages}=this.state;
if(stages.length>0){
var stagesdatas=[];
for(var i=0;i<stages.length;i++){
for(var ki=0;ki<stages[i].shixuns_list.length;ki++){
if(stages[i].shixuns_list[ki].shixun_status !=="暂未公开"){
var id=stages[i].shixuns_list[ki].identifier;
} else {
let { stages } = this.state;
if (stages.length > 0) {
var stagesdatas = [];
for (var i = 0; i < stages.length; i++) {
for (var ki = 0; ki < stages[i].shixuns_list.length; ki++) {
if (stages[i].shixuns_list[ki].shixun_status !== "暂未公开") {
var id = stages[i].shixuns_list[ki].identifier;
console.log(id);
stagesdatas.push(id);
}
}
}
console.log(stagesdatas[0]);
if(stagesdatas.length>0){
if (stagesdatas.length > 0) {
this.kaishishixun(stagesdatas[0]);
}else {
} else {
notification.open({
message:"提示",
message: "提示",
description: "实训暂未公开!"
});
}
console.log("这是"+i);
console.log("这是" + i);
}
}
};
kaishishixun=(id)=>{
kaishishixun = (id) => {
let url = "/shixuns/" + id + "/shixun_exec.json";
axios.get(url).then((response) => {
console.log("精品课堂开发学习");
@ -165,19 +163,19 @@ class Elearning extends Component{
if (response.data.status === -2) {
this.setState({
shixunsreplaces:true,
hidestartshixunsreplacevalues:response.data.message+".json"
shixunsreplaces: true,
hidestartshixunsreplacevalues: response.data.message + ".json"
})
} else if (response.data.status === -1) {
console.log(response)
}else if(response.data.status===-3){
} else if (response.data.status === -3) {
this.setState({
shixunsmessages:response.data.message,
startshixunCombattypes:true,
shixunsmessages: response.data.message,
startshixunCombattypes: true,
})
} else {
console.log("开始学习了");
window.open("/tasks/" + response.data.game_identifier,'_blank');
window.open("/tasks/" + response.data.game_identifier, '_blank');
//这个是传过来 调用刷新
this.Myreload();
// window.location.href = path
@ -189,58 +187,59 @@ class Elearning extends Component{
});
}
Startlearningtwo=()=>{
Startlearningtwo = () => {
this.setState({
yslJointhe:true
yslJointhe: true
})
};
ysljoinmodalCancel=()=>{
ysljoinmodalCancel = () => {
this.setState({
yslJointhe:false
yslJointhe: false
})
};
ysljoinmodalCanceltwo=()=>{
ysljoinmodalCanceltwo = () => {
this.setState({
yslJointhe:false
yslJointhe: false
})
window.location.reload();
};
Myreload = ()=>{
Myreload = () => {
window.location.reload();
};
hidestartshixunsreplace=(url)=>{
hidestartshixunsreplace = (url) => {
this.setState({
isSpins:true,
isSpins: true,
})
axios.get(url).then((response) => {
// debugger
if(response.status===200){
if (response.status === 200) {
// let path="/shixuns/"+response.data.shixun_identifier+"/challenges";
// this.props.history.push(path);
message.success('重置成功,正在进入实训!');
this.startgameid(response.data.shixun_identifier);
this.setState({
shixunsreplaces:false,
isSpins:false,
shixunsreplaces: false,
isSpins: false,
})
// message.success('重置成功,正在进入实训!');
// this.startshixunCombat();
}}
}
}
).catch((error) => {
this.setState({
isSpins:false,
shixunsreplaces:false,
isSpins: false,
shixunsreplaces: false,
})
});
};
startgameid=(id)=>{
if(this.props.isNotMember()===true){
startgameid = (id) => {
if (this.props.isNotMember() === true) {
//这个是外部传过来的
this.Startlearningtwo();
return
@ -251,19 +250,19 @@ class Elearning extends Component{
if (response.data.status === -2) {
this.setState({
shixunsreplaces:true,
hidestartshixunsreplacevalues:response.data.message+".json"
shixunsreplaces: true,
hidestartshixunsreplacevalues: response.data.message + ".json"
})
} else if (response.data.status === -1) {
console.log(response)
}else if(response.data.status===-3){
} else if (response.data.status === -3) {
this.setState({
shixunsmessages:response.data.message,
startshixunCombattypes:true,
shixunsmessages: response.data.message,
startshixunCombattypes: true,
})
} else {
console.log("开始学习了");
window.open("/tasks/" + response.data.game_identifier,'_blank');
window.open("/tasks/" + response.data.game_identifier, '_blank');
//这个是传过来 调用刷新
this.Myreload();
// window.location.href = path
@ -275,40 +274,40 @@ class Elearning extends Component{
});
};
hidestartshixunCombattype=()=>{
hidestartshixunCombattype = () => {
this.setState({
startshixunCombattypes:false
startshixunCombattypes: false
})
};
Modifyloginvalue=()=>{
Modifyloginvalue = () => {
this.setState({
isRender:false,
isRender: false,
})
};
Tojoinclass=()=> {
Tojoinclass = () => {
this.setState({
isRender: true
})
};
myupdataleftNav=()=>{
myupdataleftNav = () => {
this.props.updataleftNavfun();
}
render(){
render() {
console.log("Elearning++++++++");
// console.log(this.props.Chapterupdate);
let{description,whethertoedit,isSpin,start_learning,hidestartshixunsreplacevalues,learned,last_shixun,stages,isRender} =this.state;
const isNotMembers=this.props.isNotMember();//非课堂成员
let { description, whethertoedit, isSpin, start_learning, hidestartshixunsreplacevalues, learned, last_shixun, stages, isRender } = this.state;
const isNotMembers = this.props.isNotMember();//非课堂成员
const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
return(
return (
<React.Fragment >
<div id={"zhudiv"}>
{isRender===true?<LoginDialog
Modifyloginvalue={()=>this.Modifyloginvalue()}
{isRender === true ? <LoginDialog
Modifyloginvalue={() => this.Modifyloginvalue()}
{...this.props}
{...this.state}
/>:""}
<Jointheclass {...this.props} {...this.state} ysljoinmodalCancel={()=>this.ysljoinmodalCancel()} ysljoinmodalCanceltwo={()=>this.ysljoinmodalCanceltwo()}></Jointheclass>
/> : ""}
<Jointheclass {...this.props} {...this.state} ysljoinmodalCancel={() => this.ysljoinmodalCancel()} ysljoinmodalCanceltwo={() => this.ysljoinmodalCanceltwo()}></Jointheclass>
<Modal
keyboard={false}
title="提示"
@ -322,7 +321,7 @@ class Elearning extends Component{
<div className="task-popup-submit clearfix">
{/*<a onClick={this.hidestartshixunCombattype} className="task-btn fl">取消</a>*/}
<a className="task-btn task-btn-orange fr"
style={{marginRight:'51px'}}
style={{ marginRight: '51px' }}
onClick={this.hidestartshixunCombattype}>知道了</a>
</div>
{/*<p className="inviteTipbtn with100 fl">*/}
@ -342,36 +341,36 @@ class Elearning extends Component{
</div>
<div className="task-popup-submit clearfix">
<a className="task-btn task-btn-orange fr"
style={{marginRight:'51px'}}
style={{ marginRight: '51px' }}
onClick={() => this.hidestartshixunsreplace(hidestartshixunsreplacevalues)}>知道了</a>
</div>
</Spin>
</Modal>
<div className="edu-back-white">
{
this.props.isAdmin()===true?"":
this.props.isAdmin() === true ? "" :
<div>
{
start_learning===undefined?"":start_learning===false?
<div className="clearfix padding30 bor-bottom-greyE" style={{textAlign: "center"}}>
<div style={{height: '40px',textAlign: "center"}}>
<span className=" fl color-dark-21 " style={{height: '40px', textAlign: "center",fontSize:"19px"}}>还未开始学习</span>
<Button className="ant-btn defalutSubmitbtn ant-btn-primary colorblue font-16 fr" onClick={()=>this.Startlearning()}>
start_learning === undefined ? "" : start_learning === false ?
<div className="clearfix padding30 bor-bottom-greyE" style={{ textAlign: "center" }}>
<div style={{ height: '40px', textAlign: "center" }}>
<span className=" fl color-dark-21 " style={{ height: '40px', textAlign: "center", fontSize: "19px" }}>还未开始学习</span>
<Button className="ant-btn defalutSubmitbtn ant-btn-primary colorblue font-16 fr" onClick={() => this.Startlearning()}>
<span>开始学习</span></Button>
</div>
</div>
:
<div className="clearfix padding30 bor-bottom-greyE" style={{textAlign: "center"}}>
<div style={{height: '40px',textAlign: "left"}}>
<span className=" color-dark-21 " style={{height: '40px', textAlign: "center",fontSize:"19px",color:"#05101A"}}>已学{learned}%</span>
<div className="clearfix padding30 bor-bottom-greyE" style={{ textAlign: "center" }}>
<div style={{ height: '40px', textAlign: "left" }}>
<span className=" color-dark-21 " style={{ height: '40px', textAlign: "center", fontSize: "19px", color: "#05101A" }}>已学{learned}%</span>
</div>
<div style={{marginTop:"7px",width:"401px"}}>
<div style={{ marginTop: "7px", width: "401px" }}>
<Progress percent={learned} showInfo={false} />
</div>
<div style={{marginTop:"7px",textAlign: "left"}}>
<span className="font-16">上次学习内容</span><span style={{color:"#4CADFF",marginLeft:"25px"}}>{last_shixun}</span>
<div style={{ marginTop: "7px", textAlign: "left" }}>
<span className="font-16">上次学习内容</span><span style={{ color: "#4CADFF", marginLeft: "25px" }}>{last_shixun}</span>
</div>
@ -398,11 +397,11 @@ class Elearning extends Component{
<Spin size="large" spinning={isSpin} id={"cdiv"}>
<div className=" clearfix" style={this.props.isAdmin()===true?{marginTop:"0px"}:{marginTop:"20px"}}>
<div className=" clearfix" style={this.props.isAdmin() === true ? { marginTop: "0px" } : { marginTop: "20px" }}>
<div>
{/*开始学习*/}
<YslDetailCards {...this.state} {...this.props} Startlearningtwo={()=>this.Startlearningtwo()} Myreload={()=>this.Myreload()} Tojoinclass={()=>this.Tojoinclass()} getPathCardsList={()=>this.getdata()} ></YslDetailCards>
<YslDetailCards {...this.state} {...this.props} Startlearningtwo={() => this.Startlearningtwo()} Myreload={() => this.Myreload()} Tojoinclass={() => this.Tojoinclass()} getPathCardsList={() => this.getdata()} ></YslDetailCards>
</div>

@ -478,17 +478,16 @@ class LoginDialog extends Component {
}
render() {
let { qqlogin, login, isGoing, isGoingValue, disabled, bottonclass, Phonenumberisnotco,
let { login, isGoing, isGoingValue, disabled, Phonenumberisnotco,
dialogBox, isRender, weixinlogin } = this.state;
if (isRender === undefined) {
isRender = false
}
return (
<Modal visible={isRender} id="DialogID"
className="zindextest"
onClose={() => this.handleDialogClose()}
onCancel={() => this.handleDialogClose()}
footer={null}
>
<Notcompletedysl
modalsType={this.state.MyEduCoderModals}

@ -163,7 +163,7 @@ class MainContent extends Component {
<div style={{ display: (codeLoading ? 'block' : 'none'), textAlign: 'center' }}>
<span style={{ color: '#ddd', display: 'block' }}>正在加载中请稍后...</span>
</div>
<div style={{ display: (codeLoading ? 'none' : 'block') }}>
<div style={{ display: (codeLoading ? 'none' : 'block'), height: '100%' }}>
<CodeRepositoryViewContainer {...this.props} ></CodeRepositoryViewContainer>
</div>
</React.Fragment>

@ -68,7 +68,7 @@ class TPIMonaco extends Component {
render() {
const { repositoryCode, showSettingDrawer, shixun, isEditablePath, settingDrawerOpen, mirror_name } = this.props;
const { repositoryCode, showSettingDrawer, shixun, isEditablePath, settingDrawerOpen, mirror_name, onRepositoryCodeUpdate } = this.props;
const { cmFontSize, cmCodeMode } = this.state
const editorOptions = {
value: repositoryCode,

@ -78,6 +78,23 @@ export default ({
const editor = useRef({})
const [init, setInit] = useState(false)
function onLayout() {
if (window.ResizeObserver) {
const ro = new window.ResizeObserver(entries => {
for (let entry of entries) {
if (entry.target.offsetHeight > 0) {
editor.current.instance.layout()
}
}
})
ro.observe(editorEl.current.parentElement)
} else {
setTimeout(() => {
editor.current.instance.layout()
}, 100);
}
}
useEffect(() => {
editor.current.instance = monaco.editor.create(
editorEl.current, {
@ -98,6 +115,7 @@ export default ({
const resizeHandler = debounce(() => { editor.current.instance.layout() }, 100)
window.addEventListener('resize', resizeHandler)
onLayout()
return () => {
const el = editor.current.instance
el.dispose()

@ -479,7 +479,7 @@ class CodeRepositoryView extends Component {
</ul>
<div className="cl"></div>
<div id="codetab_con_1" style={{ display: 'block', flex: 'auto' }} style={tabIndex === 0 ? { display: 'block' } : { display: 'none' }}>
<div id="codetab_con_1" style={{ display: tabIndex === 0 ? 'block' : 'none', flex: 'auto', height: '100%' }} >
{this.props.readRepoTimeout === true ? <div className="readRepoFailed">
代码加载失败<a className="retry"
onClick={() => this.props.fetchRepositoryCode(this.props, null, null, true, true)}>重试</a>
@ -508,7 +508,7 @@ class CodeRepositoryView extends Component {
style={{ color: '#fff', display: tabIndex === 84 ? 'block' : 'none', 'marginLeft': '2px', 'paddingBottom': '30px' }}>
</div>
<div id="codetab_con_3" className="undis -relative" style={{ display: 'none' }}></div>
</React.Fragment>
</React.Fragment >
);
}
}

Loading…
Cancel
Save