aiforge/templates/repo/cloudbrain/index.tmpl

{{template "base/head" .}}
<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>
    <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>
					<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>
									
										<!-- 打开弹窗按钮 -->
										<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>
											<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>
								</div>
							</div>
						{{end}}
						{{template "base/paginate" .}}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{{template "base/footer" .}}
<script>
$( document ).ready(function() {
	$( ".job-status" ).each(( index, job ) => {
		const jobID = job.dataset.jobid;
		const repoPath = job.dataset.repopath;
		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)
		}).fail(function(err) {
			console.log( err );
		});
	});
});

// 获取弹窗
var modal = document.getElementById('imageModal');
 
// 打开弹窗的按钮对象
var btns = document.getElementsByClassName("imageBtn");
 
// 获取 <span> 元素，用于关闭弹窗
var spans = document.getElementsByClassName('close');
 
// 点击按钮打开弹窗
for(i=0;i<btns.length;i++){
	btns[i].onclick = function() {
		modal.style.display = "block";
	}
}
 
// 点击 <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";
    }
}

</script>


<style>
/* 弹窗 (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>