From 1755aa6e39eb6132a5d6f36791e45df4fb17d10d Mon Sep 17 00:00:00 2001
From: Gitea <gitea@fake.local>
Date: Mon, 4 Jan 2021 09:58:18 +0800
Subject: [PATCH] delete task..

---
 templates/repo/cloudbrain/index.tmpl | 421 +++++++++++----------------
 test.txt                             |   0
 2 files changed, 178 insertions(+), 243 deletions(-)
 create mode 100644 test.txt

diff --git a/templates/repo/cloudbrain/index.tmpl b/templates/repo/cloudbrain/index.tmpl
index 5361db7dd..d8fb0df05 100755
--- a/templates/repo/cloudbrain/index.tmpl
+++ b/templates/repo/cloudbrain/index.tmpl
@@ -1,137 +1,192 @@
+<!-- 头部导航栏 -->
 {{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">
-        <div class="ui three column stackable grid">
-            <div class="column">
-                <h2>{{.i18n.Tr "repo.cloudbrain"}}</h2>
-            </div>
-            <div class="column">
-            </div>
-            <div class="column right aligned">
-                {{if .Permission.CanWrite $.UnitTypeCloudBrain}}
-                <a class="ui green button" href="{{.RepoLink}}/cloudbrain/create">{{.i18n.Tr "repo.cloudbrain.new"}}</a> {{end}}
-            </div>
+
+    <!-- 左右分栏格式 -->
+    <div class="ui bottom attached segment pushable">
+
+        <!-- 左侧边栏 -->
+        <div class="ui visible inverted left vertical sidebar menu">
+            <a class="item" id="task_list" href="{{.RepoLink}}/cloudbrain">
+                <i class="block layout icon"></i> 任务列表
+            </a>
+
+            <!--  target="tmpContent" -->
+            <a class="item" id="mirror_list" href="{{.RepoLink}}/cloudbrain/image_list">
+                <i class="calendar icon"></i> 镜像列表
+            </a>
         </div>
-        <div class="ui divider"></div>
-        <div class="ui grid">
-            <div class="row">
-                <div class="ui sixteen wide column">
-                    <div class="ui sixteen wide column">
-                        <div class="ui two column stackable grid">
-                            <div class="column">
-                            </div>
-                            <div class="column right aligned">
-                                <div class="ui right dropdown type jump item">
-                                    <span class="text">
-										{{.i18n.Tr "repo.issues.filter_sort"}}<i class="dropdown icon"></i>
-									</span>
-                                </div>
-                            </div>
+
+        <!-- 右侧内容区 -->
+        <div class="pusher">
+            <div class="ui basic segment">
+                <!-- 列表容器 -->
+                <div class="ui container" id="task_container">
+
+                    <!-- 中间云脑和新建任务按钮 -->
+                    <div class="ui three column stack able grid">
+                        <div class="column">
+                            <h2>{{.i18n.Tr "repo.cloudbrain"}}</h2>
+                        </div>
+
+                        <div class="column">
+                        </div>
+
+                        <div class="column right aligned">
+                            {{if .Permission.CanWrite $.UnitTypeCloudBrain}}
+                            <a class="ui green button" href="{{.RepoLink}}/cloudbrain/create">{{.i18n.Tr "repo.cloudbrain.new"}}</a> {{end}}
                         </div>
                     </div>
-                    <div class="dataset list">
-                        {{range .Tasks}}
-                        <div class="ui grid item">
-                            <div class="row">
-                                <div class="five wide column">
-                                    <a class="title" href="{{$.Link}}/{{.JobID}}">
-                                        <span class="fitted">{{svg "octicon-tasklist" 16}}</span>
-                                        <span class="fitted">{{.JobName}}</span>
-                                    </a>
-                                </div>
-                                <div class="three wide column job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}">
-                                    {{.Status}}
-                                </div>
-                                <div class="three wide column">
-                                    <span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span>
-                                </div>
-                                <div class="one wide column">
-                                    <span class="ui text center clipboard">
-											<a class="title" href="{{$.Link}}/{{.JobID}}">
-												<span class="fitted">查看</span>
-                                    </a>
-                                    </span>
-                                </div>
-                                <div class="one wide column">
-                                    <span class="ui text center clipboard">
-											<a class="title" href="{{if not .CanDebug}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/debug{{end}}" style="{{if not .CanDebug}}color:#CCCCCC{{end}}">
-												<span class="fitted">调试</span>
-                                    </a>
-                                    </span>
-                                </div>
-                                <div class="one wide column">
-                                    <span class="ui text center clipboard">
-											<form id="stopForm-{{.JobID}}" action="{{if ne .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post">
-												{{$.CsrfTokenHtml}}
-												<a class="fitted" onclick="document.getElementById('stopForm-{{.JobID}}').submit();" style="{{if ne .Status "RUNNING"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">停止</a>
-											</form>
-										</span>
+
+                    <!-- 中间分割线 -->
+                    <div class="ui divider"></div>
+
+                    <!-- 中下列表展示区 -->
+                    <div class="ui grid">
+                        <div class="row">
+                            <div class="ui sixteen wide column">
+
+                                <!-- 排序区 -->
+                                <div class="ui sixteen wide column">
+                                    <div class="ui two column stackable grid">
+                                        <div class="column">
+                                        </div>
+                                        <div class="column right aligned">
+                                            <div class="ui right dropdown type jump item">
+                                                <span class="text">
+                                                    {{.i18n.Tr "repo.issues.filter_sort"}}<i class="dropdown icon"></i>
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
                                 </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>
-                                <!-- 弹窗 -->
-                                <div id="imageModal" class="modal">
-                                    <!-- 弹窗内容 -->
-                                    <div class="modal-content">
-                                        <span class="close">&times;</span>
-                                        <!-- target="_parent" -->
-                                        <form id="commitImageForm" action="{{$.Link}}/{{.JobID}}/commit_image" method="post" target="iframeContent">
-                                            {{$.CsrfTokenHtml}}
-                                            <p>提交任务镜像</p>
-                                            <div class="ui divider"></div>
-                                            <div class="inline required field dis">
-                                                <label>镜像标签：</label>
-                                                <input name="tag" id="image_tag" tabindex="3" autofocus required maxlength="255" style="width:75%">
+                                <!-- 任务展示 -->
+                                <div class="dataset list task">
+                                    {{range .Tasks}}
+                                    <div class="ui grid item">
+                                        <div class="row">
+
+                                            <!-- 任务名 -->
+                                            <div class="five wide column">
+                                                <a class="title" href="{{$.Link}}/{{.JobID}}">
+                                                    <span class="fitted">{{svg "octicon-tasklist" 16}}</span>
+                                                    <span class="fitted">{{.JobName}}</span>
+                                                </a>
                                             </div>
-                                            <div class="inline required field" style="position:relative;height:180px;">
-                                                <div style="height:20px;width:75px;">
-                                                    <label>镜像描述：</label>
-                                                </div>
-                                                <div style="position:absolute;left:75px;top:0;width:75%">
-                                                    <textarea name="description" rows="10" style="width:100%"></textarea>
-                                                </div>
+
+                                            <!--任务状态 -->
+                                            <div class="three wide column job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}">
+                                                {{.Status}}
+                                            </div>
+
+                                            <!-- 任务创建时间 -->
+                                            <div class="three wide column">
+                                                <span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span>
+                                            </div>
+
+                                            <!-- 查看 -->
+                                            <div class="one wide column">
+                                                <span class="ui text center clipboard">
+                                                    <a class="title" href="{{$.Link}}/{{.JobID}}">
+                                                        <span class="fitted">查看</span>
+                                                </a>
+                                                </span>
+                                            </div>
+
+                                            <!-- 删除镜像 -->
+                                            <div class="one wide column">
+                                                <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>
+                                                    </form>
+                                                </span>
                                             </div>
-                                            <div class="ui divider"></div>
-                                            <div class="inline field">
-                                                <label></label>
-                                                <button class="ui green button" onclick="showmask()">
-                                                    {{$.i18n.Tr "repo.cloudbrain.commit_image"}}
-                                                </button>
+
+                                            <!-- 调试 -->
+                                            <div class="one wide column">
+                                                <span class="ui text center clipboard">
+                                                    <a class="title" href="{{if not .CanDebug}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/debug{{end}}" style="{{if not .CanDebug}}color:#CCCCCC{{end}}">
+                                                        <span class="fitted">调试</span>
+                                                </a>
+                                                </span>
+                                            </div>
+
+                                            <!-- 停止 -->
+                                            <div class="one wide column">
+                                                <span class="ui text center clipboard">
+                                                    <form id="stopForm-{{.JobID}}" action="{{if ne .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post">
+                                                        {{$.CsrfTokenHtml}}
+                                                        <a class="fitted" onclick="document.getElementById('stopForm-{{.JobID}}').submit();" style="{{if ne .Status "RUNNING"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">停止</a>
+                                                    </form>
+                                                </span>
+                                            </div>
+
+                                            <!-- 提交镜像 -->
+                                            <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>
+
+                                                    <!-- 表格 -->
+                                                    <form id="commitImageForm" action="{{$.Link}}/{{.JobID}}/commit_image" method="post">
+                                                        {{$.CsrfTokenHtml}}
+                                                        <p>提交任务镜像</p>
+                                                        <div class="ui divider"></div>
+
+                                                        <div class="inline required field dis">
+                                                            <label>镜像标签：</label>
+                                                            <input name="tag" id="image_tag" tabindex="3" autofocus required maxlength="255" style="width:75%">
+                                                        </div>
+
+                                                        <div class="inline required field" style="position:relative;height:180px;">
+                                                            <div style="height:20px;width:75px;">
+                                                                <label>镜像描述：</label>
+                                                            </div>
+                                                            <div style="position:absolute;left:75px;top:0;width:75%">
+                                                                <textarea name="description" rows="10" style="width:100%"></textarea>
+                                                            </div>
+                                                        </div>
+
+                                                        <div class="ui divider"></div>
+
+                                                        <div class="inline field">
+                                                            <label></label>
+                                                            <button class="ui green button">
+                                                                {{$.i18n.Tr "repo.cloudbrain.commit_image"}}
+                                                            </button>
+                                                        </div>
+                                                    </form>
+                                                </div>
                                             </div>
-                                        </form>
+
+                                        </div>
                                     </div>
+                                    {{end}}{{template "base/paginate" .}}
                                 </div>
                             </div>
                         </div>
-                        {{end}} {{template "base/paginate" .}}
                     </div>
+
                 </div>
             </div>
         </div>
+
     </div>
+
+
+
 </div>
 {{template "base/footer" .}}
 
 <script>
+    // 去除多余div
+    $(".ui.tabs.divider").remove();
+
     $(document).ready(function() {
         $(".job-status").each((index, job) => {
             const jobID = job.dataset.jobid;
@@ -139,11 +194,12 @@
             if (job.textContent.trim() == 'STOPPED') {
                 return
             }
+
             $.get(`/api/v1/repos/${repoPath}/cloudbrain/${jobID}`, (data) => {
                 const jobID = data.JobID
                 const status = data.JobStatus
                 $('#' + jobID).text(status)
-                    // console.log(data)
+                console.log(data)
             }).fail(function(err) {
                 console.log(err);
             });
@@ -169,147 +225,26 @@
     // 点击 <span> (x), 关闭弹窗
     for (i = 0; i < spans.length; i++) {
         spans[i].onclick = function() {
+
             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();
-            }
-        })
+    // 在用户点击其他地方时，关闭弹窗
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.display = "none";
+        }
     }
 </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;
diff --git a/test.txt b/test.txt
new file mode 100644
index 000000000..e69de29bb