梁美英 / 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 \ No newline at end of file 11 \ No newline at end of file
src/live/js/main.js
  View file @b8f443c
@@ -40,8 +40,60 @@ $(function(){ @@ -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 console.log('编译' + teacher.getValue()); 93 console.log('编译' + teacher.getValue());
  94 +
  95 + socket.emit('programming.compile', 'hello');
  96 +
45 var el = document.querySelector('#CompileBtn') 97 var el = document.querySelector('#CompileBtn')
46 var l = Ladda.create(el); 98 var l = Ladda.create(el);
47 l.start(); 99 l.start();
@@ -69,7 +121,41 @@ $(function(){ @@ -69,7 +121,41 @@ $(function(){
69 alert('错误'); 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,7 +166,7 @@ $(function(){
80 function buildOperate(editor, changeobj){ 166 function buildOperate(editor, changeobj){
81 var intervaltime, 167 var intervaltime,
82 currenttime = new Date().getTime(); 168 currenttime = new Date().getTime();
83 - 169 + console.log(IDELive.record_startime);
84 var intervaltime = currenttime - IDELive.record_startime; 170 var intervaltime = currenttime - IDELive.record_startime;
85 171
86 var operateObj = { 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 \ No newline at end of file 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 +6,7 @@
6 <link href="../css/reset.css" rel="stylesheet"> 6 <link href="../css/reset.css" rel="stylesheet">
7 <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css"> 7 <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
8 <link rel="stylesheet" href="../js/codemirror-5.25.0/lib/codemirror.css"> 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 <link rel="stylesheet" href="style/main.css"> 10 <link rel="stylesheet" href="style/main.css">
10 <style> 11 <style>
11 12
@@ -22,6 +23,9 @@ @@ -22,6 +23,9 @@
22 right: 0; 23 right: 0;
23 } 24 }
24 </style> 25 </style>
  26 +<script>
  27 + var gxb_api = "https://restful.gaoxiaobang.com";
  28 +</script>
25 </head> 29 </head>
26 <body> 30 <body>
27 <div class="student"> 31 <div class="student">
@@ -73,9 +77,6 @@ @@ -73,9 +77,6 @@
73 <div class="tab-pane padall15" id="stderr"></div> 77 <div class="tab-pane padall15" id="stderr"></div>
74 <div class="tab-pane padall15" id="output"></div> 78 <div class="tab-pane padall15" id="output"></div>
75 </div> 79 </div>
76 - <div class="panel-body no-compile" id="ifrcontainer">  
77 - <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>  
78 - </div>  
79 </div> 80 </div>
80 81
81 <!-- 录制控制区 --> 82 <!-- 录制控制区 -->
@@ -98,44 +99,7 @@ @@ -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 <div class="live-ctrl"> 105 <div class="live-ctrl">
@@ -150,6 +114,9 @@ @@ -150,6 +114,9 @@
150 <script src="https://code.jquery.com/jquery-1.11.1.js"></script> 114 <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
151 <script src="../js/codemirror-5.25.0/lib/codemirror.js"></script> 115 <script src="../js/codemirror-5.25.0/lib/codemirror.js"></script>
152 <script src="../js/bootstrap.js"></script> 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 <script> 120 <script>
154 $(function() { 121 $(function() {
155 var teacherId = document.getElementById('teacher'); 122 var teacherId = document.getElementById('teacher');
@@ -181,6 +148,44 @@ $(function() { @@ -181,6 +148,44 @@ $(function() {
181 window.scrollTo(0, document.body.scrollHeight); 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 function processChangeObject(playbackcm, obj) { 189 function processChangeObject(playbackcm, obj) {
185 190
186 for (var i = 0; i < obj.text.length; i++) { 191 for (var i = 0; i < obj.text.length; i++) {
@@ -236,6 +241,75 @@ $(function() { @@ -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 </script> 314 </script>
241 315
src/live/style/main.css
  View file @b8f443c
@@ -5,6 +5,9 @@ @@ -5,6 +5,9 @@
5 body { 5 body {
6 font: 13px Helvetica, Arial; 6 font: 13px Helvetica, Arial;
7 } 7 }
  8 +button{
  9 + outline: none !important;
  10 +}
8 11
9 .live-wrap { 12 .live-wrap {
10 position: absolute; 13 position: absolute;
@@ -160,6 +163,7 @@ body { @@ -160,6 +163,7 @@ body {
160 163
161 .btn { 164 .btn {
162 padding: 5px 18px; 165 padding: 5px 18px;
  166 + outline: none;
163 } 167 }
164 168
165 .fb { 169 .fb {
@@ -204,3 +208,53 @@ body { @@ -204,3 +208,53 @@ body {
204 .save-cancel{ 208 .save-cancel{
205 float: right; 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,7 +25,7 @@
25 25
26 <!-- 录制区域 --> 26 <!-- 录制区域 -->
27 <div class="live-code"> 27 <div class="live-code">
28 - <textarea id="teacher" title="HTML"></textarea> 28 + <textarea id="teacher" title="HTML" style="display: none;"></textarea>
29 </div> 29 </div>
30 30
31 <!-- 编译操作区 --> 31 <!-- 编译操作区 -->
@@ -69,14 +69,30 @@ @@ -69,14 +69,30 @@
69 <!-- 录制控制区 --> 69 <!-- 录制控制区 -->
70 <div class="live-ctrl"> 70 <div class="live-ctrl">
71 <div class="start-end"> 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 </div> 74 </div>
75 <div class="save-cancel"> 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 </div> 78 </div>
79 </div> 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 </div> 96 </div>
81 97
82 98
@@ -86,6 +102,7 @@ @@ -86,6 +102,7 @@
86 <script src="../js/bootstrap.js"></script> 102 <script src="../js/bootstrap.js"></script>
87 <script src="../js/ladda/spin.js"></script> 103 <script src="../js/ladda/spin.js"></script>
88 <script src="../js/ladda/ladda.js"></script> 104 <script src="../js/ladda/ladda.js"></script>
  105 +<!-- <script src="./js/IDELive.js"></script> -->
89 <script src="./js/main.js"></script> 106 <script src="./js/main.js"></script>
90 107
91 </body> 108 </body>