update

templates/repo/cloudbrain/index.tmpl

@@ -1,4 +1,18 @@
 {{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" .}}
     <div class="ui container">
@@ -69,6 +83,9 @@
 										</span>
                                 </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>
                                 <!-- 弹窗 -->
@@ -76,7 +93,8 @@
                                     <!-- 弹窗内容 -->
                                     <div class="modal-content">
                                         <span class="close">&times;</span>
-                                        <form id="commitImageForm" action="{{$.Link}}/{{.JobID}}/commit_image" method="post">
+                                        <!-- target="_parent" -->
+                                        <form id="commitImageForm" action="{{$.Link}}/{{.JobID}}/commit_image" method="post" target="iframeContent">
                                             {{$.CsrfTokenHtml}}
                                             <p>提交任务镜像</p>
                                             <div class="ui divider"></div>
@@ -95,9 +113,9 @@
                                             <div class="ui divider"></div>
                                             <div class="inline field">
                                                 <label></label>
-                                                <button class="ui green button">
-														{{$.i18n.Tr "repo.cloudbrain.commit_image"}}
-													</button>
+                                                <button class="ui green button" onclick="showmask()">
+                                                    {{$.i18n.Tr "repo.cloudbrain.commit_image"}}
+                                                </button>
                                             </div>
                                         </form>
                                     </div>
@@ -112,6 +130,7 @@
     </div>
 </div>
 {{template "base/footer" .}}
+
 <script>
     $(document).ready(function() {
         $(".job-status").each((index, job) => {
@@ -120,7 +139,6 @@
             if (job.textContent.trim() == 'STOPPED') {
                 return
             }
-
             $.get(`/api/v1/repos/${repoPath}/cloudbrain/${jobID}`, (data) => {
                 const jobID = data.JobID
                 const status = data.JobStatus
@@ -151,21 +169,144 @@
     // 点击 <span> (x), 关闭弹窗
     for (i = 0; i < spans.length; i++) {
         spans[i].onclick = function() {
-
             modal.style.display = "none";
         }
     }
 
-    // 在用户点击其他地方时，关闭弹窗
-    window.onclick = function(event) {
-        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('操作成功!').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>
-    /* 弹窗 (background) */
+    #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;
+    }
     
     .modal {
         display: none;