{{{ 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">
                    <i class="tasks icon"></i>
                    <div class="content">
                        任务列表
                    </div>
                </h3>
            </div>
        </div>
        <form class="ui form">
            <div class="five fields">
                <div class="field">
                    <input type="text" placeholder="任务名称" name="name">
                </div>
                <div class="field">
                    <label>主机</label>
                    <div class="ui dropdown selection">
                        <input type="hidden" name="protocol" value="{{{if gt .Params.Protocol 0}}}{{{.Params.Protocol}}}{{{else}}}3{{{end}}}">
                        <div class="default text">本地命令</div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="item" data-value="3">本地命令</div>
                            <div class="item" data-value="2">SSH</div>
                            <div class="item" data-value="1">HTTP</div>
                        </div>
                    </div>
                    <div class="inline fields">
                        {{{range $i, $v := .Hosts}}}
                        <div class="field">
                            <div class="ui radio checkbox">
                                <input type="radio" name="host_id" tabindex="0" class="hidden" value="{{{.Id}}}"
                                       {{{if eq $.Params.HostId .Id }}} checked {{{end}}}>
                            </div>
                        </div>
                        {{{end}}}
                    </div>
                </div>
                <div class="field">
                    <div class="ui dropdown selection">
                        <input type="hidden" name="protocol" value="{{{if gt .Params.Protocol 0}}}{{{.Params.Protocol}}}{{{else}}}3{{{end}}}">
                        <div class="default text">本地命令</div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="item" data-value="-1">协议</div>
                            <div class="item" data-value="3">本地命令</div>
                            <div class="item" data-value="2">SSH</div>
                            <div class="item" data-value="1">HTTP</div>
                        </div>
                    </div>
                </div>
                <div class="field">
                         <div class="ui dropdown selection">
                        <input type="hidden" name="status" value="{{{if eq .Params.Status 1}}}1{{{else}}}2{{{end}}}">
                        <div class="default text">暂停</div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="item" data-value="-1">状态</div>
                            <div class="item" data-value="2">暂停</div>
                            <div class="item" data-value="1">激活</div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <button class="ui linkedin submit button">搜索</button>
                </div>
            </div>
        </form>
        <table class="ui violet table">
            <thead>
            <tr>
                <th>任务名称</th>
                <th>cron表达式</th>
                <th>协议</th>
                <th width="5%">命令</th>
                <th>超时时间(秒)</th>
                <th>重试次数</th>
                <th>主机</th>
                <th>备注</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
                {{{range $i, $v := .Tasks}}}
                <tr>
                    <td>{{{.Task.Name}}}</td>
                    <td>{{{.Spec}}}</td>
                    <td>{{{if eq .Protocol 1}}} HTTP {{{else}}} SSH {{{end}}}</td>
                    <td>{{{.Command}}}</td>
                    <td>{{{if gt .Timeout 0}}}{{{.Timeout}}}秒{{{else}}}不限制{{{end}}}</td>
                    <td>{{{.RetryTimes}}}</td>
                    <td>{{{.Alias}}}</td>
                    <td>{{{.Remark}}}</td>
                    <td>{{{if eq .Status 1}}}<i class="large checkmark blue icon"></i> {{{else}}} <i class="large red minus icon"></i> {{{end}}}</td>
                    <td>
                        <a class="ui purple  button" href="/task/edit/{{{.Id}}}">编辑</a>
                        {{{if eq .Status 1}}}
                             <button class="ui primary button" @click="changeStatus({{{.Id}}},{{{.Status}}})">暂停</button>
                        {{{else}}}
                             <button class="ui blue button" @click="changeStatus({{{.Id}}},{{{.Status}}})">激活 </button>
                        {{{end}}}
                        <button class="ui positive button" @click="remove({{{.Id}}})">删除</button> <br>
                        <div style="margin-top:10px;">
                            <button class="ui twitter button" @click="run({{{.Id}}})">手动运行</button>
                            <a class="ui instagram button" href="/task/log?task_id={{{.Id}}}">查看日志</a>
                        </div>
                    </td>
                </tr>
                {{{end}}}
            </tbody>
        </table>
    </div>
</div>


<script type="text/javascript">
    $('.ui.checkbox').checkbox();

    var vue = new Vue(
            {
                el: '.ui.violet.table',
                methods: {
                    changeStatus: function (id ,status) {
                        var url = '';
                        if (status) {
                            url = '/task/disable';
                        } else {
                            url = '/task/enable';
                        }
                        url += '/' + id;
                        util.post(url,{}, function() {
                            location.reload();
                        });
                    },
                    remove: function(id) {
                        util.removeConfirm('/task/remove/' + id);
                    },
                    run: function(id) {
                        util.get("/task/run/" + id, function(code, message) {
                            swal('操作成功', message, 'success');
                        })
                    }
                }
            }
    );




</script>

{{{ template "common/footer" . }}}