add delete, fix display flickering.

templates/repo/cloudbrain/index.tmpl

@@ -1,5 +1,180 @@
 <!-- 头部导航栏 -->
 {{template "base/head" .}}
+
+<style>
+    #deletemodel {
+        width: 100%;
+        height: 100%;
+    }
+    /* 弹窗 */
+    
+    #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;
+    }
+    /* 弹窗 (background)  */
+    
+    #imageModal {
+        display: none;
+        position: fixed;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgb(0, 0, 0);
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+    /* 弹窗内容 */
+    
+    .modal-content {
+        background-color: #fefefe;
+        margin: 15% auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 30%;
+    }
+    /* 关闭按钮 */
+    
+    .close {
+        color: #aaa;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+    }
+    
+    .close:hover,
+    .close:focus {
+        color: black;
+        text-decoration: none;
+        cursor: pointer;
+    }
+    
+    .dis {
+        margin-bottom: 20px;
+    }
+    
+    .repository .ui.tabs.divider {
+        margin-bottom: 0px !important;
+    }
+</style>
+
 <!-- 弹窗 -->
 <div id="mask">
     <div id="loadingPage">
@@ -114,7 +289,8 @@
                                                 <span class="ui text center clipboard">
                                                     <form id="delForm-{{.JobID}}" action="{{if ne .Status "STOPPED"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/del{{end}}" method="post">
                                                         {{$.CsrfTokenHtml}}
-                                                        <a class="fitted" onclick="document.getElementById('delForm-{{.JobID}}').submit();"  style="{{if ne .Status "STOPPED"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">删除</a>
+                                                        <!-- <a class="fitted" onclick="document.getElementById('delForm-{{.JobID}}').submit();" style="{{if ne .Status "STOPPED"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">删除</a> -->
+                                                        <a class="fitted" onclick="assertDelete(this)" style="{{if ne .Status "STOPPED"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">删除</a>
                                                     </form>
                                                 </span>
                                             </div>
@@ -138,12 +314,11 @@
                                                 </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>
+                                            <a class="imageBtn" style="{{if not .CanDebug}} color:#CCCCCC; cursor:pointer; pointer-events:none;{{end}}; font-size:16px; font-weight:bold;" value="{{.CanDebug}}">提交镜像</a>
 
-                                            <!-- 弹窗 -->
+                                            <!-- 镜像列表弹窗 -->
                                             <div id="imageModal" class="modal" style="display: none;">
                                                 <div class="modal-content">
                                                     <span class="close">&times;</span>
@@ -184,25 +359,70 @@
                                     </div>
                                     {{end}} {{template "base/paginate" .}}
                                 </div>
+
                             </div>
                         </div>
                     </div>
 
                 </div>
+
             </div>
         </div>
 
     </div>
 
+    <!-- 确认模态框 -->
+    <div id="deletemodel">
+        <div class="ui basic modal">
+            <div class="ui icon header">
+                <i class="trash icon"></i> 删除任务
+            </div>
 
+            <div class="content">
+                <p>你确认删除该任务么？此任务一旦删除不可恢复。</p>
+            </div>
+            <div class="actions">
+                <div class="ui red basic inverted cancel button">
+                    <i class="remove icon"></i> 取消操作
+                </div>
+                <div class="ui green basic inverted ok button">
+                    <i class="checkmark icon"></i> 确定操作
+                </div>
+            </div>
+        </div>
+    </div>
 
 </div>
 {{template "base/footer" .}}
 
 <script>
-    // 去除多余div
-    $(".ui.tabs.divider").remove();
+    // 删除时用户确认
+    function assertDelete(obj) {
+        if (obj.style.color == "rgb(204, 204, 204)") {
+            return
+        } else {
+            var delId = obj.parentNode.id
+            flag = 1;
+            $('.ui.basic.modal')
+                .modal({
+                    onDeny: function() {
+                        flag = false
+                    },
+                    onApprove: function() {
+                        document.getElementById(delId).submit()
+                        flag = true
+                    },
+                    onHidden: function() {
+                        if (flag == false) {
+                            $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
+                        }
+                    }
+                })
+                .modal('show')
+        }
+    }
 
+    // 加载任务状态
     $(document).ready(function() {
         $(".job-status").each((index, job) => {
             const jobID = job.dataset.jobid;
@@ -248,11 +468,12 @@
 
     // 在用户点击其他地方时，关闭弹窗
     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')
@@ -264,180 +485,10 @@
             parent.location.href
 
             if (json1.result_code === "0") {
-                $('.alert').html('操作成功!').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
+                $('.alert').html('操作成功!').removeClass('alert-warning').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;
-    }
-    /* 弹窗 (background) */
-    
-    .modal {
-        display: none;
-        /* 默认隐藏 */
-        position: fixed;
-        /* 固定定位 */
-        z-index: 1;
-        /* 设置在顶层 */
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-        background-color: rgb(0, 0, 0);
-        background-color: rgba(0, 0, 0, 0.4);
-    }
-    /* 弹窗内容 */
-    
-    .modal-content {
-        background-color: #fefefe;
-        margin: 15% auto;
-        padding: 20px;
-        border: 1px solid #888;
-        width: 25%;
-    }
-    /* 关闭按钮 */
-    
-    .close {
-        color: #aaa;
-        float: right;
-        font-size: 28px;
-        font-weight: bold;
-    }
-    
-    .close:hover,
-    .close:focus {
-        color: black;
-        text-decoration: none;
-        cursor: pointer;
-    }
-    
-    .dis {
-        margin-bottom: 20px;
-    }
-</style>
+</script>