梁美英 / programming · Commits

Commit b8f443cd4ab18546466ebf92c1127c2cb0aa40cd

Authored by ykxie
1 parent fc1e371b

add compile

Inline Side-by-side
Showing 7 changed files with 435 additions and 48 deletions
src/live/js/IDELive.js 0 → 100644
  View file @b8f443c
  1 +;(function(window){
  2 + var IDELive = {
  3 + operations: [] // 存储录制时的动作对象
  4 + }
  5 +
  6 +
  7 +
  8 +
  9 + window.IDELive = IDELive;
  10 +})(window)
0 11 \ No newline at end of file
... ...
src/live/js/main.js
  View file @b8f443c
... ... @@ -40,8 +40,60 @@ $(function(){
40 40  
41 41  
42 42  
43   - $('#CompileBtn').on('click', function(){
  43 + var LiveTeacher = {
  44 + init: function(){
  45 + LiveTeacher.events();
  46 + },
  47 + events: function(){
  48 + var _this = this;
  49 + $('#liveStart').on('click', function(){ liveStartFun(); });
  50 + $('#liveEnd').on('click', function(){ });
  51 +
  52 + $('#liveConfirm').on('click', function(){ liveConfirmFun(); });
  53 + $('#liveCancel').on('click', function(){ liveCancelFun() });
  54 +
  55 + $('#liveSave').on('click', function(){ });
  56 + $('#liveOut').on('click', function(){ });
  57 +
  58 + $('#CompileBtn').on('click', function(){ liveCompileFun(); });
  59 +
  60 + },
  61 + liveStartFun: function(){},
  62 + liveEndFun: function(){},
  63 +
  64 + liveConfirmFun: function(){},
  65 + liveCancelFun: function(){},
  66 +
  67 + liveSaveFun: function(){},
  68 + liveOutFun: function(){},
  69 +
  70 + liveCompileFun: function(){}
  71 + }
  72 +
  73 +
  74 + LiveTeacher.init();
  75 +
  76 + function liveStartFun(){
  77 + $('.tip-wrap').show();
  78 + }
  79 +
  80 + // 开始录制的时间
  81 + function liveConfirmFun(){
  82 + $('.tip-wrap').hide();
  83 + IDELive.record_startime = new Date().getTime()
  84 + console.log(IDELive.record_startime);
  85 + }
  86 +
  87 + function liveCancelFun(){
  88 + $('.tip-wrap').hide();
  89 + }
  90 +
  91 +
  92 + function liveCompileFun(){
44 93 console.log('编译' + teacher.getValue());
  94 +
  95 + socket.emit('programming.compile', 'hello');
  96 +
45 97 var el = document.querySelector('#CompileBtn')
46 98 var l = Ladda.create(el);
47 99 l.start();
... ... @@ -69,7 +121,41 @@ $(function(){
69 121 alert('错误');
70 122 }
71 123 });
72   - })
  124 + }
  125 +
  126 +
  127 +
  128 +
  129 + // $('#CompileBtn').on('click', function(){
  130 + // console.log('编译' + teacher.getValue());
  131 + // var el = document.querySelector('#CompileBtn')
  132 + // var l = Ladda.create(el);
  133 + // l.start();
  134 +
  135 + // var input = $('#input').val() || '';
  136 + // var code = teacher.getValue();
  137 + // var compileData = {
  138 + // code: code,
  139 + // langid: 10,
  140 + // input: input
  141 + // }
  142 + // $.ajax({
  143 + // type: "post",
  144 + // url: gxb_api + "/submit/submitCode/api",
  145 + // data: JSON.stringify(compileData),
  146 + // dataType: "json",
  147 + // contentType: "application/json",
  148 + // success: function(data) {
  149 + // console.log(data);
  150 + // l.remove();
  151 + // compileResult(data);
  152 + // },
  153 + // error: function(){
  154 + // l.stop();
  155 + // alert('错误');
  156 + // }
  157 + // });
  158 + // })
73 159  
74 160  
75 161  
... ... @@ -80,7 +166,7 @@ $(function(){
80 166 function buildOperate(editor, changeobj){
81 167 var intervaltime,
82 168 currenttime = new Date().getTime();
83   -
  169 + console.log(IDELive.record_startime);
84 170 var intervaltime = currenttime - IDELive.record_startime;
85 171  
86 172 var operateObj = {
... ...
src/live/js/student.js 0 → 100644
  View file @b8f443c
  1 +$(function(){
  2 +
  3 + $('#CompileBtn').trigger('click');
  4 +
  5 + $('#CompileBtn').on('click', function(){
  6 + console.log('编译' + teacher.getValue());
  7 + var el = document.querySelector('#CompileBtn')
  8 + var l = Ladda.create(el);
  9 + l.start();
  10 +
  11 + var input = $('#input').val() || '';
  12 + var code = teacher.getValue();
  13 + var compileData = {
  14 + code: code,
  15 + langid: 10,
  16 + input: input
  17 + }
  18 + $.ajax({
  19 + type: "post",
  20 + url: gxb_api + "/submit/submitCode/api",
  21 + data: JSON.stringify(compileData),
  22 + dataType: "json",
  23 + contentType: "application/json",
  24 + success: function(data) {
  25 + console.log(data);
  26 + l.remove();
  27 + compileResult(data);
  28 + },
  29 + error: function(){
  30 + l.stop();
  31 + alert('错误');
  32 + }
  33 + });
  34 + })
  35 +
  36 +
  37 +
  38 + // 编译结果
  39 + function compileResult(data){
  40 + if(data.result){
  41 +
  42 + $('#cmpinfo').html('<p class="text-warning">' + data.cmpinfo.replace(/\n/g, "<br />") + "</p>");
  43 + $('#stderr').html('<p class="text-danger">' + data.stderr.replace(/\n/g, "<br />") + "</p>");
  44 + $('#output').html('<p class="text-success">' + data.output.replace(/\n/g, "<br />") + "</p>");
  45 +
  46 + if(data.cmpinfo.length){
  47 + $('#cmprun-tabs a[href="#cmpinfo"]').tab('show');
  48 + }else if(data.stderr.length){
  49 + $('#cmprun-tabs a[href="#stderr"]').tab('show');
  50 + }else if(data.output.length){
  51 + $('#cmprun-tabs a[href="#output"]').tab('show');
  52 + }
  53 +
  54 + if(!data.cmpinfo.length){
  55 + $('#cmpinfo').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 编译已成功</p>');
  56 + }
  57 +
  58 + if(!data.stderr.length){
  59 + $('#stderr').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 无输出错误</p>');
  60 + }
  61 +
  62 + if(!data.output.length){
  63 + $('#output').prepend('<p class="alert alert-warning"><i class="glyphicon glyphicon-exclamation-sign"></i> 代码编译错误或者运行相关功能受限制</p>');
  64 + }
  65 +
  66 + }else{
  67 + $('#cmpinfo').html('<p class="alert alert-danger"><i class="glyphicon glyphicon-exclamation-sign"></i> 云端编译超时，请稍后重新尝试</p>');
  68 + $('#cmprun-tabs a[href="#cmpinfo"]').tab('show');
  69 + }
  70 + }
  71 +})
0 72 \ No newline at end of file
... ...
src/live/js/utils.js
  View file @b8f443c
  1 +// 编译
  2 +function compileRun(l){
  3 + var l = Ladda.create(el);
  4 + l.start();
  5 +
  6 +
  7 +
  8 + var code = (typeof GBCodePlayBack.htmleditor !=='undefined' && GBCodePlayBack.htmleditor.getValue())
  9 + || (typeof GBCodePlayBack.htmlplayereditor !=='undefined' && GBCodePlayBack.htmlplayereditor.getValue());
  10 + var langid = $('#htmlbutton').data("languageid");
  11 + var input = $('#input').val() || '';
  12 + var compileData = {
  13 + code: code,
  14 + langid: langid,
  15 + input: input
  16 + }
  17 + $.ajax({
  18 + type: "post",
  19 + url: gxb_api + "/submit/submitCode/api",
  20 + data: JSON.stringify(compileData),
  21 + dataType: "json",
  22 + contentType: "application/json",
  23 + success: function(data) {
  24 + compileResult(data)
  25 + l.stop();
  26 +
  27 + $('.compile-loading').hide();
  28 + $('.compile-reslut').show();
  29 + GBCodePlayBack.compileResultData = data;
  30 +
  31 + },
  32 + error: function(){
  33 + l.stop();
  34 + alert('错误');
  35 + }
  36 + });
  37 +}
  38 +
  39 +function compileMode(el, userId, languageId) {
  40 + var l = Ladda.create(el);
  41 + l.start();
  42 + // 获取标准输入值
  43 + var runtimeArgus = $('#runtimeArgus').val() || '';
  44 + var mainPath = Dir.mainPath;
  45 + var _fileList = Dir.getTreeData();
  46 +
  47 + var compileData = {
  48 + "userId": userId,
  49 + "langId": languageId,
  50 + "mainPath": mainPath,
  51 + "mainArgus": "",
  52 + "runtimeArgus": runtimeArgus,
  53 + "rand": "123456",
  54 + "fileList": _fileList || []
  55 + }
  56 + console.log(compileData);
  57 + $.ajax({
  58 + type: "POST",
  59 + url: gxb_api + "/gxb-web/programmingMulti/codeRun/api",
  60 + data: JSON.stringify(compileData),
  61 + dataType: "json",
  62 + contentType: "application/json",
  63 + success: function(data) {
  64 + console.log(data);
  65 + l.remove();
  66 + },
  67 + error: function(XMLHttpRequest, textStatus, errorThrown) {
  68 + l.remove();
  69 + alert('错误');
  70 + console.log(XMLHttpRequest);
  71 + },
  72 + });
  73 +}
  74 +
  75 +function
... ...
src/live/student.html
  View file @b8f443c
... ... @@ -6,6 +6,7 @@
6 6 <link href="../css/reset.css" rel="stylesheet">
7 7 <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
8 8 <link rel="stylesheet" href="../js/codemirror-5.25.0/lib/codemirror.css">
  9 + <link rel="stylesheet" href="../js/ladda/ladda-themeless.min.css">
9 10 <link rel="stylesheet" href="style/main.css">
10 11 <style>
11 12  
... ... @@ -22,6 +23,9 @@
22 23 right: 0;
23 24 }
24 25 </style>
  26 +<script>
  27 + var gxb_api = "https://restful.gaoxiaobang.com";
  28 +</script>
25 29 </head>
26 30 <body>
27 31 <div class="student">
... ... @@ -73,9 +77,6 @@
73 77 <div class="tab-pane padall15" id="stderr"></div>
74 78 <div class="tab-pane padall15" id="output"></div>
75 79 </div>
76   - <div class="panel-body no-compile" id="ifrcontainer">
77   - <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
78   - </div>
79 80 </div>
80 81  
81 82 <!-- 录制控制区 -->
... ... @@ -98,44 +99,7 @@
98 99  
99 100 <!-- 编译操作区 -->
100 101 <!-- 运行结果区 -->
101   - <div class="live-console-wrap">
102   - <div id="toolbar">
103   - <!-- Nav tabs -->
104   - <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">
105   - <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text">标准</a></li>
106   - <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text">编译</a></li>
107   - <li><a href="#stderr" role="tab" data-toggle="tab" class="text">错误</a></li>
108   - <li><a href="#output" role="tab" data-toggle="tab" class="text">结果</a></li>
109   - </ul>
110   - <div class="pull-right func">
111   - <button class="btn compile-btn" id="CompileBtn">
112   - <span class="ladda-label">编译运行</span>
113   - </button>
114   - <a id="full-screen" class="fb">
115   - <img src="../img/full-screen-icon.svg" alt="">
116   - </a>
117   - <a id="back-screen" class="fb" style="display: none;">
118   - <img src="../img/full-screen-icon.svg" alt="">
119   - </a>
120   - </div>
121   - </div>
122 102  
123   - <!-- Tab panes -->
124   - <div id="resultoutput" class="tab-content need-compile">
125   - <div class="tab-pane active padall15" id="stdin">
126   - <div class="stdin-wrap">
127   - <input class="effect-2" id="runtimeArgus" type="text" placeholder="标准输入">
128   - <span class="focus-border"></span>
129   - </div>
130   - </div>
131   - <div class="tab-pane padall15" id="cmpinfo"></div>
132   - <div class="tab-pane padall15" id="stderr"></div>
133   - <div class="tab-pane padall15" id="output"></div>
134   - </div>
135   - <div class="panel-body no-compile" id="ifrcontainer">
136   - <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
137   - </div>
138   - </div>
139 103  
140 104 <!-- 录制控制区 -->
141 105 <div class="live-ctrl">
... ... @@ -150,6 +114,9 @@
150 114 <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
151 115 <script src="../js/codemirror-5.25.0/lib/codemirror.js"></script>
152 116 <script src="../js/bootstrap.js"></script>
  117 +<script src="../js/ladda/spin.js"></script>
  118 +<script src="../js/ladda/ladda.js"></script>
  119 +<script src="./js/main.js"></script>
153 120 <script>
154 121 $(function() {
155 122 var teacherId = document.getElementById('teacher');
... ... @@ -181,6 +148,44 @@ $(function() {
181 148 window.scrollTo(0, document.body.scrollHeight);
182 149 });
183 150  
  151 + socket.on('programming.compile', function(msg) {
  152 + console.log('-------------');
  153 + console.log(msg);
  154 + // $('#CompileBtn').trigger('click');
  155 + console.log('编译' + teacher.getValue());
  156 + var el = document.querySelector('#CompileBtn')
  157 + var l = Ladda.create(el);
  158 + l.start();
  159 +
  160 + var input = $('#input').val() || '';
  161 + var code = teacher.getValue();
  162 + var compileData = {
  163 + code: code,
  164 + langid: 10,
  165 + input: input
  166 + }
  167 + $.ajax({
  168 + type: "post",
  169 + url: gxb_api + "/submit/submitCode/api",
  170 + data: JSON.stringify(compileData),
  171 + dataType: "json",
  172 + contentType: "application/json",
  173 + success: function(data) {
  174 + console.log(data);
  175 + l.remove();
  176 + compileResult(data);
  177 + },
  178 + error: function(){
  179 + l.stop();
  180 + alert('错误');
  181 + }
  182 + });
  183 + });
  184 +
  185 +
  186 +
  187 +
  188 +
184 189 function processChangeObject(playbackcm, obj) {
185 190  
186 191 for (var i = 0; i < obj.text.length; i++) {
... ... @@ -236,6 +241,75 @@ $(function() {
236 241 }
237 242 }
238 243  
  244 +
  245 +
  246 + $('#CompileBtn').on('click', function(){
  247 + console.log('编译' + teacher.getValue());
  248 + var el = document.querySelector('#CompileBtn')
  249 + var l = Ladda.create(el);
  250 + l.start();
  251 +
  252 + var input = $('#input').val() || '';
  253 + var code = teacher.getValue();
  254 + var compileData = {
  255 + code: code,
  256 + langid: 10,
  257 + input: input
  258 + }
  259 + $.ajax({
  260 + type: "post",
  261 + url: gxb_api + "/submit/submitCode/api",
  262 + data: JSON.stringify(compileData),
  263 + dataType: "json",
  264 + contentType: "application/json",
  265 + success: function(data) {
  266 + console.log(data);
  267 + l.remove();
  268 + compileResult(data);
  269 + },
  270 + error: function(){
  271 + l.stop();
  272 + alert('错误');
  273 + }
  274 + });
  275 + })
  276 +
  277 +
  278 +
  279 + // 编译结果
  280 + function compileResult(data){
  281 + if(data.result){
  282 +
  283 + $('#cmpinfo').html('<p class="text-warning">' + data.cmpinfo.replace(/\n/g, "<br />") + "</p>");
  284 + $('#stderr').html('<p class="text-danger">' + data.stderr.replace(/\n/g, "<br />") + "</p>");
  285 + $('#output').html('<p class="text-success">' + data.output.replace(/\n/g, "<br />") + "</p>");
  286 +
  287 + if(data.cmpinfo.length){
  288 + $('#cmprun-tabs a[href="#cmpinfo"]').tab('show');
  289 + }else if(data.stderr.length){
  290 + $('#cmprun-tabs a[href="#stderr"]').tab('show');
  291 + }else if(data.output.length){
  292 + $('#cmprun-tabs a[href="#output"]').tab('show');
  293 + }
  294 +
  295 + if(!data.cmpinfo.length){
  296 + $('#cmpinfo').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 编译已成功</p>');
  297 + }
  298 +
  299 + if(!data.stderr.length){
  300 + $('#stderr').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 无输出错误</p>');
  301 + }
  302 +
  303 + if(!data.output.length){
  304 + $('#output').prepend('<p class="alert alert-warning"><i class="glyphicon glyphicon-exclamation-sign"></i> 代码编译错误或者运行相关功能受限制</p>');
  305 + }
  306 +
  307 + }else{
  308 + $('#cmpinfo').html('<p class="alert alert-danger"><i class="glyphicon glyphicon-exclamation-sign"></i> 云端编译超时，请稍后重新尝试</p>');
  309 + $('#cmprun-tabs a[href="#cmpinfo"]').tab('show');
  310 + }
  311 + }
  312 +
239 313 });
240 314 </script>
241 315  
... ...
src/live/style/main.css
  View file @b8f443c
... ... @@ -5,6 +5,9 @@
5 5 body {
6 6 font: 13px Helvetica, Arial;
7 7 }
  8 +button{
  9 + outline: none !important;
  10 +}
8 11  
9 12 .live-wrap {
10 13 position: absolute;
... ... @@ -160,6 +163,7 @@ body {
160 163  
161 164 .btn {
162 165 padding: 5px 18px;
  166 + outline: none;
163 167 }
164 168  
165 169 .fb {
... ... @@ -204,3 +208,53 @@ body {
204 208 .save-cancel{
205 209 float: right;
206 210 }
  211 +
  212 +.tip-wrap{
  213 + display: none;
  214 + position: absolute;
  215 + width: 100%;
  216 + height: 100%;
  217 + background-color: rgba(0, 0, 0, 0.5);
  218 + z-index: 999;
  219 + top: 0;
  220 +}
  221 +.tips{
  222 + width: 320px;
  223 + height: 176px;
  224 + background: #999;
  225 + position: absolute;
  226 + top: 50%;
  227 + left: 50%;
  228 + transform: translate(-50%, -50%);
  229 + // z-index: 999;
  230 + text-align: center;
  231 +}
  232 +.tips .tip-header{}
  233 +.tips .tip-content{}
  234 +.tips .tip-btn{}
  235 +
  236 +
  237 +
  238 +
  239 +
  240 +
  241 +
  242 +
  243 +
  244 +
  245 +
  246 +
  247 +
  248 +
  249 +
  250 +
  251 +
  252 +
  253 +
  254 +
  255 +
  256 +
  257 +
  258 +
  259 +
  260 +
... ...
src/live/teacher.html
  View file @b8f443c
... ... @@ -25,7 +25,7 @@
25 25  
26 26 <!-- 录制区域 -->
27 27 <div class="live-code">
28   - <textarea id="teacher" title="HTML"></textarea>
  28 + <textarea id="teacher" title="HTML" style="display: none;"></textarea>
29 29 </div>
30 30  
31 31 <!-- 编译操作区 -->
... ... @@ -69,14 +69,30 @@
69 69 <!-- 录制控制区 -->
70 70 <div class="live-ctrl">
71 71 <div class="start-end">
72   - <button class="btn compile-btn" id="">开始</button>
73   - <button class="btn compile-btn" id="">结束</button>
  72 + <button class="btn compile-btn" id="liveStart">开始</button>
  73 + <button class="btn compile-btn" id="liveEnd">结束</button>
74 74 </div>
75 75 <div class="save-cancel">
76   - <button class="btn compile-btn" id="">保存</button>
77   - <button class="btn compile-btn" id="">关闭</button>
  76 + <button class="btn compile-btn" id="liveSave">保存</button>
  77 + <button class="btn compile-btn" id="liveOut">关闭</button>
78 78 </div>
79 79 </div>
  80 +
  81 + <div class="tip-wrap">
  82 + <div class="tips">
  83 + <div class="tip-header">
  84 + <h1>提示</h1>
  85 + </div>
  86 + <div class="tip-content">
  87 + <p>jksdkfdsafsd</p>
  88 + </div>
  89 + <div class="tip-btn">
  90 + <button class="btn compile-btn" id="liveConfirm">确认</button>
  91 + <button class="btn compile-btn" id="liveCancel">取消</button>
  92 + </div>
  93 + </div>
  94 + </div>
  95 +
80 96 </div>
81 97  
82 98  
... ... @@ -86,6 +102,7 @@
86 102 <script src="../js/bootstrap.js"></script>
87 103 <script src="../js/ladda/spin.js"></script>
88 104 <script src="../js/ladda/ladda.js"></script>
  105 +<!-- <script src="./js/IDELive.js"></script> -->
89 106 <script src="./js/main.js"></script>
90 107  
91 108 </body>
... ...