{{{ template "common/header" . }}}
<style type="text/css">
    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
        padding:10px;
        background-color: #4C4C4C;
        color: white;
    }
</style>
<div class="ui grid">
    <!--the vertical menu-->
   {{{ template "task/menu" . }}}

    <div class="twelve wide column">
        <div class="pageHeader">
            <div class="segment">
                <h3 class="ui dividing header">
                    <div class="content">
                        <button class="ui small teal button" onclick="clearLog()">清空日志</button>
                    </div>

                </h3>
            </div>
        </div>
        <table class="ui pink table">
            <thead>
            <tr>
                <th>任务名称</th>
                <th>任务类型</th>
                <th>cron表达式</th>
                <th>协议</th>
                <th>超时时间(秒)</th>
                <th>延时时间(秒)</th>
                <th>主机</th>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>状态</th>
                <th>执行结果</th>
            </tr>
            </thead>
            <tbody>
            {{{range $i, $v := .Logs}}}
            <tr>
                <td>{{{.Name}}}</td>
                <td>{{{if eq .Type 1}}}定时任务{{{else}}}延时任务{{{end}}}</td>
                <td>{{{.Spec}}}</td>
                <td>{{{if eq .Protocol 1}}} HTTP {{{else}}} SSH {{{end}}}</td>
                <td>{{{.Timeout}}}</td>
                <td>{{{.Delay}}}</td>
                <td>{{{.Hostname}}}</td>
                <td>
                        {{{.StartTime.Format "2006-01-02 15:03:04" }}}
                </td>
                <td>
                        {{{.EndTime.Format "2006-01-02 15:03:04" }}}
                </td>
                <td>
                    {{{if eq .Status 2}}}
                        成功
                    {{{else if eq .Status 1}}}
                        <span style="color:green">执行中</span>
                    {{{else if eq .Status 0}}}
                        <span style="color:red">失败</span>
                    {{{else}}}
                        <span style="color:#4499EE">待执行</span>
                    {{{end}}}
                </td>
                <td>
                    <button class="ui small primary button"
                            onclick="showResult('{{{.Name}}}', '{{{.Command}}}', '{{{.Result}}}')"
                            >查看结果
                    </button>
                </td>
            </tr>
            {{{end}}}
            </tbody>
        </table>
    </div>
</div>

<div class="message">
    <result></result>
</div>

<script type="text/x-vue-template" id="task-result">
    <div class="ui modal">
        <i class="close icon"></i>
        <div class="header">
            {{name}}
        </div>
        <div>
            <pre style="background-color:#04477C;color:lightslategray">{{command}}</pre>
        </div>
        <div>
             <pre>{{result}}</pre>
        </div>
    </div>
</script>

<script type="text/javascript">
  function  showResult(name, command,result) {
      $('.message').html($('#task-result').html());
      new Vue(
              {
                  el: '.message',
                  data: {
                      result: result.replace(/\\n/,"<br>"),
                      name: name,
                      command: command
                  }
              }
      );
      $('.ui.modal.transition').remove();
      $('.ui.modal').modal({
          detachable: false,
          observeChanges: true
      }).modal('refresh').modal('show');
  }

  function clearLog() {
      util.confirm("确定要删除所有日志吗？", function() {
          util.post("/task/log/clear",{}, function() {
              location.reload();
          });
      });
  }

    $('.ui.form').form(
            {
                onSuccess: function(event, fields) {
                    util.post('/host/store', fields, function(code, message) {
                        location.reload();
                    });

                    return false;
                },
                fields: {
                    name: {
                        identifier  : 'name',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入主机名'
                            }
                        ]
                    },
                    alias: {
                        identifier  : 'alias',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入主机别名'
                            }
                        ]
                    },
                    username: {
                        identifier  : 'username',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入SSH用户名'
                            }
                        ]
                    },
                    port: {
                        identifier  : 'port',
                        rules: [
                            {
                                type   : 'integer',
                                prompt : '请输入SSH端口'
                            }
                        ]
                    }
                },
                inline : true
            });
</script>
{{{ template "common/footer" . }}}