Files
gocron/templates/task/task_form.html
T
2017-06-08 18:04:55 +08:00

418 lines
16 KiB
Go
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{{{ template "common/header" . }}}
<div class="ui grid">
{{{template "task/menu" .}}}
<div class="twelve wide column">
<div class="pageHeader">
<div class="segment">
<h3 class="ui dividing header">
<div class="content">
{{{.Title}}}
</div>
</h3>
</div>
</div>
<form class="ui form fluid vertical segment">
<input type="hidden" name="id" value="{{{.Task.Id}}}">
<div class="two fields">
<div class="field">
<label>
<div class="content">任务名称</div>
</label>
<div class="ui small input">
<input type="text" name="name" placeholder="订单量统计" value="{{{.Task.Task.Name}}}">
</div>
</div>
</div>
<div class="two fields">
<div class="field">
<label>
<div class="content">任务类型</div>
<div class="ui message">
主任务可以配置多个子任务, 当主任务执行完成后自动执行子任务<br>
任务类型新增后不能变更
</div>
</label>
<select name="level" id="level" {{{if .Task}}}disabled="disabled"{{{end}}}>
<option value="1" {{{if .Task}}} {{{if eq .Task.Level 1}}}selected{{{end}}} {{{end}}}>主任务</option>
<option value="2" {{{if .Task}}} {{{if eq .Task.Level 2}}}selected{{{end}}} {{{end}}}>子任务</option>
</select>
</div>
</div>
<div id="parent-task">
<div class="two fields">
<div class="field">
<label>
<div class="content">依赖关系</div>
<div class="ui message">
强依赖: 主任务执行成功才会运行子任务 <br>
弱依赖: 无论主任务执行是否成功都会运行子任务
</div>
</label>
<select name="dependency_status" id="dependency_status">
<option value="1" {{{if .Task}}} {{{if eq .Task.DependencyStatus 1}}}selected{{{end}}} {{{end}}}>强依赖</option>
<option value="2" {{{if .Task}}} {{{if eq .Task.DependencyStatus 2}}}selected{{{end}}} {{{end}}}>弱依赖</option>
</select>
</div>
</div>
<div class="two fields">
<div class="field">
<label>
<div class="content">子任务ID</div>
<div class="ui message">
多个任务ID逗号分隔 <br>
子任务并发执行
</div>
</label>
<div class="ui small input">
<input type="text" name="dependency_task_id" placeholder="可选" value="{{{.Task.DependencyTaskId}}}">
</div>
</div>
</div>
<div class="two fields">
<div class="field">
<label>
<div class="content">
crontab表达式
</div>
</label>
<div class="ui small input">
<input type="text" name="spec" value="{{{.Task.Spec}}}" placeholder="秒 分 时 天 月 周"/>
</div>
</div>
</div>
</div>
<div class="three fields">
<div class="field">
<label>执行方式</label>
<select name="protocol" id="protocol">
<option value="2" {{{if .Task}}} {{{if eq .Task.Protocol 2}}}selected{{{end}}} {{{end}}} data-match="host_id" data-validate-type="selectProtocol">SHELL</option>
<option value="1" {{{if .Task}}} {{{if eq .Task.Protocol 1}}}selected{{{end}}} {{{end}}}>HTTP</option>
</select>
</div>
</div>
<div class="three fields" id="hostField">
<div class="field">
<label>任务执行器</label>
<select name="host_id" id="hostId">
<option value="">选择主机</option>
{{{range $i, $v := .Hosts}}}
<option value="{{{.Id}}}" {{{if $.Task}}}{{{if eq $.Task.HostId .Id }}} selected {{{end}}} {{{end}}}>{{{.Alias}}}-{{{.Name}}}</option>
{{{end}}}
</select> &nbsp; <a class="ui blue button" href="/host/create" target="_blank">添加主机</a>
</div>
</div>
<div class="two fields">
<div class="field">
<label>命令</label>
<textarea rows="5" name="command" placeholder="请输入系统命令" id="command">{{{.Task.Command}}}</textarea>
</div>
</div>
<div class="six fields">
<div class="field">
<label>任务超时时间(, 0-86400)</label>
<input type="text" name="timeout" placeholder="默认0, 不限制" value="{{{if .Task}}} {{{.Task.Timeout}}} {{{else}}} 0 {{{end}}}">
</div>
</div>
<div class="six fields">
<div class="field">
<label>任务失败重试次数 (0-10)</label>
<input type="text" name="retry_times" placeholder="默认0, 不重试" value="{{{if .Task}}} {{{.Task.RetryTimes}}} {{{else}}} 0 {{{end}}}">
</div>
</div>
<div class="three fields">
<div class="field">
<label>允许多实例同时运行</label>
<select name="multi">
<option value="2" {{{if .Task}}} {{{if eq .Task.Multi 0}}}selected{{{end}}} {{{end}}}></option>
<option value="1"{{{if .Task}}} {{{if eq .Task.Multi 1}}}selected{{{end}}} {{{end}}}></option>
</select>
</div>
</div>
<div class="three fields">
<div class="field">
<label>任务通知</label>
<select name="notify_status" id="task-status">
<option value="1"{{{if .Task}}} {{{if eq .Task.NotifyStatus 0}}}selected{{{end}}} {{{end}}}>不通知</option>
<option value="2" {{{if .Task}}} {{{if eq .Task.NotifyStatus 1}}}selected{{{end}}} {{{end}}}>失败通知</option>
<option value="3" {{{if .Task}}} {{{if eq .Task.NotifyStatus 2}}}selected{{{end}}} {{{end}}}>执行结束通知</option>
</select>
</div>
</div>
<div class="two fields" style="display: none" id="task-notify-type">
<div class="field" >
<label>通知类型</label>
<select name="notify_type">
<option value="1"{{{if .Task}}} {{{if eq .Task.NotifyType 0}}}selected{{{end}}} {{{end}}}>请选择</option>
<option value="2" {{{if .Task}}} {{{if eq .Task.NotifyType 1}}}selected{{{end}}} {{{end}}}>邮件</option>
<option value="3" {{{if .Task}}} {{{if eq .Task.NotifyType 2}}}selected{{{end}}} {{{end}}}>Slack</option>
</select>
</div>
</div>
<div class="inline fields" style="display: none" id="receiver-id"></div>
<div class="two fields">
<div class="field">
<label>备注</label>
<textarea rows="5" name="remark" placeholder="统计昨天的订单量">{{{.Task.Remark}}}</textarea>
</div>
</div>
<div class="ui primary submit button">保存</div> <a class="ui button" onclick="location.href='/task';">取消</a>
</form>
</div>
</div>
<script type="x-handlerbar-template" id="mail-template">
{{#each MailUsers}}
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="receiver[]" {{#if checked}}checked{{/if}} value="{{Id}}" />
<label>{{Username}}-{{Email}}</label>
</div>
</div>
{{else}}
<a class="ui blue button" href="/manage/mail/edit" target="_blank">邮箱配置</a><br><br>
{{/each}}
</script>
<script type="x-handlervar-template" id="slack-template">
{{#each Channels}}
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="receiver[]" {{#if checked}}checked{{/if}} value="{{Id}}" />
<label>{{Name}}</label>
</div>
</div>
{{else}}
<a class="ui blue button" href="/manage/slack/edit" target="_blank">Slack配置</a>
{{/each}}
</script>
<script type="text/javascript">
$(function() {
changeCommandPlaceholder();
changeLevel();
changeProtocol();
showNotify();
});
$('#protocol').change(function() {
changeCommandPlaceholder();
changeProtocol();
});
$('#level').change(function() {
changeLevel();
});
$('#task-status').change(function() {
var selected = $(this).val();
if (selected == 1) {
$('#task-notify-type').hide();
$('#receiver-id').hide();
$('#task-notify-type').find('select').val('1');
return;
}
$('#task-notify-type').show();
});
$('#task-notify-type').change(function() {
changeNotify();
});
function changeCommandPlaceholder() {
var selectedId = $('#protocol').val();
switch (selectedId) {
case '1':
$('#command').attr('placeholder', '请输入URL地址');
break;
case '2':
$('#command').attr('placeholder', '请输入shell命令');
break;
}
}
function showNotify() {
var notifyStatus = {{{.Task.NotifyStatus}}};
if (notifyStatus > 0) {
$('#task-notify-type').show();
}
var notifyReceiverIds = '{{{.Task.NotifyReceiverId}}}'.split(',');
changeNotify(notifyReceiverIds);
}
function changeNotify(notifyReceiverIds) {
var selectedId = $('#task-notify-type').find('select').val();
if (selectedId == 1) {
$('#receiver-id').hide();
$('#receiver-id').html('');
return;
}
if (selectedId == 2) {
showMail(notifyReceiverIds);
} else if (selectedId == 3) {
showSlack(notifyReceiverIds);
}
$('#receiver-id').show();
}
function showMail(notifyReceiverIds) {
util.get("/manage/mail", function(code, message, data) {
renderReceiver(notifyReceiverIds, $('#mail-template'), data, 'MailUsers');
})
}
function showSlack(notifyReceiverIds) {
util.get("/manage/slack", function(code, message, data) {
renderReceiver(notifyReceiverIds, $('#slack-template'), data, 'Channels');
})
}
function renderReceiver(notifyReceiverIds, $element, data, key) {
if (notifyReceiverIds !== undefined && notifyReceiverIds) {
console.log(data[key]);
for (i in data[key]) {
if ($.inArray(data[key][i].Id + '', notifyReceiverIds) != -1) {
data[key][i].checked = true;
}
}
}
var html = util.renderTemplate($($element), data);
$('#receiver-id').html(html);
$('.ui.checkbox').checkbox();
}
function changeProtocol() {
var protocol = $('#protocol').val();
if (protocol == 2) {
$('#hostField').show();
return;
}
$('#hostField').hide();
}
$('.ui.checkbox')
.checkbox()
;
function validateNotify() {
var selectedId = $('#task-status').val();
if (selectedId == 1) {
return true;
}
var checkedLength = $('#receiver-id input:checked').length;
if (checkedLength == 0) {
return false;
}
return true;
}
function parseNotifyReceiver() {
var receivers = [];
$('#receiver-id input:checked').each(function() {
receivers.push($(this).val());
});
return receivers.join(",");
}
function changeLevel() {
var selected = $('#level').val();
if (selected == 1) {
// 主任务
$('#parent-task').show();
$('#child-task').hide();
} else {
// 子任务
$('#parent-task').hide();
$('#child-task').show();
}
}
var $uiForm = $('.ui.form');
registerSelectFormValidation("selectProtocol", $uiForm, $('#protocol'), 'protocol');
$($uiForm).form(
{
onSuccess: function(event, fields) {
if (!validateNotify()) {
swal('错误提示', '请至少选择一个接收者', 'error');
return false;
}
fields.notify_receiver_id = parseNotifyReceiver();
util.post('/task/store', fields, function(code, message) {
location.href = "/task"
});
return false;
},
fields: {
name: {
identifier : 'name',
rules: [
{
type : 'empty',
prompt : '请输入任务名称'
},
{
type : 'maxLength[32]',
prompt : '长度不能超过32'
}
]
},
command: {
identifier : 'command',
rules: [
{
type : 'empty',
prompt : '请输入任务命令'
},
{
type : 'maxLength[256]',
prompt : '长度不能超过256'
}
]
},
hosts: {
identifier : 'host_id',
rules: [
{
type : 'selectProtocol',
prompt : '请选择主机'
}
]
},
timeout: {
identifier : 'timeout',
rules: [
{
type : 'integer[0..86400]',
prompt : '超时范围0-86400'
}
]
},
retryTimes: {
identifier : 'retry_times',
rules: [
{
type : 'integer[0..10]',
prompt : '重试次数0-10'
}
]
},
remark: {
identifier : 'remark',
rules: [
{
type : 'maxLength[100]',
prompt : '长度不能超过100'
}
]
}
},
inline : true
});
</script>
{{{ template "common/footer" . }}}