Files
gocron/templates/task/task_form.html
T
2017-05-05 23:37:05 +08:00

354 lines
13 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" value="{{{.Task.Task.Name}}}">
</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 class="three fields">
<div class="field">
<label>执行方式</label>
<select name="protocol" id="protocol">
<option value="3" {{{if .Task}}} {{{if eq .Task.Protocol 3}}}selected{{{end}}} {{{end}}}>系统命令</option>
<option value="2" {{{if .Task}}} {{{if eq .Task.Protocol 2}}}selected{{{end}}} {{{end}}} data-match="host_id" data-validate-type="selectProtocol">SSH</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>
<div class="ui blue message">
<pre>选择SSH协议时需选择执行主机</pre>
</div>
<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">添加主机</a>
</div>
</div>
<div class="two fields">
<div class="field">
<label>命令</label>
<textarea rows="5" name="command">{{{.Task.Command}}}</textarea>
</div>
</div>
<div class="six fields">
<div class="field">
<label>任务超时时间()</label>
<input type="text" name="timeout" placeholder="默认0, 不限制" value="{{{.Task.Timeout}}}">
</div>
</div>
<div class="six fields">
<div class="field">
<label>任务失败重试次数</label>
<input type="text" name="retry_times" placeholder="默认0, 不重试" value="{{{.Task.RetryTimes}}}">
</div>
</div>
<div class="three fields">
<div class="field">
<label>允许多实例同时运行</label>
<div class="ui blue message">
前次任务未执行完成本次任务是否执行
</div>
<select name="multi">
<option value="1"{{{if .Task}}} {{{if eq .Task.Multi 1}}}selected{{{end}}} {{{end}}}></option>
<option value="2" {{{if .Task}}} {{{if eq .Task.Multi 0}}}selected{{{end}}} {{{end}}}></option>
</select>
</div>
</div>
<div class="three fields">
<div class="field">
<label>任务状态</label>
<div class="ui blue message">
任务添加成功后是否立即调度
</div>
<select name="status">
<option value="2"{{{if .Task}}} {{{if eq .Task.Status 0}}}selected{{{end}}} {{{end}}}>停止</option>
<option value="1" {{{if .Task}}} {{{if eq .Task.Status 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">{{{.Task.Remark}}}</textarea>
</div>
</div>
<div class="ui primary submit button">保存</div>
</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() {
changeProtocol();
showNotify();
});
$('#protocol').change(function() {
changeProtocol();
});
$('#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 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(",");
}
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'
}
]
},
spec: {
identifier : 'spec',
rules: [
{
type : 'empty',
prompt : '请输入crontab格式表达式'
},
{
type : 'maxLength[64]',
prompt : '长度不能超过64'
}
]
},
command: {
identifier : 'command',
rules: [
{
type : 'empty',
prompt : '请输入任务命令'
},
{
type : 'maxLength[256]',
prompt : '长度不能超过256'
}
]
},
hosts: {
identifier : 'host_id',
rules: [
{
type : 'selectProtocol',
prompt : '请选择主机'
}
]
},
remark: {
identifier : 'remark',
rules: [
{
type : 'maxLength[100]',
prompt : '长度不能超过100'
}
]
}
},
inline : true
});
</script>
{{{ template "common/footer" . }}}