Browse Source
Merge pull request 'Add_loading' (#128) from loading into develop
Reviewed-by: 林嘉怡 <2441898885@qq.com>master
史梦园
4 years ago
1 changed files with 151 additions and 47 deletions
Unified View
Diff Options
-
+151 -47templates/repo/cloudbrain/new.tmpl
+ 151
- 47
templates/repo/cloudbrain/new.tmpl
View File
| @@ -1,63 +1,167 @@ | |||||
| {{template "base/head" .}} | {{template "base/head" .}} | ||||
| <style> | |||||
| /* 遮罩层css效果图 */ | |||||
| #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 | |||||
| } | |||||
| /* 加载圈css效果图 */ | |||||
| #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); | |||||
| } | |||||
| } | |||||
| </style> | |||||
| <script> | |||||
| // 点击按钮后遮罩层显示 | |||||
| function showmask() { | |||||
| document.getElementById("mask").style.display = "block" | |||||
| } | |||||
| // 页面加载完毕后遮罩层隐藏 | |||||
| document.onreadystatechange = function() { | |||||
| if (document.readyState === "complete") { | |||||
| document.getElementById("mask").style.display = "none" | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <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="repository"> | <div class="repository"> | ||||
| {{template "repo/header" .}} | |||||
| <div class="repository new repo ui middle very relaxed page grid"> | |||||
| <div class="column"> | |||||
| {{template "base/alert" .}} | |||||
| <form class="ui form" action="{{.Link}}" method="post"> | |||||
| {{.CsrfTokenHtml}} | |||||
| <h3 class="ui top attached header"> | |||||
| {{.i18n.Tr "repo.cloudbrain.new"}} | |||||
| </h3> | |||||
| <div class="ui attached segment"> | |||||
| <br> | |||||
| <div class="inline required field"> | |||||
| <label>任务名称</label> | |||||
| <input name="job_name" id="cloudbrain_job_name" placeholder="任务名称" value="{{.job_name}}" tabindex="3" autofocus required maxlength="255"> | |||||
| </div> | |||||
| <br> | |||||
| <div class="inline required field"> | |||||
| <label>镜像</label> | |||||
| <select id="cloudbrain_image" placeholder="选择镜像" style='width:385px' name="image"> | |||||
| {{template "repo/header" .}} | |||||
| <div class="repository new repo ui middle very relaxed page grid"> | |||||
| <div class="column"> | |||||
| {{template "base/alert" .}} | |||||
| <form class="ui form" action="{{.Link}}" method="post"> | |||||
| {{.CsrfTokenHtml}} | |||||
| <h3 class="ui top attached header"> | |||||
| {{.i18n.Tr "repo.cloudbrain.new"}} | |||||
| </h3> | |||||
| <div class="ui attached segment"> | |||||
| <br> | |||||
| <div class="inline required field"> | |||||
| <label>任务名称</label> | |||||
| <input name="job_name" id="cloudbrain_job_name" placeholder="任务名称" value="{{.job_name}}" tabindex="3" autofocus required maxlength="255"> | |||||
| </div> | |||||
| <br> | |||||
| <div class="inline required field"> | |||||
| <label>镜像</label> | |||||
| <select id="cloudbrain_image" placeholder="选择镜像" style='width:385px' name="image"> | |||||
| {{range .images}} | {{range .images}} | ||||
| <option name="image" value="{{.Place}}">{{.PlaceView}}</option> | <option name="image" value="{{.Place}}">{{.PlaceView}}</option> | ||||
| {{end}} | {{end}} | ||||
| </select> | </select> | ||||
| </div> | |||||
| <div class="inline required field"> | |||||
| <label>数据集(只有zip格式的数据集才能发起云脑任务)</label> | |||||
| <select id="cloudbrain_dataset" placeholder="选择数据集" style='width:385px' name="attachment"> | |||||
| </div> | |||||
| <div class="inline required field"> | |||||
| <label>数据集(只有zip格式的数据集才能发起云脑任务)</label> | |||||
| <select id="cloudbrain_dataset" placeholder="选择数据集" style='width:385px' name="attachment"> | |||||
| {{range .attachments}} | {{range .attachments}} | ||||
| <option name="attachment" value="{{.UUID}}">{{.Attachment.Name}}</option> | <option name="attachment" value="{{.UUID}}">{{.Attachment.Name}}</option> | ||||
| {{end}} | {{end}} | ||||
| </select> | </select> | ||||
| </div> | |||||
| <div class="inline required field"> | |||||
| <label>数据集存放路径</label> | |||||
| <input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly"> | |||||
| </div> | |||||
| <div class="inline required field"> | |||||
| <label>模型存放路径</label> | |||||
| <input name="model_path" id="cloudbrain_model_path" value="{{.model_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly"> | |||||
| </div> | |||||
| <div class="inline required field"> | |||||
| <label>代码存放路径</label> | |||||
| <input name="code_path" id="cloudbrain_code_path" value="{{.code_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly"> | |||||
| </div> | |||||
| <div class="inline required field" hidden> | |||||
| <label>启动命令</label> | |||||
| <textarea name="command" rows="10" readonly="readonly">{{.command}}</textarea> | |||||
| </div> | |||||
| <div class="inline field"> | |||||
| <label></label> | |||||
| <button class="ui green button"> | |||||
| </div> | |||||
| <div class="inline required field"> | |||||
| <label>数据集存放路径</label> | |||||
| <input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly"> | |||||
| </div> | |||||
| <div class="inline required field"> | |||||
| <label>模型存放路径</label> | |||||
| <input name="model_path" id="cloudbrain_model_path" value="{{.model_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly"> | |||||
| </div> | |||||
| <div class="inline required field"> | |||||
| <label>代码存放路径</label> | |||||
| <input name="code_path" id="cloudbrain_code_path" value="{{.code_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly"> | |||||
| </div> | |||||
| <div class="inline required field" hidden> | |||||
| <label>启动命令</label> | |||||
| <textarea name="command" rows="10" readonly="readonly">{{.command}}</textarea> | |||||
| </div> | |||||
| <div class="inline field"> | |||||
| <label></label> | |||||
| <button class="ui green button" onclick="showmask()"> | |||||
| {{.i18n.Tr "repo.cloudbrain.new"}} | {{.i18n.Tr "repo.cloudbrain.new"}} | ||||
| </button> | </button> | ||||
| <a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a> | |||||
| </div> | |||||
| <a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a> | |||||
| </div> | |||||
| </div> | |||||
| </form> | |||||
| </div> | </div> | ||||
| </form> | |||||
| </div> | </div> | ||||
| </div> | |||||
| </div> | </div> | ||||
| {{template "base/footer" .}} | {{template "base/footer" .}} | ||||