gocron/templates/task/task_form.html

333 lines
12 KiB
Go
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

{{{ 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" value="{{{.Task.Timeout}}}">
</div>
</div>
<div class="six fields">
<div class="field">
<label></label>
<input type="text" name="retry_times" 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 : ''
}
]
},
spec: {
identifier : 'spec',
rules: [
{
type : 'empty',
prompt : 'crontab'
}
]
},
command: {
identifier : 'command',
rules: [
{
type : 'empty',
prompt : ''
}
]
},
hosts: {
identifier : 'host_id',
rules: [
{
type : 'selectProtocol',
prompt : ''
}
]
}
},
inline : true
});
</script>
{{{ template "common/footer" . }}}