梁美英 / programming · Commits

Commit d3a9e73ec4b7f562ae3b9f56c61c27e98e1b9f0a

Authored by ykxie
1 parent 35de1d9d

fix bug

Inline Side-by-side
Showing 8 changed files with 159 additions and 29 deletions
src/live/js/student.js
  View file @d3a9e73
... ... @@ -35,6 +35,22 @@ $(function() {
35 35 // socket.emit('programming.content', teacher.getValue());
36 36 });
37 37  
  38 + // 选中 input
  39 + socket.on('select.menu', function(msg) {
  40 + console.log('select.menu ---- ' + msg);
  41 + $('#runtimeArgus').addClass('effect-2');
  42 + });
  43 +
  44 + // 标准输入
  45 + socket.on('stdin.value', function(msg) {
  46 + console.log('stdin.value ---- ' + msg);
  47 + $('#runtimeArgus').val(msg)
  48 + });
  49 +
  50 +
  51 +
  52 +
  53 +
38 54 socket.on('programming.compile', function(msg) {
39 55 console.log('-------------');
40 56 console.log(msg);
... ... @@ -75,19 +91,20 @@ $(function() {
75 91  
76 92  
77 93  
78   - $('#CompileBtn').on('click', function(){
79   - console.log('编译' + teacher.getValue());
80   - var el = document.querySelector('#CompileBtn')
  94 + $('#studCompile').on('click', function(){
  95 +
  96 + var el = document.querySelector('#studCompile')
81 97 var l = Ladda.create(el);
82 98 l.start();
83 99  
84 100 var input = $('#input').val() || '';
85   - var code = teacher.getValue();
  101 + var code = student.getValue();
86 102 var compileData = {
87 103 code: code,
88 104 langid: 10,
89 105 input: input
90 106 }
  107 +
91 108 $.ajax({
92 109 type: "post",
93 110 url: gxb_api + "/submit/submitCode/api",
... ... @@ -97,7 +114,7 @@ $(function() {
97 114 success: function(data) {
98 115 console.log(data);
99 116 l.remove();
100   - compileResult(data);
  117 + studCompileResult(data);
101 118 },
102 119 error: function(){
103 120 l.stop();
... ...
src/live/js/teacher.js
  View file @d3a9e73
... ... @@ -39,7 +39,20 @@ $(function(){
39 39 operations: [] // 存储录制时的动作对象
40 40 }
41 41  
  42 + // 选中 input 事件
  43 + $('#runtimeArgus').focus(function(){
  44 + console.log('------getValue')
  45 + socket.emit('select.menu');
  46 + })
42 47  
  48 + // 输入事件
  49 + $('#runtimeArgus').bind('input propertychange', function() {
  50 + console.log($('#runtimeArgus').val());
  51 + socket.emit('stdin.value', $('#runtimeArgus').val());
  52 + });
  53 + // $("#runtimeArgus").change(function(){
  54 +
  55 + // });
43 56  
44 57  
45 58  
... ... @@ -50,10 +63,10 @@ $(function(){
50 63 events: function(){
51 64 var _this = this;
52 65 $('#liveStart').on('click', function(){ liveStartFun(); });
53   - $('#liveEnd').on('click', function(){ });
  66 + $('#liveEnd').on('click', function(){ liveEndFun(); });
54 67  
55 68 $('#liveConfirm').on('click', function(){ liveConfirmFun(); });
56   - $('#liveCancel').on('click', function(){ liveCancelFun() });
  69 + $('#liveCancel').on('click', function(){ liveCancelFun(); });
57 70  
58 71 $('#liveSave').on('click', function(){ });
59 72 $('#liveOut').on('click', function(){ liveOutFun(); });
... ... @@ -74,15 +87,18 @@ $(function(){
74 87 }
75 88  
76 89 // 禁止关闭浏览器
77   - // window.onbeforeunload = function(){
78   - // return ('你确定要结束教学吗？请确认保存内容');
79   - // }
  90 + window.onbeforeunload = function(){
  91 + // return ('你确定要结束教学吗？请确认保存内容');
  92 + $('#liveStart').hide();
  93 + }
80 94  
81 95 LiveTeacher.init();
82 96  
83 97 // 开始录制
84 98 function liveStartFun(){
85   - $('.tip-wrap').show();
  99 + // $('.tip-wrap').show();
  100 + $('#liveStart').hide();
  101 + $('#liveEnd').show();
86 102 }
87 103  
88 104 // 确认开始录制
... ... @@ -92,6 +108,13 @@ $(function(){
92 108 console.log(IDELive.record_startime);
93 109 }
94 110  
  111 + // 结束录制
  112 + function liveEndFun(){
  113 + // $('#liveStart').hide();
  114 + $('#liveEnd').hide();
  115 + $('#liveSave').removeAttr('disabled')
  116 + }
  117 +
95 118 // 取消开始录制
96 119 function liveCancelFun(){
97 120 $('.tip-wrap').hide();
... ... @@ -149,6 +172,7 @@ $(function(){
149 172 // window.onbeforeunload = function(){
150 173 // return ('你确定要结束教学吗？')
151 174 // }
  175 + window.close()
152 176 }
153 177  
154 178  
... ...
src/live/js/utils.js
  View file @d3a9e73
... ... @@ -92,4 +92,38 @@ function compileResult(data){
92 92 $('#cmpinfo').html('<p class="alert alert-danger"><i class="glyphicon glyphicon-exclamation-sign"></i> 云端编译超时，请稍后重新尝试</p>');
93 93 $('#cmprun-tabs a[href="#cmpinfo"]').tab('show');
94 94 }
  95 +}
  96 +
  97 +// 学生编译结果
  98 +function studCompileResult(data){
  99 + if(data.result){
  100 +
  101 + $('#studCmpinfo').html('<p class="text-warning">' + data.cmpinfo.replace(/\n/g, "<br />") + "</p>");
  102 + $('#studStderr').html('<p class="text-danger">' + data.stderr.replace(/\n/g, "<br />") + "</p>");
  103 + $('#studOutput').html('<p class="text-success">' + data.output.replace(/\n/g, "<br />") + "</p>");
  104 +
  105 + if(data.cmpinfo.length){
  106 + $('#cmprun-tabs a[href="#studCmpinfo"]').tab('show');
  107 + }else if(data.stderr.length){
  108 + $('#cmprun-tabs a[href="#studStderr"]').tab('show');
  109 + }else if(data.output.length){
  110 + $('#cmprun-tabs a[href="#studOutput"]').tab('show');
  111 + }
  112 +
  113 + if(!data.cmpinfo.length){
  114 + $('#studCmpinfo').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 编译已成功</p>');
  115 + }
  116 +
  117 + if(!data.stderr.length){
  118 + $('#studStderr').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 无输出错误</p>');
  119 + }
  120 +
  121 + if(!data.output.length){
  122 + $('#studOutput').prepend('<p class="alert alert-warning"><i class="glyphicon glyphicon-exclamation-sign"></i> 代码编译错误或者运行相关功能受限制</p>');
  123 + }
  124 +
  125 + }else{
  126 + $('#studCmpinfo').html('<p class="alert alert-danger"><i class="glyphicon glyphicon-exclamation-sign"></i> 云端编译超时，请稍后重新尝试</p>');
  127 + $('#cmprun-tabs a[href="#studCmpinfo"]').tab('show');
  128 + }
95 129 }
96 130 \ No newline at end of file
... ...
src/live/student.html
  View file @d3a9e73
... ... @@ -8,6 +8,7 @@
8 8 <link rel="stylesheet" href="../js/codemirror-5.25.0/lib/codemirror.css">
9 9 <link rel="stylesheet" href="../js/ladda/ladda-themeless.min.css">
10 10 <link rel="stylesheet" href="style/main.css">
  11 + <link rel="stylesheet" href="style/student.css">
11 12 <style>
12 13  
13 14 .teacher-live, .student-work{
... ... @@ -56,12 +57,6 @@
56 57 <button class="btn compile-btn" id="CompileBtn">
57 58 <span class="ladda-label">编译运行</span>
58 59 </button>
59   - <a id="full-screen" class="fb">
60   - <img src="../img/full-screen-icon.svg" alt="">
61   - </a>
62   - <a id="back-screen" class="fb" style="display: none;">
63   - <img src="../img/full-screen-icon.svg" alt="">
64   - </a>
65 60 </div>
66 61 </div>
67 62  
... ... @@ -80,10 +75,9 @@
80 75 </div>
81 76  
82 77 <!-- 录制控制区 -->
83   - <div class="live-ctrl">
84   -
85   - </div>
  78 + <!-- <div class="live-ctrl"></div> -->
86 79 </div>
  80 + <div class="mask"></div>
87 81 </div>
88 82 <div class="student-work">
89 83 <div class="live-wrap">
... ... @@ -99,12 +93,44 @@
99 93  
100 94 <!-- 编译操作区 -->
101 95 <!-- 运行结果区 -->
  96 + <div class="live-console-wrap">
  97 + <div id="toolbar">
  98 + <!-- Nav tabs -->
  99 + <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">
  100 + <li class="active"><a href="#studStdin" role="tab" data-toggle="tab" class="text">标准</a></li>
  101 + <li><a href="#studCmpinfo" role="tab" data-toggle="tab" class="text">编译</a></li>
  102 + <li><a href="#studStderr" role="tab" data-toggle="tab" class="text">错误</a></li>
  103 + <li><a href="#studOutput" role="tab" data-toggle="tab" class="text">结果</a></li>
  104 + </ul>
  105 + <div class="pull-right func">
  106 + <button class="btn compile-btn" id="studCompile">
  107 + <span class="ladda-label">编译运行</span>
  108 + </button>
  109 + <a id="full-screen" class="fb">
  110 + <img src="../img/full-screen-icon.svg" alt="">
  111 + </a>
  112 + <a id="back-screen" class="fb" style="display: none;">
  113 + <img src="../img/full-screen-icon.svg" alt="">
  114 + </a>
  115 + </div>
  116 + </div>
102 117  
  118 + <!-- Tab panes -->
  119 + <div id="resultoutput" class="tab-content need-compile">
  120 + <div class="tab-pane active padall15" id="studStdin">
  121 + <div class="stdin-wrap">
  122 + <input class="effect-2" id="runtimeArgus" type="text" placeholder="标准输入">
  123 + <span class="focus-border"></span>
  124 + </div>
  125 + </div>
  126 + <div class="tab-pane padall15" id="studCmpinfo"></div>
  127 + <div class="tab-pane padall15" id="studStderr"></div>
  128 + <div class="tab-pane padall15" id="studOutput"></div>
  129 + </div>
  130 + </div>
103 131  
104 132 <!-- 录制控制区 -->
105   - <div class="live-ctrl">
106   -
107   - </div>
  133 + <!-- <div class="live-ctrl"></div> -->
108 134 </div>
109 135 </div>
110 136 </div>
... ...
src/live/style/main.css
  View file @d3a9e73
... ... @@ -20,11 +20,14 @@ button{
20 20 text-align: center;
21 21 border-bottom: 1px solid #c1c1c1;
22 22 padding: 8px 0;
  23 + background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
  24 + background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
23 25 }
24 26  
25 27 .header h1 {
26 28 font-size: 18px;
27 29 margin: 0;
  30 + color: #FFF;
28 31 }
29 32  
30 33 .live-code {
... ... @@ -36,6 +39,7 @@ button{
36 39  
37 40 .live-code .CodeMirror {
38 41 height: 100%;
  42 + border-right: 1px solid #eee;
39 43 }
40 44  
41 45 .live-console-wrap {
... ... @@ -105,11 +109,11 @@ button{
105 109 width: 100%;
106 110 }
107 111  
108   -#stdin:focus {
  112 +.stdin-wrap:focus {
109 113 outline: none;
110 114 }
111 115  
112   -#stdin input[type="text"] {
  116 +.stdin-wrap input[type="text"] {
113 117 font: 15px/24px "Lato", Arial, sans-serif;
114 118 color: #333;
115 119 width: 100%;
... ... @@ -119,13 +123,13 @@ button{
119 123 outline: none;
120 124 }
121 125  
122   -#stdin .effect-2 {
  126 +.stdin-wrap .effect-2 {
123 127 border: 0;
124 128 padding: 12px 0 1px;
125 129 border-bottom: 1px solid #ccc;
126 130 }
127 131  
128   -#stdin .effect-2 ~ .focus-border {
  132 +.stdin-wrap .effect-2 ~ .focus-border {
129 133 position: absolute;
130 134 bottom: 0;
131 135 left: 50%;
... ... @@ -135,7 +139,7 @@ button{
135 139 transition: 1s;
136 140 }
137 141  
138   -#stdin .effect-2:focus ~ .focus-border {
  142 +.stdin-wrap .effect-2:focus ~ .focus-border {
139 143 width: 100%;
140 144 transition: 1s;
141 145 left: 0;
... ...
src/live/style/student.css 0 → 100644
  View file @d3a9e73
  1 +.mask{
  2 + position: absolute;
  3 + width: 100%;
  4 + height: 100%;
  5 + top: 0;
  6 + background-color: rgba(255,255,255,0);
  7 + z-index: 9999;
  8 +}
  9 +
  10 +.student .live-console-wrap{
  11 + height: 260px;
  12 + bottom: 0;
  13 + border-right: 1px solid #f7f7f7;
  14 + border-left: 1px solid #f7f7f7;
  15 +}
  16 +.student .teacher-live{
  17 + border-right: 6px solid #FFF;
  18 +}
  19 +.student .live-code{
  20 + border-right: 1px solid #f7f7f7;
  21 +}
... ...
src/live/style/teacher.css 0 → 100644
  View file @d3a9e73
  1 +#liveEnd{
  2 + display: none;
  3 +}
0 4 \ No newline at end of file
... ...
src/live/teacher.html
  View file @d3a9e73
... ... @@ -9,6 +9,7 @@
9 9 <link rel="stylesheet" href="../js/codemirror-5.25.0/lib/codemirror.css">
10 10 <link rel="stylesheet" href="../js/ladda/ladda-themeless.min.css">
11 11 <link rel="stylesheet" href="style/main.css">
  12 + <link rel="stylesheet" href="style/teacher.css">
12 13  
13 14 <script>
14 15 var gxb_api = "https://restful.gaoxiaobang.com";
... ... @@ -73,7 +74,7 @@
73 74 <button class="btn compile-btn" id="liveEnd">结束</button>
74 75 </div>
75 76 <div class="save-cancel">
76   - <button class="btn compile-btn" id="liveSave">保存</button>
  77 + <button class="btn compile-btn" id="liveSave" disabled="disabled">保存</button>
77 78 <button class="btn compile-btn" id="liveOut">关闭</button>
78 79 </div>
79 80 </div>
... ...