add save and upload tips

ykxie
1 parent e81a6b61
Showing 8 changed files with 246 additions and 33 deletions
src/css/ide.css
src/css/main.css
src/gxb-ide/ToolBox.js
src/gxb-ide/toolBox.css
src/js/c.js
src/js/recorder/Myna.js
src/scss/main.scss
src/v1.1/c.html
@@ -94,7 +94,7 @@ html, body {
   background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
   position: absolute;
   top: 0;
-  z-index: 9999;
+  z-index: 99;
   padding-left: 28px; }
 .record-wrap {
@@ -250,3 +250,30 @@ html, body {
     position: absolute;
     bottom: 0;
     text-align: right; }
+
+#countdown {
+  display: block;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  position: absolute; }
+  #countdown img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); }
+
+.upload-tip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 9999; }
+  .upload-tip img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); }
@@ -16,7 +16,7 @@ html, body {
   background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
   position: absolute;
   top: 0;
-  z-index: 9999;
+  z-index: 99;
   padding-left: 28px; }
 .record-wrap {
@@ -172,3 +172,30 @@ html, body {
     position: absolute;
     bottom: 0;
     text-align: right; }
+
+#countdown {
+  display: block;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  position: absolute; }
+  #countdown img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); }
+
+.upload-tip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 9999; }
+  .upload-tip img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); }
@@ -28,7 +28,9 @@
         constructor: ToolBox,
         options: {
             el: "#toolBox",             // 控制条插入位置id
-            role: 0,                    // 角色
+            role: null,                 // 角色
+            userId: '',
+            languageId: '',
             startCallback: null,        // 开始录制代码
             stopCallback: null,         // 结束录制
             restartCallback: null,      // 重新录制代码
@@ -66,17 +68,15 @@
             $('#cancel').on('click', function(){ _this.cancel(); })
         },
         startRecording: function(callback){
-            console.log('startRecord');
+            console.log(this.options.userId);
             $('#start-recording').hide()
             $('#stop-recording').show()
-            Hourglass.init()
             var _this = this;
-            if (typeof _this.options.startRecordingCallback == 'function') {
-                console.log('startRecordingCallback');
-                _this.options.startRecordingCallback();
+            if (typeof _this.options.startCallback == 'function') {
+                console.log('startCallback');
+                _this.options.startCallback();
             }
             recordAudio()
-
         },
         stopRecording: function(){
             console.log('停止录制');
@@ -92,8 +92,7 @@
                 _this.options.stopCallback();
             }
-            recorder.stop();
-            recorder.getBlobData();
+            $('#upload').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled", false);
         },
         restartRecord: function(){
@@ -105,8 +104,24 @@
             $('#recordertab a:first').tab('show');
             // CodingEditer.records = [];
             _this.readOnly(0)
+            if (typeof _this.options.restartCallback == 'function') {
+                console.log('restartCallback');
+                _this.options.restartCallback();
+            }
             recordAudio()
         },
+        recordAudio: function(){
+            HZRecorder.get(function(rec) {
+                console.log(rec);
+                recorder = rec;
+                recorder.start();
+                CodingEditer.initRecodesValue()
+            });
+        },
+        stopAudio: function(){
+            recorder.stop();
+            recorder.getBlobData();
+        },
         playCode: function(){
             console.log('播放代码');
             $('#audio')[0].play();
@@ -115,9 +130,87 @@
         },
         uploadAudio: function(){
             console.log('uploadAudio');
+            $('.upload-tip').show();
+            recorder.upload();
         },
         saveCode: function(){
-            console.log('saveCode');
+            var _this = this;
+            var pickup = 0  //是否要同步录音 0:同步录音，1异步录音
+            var saveformat = $('#saveformat').find('.active').data('saveformat') || 5;
+            var programmingFileList = Dir.getTreeData();
+            var keepTimer = Math.round($('#audio')[0].duration);
+
+            var postData = {
+                "mainPath": Dir.mainPath,
+                "mainArgus": "lixxx",
+                "runtimeArgus": $('#runtimeArgus').val(),
+                "pickup": pickup,
+                "userId": _this.options.userId,
+                "replaytitle": "课程名",
+                "languageid": _this.options.languageId,
+                "replaydesc": "回放说明",
+                "image": "placeholder.png",
+                "deleteFlag": 1,
+                "viewcount": "0",
+                "saveformat": saveformat,
+                "audioUrl": $('.audio-url').val(),
+                "programmingSource": 1,
+                "programmingFileList": programmingFileList,
+                "totaltime": keepTimer
+            }
+            var temp_record = JSON.parse(JSON.stringify(CodingEditer.records)) 
+            var codeRecordLists = [];
+
+            for (var i = 0; i < temp_record.length; i++) {
+                var temp_record_item = temp_record[i];
+                if(temp_record_item){    
+                    temp_record_item.changeobj=JSON.stringify(temp_record_item.changeobj);
+                    if(temp_record_item.treefile){
+                        temp_record_item.treefile=JSON.stringify(temp_record_item.treefile);
+                    }
+                }
+                codeRecordLists.push(temp_record_item);
+            }
+            var _role = _this.options.role;
+            if (_role == 0) {
+                postData.codeRecordList = codeRecordLists;
+                var roleUrl = gxb_api + "/programming/codeReplay/api"
+            }else if (_role == 1) {
+                postData.studentRecordList = codeRecordLists;
+                var roleUrl = gxb_api + "/programming/student/studentReplay/api"
+            }
+            console.log(postData);
+            $.ajax({
+                type: "post",
+                url: roleUrl,
+                data: JSON.stringify(postData),
+                dataType: "json",
+                contentType: "application/json",
+                success: function(data) {
+                    console.log(data);
+                    $('.upload-tip').hide();
+                    $(window).unbind('beforeunload');
+                    var _data = {
+                            "programId": data.codeReplayId || data.studentReplayId,
+                            "programLanguageName": data.languageName,
+                            "programLanguageId": data.languageid,
+                            "programmingSource": data.programmingSource,
+                            "programAudioLength": keepTimer || 0
+                    }
+                    console.log(_data);
+                    $('.upload-tip').hide();
+
+                    $('#cancel').prop("disabled", false);
+
+                    window.opener.postMessage(_data, _source);
+                    window.close();
+                },
+                error: function() {
+                    $('.upload-tip').hide();
+                    console.log(CodingEditer.records)
+                    alert('代码保存失败重新保存')
+                }
+            });
         },
         cancel: function(){
             console.log('cancel');
@@ -141,13 +234,12 @@
     };
     function recordAudio(){
-        HZRecorder.get(function(rec) {
-            console.log(rec);
-            recorder = rec;
-            recorder.start();
-            CodingEditer.initRecodesValue()
-
-        });
+        // HZRecorder.get(function(rec) {
+        //     console.log(rec);
+        //     recorder = rec;
+        //     recorder.start();
+        //     CodingEditer.initRecodesValue()
+        // });
     }
     // 编译结果
