fix bug

ykxie
1 parent 35de1d9d
Showing 8 changed files with 159 additions and 29 deletions
src/live/js/student.js
src/live/js/teacher.js
src/live/js/utils.js
src/live/student.html
src/live/style/main.css
src/live/style/student.css
src/live/style/teacher.css
src/live/teacher.html
@@ -35,6 +35,22 @@ $(function() {
         // socket.emit('programming.content', teacher.getValue());
     });
+    // 选中 input
+    socket.on('select.menu', function(msg) {
+        console.log('select.menu ---- ' + msg);
+        $('#runtimeArgus').addClass('effect-2');
+    });
+
+    // 标准输入
+    socket.on('stdin.value', function(msg) {
+        console.log('stdin.value ---- ' + msg);
+        $('#runtimeArgus').val(msg)
+    });
+
+
+
+
+
     socket.on('programming.compile', function(msg) {
         console.log('-------------');
         console.log(msg);
@@ -75,19 +91,20 @@ $(function() {
-    $('#CompileBtn').on('click', function(){
-        console.log('编译' + teacher.getValue());
-        var el = document.querySelector('#CompileBtn')
+    $('#studCompile').on('click', function(){
+
+        var el = document.querySelector('#studCompile')
         var l = Ladda.create(el);
         l.start();
         var input = $('#input').val() || '';
-        var code = teacher.getValue();
+        var code = student.getValue();
         var compileData = {
             code: code,
             langid: 10,
             input: input
         }
+        
         $.ajax({
             type: "post",
             url: gxb_api + "/submit/submitCode/api",
@@ -97,7 +114,7 @@ $(function() {
             success: function(data) {
                console.log(data);
                l.remove();
-               compileResult(data);
+               studCompileResult(data);
             },
             error: function(){
                 l.stop();
@@ -39,7 +39,20 @@ $(function(){
         operations: []    // 存储录制时的动作对象
     }
+    // 选中 input 事件
+    $('#runtimeArgus').focus(function(){
+        console.log('------getValue')
+        socket.emit('select.menu');
+    })
+    // 输入事件
+    $('#runtimeArgus').bind('input propertychange', function() {  
+        console.log($('#runtimeArgus').val());
+        socket.emit('stdin.value', $('#runtimeArgus').val());
+    }); 
+    // $("#runtimeArgus").change(function(){
+        
+    // });
@@ -50,10 +63,10 @@ $(function(){
         events: function(){
             var _this = this;
             $('#liveStart').on('click', function(){ liveStartFun(); });
-            $('#liveEnd').on('click', function(){  });
+            $('#liveEnd').on('click', function(){ liveEndFun(); });
             $('#liveConfirm').on('click', function(){ liveConfirmFun(); });
-            $('#liveCancel').on('click', function(){ liveCancelFun() });
+            $('#liveCancel').on('click', function(){ liveCancelFun(); });
             $('#liveSave').on('click', function(){  });
             $('#liveOut').on('click', function(){ liveOutFun(); });
@@ -74,15 +87,18 @@ $(function(){
     }
     // 禁止关闭浏览器
-    // window.onbeforeunload = function(){
-    //     return ('你确定要结束教学吗？请确认保存内容');
-    // }
+    window.onbeforeunload = function(){
+        // return ('你确定要结束教学吗？请确认保存内容');
+        $('#liveStart').hide();
+    }
     LiveTeacher.init();
     // 开始录制
     function liveStartFun(){
-        $('.tip-wrap').show();
+        // $('.tip-wrap').show();
+        $('#liveStart').hide();
+        $('#liveEnd').show();
     }
     // 确认开始录制
@@ -92,6 +108,13 @@ $(function(){
         console.log(IDELive.record_startime);
     }
+    // 结束录制
+    function liveEndFun(){
+        // $('#liveStart').hide();
+        $('#liveEnd').hide();
+        $('#liveSave').removeAttr('disabled')
+    }
+
     // 取消开始录制
     function liveCancelFun(){
         $('.tip-wrap').hide();
@@ -149,6 +172,7 @@ $(function(){
         // window.onbeforeunload = function(){
         //     return ('你确定要结束教学吗？')
         // }
+        window.close()
     }
@@ -92,4 +92,38 @@ function compileResult(data){
         $('#cmpinfo').html('<p class="alert alert-danger"><i class="glyphicon glyphicon-exclamation-sign"></i> 云端编译超时，请稍后重新尝试</p>');
         $('#cmprun-tabs a[href="#cmpinfo"]').tab('show');
     }
+}
+
+// 学生编译结果
+function studCompileResult(data){
+    if(data.result){
+
+        $('#studCmpinfo').html('<p class="text-warning">' + data.cmpinfo.replace(/\n/g, "<br />") + "</p>");        
+        $('#studStderr').html('<p class="text-danger">' + data.stderr.replace(/\n/g, "<br />") + "</p>");       
+        $('#studOutput').html('<p class="text-success">' + data.output.replace(/\n/g, "<br />") + "</p>");  
+        
+        if(data.cmpinfo.length){
+            $('#cmprun-tabs a[href="#studCmpinfo"]').tab('show');
+        }else if(data.stderr.length){
+            $('#cmprun-tabs a[href="#studStderr"]').tab('show');
+        }else if(data.output.length){
+            $('#cmprun-tabs a[href="#studOutput"]').tab('show');
+        }
+        
+        if(!data.cmpinfo.length){
+            $('#studCmpinfo').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 编译已成功</p>');
+        }
+        
+        if(!data.stderr.length){
+            $('#studStderr').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 无输出错误</p>');
+        }
+        
+        if(!data.output.length){
+            $('#studOutput').prepend('<p class="alert alert-warning"><i class="glyphicon glyphicon-exclamation-sign"></i> 代码编译错误或者运行相关功能受限制</p>');
+        }
+
+    }else{
+        $('#studCmpinfo').html('<p class="alert alert-danger"><i class="glyphicon glyphicon-exclamation-sign"></i> 云端编译超时，请稍后重新尝试</p>');
+        $('#cmprun-tabs a[href="#studCmpinfo"]').tab('show');
+    }
 }
 \ No newline at end of file
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="../js/codemirror-5.25.0/lib/codemirror.css">
     <link rel="stylesheet" href="../js/ladda/ladda-themeless.min.css">
     <link rel="stylesheet" href="style/main.css">
+    <link rel="stylesheet" href="style/student.css">
 <style>
     .teacher-live, .student-work{
@@ -56,12 +57,6 @@
                         <button class="btn compile-btn" id="CompileBtn">
                             <span class="ladda-label">编译运行</span>
                         </button>
-                        <a id="full-screen" class="fb">
-                            <img src="../img/full-screen-icon.svg" alt="">
-                        </a>
-                        <a id="back-screen" class="fb" style="display: none;">
-                            <img src="../img/full-screen-icon.svg" alt="">
-                        </a>
                     </div>
                 </div>
@@ -80,10 +75,9 @@
             </div>
             <!-- 录制控制区 -->
-            <div class="live-ctrl">
-                
-            </div>
+            <!-- <div class="live-ctrl"></div> -->
         </div>
+        <div class="mask"></div>
     </div>
     <div class="student-work">
         <div class="live-wrap">
@@ -99,12 +93,44 @@
             <!-- 编译操作区 -->
             <!-- 运行结果区 -->
+            <div class="live-console-wrap">
+                <div id="toolbar">
+                    <!-- Nav tabs -->
+                    <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">
+                        <li class="active"><a href="#studStdin" role="tab" data-toggle="tab" class="text">标准</a></li>
+                        <li><a href="#studCmpinfo" role="tab" data-toggle="tab" class="text">编译</a></li>
+                        <li><a href="#studStderr" role="tab" data-toggle="tab" class="text">错误</a></li>
+                        <li><a href="#studOutput" role="tab" data-toggle="tab" class="text">结果</a></li>
+                    </ul>
+                    <div class="pull-right func">
+                        <button class="btn compile-btn" id="studCompile">
+                            <span class="ladda-label">编译运行</span>
+                        </button>
+                        <a id="full-screen" class="fb">
+                            <img src="../img/full-screen-icon.svg" alt="">
+                        </a>
+                        <a id="back-screen" class="fb" style="display: none;">
+                            <img src="../img/full-screen-icon.svg" alt="">
+                        </a>
+                    </div>
+                </div>
+                <!-- Tab panes -->
+                <div id="resultoutput" class="tab-content need-compile">
+                    <div class="tab-pane active padall15" id="studStdin">
+                        <div class="stdin-wrap">
+                            <input class="effect-2" id="runtimeArgus" type="text" placeholder="标准输入">
+                            <span class="focus-border"></span>
+                        </div>
+                    </div>
+                    <div class="tab-pane padall15" id="studCmpinfo"></div>
+                    <div class="tab-pane padall15" id="studStderr"></div>
+                    <div class="tab-pane padall15" id="studOutput"></div>
+                </div>
+            </div>
             <!-- 录制控制区 -->
-            <div class="live-ctrl">
-                
-            </div>
+            <!-- <div class="live-ctrl"></div> -->
         </div>
     </div>    
 </div>
@@ -20,11 +20,14 @@ button{
     text-align: center;
     border-bottom: 1px solid #c1c1c1;
     padding: 8px 0;
+    background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
+    background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
 }
 .header h1 {
     font-size: 18px;
     margin: 0;
+    color: #FFF;
 }
 .live-code {
@@ -36,6 +39,7 @@ button{
 .live-code .CodeMirror {
     height: 100%;
+    border-right: 1px solid #eee;
 }
 .live-console-wrap {
@@ -105,11 +109,11 @@ button{
     width: 100%;
 }
-#stdin:focus {
+.stdin-wrap:focus {
     outline: none;
 }
-#stdin input[type="text"] {
+.stdin-wrap input[type="text"] {
     font: 15px/24px "Lato", Arial, sans-serif;
     color: #333;
     width: 100%;
@@ -119,13 +123,13 @@ button{
     outline: none;
 }
-#stdin .effect-2 {
+.stdin-wrap .effect-2 {
     border: 0;
     padding: 12px 0 1px;
     border-bottom: 1px solid #ccc;
 }
-#stdin .effect-2 ~ .focus-border {
+.stdin-wrap .effect-2 ~ .focus-border {
     position: absolute;
     bottom: 0;
     left: 50%;
@@ -135,7 +139,7 @@ button{
     transition: 1s;
 }
-#stdin .effect-2:focus ~ .focus-border {
+.stdin-wrap .effect-2:focus ~ .focus-border {
     width: 100%;
     transition: 1s;
     left: 0;
+.mask{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    background-color: rgba(255,255,255,0);
+    z-index: 9999;
+}
+
+.student .live-console-wrap{
+    height: 260px;
+    bottom: 0;
+    border-right: 1px solid #f7f7f7;
+    border-left: 1px solid #f7f7f7;
+}
+.student .teacher-live{
+    border-right: 6px solid #FFF;
+}
+.student .live-code{
+    border-right: 1px solid #f7f7f7;
+}
+#liveEnd{
+    display: none;
+}
 \ No newline at end of file
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="../js/codemirror-5.25.0/lib/codemirror.css">
     <link rel="stylesheet" href="../js/ladda/ladda-themeless.min.css">
     <link rel="stylesheet" href="style/main.css">
+    <link rel="stylesheet" href="style/teacher.css">
     <script>
         var gxb_api = "https://restful.gaoxiaobang.com";
@@ -73,7 +74,7 @@
             <button class="btn compile-btn" id="liveEnd">结束</button>
         </div>
         <div class="save-cancel">
-            <button class="btn compile-btn" id="liveSave">保存</button>
+            <button class="btn compile-btn" id="liveSave" disabled="disabled">保存</button>
             <button class="btn compile-btn" id="liveOut">关闭</button>
         </div>
     </div>