add delete into task

templates/repo/cloudbrain/index.tmpl

@@ -1,5 +1,19 @@
 <!-- 头部导航栏 -->
 {{template "base/head" .}}
+<!-- 弹窗 -->
+<div id="mask">
+    <div id="loadingPage">
+        <div class="rect1"></div>
+        <div class="rect2"></div>
+        <div class="rect3"></div>
+        <div class="rect4"></div>
+        <div class="rect5"></div>
+    </div>
+</div>
+
+<!-- 提示框 -->
+<div class="alert"></div>
+
 <div class="repository release dataset-list view">
     {{template "repo/header" .}}
 
@@ -125,6 +139,8 @@
                                             </div>
 
                                             <!-- 提交镜像 -->
+                                            <!-- 接收结果 -->
+                                            <iframe src="" frameborder="0" name="iframeContent" style="display: none;"></iframe>
                                             <a class="imageBtn" style="{{if not .CanDebug}}color:#CCCCCC;cursor:pointer;pointer-events:none;{{end}}; font-size:16px; font-weight:bold" value="{{.CanDebug}}">提交镜像</a>
 
                                             <!-- 弹窗 -->
@@ -133,7 +149,7 @@
                                                     <span class="close">&times;</span>
 
                                                     <!-- 表格 -->
-                                                    <form id="commitImageForm" action="{{$.Link}}/{{.JobID}}/commit_image" method="post">
+                                                    <form id="commitImageForm" action="{{$.Link}}/{{.JobID}}/commit_image" method="post" target="iframeContent">
                                                         {{$.CsrfTokenHtml}}
                                                         <p>提交任务镜像</p>
                                                         <div class="ui divider"></div>
@@ -156,7 +172,7 @@
 
                                                         <div class="inline field">
                                                             <label></label>
-                                                            <button class="ui green button">
+                                                            <button class="ui green button" onclick="showmask()">
                                                                 {{$.i18n.Tr "repo.cloudbrain.commit_image"}}
                                                             </button>
                                                         </div>
@@ -166,7 +182,7 @@
 
                                         </div>
                                     </div>
-                                    {{end}}{{template "base/paginate" .}}
+                                    {{end}} {{template "base/paginate" .}}
                                 </div>
                             </div>
                         </div>
@@ -199,7 +215,7 @@
                 const jobID = data.JobID
                 const status = data.JobStatus
                 $('#' + jobID).text(status)
-                console.log(data)
+                    // console.log(data)
             }).fail(function(err) {
                 console.log(err);
             });
@@ -232,14 +248,149 @@
 
     // 在用户点击其他地方时，关闭弹窗
     window.onclick = function(event) {
-        if (event.target == modal) {
-            modal.style.display = "none";
+            if (event.target == modal) {
+                modal.style.display = "none";
+            }
         }
+        // 显示弹窗，弹出相应的信息
+    function showmask() {
+        $('#imageModal').css('display', 'none')
+        $('#mask').css('display', 'block')
+
+        $("iframe[name=iframeContent]").on("load", function() {　　
+            var responseText = $("iframe")[0].contentDocument.body.getElementsByTagName("pre")[0].innerHTML;　
+            var json1 = JSON.parse(responseText)
+            $('#mask').css('display', 'none')
+            parent.location.href
+
+            if (json1.result_code === "0") {
+                $('.alert').html('操作成功!').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
+            } else {
+                $('.alert').html(json1.error_msg).removeClass('alert-success').addClass('alert-danger').show().delay(5000).fadeOut();
+            }
+        })
     }
 </script>
 
 
 <style>
+    /* 弹窗 */
+    
+    #mask {
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        filter: alpha(opacity=60);
+        background-color: #777;
+        z-index: 1000;
+        display: none;
+        opacity: 0.8;
+        -moz-opacity: 0.5;
+        padding-top: 100px;
+        color: #000000
+    }
+    
+    #loadingPage {
+        margin: 200px auto;
+        width: 50px;
+        height: 40px;
+        text-align: center;
+        font-size: 10px;
+        display: block;
+    }
+    
+    #loadingPage>div {
+        background-color: green;
+        height: 100%;
+        width: 6px;
+        display: inline-block;
+        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+        animation: sk-stretchdelay 1.2s infinite ease-in-out;
+    }
+    
+    #loadingPage .rect2 {
+        -webkit-animation-delay: -1.1s;
+        animation-delay: -1.1s;
+    }
+    
+    #loadingPage .rect3 {
+        -webkit-animation-delay: -1.0s;
+        animation-delay: -1.0s;
+    }
+    
+    #loadingPage .rect4 {
+        -webkit-animation-delay: -0.9s;
+        animation-delay: -0.9s;
+    }
+    
+    #loadingPage .rect5 {
+        -webkit-animation-delay: -0.8s;
+        animation-delay: -0.8s;
+    }
+    
+    @-webkit-keyframes sk-stretchdelay {
+        0%,
+        40%,
+        100% {
+            -webkit-transform: scaleY(0.4)
+        }
+        20% {
+            -webkit-transform: scaleY(1.0)
+        }
+    }
+    
+    @keyframes sk-stretchdelay {
+        0%,
+        40%,
+        100% {
+            transform: scaleY(0.4);
+            -webkit-transform: scaleY(0.4);
+        }
+        20% {
+            transform: scaleY(1.0);
+            -webkit-transform: scaleY(1.0);
+        }
+    }
+    /* 消息框 */
+    
+    .alert {
+        display: none;
+        position: fixed;
+        width: 100%;
+        z-index: 1001;
+        padding: 15px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        text-align: center;
+        font-weight: bold;
+    }
+    
+    .alert-success {
+        color: #3c763d;
+        background-color: #dff0d8;
+        border-color: #d6e9c6;
+    }
+    
+    .alert-info {
+        color: #31708f;
+        background-color: #d9edf7;
+        border-color: #bce8f1;
+    }
+    
+    .alert-warning {
+        color: #8a6d3b;
+        background-color: #fcf8e3;
+        border-color: #faebcc;
+    }
+    
+    .alert-danger {
+        color: #a94442;
+        background-color: #f2dede;
+        border-color: #ebccd1;
+    }
+    
     .pusher {
         width: calc(100% - 260px);
         box-sizing: border-box;