add compile run and save

ykxie
1 parent f853514a
Showing 5 changed files with 232 additions and 43 deletions
src/css/ide.css
src/css/main.css
src/gxb-ide/Iterm.js
src/scss/main.scss
src/v1.1/c.html
@@ -176,7 +176,7 @@ html, body {
   .record-toolbox #resultoutput {
     height: 204px;
     overflow: auto; }
-  .record-toolbox #compileBtn {
+  .record-toolbox #teacherCompileBtn, .record-toolbox #studentCompileBtn {
     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;
@@ -215,3 +215,38 @@ html, body {
       z-index: 99;
       margin: 2px 8px;
       border-radius: 50%; }
+
+.pause-shodow {
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4); }
+  .pause-shodow img {
+    position: absolute;
+    top: 15%;
+    left: 50%;
+    transform: translate(-50%); }
+  .pause-shodow .compile-reslut .btn {
+    margin-right: 8px; }
+
+.compile-reslut, .re-reslut {
+  position: absolute;
+  height: 200px;
+  width: 400px;
+  background-color: #FFF;
+  top: 15%;
+  left: 50%;
+  transform: translate(-50%); }
+  .compile-reslut .tip-header, .compile-reslut .tip-footer, .re-reslut .tip-header, .re-reslut .tip-footer {
+    width: 100%;
+    padding: 8px 8px;
+    background-color: #F5F6FA; }
+  .compile-reslut .tip-content, .re-reslut .tip-content {
+    padding: 40px;
+    line-height: 1.7; }
+  .compile-reslut .tip-footer, .re-reslut .tip-footer {
+    position: absolute;
+    bottom: 0;
+    text-align: right; }
@@ -98,7 +98,7 @@ html, body {
   .record-toolbox #resultoutput {
     height: 204px;
     overflow: auto; }
-  .record-toolbox #compileBtn {
+  .record-toolbox #teacherCompileBtn, .record-toolbox #studentCompileBtn {
     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;
@@ -137,3 +137,38 @@ html, body {
       z-index: 99;
       margin: 2px 8px;
       border-radius: 50%; }
+
+.pause-shodow {
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4); }
+  .pause-shodow img {
+    position: absolute;
+    top: 15%;
+    left: 50%;
+    transform: translate(-50%); }
+  .pause-shodow .compile-reslut .btn {
+    margin-right: 8px; }
+
+.compile-reslut, .re-reslut {
+  position: absolute;
+  height: 200px;
+  width: 400px;
+  background-color: #FFF;
+  top: 15%;
+  left: 50%;
+  transform: translate(-50%); }
+  .compile-reslut .tip-header, .compile-reslut .tip-footer, .re-reslut .tip-header, .re-reslut .tip-footer {
+    width: 100%;
+    padding: 8px 8px;
+    background-color: #F5F6FA; }
+  .compile-reslut .tip-content, .re-reslut .tip-content {
+    padding: 40px;
+    line-height: 1.7; }
+  .compile-reslut .tip-footer, .re-reslut .tip-footer {
+    position: absolute;
+    bottom: 0;
+    text-align: right; }
 ;(function(window){
-    var template = '<div class="upload-tip" style="display: none;"><img src="../img/upload_tip.png" alt=""></div>'
     function Iterm(){
         this.initIterm.apply(this, arguments);
-    }
+    } 
     Iterm.prototype = {
         constructor: Iterm,
@@ -20,51 +19,106 @@
         },
         events: function(){
             var _this = this;
-            $('#compileBtn').on('click', function(){ _this.compileMode(); })
+            $('#teacherCompileBtn').on('click', function(){ _this.teacherCompile(); })
+            $('#studentCompileBtn').on('click', function(){ _this.studentCompile(); })
+            $('#save_compile').on('click', function(){ _this.saveCompile(); })
+            $('#cancel_compile').on('click', function(){ _this.cancelCompile(); })
         },
-        compileMode: function(){
+        teacherCompile: function(){
             console.log('========================');
-            var l = Ladda.create(document.querySelector( '#compileBtn' ));
-            l.start();
+            console.log(Iterm.prototype.options);
+
+            Hourglass.pauseTimer();     // 暂停计时器
+            recorder.pause();           // 音频暂停
+            $('.pause-shodow').show()
+
+            // 编译时插入操作
+            var treeNode = null;
+            var check_tree_time = new Date().getTime();
+            CodingEditer.addRecord(treeNode, check_tree_time);
+
+            var _this = this;
+            var el = document.querySelector('#teacherCompileBtn');
+            var userId = _this.options.userId;
+            var languageId = _this.options.languageId;
+            compileMode(el, userId, languageId)
+        },
+        studentCompile: function(){
             var _this = this;
-            console.log(_this.options)
-            // 获取标准输入值
-            var runtimeArgus = $('#runtimeArgus').val() || '';
-            var mainPath = Dir.mainPath;
-            var _fileList = Dir.getTreeData();
+            var el = document.querySelector('#studentCompileBtn');
             var userId = _this.options.userId;
             var languageId = _this.options.languageId;
+            compileMode(el, userId, languageId)
+        },
+        saveCompile: function(){
+            recodingConf()
-            var compileData = {
-                "userId": userId,
-                "langId": languageId,
-                "mainPath": mainPath,
-                "mainArgus": "",
-                "runtimeArgus": runtimeArgus,
-                "rand": "123456",
-                "fileList": _fileList || []
-            }
-            console.log(compileData);
-            $.ajax({
-                type: "POST",
-                url: gxb_api + "/gxb-web/programmingMulti/codeRun/api",
-                data: JSON.stringify(compileData),
-                dataType: "json",
-                contentType: "application/json",
-                success: function(data) {
-                    console.log(data);
-                    compileResult(data)
-                    l.remove();
-                    CodingEditer.compileResultData = data;
-                },
-                error: function(XMLHttpRequest, textStatus, errorThrown) {
-                    l.remove();
-                    alert('错误');
-                    console.log(XMLHttpRequest);
-                },
-            });
+            var length = CodingEditer.records.length - 1;
+
+            CodingEditer.records[length].compile = CodingEditer.compileResultData;
+
+            CodingEditer.records[length].content = CodingEditer.compileResultData.content;
+            CodingEditer.records[length].error = CodingEditer.compileResultData.error;
+            CodingEditer.records[length].compilerInfo = CodingEditer.compileResultData.compilerInfo;
+            CodingEditer.records[length].code = CodingEditer.compileResultData.code;
+
+        },
+        cancelCompile: function(){
+            recodingConf()
+        }
+    }
+
+    // 继续录制配置
+    function recodingConf(){
+        $('.pause-shodow').hide()
+
+        Hourglass.pauseTimer();
+        recorder.pause();
+
+        CodingEditer.record_startime = new Date().getTime();
+    } 
+
+    // 编译
+    function compileMode(el, userId, languageId){
+        var l = Ladda.create(el);
+        l.start();
+        // 获取标准输入值
+        var runtimeArgus = $('#runtimeArgus').val() || '';
+        var mainPath = Dir.mainPath;
+        var _fileList = Dir.getTreeData();
+        
+        var compileData = {
+            "userId": userId,
+            "langId": languageId,
+            "mainPath": mainPath,
+            "mainArgus": "",
+            "runtimeArgus": runtimeArgus,
+            "rand": "123456",
+            "fileList": _fileList || []
         }
+        console.log(compileData);
+        $.ajax({
+            type: "POST",
+            url: gxb_api + "/gxb-web/programmingMulti/codeRun/api",
+            data: JSON.stringify(compileData),
+            dataType: "json",
+            contentType: "application/json",
+            success: function(data) {
+                console.log(data);
+                $('.pause-shodow img').hide()
+                $('.pause-shodow .compile-reslut').show()
+                compileResult(data)
+                l.remove();
+                CodingEditer.compileResultData = data;
+            },
+            error: function(XMLHttpRequest, textStatus, errorThrown) {
+                $('.pause-shodow img').remove()
+                l.remove();
+                alert('错误');
+                console.log(XMLHttpRequest);
+            },
+        });
     }
     // 编译结果
@@ -134,7 +134,7 @@ html, body{
         overflow: auto;
     }
-    #compileBtn{
+    #teacherCompileBtn, #studentCompileBtn{
         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;
@@ -184,6 +184,51 @@ html, body{
         }
     }
 }