@@ -65,5 +65,14 @@
     border: 1px solid #1FB6FF;
     color: #1FB6FF;
 }
+
+.upload-teach, .upload-stud{
+    background: -webkit-linear-gradient(left, #505151, #939494);
+    background: -moz-linear-gradient(left, #505151, #939494);
+}
+.recording-finish{
+    background: -webkit-linear-gradient(left, #1FB6FF, #62DDF5);
+    background: -moz-linear-gradient(left, #1FB6FF, #62DDF5);
+}
 \ No newline at end of file
@@ -12,8 +12,19 @@ $(function(){
     // new一个老师录制的控制条工具
     var techTool = new ToolBox({
         el: '#toolBox',
+        userId: _userId,
+        languageId: _languageid,
         startCallback: function(){
-            
+            $("#countdown").show()
+                .find('img').attr('src', '../img/ready-go.gif')
+                .load(function() {
+                    recordReady()
+                })
+        },
+        stopCallback: function(){
+            techTool.stopAudio()
+        },
+        restartCallback: function(){
         }
     });
@@ -25,6 +36,20 @@ $(function(){
     console.log(ide);
+    function recordReady(){
+        var seconds = 0;
+        var countdown = setInterval(function() {
+            seconds += 1;
+            if (seconds == 2) {
+                console.log('-============================================')
+                console.log('countdown');
+                $("#countdown").hide();
+                techTool.recordAudio()
+                Hourglass.init()
+            }
+        }, 1000);
+    }
+
 })
@@ -293,8 +293,8 @@
                     console.log(audioUrl)
                     $(".audio-url").val(audioUrl)
-                    $('#savecorde').trigger('click');
-
+                    // $('#savecorde').trigger('click');
+                    $('#savecode').trigger('click');
                 },
                 error: function(res){
                     $('.upload-tip').hide();
@@ -18,7 +18,7 @@ html, body{
     background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
     position: absolute;
     top: 0;
-    z-index: 9999;
+    z-index: 99;
     padding-left: 28px;
 }
@@ -230,9 +230,38 @@ html, body{
     }
 }
+// 开始录制动画
+#countdown{
+    display: block;
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    position: absolute;
+    img{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+.upload-tip{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 9999;
-
+    img{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
@@ -30,6 +30,9 @@
     <script src="../js/util/Hourglass.js"></script>
     <script src="../js/util/util.js"></script>
+
+    <script src="../js/05-util.js"></script>
+    <script src="../js/03-http.js"></script>
     <script src="../js/recorder/Myna.js"></script>
     <script src="../gxb-ide/Dir.js"></script>
@@ -74,12 +77,7 @@
 </head>
 <body>
-    <div>
-
-
-    </div>
     <div class="programing">
-
         <!-- 控制条 -->
         <div class="record-title">
             <ul id="recordertab" class="nav nav-tabs pull-left">
@@ -130,8 +128,6 @@
             </div>
         </div>
-        
-    
         <!-- 控录制录制 -->
         <div class="record-toolbox">
             <!-- 运行结果区 -->
@@ -169,11 +165,19 @@
                     <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
                 </div>
             </div>
-
+            <input type="hidden" class="audio-url" value="">
             <div class="" id="toolBox">
             </div>
-
+        </div>
+        
+        <!-- 准备开始 -->
+        <div id="countdown" style="display: none;">
+            <img src="" alt="">
+        </div>
+        <!-- 保存提示 -->
+        <div class="upload-tip" style="display: none;">
+            <img src="../img/upload_tip.png" alt="">
         </div>
     </div>