add function

ykxie
1 parent 7869a178
Showing 4 changed files with 176 additions and 172 deletions
src/live/js/main.js
src/live/js/utils.js
src/live/style/main.css
src/live/teacher.html
+$(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: []    // 存储录制时的动作对象
+    }
+
+
+
+
+
+    $('#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();
+
+        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');
+        }
+    }
+})
 \ No newline at end of file
@@ -148,14 +148,18 @@ body {
 }
 .compile-btn {
-    background: #FFF;
-    border: 1px solid #3ad5f5;
-    color: #1FB6FF;
     border-radius: 24px;
+    color: #FFF;
+    background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
+    background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
+    -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+    box-shadow: 0px 0px 2px 0px #B3E5FF;
+    border: none;
 }
 .btn {
-    padding: 3px 18px;
+    padding: 5px 18px;
 }
 .fb {
@@ -171,6 +175,7 @@ body {
 .live-ctrl {
     width: 100%;
     height: 60px;
+    line-height: 60px;
     position: absolute;
     bottom: 0;
     z-index: 999;
@@ -178,3 +183,24 @@ body {
     background-color: #23383f;
     box-sizing: border-box;
 }
+
+#resultoutput{
+    padding: 10px 16px;
+}
+
+.ladda-button[data-style=expand-right] .ladda-spinner{
+    right: 4px;
+}
+.ladda-button[data-style=expand-right][data-loading]{
+    padding-right: 40px;
+}
+.ladda-button .ladda-spinner{
+    top: 0;
+}
+
+.start-end{
+    float: left;
+}
+.save-cancel{
+    float: right;
+}
@@ -7,139 +7,12 @@
     <link href="../css/reset.css" rel="stylesheet">
     <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
     <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">
-    <style>
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-    }
-    
-    body {
-        font: 13px Helvetica, Arial;
-    }
-    .live-wrap{
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-    }
-    .header{
-        text-align: center;
-        border-bottom: 1px solid #c1c1c1;
-        padding: 8px 0;
-    }
-    .header h1{
-        font-size: 18px;
-        margin: 0;
-    }
-    .live-code{
-        position: relative;
-        width: 100%;
-        height: 100%;
-        padding-bottom: 296px;
-    }
-    .live-code .CodeMirror{
-        height: 100%;
-    }
-    .live-console-wrap{
-        width: 100%;
-        background-color: #FFF;
-        height: 200px;
-        position: absolute;
-        bottom: 60px;
-        z-index: 999;
-        overflow: hidden;
-    }
-    #toolbar{
-        width: 100%;
-        height: 40px;
-        overflow: hidden;
-        background-color: #F4F6F9;
-        padding: 0 36px;
-    }
-    .result-tabs{
-        overflow: hidden;
-        margin: 5px 10px;
-        color: #fff;
-    }
-    .text{
-        color: #1FB6FF;
-    }
-    .result-tabs>li.active>a, .result-tabs>li.active>a:hover, .result-tabs>li>a:hover, .result-tabs>li.active>a:focus{
-        color: #FFF;
-        background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
-        background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
-        -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-        transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-        box-shadow: 0px 0px 2px 0px #B3E5FF;
-        border: none;
-    }
-    .result-tabs>li>a, .result-tabs>li.active>a:hover{
-        padding: 4px 21px;
-        border: none;
-        margin: 1px;
-        border-radius: 15px;
-        font-size: 14px;
-        transition: all 0.1s ease;
-    }
-    .func{
-        height: 36px;
-        padding-top: 5px;
-    }
-    .stdin-wrap {
-        margin: 0 48px;
-        position: relative;
-    }
-    #stdin {
-        position: absolute;
-        width: 100%;
-    }
-    #stdin :focus{outline: none;}
-
-    #stdin input[type="text"]{font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;padding-left: 12px;}
-
-    #stdin .effect-2{border: 0; padding: 12px 0 1px; border-bottom: 1px solid #ccc;}
-    #stdin .effect-2 ~ .focus-border{position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #62DCF5; transition: 1s;}
-    #stdin .effect-2:focus ~ .focus-border{width: 100%; transition: 1s; left: 0;}
-    .nav-tabs {
-        border: none;
-        float: left;
-        border-bottom: 0;
-    }
-    .panel-body{
-        padding: 0;
-    }
-
-    .compile-btn {
-        background: #FFF;
-        border: 1px solid #3ad5f5;
-        color: #1FB6FF;
-        border-radius: 24px;
-    }
-    .btn {
-        padding: 3px 18px;
-    }
-    .fb {
-        float: right;
-        margin: 0 16px;
-        cursor: pointer;
-    }
-    .fb img {
-        width: 32px;
-    }
-
-    .live-ctrl{
-        width: 100%;
-        height: 60px;
-        position: absolute;
-        bottom: 0;
-        z-index: 999;
-        padding: 0 136px;
-        background-color: #23383f;
-        box-sizing: border-box;
-    }
-    </style>
+    <script>
+        var gxb_api = "https://restful.gaoxiaobang.com";
+    </script>
 </head>
 <body>
@@ -191,14 +64,18 @@
             <div class="tab-pane padall15" id="stderr"></div>
             <div class="tab-pane padall15" id="output"></div>
         </div>
-        <div class="panel-body no-compile" id="ifrcontainer">
-            <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
-        </div>
     </div>
     <!-- 录制控制区 -->
     <div class="live-ctrl">
-        
+        <div class="start-end">
+            <button class="btn compile-btn" id="">开始</button>
+            <button class="btn compile-btn" id="">结束</button>
+        </div>
+        <div class="save-cancel">
+            <button class="btn compile-btn" id="">保存</button>
+            <button class="btn compile-btn" id="">关闭</button>
+        </div>
     </div>
 </div>
@@ -207,39 +84,10 @@
 <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
 <script src="../js/codemirror-5.25.0/lib/codemirror.js"></script>
 <script src="../js/bootstrap.js"></script>
-<script>
-    $(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());
-
-        });
-
-        // 链接时执行初始化代码
-        socket.on('programming.content', function(msg) {
-            console.log('programming.content ---- ' + msg);
-            teacher.setValue(msg);
-        });
+<script src="../js/ladda/spin.js"></script>
+<script src="../js/ladda/ladda.js"></script>
+<script src="./js/main.js"></script>
-    });
-</script>
 </body>
 </html>