JimV-C/templates/guest_boot_jobs.html

{% extends "layout.html" %}
{% block head %}
    {{ super() }}
    <style type="text/css">

        @media (min-width: 768px) {
            .form-horizontal .control-label {
                text-align: left;
            }
        }

        label>span {
            color: deepskyblue;
        }

        .table {
            font-size: 12px;
            border-width: 1px;
            line-height: 20px;
        }
        .table > thead > tr > th,
        .table > tfoot > tr > th {
            color: #999999;
            font-weight: normal;
            border-bottom: 0 solid #e1e6eb;
            background-color: #F5F6FA;
        }
        
        .table > tbody > tr > td {
            color: #424547;
        }

        .table-bordered > tbody > tr {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .table-bordered > thead > tr > th,
        .table-bordered > tbody > tr > th,
        .table-bordered > tfoot > tr > th,
        .table-bordered > thead > tr > td,
        .table-bordered > tbody > tr > td,
        .table-bordered > tfoot > tr > td {
            border-style: solid;
            border-width: 1px 0 0 0;
        }

        .btn,
        .form-control,
        .modal-content {
            border-radius: 0 !important;
        }
    </style>

{% endblock head %}
{% block content %}

<script type="text/javascript">
    var resource_path = window.location.pathname;
    var cur_url = resource_path;

    $(document).ready(function() {
        $('#add_boot_job_modal').on('show.bs.modal', function (me) {
            refresh_boot_job_selectpicker($('#boot_job_selector'));
        });
        $('#add_guest_boot_job_form').formValidation({
            framework: 'bootstrap4',
            icon: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            },
            // Since the Bootstrap Button hides the radio and checkbox
            // We exclude the disabled elements only
            excluded: ':disabled',
            locale: 'zh_CN',
            fields: {
                boot_job_selector: {
                    validators: {
                        notEmpty: {}
                    }
                }
            }
        })
        .on('success.field.fv', function(e, data) {
            if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
                data.fv.disableSubmitButtons(true);
            }
        });
    });

    function refresh() {
        cur_url = resource_path;
        window.location.href=cur_url;
    }

    function refresh_boot_job_selectpicker(selectpicker) {
        $.ajax({
            url : '/api/boot_jobs?filter=use_for:eq:2',
            type : 'GET',
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            error : function() {
            },
            success : function(data, textStatus, xhr) {
                selectpicker.empty();
                $.each(data.data, function(k, v) {
                    selectpicker.append(
                        $('<option>', {value: v['id'], text: v['name'], 'data-subtext': v['remark']})
                    );
                });
                selectpicker.selectpicker('refresh');
            }
        });
    }

    function add_boot_job(id) {
        $.ajax({
            url : '/api/guests/_boot_jobs/{{ uuid }}/' + id,
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('启动作业添加指令发送失败！');
            },
            success : function() {
                alter_success('启动作业添加指令发送成功！');
                refresh();
            }
        });
    }

    function remove(id) {
        $.ajax({
            url : '/api/guests/_boot_jobs/{{ uuid }}/' + id,
            type : 'DELETE',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('启动作业删除指令发送失败！');
            },
            success : function() {
                alter_success('启动作业删除指令发送成功！');
                refresh();
            }
        });
    }

    function delete_at(me) {
        var id = $('#boot_job_id').val();
        remove(id);
        $('#delete_modal').modal('hide');
    }

    function add_boot_job_at(me) {
        var id = $('#boot_job_selector').val();
        add_boot_job(id);
        $('#add_boot_job_modal').modal('hide');
    }