+.pause-shodow{
+    position: absolute;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.4);
+
+    img{
+        position: absolute;
+        top: 15%;
+        left: 50%;
+        transform: translate(-50%);
+    }
+    .compile-reslut{
+        .btn{
+            margin-right: 8px;
+        }
+    }
+}
+
+.compile-reslut, .re-reslut{
+    position: absolute;
+    height: 200px;
+    width: 400px;
+    background-color: #FFF;
+    top: 15%;
+    left: 50%;
+    transform: translate(-50%);
+
+    .tip-header, .tip-footer{
+        width: 100%;
+        padding: 8px 8px;
+        background-color: #F5F6FA;
+    }
+    .tip-content{
+        padding: 40px;
+        line-height: 1.7;
+    }
+    .tip-footer{
+        position: absolute;
+        bottom: 0;
+        text-align: right;
+    }
+}
@@ -111,6 +111,23 @@
                   <div id="replayzone" class="tab-pane"></div>
                 </div>
             </div>
+            <div class="pause-shodow" style="display: none;">
+                <div class="compile-loading">
+                    <img src="../img/loading.png" alt="">
+                </div>
+                <div class="compile-reslut" style="display: none;">
+                    <div class="tip-header">
+                        <span>成功获取编译运行结果</span>
+                    </div>
+                    <div class="tip-content">
+                        <p>保存编译结果后，播放到此处会在运行区域直接显示结果。需要保存结果后继续录制吗?</p>
+                    </div>
+                    <div class="tip-footer">
+                        <button class="btn btn-success btn-sm" id="save_compile">保存并继续录制</button>
+                        <button class="btn btn-danger btn-sm" id="cancel_compile">不保存继续录制</button>
+                    </div>
+                </div>
+            </div>
         </div>
@@ -128,7 +145,10 @@
                         <li><a href="#output" role="tab" data-toggle="tab" class="text">结果</a></li>
                     </ul>
                     <div class="pull-right func">
-                        <a class="btn btn-success" id="compileBtn">
+                        <a class="btn btn-success" id="teacherCompileBtn">
+                            <span class="ladda-label">编译运行</span>
+                        </a>
+                        <a class="btn btn-success" id="studentCompileBtn">
                             <span class="ladda-label">编译运行</span>
                         </a>
                         <a id="full-screen" class=""><i class="icon iconfont icon-quanping1"></i></a>