<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="base/resource"/>
    <title>任务调度 - Big Whale</title>
    <link href="../libs/bootstrap-select/bootstrap-select.min.css" rel="stylesheet"/>
    <link href="../libs/bootstrap-treeview/bootstrap-treeview.min.css" rel="stylesheet"/>
    <link href="../css/common.css" rel="stylesheet"/>
    <link href="../libs/fonts/script-type/script-type.css" rel="stylesheet">
    <style type="text/css">
        .treeview .list-group-item {
            max-width: 350px;
            white-space: pre-wrap;
            word-wrap: break-word;
            background-color: unset;
        }
        .treeview .list-group-item:not(.node-disabled):hover {
            background-color: #fff;
        }
        .treeview .list-group-item span {
            display: inline;
        }
    </style>
</head>
<body ng-app="content-app" ng-controller="content-controller">
<div class="container-fluid animated fadeInDown">
    <div class="bw-nav">
        <div class="row">
            <ol class="breadcrumb">
                <li class="active">任务调度</li>
            </ol>
            <a class="bw-refresh" onclick="location.reload()" title="刷新">
                <i class="fa fa-refresh" style="font-size: 18px"></i>
            </a>
        </div>
    </div>
    <div class="bw-body">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-12 search-form">
                    <form class="form-inline" ng-submit="options.mypage.toFirst()">
                        <div class="form-group" th:if="${session.user.root}">
                            <label for="query_select_user">用户</label>
                            <select id="query_select_user" class="selectpicker show-tick" data-live-search="true"
                                    ng-model="options.query.uid" ng-options="item.id as item.username for item in userList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="query_select_type">类型</label>
                            <select id="query_select_type" class="selectpicker show-tick"
                                    ng-model="options.query.type" ng-options="item.value as item.name for item in schedulingTypeList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="query_select_script">脚本</label>
                            <select id="query_select_script" class="selectpicker show-tick" data-live-search="true"
                                    ng-model="options.query.scriptId" ng-options="item.id as item.name for item in scriptList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">搜索</button>
                            <button type="button" class="btn btn-primary" ng-click="onNewItem()">新增</button>
                        </div>
                    </form>
                </div>
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>
                                        操作
                                    </th>
                                    <th th:if="${session.user.root}">
                                        用户
                                    </th>
                                    <th class="order" ng-click="sort('type', asc)">
                                        <div>类型</div>
                                        <div>
                                            <i class="glyphicon glyphicon-triangle-top" ng-class="(title === 'type' && asc === true) ? 'active' : ''"></i>
                                            <i class="glyphicon glyphicon-triangle-bottom" ng-class="(title === 'type' && asc === false) ? 'active' : ''"></i>
                                        </div>
                                    </th>
                                    <th>
                                        脚本
                                    </th>
                                    <th>
                                        执行/监测周期
                                    </th>
                                    <th>
                                        是否启用
                                    </th>
                                    <th class="order" ng-click="sort('lastExecuteTime', asc)">
                                        <div>上一次调度</div>
                                        <div>
                                            <i class="glyphicon glyphicon-triangle-top" ng-class="(title === 'lastExecuteTime' && asc === true) ? 'active' : ''"></i>
                                            <i class="glyphicon glyphicon-triangle-bottom" ng-class="(title === 'lastExecuteTime' && asc === false) ? 'active' : ''"></i>
                                        </div>
                                    </th>
                                    <th class="order" ng-click="sort('createTime', asc)">
                                        <div>创建时间</div>
                                        <div>
                                            <i class="glyphicon glyphicon-triangle-top" ng-class="(title === 'createTime' && asc === true) ? 'active' : ''"></i>
                                            <i class="glyphicon glyphicon-triangle-bottom" ng-class="(title === 'createTime' && asc === false) ? 'active' : ''"></i>
                                        </div>
                                    </th>
                                    <th class="order" ng-click="sort('updateTime', asc)">
                                        <div>修改时间</div>
                                        <div>
                                            <i class="glyphicon glyphicon-triangle-top" ng-class="(title === 'updateTime' && asc === true) ? 'active' : ''"></i>
                                            <i class="glyphicon glyphicon-triangle-bottom" ng-class="(title === 'updateTime' && asc === false) ? 'active' : ''"></i>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in options.items | orderBy : title : !asc">
                                    <td>
                                        <p class="operate">
                                            <span ng-click="onEditItem(item)">
                                                <i class="glyphicon glyphicon-pencil" aria-hidden="true" title="编辑"></i>
                                            </span><br/>
                                            <span ng-click="onOpenLog(item)">
                                                <i class="glyphicon glyphicon-time" aria-hidden="true" title="日志"></i>
                                            </span><br/>
                                            <span class="remove" id="{{item.id}}_removeBtn" ng-click="onRemoveItem(item)">
                                                <i class="glyphicon glyphicon-trash" aria-hidden="true" title="删除"></i>
                                            </span>
                                        </p>
                                    </td>
                                    <td th:if="${session.user.root}">
                                        {{userMap[item.uid].username}}
                                    </td>
                                    <td>
                                        {{schedulingTypeMap[item.type].name}}
                                    </td>
                                    <td>
                                        <span id="{{item.id}}"></span>
                                    </td>
                                    <td>
                                        <p style="margin-bottom: 1px;">
                                            <span class="badge">from: {{item.startTime}}</span>
                                        </p>
                                        <p style="margin-bottom: 1px;" ng-if="item.cron != null">
                                            <span class="badge" style="max-width: 200px; white-space: pre-wrap; word-wrap: break-word;">{{item.cron}}</span>
                                        </p>
                                        <p style="margin-bottom: 1px;" ng-if="item.cron == null">
                                            <span class="badge" style="max-width: 200px;">
                                                <span ng-if="item.cycle == 1">每{{item.intervals}}分钟</span>
                                                <span ng-if="item.cycle == 2">每小时{{item.minute}}分</span>
                                                <span ng-if="item.cycle == 3">每天{{item.hour}}点{{item.minute}}分</span>
                                                <span ng-if="item.cycle == 4" style="white-space: pre-wrap; word-wrap: break-word;">每周{{item.weekName}}{{item.hour}}点{{item.minute}}分</span>
                                            </span>
                                        </p>
                                        <p style="margin-bottom: 1px;">
                                            <span class="badge">to: {{item.endTime}}</span>
                                        </p>
                                    </td>
                                    <td>
                                        <label class="label label-{{booleanTypeMap[item.enabled].style}}">
                                            {{booleanTypeMap[item.enabled].name}}
                                        </label>
                                    </td>
                                    <td>
                                        {{item.lastExecuteTime}}
                                    </td>
                                    <td>
                                        {{item.createTime}}
                                    </td>
                                    <td>
                                        {{item.updateTime}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <mypage ng-model="options"></mypage>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<script src="../libs/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../libs/bootstrap-select/i18n/defaults-zh_CN.js" type="text/javascript"></script>
<script src="../libs/bootstrap-treeview/bootstrap-treeview.min.js" type="text/javascript"></script>
<script src="../libs/angular-1.3.9/angular.min.js" type="text/javascript"></script>
<script src="../libs/angular-1.3.9/myangular.js" type="text/javascript"></script>
<script src="../js/common.js" type="text/javascript"></script>
<script src="../libs/laydate/laydate.js" type="application/javascript"></script>
<script th:inline="javascript">
    var user = [[${session.user}]];
    var app = angular.module('content-app', []);
    registerHttpInterceptor(app);
    registerPage(app);
    app.controller('content-controller', function ($scope, $http, $timeout) {
        if (user.root) {
            getAuthUser($scope, $http);
        }
        appendSchedulingType($scope);
        getScript($scope, $http);
        appendBooleanType($scope);
        appendWeek($scope);
        defineSort($scope);

        $scope.scriptIconClass = {
            0: 'icon-shell',
            1: 'icon-spark',
            2: 'icon-spark',
            3: 'icon-flink',
            4: 'icon-flink'
        };

        //新增
        $scope.onNewItem = function () {
            if (parent.xadmin) {
                parent.xadmin.reloadScheduling = $scope.reload;
                parent.xadmin.add_tab('任务调度新增', 'scheduling/edit.html');
            } else {
                window.open('./edit.html', '任务调度新增');
            }
        };

        //编辑
        $scope.onEditItem = function (item) {
            if (parent.xadmin) {
                parent.xadmin.reloadScheduling = $scope.reload;
                parent.xadmin.add_tab('任务调度编辑', 'scheduling/edit.html?id=' + item.id);
            } else {
                window.open('./edit.html?id=' + item.id, '任务调度编辑');
            }
        };

        //执行日志
        $scope.onOpenLog = function (item) {
            if (parent.xadmin) {
                parent.xadmin.open('任务调度 - 执行日志', 'script/cmd_record/list.html?schedulingId=' + item.id);
            } else {
                window.open('../script/cmd_record/list.html?schedulingId=' + item.id);
            }
        };

        $scope.onRemoveItem = function (item) {
            removeItem('./delete.api', item, $http, $scope.reload);
        };

        // 获取数据列表
        $scope.options = {
            query: {},
            listUrl: './getpage.api',
            reloadAfter : function (items) {
                items.forEach(function (item) {
                    var weekName = [];
                    if (item.week !== null && item.week.length > 0) {
                        item.week.forEach(function (value) {
                            weekName.push($scope.weekMap[value].name);
                        })
                    }
                    item.weekName = weekName;
                    $timeout(function () {
                        $('#' + item.id).treeview({
                            data: item.nodeTree,
                            showBorder: false
                        })
                    }, 50)
                })
            }
        };

        // 刷新
        $scope.reload = function () {
            $scope.options.mypage.reload();
        };

    });

</script>
</body>
</html>