</script>
<div class="panel">
    <div class="panel-body">
        <h3 class="title-hero" style="font-size: 24px;">
            启动作业(<a href="/guest/detail/{{ guest_ret.data.uuid }}" style="color: #0275d8;">{{ guest_ret.data.label }}/{{ guest_ret.data.remark }}</a>)
        </h3>
        <div>
            <div id="datatable-row-highlight_wrapper" class="dataTables_wrapper form-inline">
                <div class="row" style="padding: 10px 10px 10px 0; width: 100%;">
                    <div class="col-sm-12" style="padding-right: 0;">
                        <h4 style="color: orange; {% if guest_boot_jobs_ret.data.ttl < 1 %}display: none;{% endif %}">下列启动作业将在
                            <span style="color: #b94a48; {% if guest_boot_jobs_ret.data.ttl // 60 == 0 %}display: none;{% endif %}">{{ guest_boot_jobs_ret.data.ttl // 60 }}分</span>
                            <span style="color: #b94a48; {% if guest_boot_jobs_ret.data.ttl % 60 == 0 %}display: none;{% endif %}">{{ guest_boot_jobs_ret.data.ttl % 60 }}秒</span>
                            <span>后失效</span>
                        </h4>
                        <div class="pull-right">
                            <button class="btn btn-default" onclick="refresh()" style="border-radius: 0;"><span class="glyph-icon icon-elusive-arrows-cw"></span></button>
                            <a class="btn btn-info" href="javascript:;" data-toggle="modal" data-target="#add_boot_job_modal" style="border-radius: 0; padding-left: 40px; padding-right: 40px;">添加启动作业</a>
                        </div>
                    </div>
                </div>
                <table id="boot_job_list" class="table table-bordered table-hover" cellspacing="0" width="100%" role="grid"
                       style="width: 100%; margin-bottom: 0; border-bottom-width: 0;">
                <thead>
                <tr role="row">
                    <th style="display: none;">ID</th>
                    <th width="280px;">名称</th>
                    <th>作用域</th>
                    <th width="600px;">备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for item in guest_boot_jobs_ret.data.boot_jobs %}
                <tr role="row" class="odd">
                    <td style="display: none;">{{ item }}</td>
                    <td>
                        <div>
                            <a href="/operate_rules?boot_job_id={{ item }}"><p style="display: inline-block;">{{ boot_jobs_mapping_by_id[item | int].name }}</p></a>
                        </div>
                    </td>
                    <td>
                        {% if boot_jobs_mapping_by_id[item | int].use_for == 0 %}
                            <span style="color: #8800FF;">模板</span>
                        {% elif boot_jobs_mapping_by_id[item | int].use_for == 1 %}
                            <span style="color: #3333FF;">系统</span>
                        {% elif boot_jobs_mapping_by_id[item | int].use_for == 2 %}
                            <span style="color: #00BB00;">用户</span>
                        {% else %}
                            <span style="color: #990000;">未知</span>
                        {% endif %}
                    </td>
                    <td>
                        <div>
                            <p style="display: inline-block;">{{ boot_jobs_mapping_by_id[item | int].remark }}</p>
                        </div>
                    </td>
                    <td>
                        <div class="dropdown inline-block">
                            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                                更多
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="javascript:;" data-toggle="modal" data-target="#delete_modal"
                                       onclick="$('#boot_job_id').val($(this).parent().parent().parent().parent().parent().children()[0].textContent);
                                       $('#delete_instance_desc').text($(this).parent().parent().parent().parent().parent().children()[1].textContent)">
                                        删除
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
                </table>

                <table class="table table-bordered" style="border-top-width: 0; z-index: 99; position: sticky; bottom: 0;">
                    <tfoot>
                    <tr style="height: 70px;">
                        <th>
                            <div class="row">
                                <div class="col-sm-6">
                                </div>
                                <div class="col-sm-3" style="font-size: 12px; padding-top: 5px; text-align: right;">
                                </div>
                                <div class="col-sm-3" style="text-align: left;">
                                </div>
                            </div>
                        </th>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

<input id="boot_job_id" title="启动作业 ID" class="form-control" name="boot_job_id" hidden>

<div class="modal" id="delete_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">删除启动作业：</h4>
            </div>
            <div class="modal-body">
                <p>你确定要删除该启动作业吗？</p>
                <h3 style="color: orangered;" id="delete_instance_desc"></h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="delete_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="add_boot_job_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加启动作业：</h4>
            </div>
            <div class="modal-body" style="padding-top: 0; padding-bottom: 0;">
                <div class="example-box-wrapper">
                    <form id="add_guest_boot_job_form" class="form-horizontal bordered-row">
                        <div class="form-group">
                            <div class="col-sm-2"></div>
                            <label class="col-sm-2 control-label"><span class="glyph-icon icon-list-alt"></span>&nbsp;&nbsp;启动作业</label>
                            <div class="col-sm-6">
                                <select id="boot_job_selector" name="boot_job_selector" title="启动作业" class="selectpicker">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-4"></div>
                            <div class="col-sm-6 pull-right">
                                <button type="submit" class="btn btn-blue-alt" style="width: 180px; height: 40px; font-size: 16px;" onclick="add_boot_job_at();" disabled>添加</button>
                                <button class="btn btn-default" style="width: 64px; height: 40px; font-size: 16px;" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}