main.js 6.41 KB
$(function(){
    var teacherId = document.getElementById('teacher');
    var socket = io('http://localhost:3000');

    // 初始化codemirror页面
    var teacher = CodeMirror.fromTextArea(teacherId, {
      value: '输入HTML代码',
      mode:  'text/javascript',
      lineNumbers: true,
      smartIndent: false
    });

    // 记录每次操作的变化
    CodeMirror.on(teacher,"change", function(instance, changeObj) {
        // console.log(instance);
        // console.log(changeObj);
        var changeObjStr = JSON.stringify(changeObj);

        socket.emit('teacher.programming', changeObjStr);

        socket.emit('programming.content', teacher.getValue());

        buildOperate('teacher', changeObj);

        console.log(IDELive.operations);

    });

    // 链接时执行初始化代码
    socket.on('programming.content', function(msg) {
        console.log('programming.content ---- ' + msg);
        teacher.setValue(msg);
    });

    var IDELive = {
        operations: []    // 存储录制时的动作对象
    }





    var LiveTeacher = {
        init: function(){
            LiveTeacher.events();
        },
        events: function(){
            var _this = this;
            $('#liveStart').on('click', function(){ liveStartFun(); });
            $('#liveEnd').on('click', function(){  });

            $('#liveConfirm').on('click', function(){ liveConfirmFun(); });
            $('#liveCancel').on('click', function(){ liveCancelFun() });

            $('#liveSave').on('click', function(){  });
            $('#liveOut').on('click', function(){  });

            $('#CompileBtn').on('click', function(){ liveCompileFun(); });
            
        },
        liveStartFun: function(){},
        liveEndFun: function(){},

        liveConfirmFun: function(){},
        liveCancelFun: function(){},

        liveSaveFun: function(){},
        liveOutFun: function(){},

        liveCompileFun: function(){}
    }


    LiveTeacher.init();

    function liveStartFun(){
        $('.tip-wrap').show();
    }

    // 开始录制的时间
    function liveConfirmFun(){
        $('.tip-wrap').hide();
        IDELive.record_startime = new Date().getTime()
        console.log(IDELive.record_startime);
    }

    function liveCancelFun(){
        $('.tip-wrap').hide();
    }


    function liveCompileFun(){
        console.log('编译' + teacher.getValue());

        socket.emit('programming.compile', 'hello');

        var el = document.querySelector('#CompileBtn')
        var l = Ladda.create(el);
        l.start();

        var input = $('#input').val() || '';
        var code = teacher.getValue();
        var compileData = {
            code: code,
            langid: 10,
            input: input
        }
        $.ajax({
            type: "post",
            url: gxb_api + "/submit/submitCode/api",
            data: JSON.stringify(compileData),
            dataType: "json",
            contentType: "application/json",
            success: function(data) {
               console.log(data);
               l.remove();
               compileResult(data);
            },
            error: function(){
                l.stop();
                alert('错误');
            }
        });
    }




    // $('#CompileBtn').on('click', function(){
    //     console.log('编译' + teacher.getValue());
    //     var el = document.querySelector('#CompileBtn')
    //     var l = Ladda.create(el);
    //     l.start();

    //     var input = $('#input').val() || '';
    //     var code = teacher.getValue();
    //     var compileData = {
    //         code: code,
    //         langid: 10,
    //         input: input
    //     }
    //     $.ajax({
    //         type: "post",
    //         url: gxb_api + "/submit/submitCode/api",
    //         data: JSON.stringify(compileData),
    //         dataType: "json",
    //         contentType: "application/json",
    //         success: function(data) {
    //            console.log(data);
    //            l.remove();
    //            compileResult(data);
    //         },
    //         error: function(){
    //             l.stop();
    //             alert('错误');
    //         }
    //     });
    // })



    /**
     * 组合录入代码 
     * by Kira 2017-5-17
     */ 
    function buildOperate(editor, changeobj){
        var intervaltime,
            currenttime = new Date().getTime();
        console.log(IDELive.record_startime);
        var intervaltime = currenttime - IDELive.record_startime;

        var  operateObj = {
            intervaltime: intervaltime,
            editor: editor,
            changeobj: changeobj,
            currenttime: currenttime,
            trigger: 0
        };
        IDELive.operations.push( operateObj);       // 添加每次输入对象
        IDELive.record_startime = currenttime; //设定起始时间
    }

    // 编译结果
    function compileResult(data){
        if(data.result){

            $('#cmpinfo').html('<p class="text-warning">' + data.cmpinfo.replace(/\n/g, "<br />") + "</p>");        
            $('#stderr').html('<p class="text-danger">' + data.stderr.replace(/\n/g, "<br />") + "</p>");       
            $('#output').html('<p class="text-success">' + data.output.replace(/\n/g, "<br />") + "</p>");  
            
            if(data.cmpinfo.length){
                $('#cmprun-tabs a[href="#cmpinfo"]').tab('show');
            }else if(data.stderr.length){
                $('#cmprun-tabs a[href="#stderr"]').tab('show');
            }else if(data.output.length){
                $('#cmprun-tabs a[href="#output"]').tab('show');
            }
            
            if(!data.cmpinfo.length){
                $('#cmpinfo').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 编译已成功</p>');
            }
            
            if(!data.stderr.length){
                $('#stderr').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 无输出错误</p>');
            }
            
            if(!data.output.length){
                $('#output').prepend('<p class="alert alert-warning"><i class="glyphicon glyphicon-exclamation-sign"></i> 代码编译错误或者运行相关功能受限制</p>');
            }

        }else{
            $('#cmpinfo').html('<p class="alert alert-danger"><i class="glyphicon glyphicon-exclamation-sign"></i> 云端编译超时,请稍后重新尝试</p>');
            $('#cmprun-tabs a[href="#cmpinfo"]').tab('show');
        }
    }
})