Arch1Panel/apps/nps/0.34.7/web/views/index/list.html

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5><span id="langtag"></span><span></span></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="content">
                    <div class="table-responsive">
                        <div id="toolbar">
                            {{ if or (not .type) (ne .type "file") }}
                            <a class="btn btn-primary dim" href="{{.web_base_url}}/index/add?type={{.type}}&client_id={{.client_id}}">
                                <i class="fa fa-fw fa-lg fa-plus"></i>
                                <span langtag="word-add"></span>
                            </a>
                            {{ end }}
                        </div>
                        <table class="table-striped table-hover" data-mobile-responsive="true" id="taskList_table"></table>
                    </div>
                </div>
                <div class="ibox-content">
                    <table id="table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    name = '{{.name}}:'.replace(/\s*/g, "")
    $('#langtag').attr('langtag', 'page-list' + name.replace(/:.*/, "")).next().text(name.split(":")[1])

    /*bootstrap table*/
    $('#table').bootstrapTable({
        toolbar: "#toolbar",
        method: 'post', // 服务器数据的请求方式 get or post
        url: "{{.web_base_url}}/index/gettunnel", // 服务器数据的加载地址
        queryParams: function (params) {
            return {
                "offset": params.offset,
                "limit": params.limit,
                "type": {{.type}},
                "client_id": {{.client_id}},
                "search": params.search,
                "sort": params.sort,
                "order": params.order
            }
        },
        search: true,
        contentType: "application/x-www-form-urlencoded",
        striped: true, // 设置为true会有隔行变色效果
        showHeader: true,
        showColumns: true,
        showRefresh: true,
        pagination: true, //分页
        sidePagination: 'server', //服务器端分页
        pageNumber: 1,
        pageList: [5, 10, 20, 50, 100, 'all'],
        cookie: true,
        cookieIdTable: '{{.type}}',
        cookieStorage: 'localStorage',
        detailView: true,
        smartDisplay: true, // 智能显示 pagination 和 cardview 等
        onExpandRow: function () {$('body').setLang ('.detail-view');},
        onLoadSuccess:function (data) {$('body').setLang ('.detail-view');},
        onPostBody: function (data) { if ($(this)[0].locale != undefined ) $('body').setLang ('#table'); },
        detailFormatter: function (index, row, element) {
            tmp = '<b langtag="word-exportflow"></b>: <span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.ExportFlow) + '</span>&emsp;'
                + '<b langtag="word-inletflow"></b>: <span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.InletFlow) + '</span>&emsp;'
                + '<b langtag="word-crypt"></b>: <span langtag="word-' + row.Client.Cnf.Crypt + '"></span>&emsp;'
                + '<b langtag="word-compress"></b>: <span langtag="word-' + row.Client.Cnf.Compress + '"></span>&emsp;'
                + '<b langtag="word-ishttp"></b>: <span langtag="word-' + row.IsHttp + '"></span>&emsp;<br/><br>'
                + '<b langtag="word-flowlimit"></b>: <span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow_limit\'})">' + row.Flow.FlowLimit + 'MB</span>&emsp;'
                + '<b langtag="word-timelimit"></b>: <span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clear\', {\'id\':' + row.Id + ', \'mode\': \'time_limit\'})">' + row.Flow.TimeLimit + '</span>&emsp;'
            if (row.Mode == "mixProxy") {
                return tmp + "<br/><br>"
                    + '<b langtag="word-basicusername"></b>: ' + row.Client.Cnf.U + '&emsp;'
                    + '<b langtag="word-basicpassword"></b>: ' + row.Client.Cnf.P + '&emsp;<br/><br>'
                    + '<b langtag="word-auth"></b>: ' + (row.UserAuth && row.UserAuth.Content ? row.UserAuth.Content : '') + '&emsp;<br/><br>'
            }
            if (row.Mode == "file") {
                return tmp + "<br/><br>"
                    + '<b langtag="word-localpath"></b>: ' + row.LocalPath + '&emsp;'
                    + '<b langtag="word-stripprefix"></b>: ' + row.StripPre + '&emsp;'
            }
            if (row.Mode == "p2p") {
                return tmp + "<br/><br>"
                    + '<b langtag="word-commandaccessp2p"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server={{.addr}} -vkey=" + row.Client.VerifyKey
                    + " -type=" + {{.bridgeType}} + " -password=" + row.Password + " -target=" + row.Target.TargetStr + "</code>" + "<br/><br>"
                    + '<b langtag="word-commandaccessp2ps"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server={{.addr}} -vkey=" + row.Client.VerifyKey
                    + " -type=" + {{.bridgeType}} + " -password=" + row.Password + " -local_type=p2ps" + "</code>" + "<br/><br>"
                    + '<b langtag="word-commandaccessp2pt"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server={{.addr}} -vkey=" + row.Client.VerifyKey
                    + " -type=" + {{.bridgeType}} + " -password=" + row.Password + " -local_type=p2pt" + "</code>"
            }
            if (row.Mode == "secret") {
                return tmp + "<br/><br>" + '<b langtag="word-commandaccess"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server={{.addr}} -vkey=" + row.Client.VerifyKey
                    + " -type=" + {{.bridgeType}} + " -password=" + row.Password + " -local_type=secret" + "</code>"
            }
            return tmp
        },
        // 表格的列
        columns: [
            {
                field: 'Id', //域值
                title: '<span langtag="word-id"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'Client.Id', //域值
                title: '<span langtag="word-clientid"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    var text = row.Client.Remark ? (row.Client.Id + ' · ' + row.Client.Remark) : row.Client.Id
                    return '<span onclick="copyText(\'' + row.Client.VerifyKey + '\')">' + text + '</span>'
                }
            },
            {
                field: 'Remark', //域值
                title: '<span langtag="word-remark"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'Client.VerifyKey', //域值
                title: '<span langtag="word-verifykey"></span>', //标题
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {{ if not .type }}
            {
                field: 'Mode', //域值
                title: '<span langtag="word-scheme"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span langtag="scheme-' + value + '"></span>'
                }
            },
            {{ end }}
            {
                field: 'Port', //域值
                title: '<span langtag="word-port"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {{ if or (not .type) (eq .type "tcp") (eq .type "udp") (eq .type "secret") (eq .type "p2p") }}
            {
                field: 'Target.TargetStr', //域值
                title: '<span langtag="word-target"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {{ end }}
            {{ if or (not .type) (eq .type "secret") (eq .type "p2p") }}
            {
                field: 'Password', //域值
                title: '<span langtag="word-identificationkey"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {{ end }}
            {{ if and .type (eq .type "file") }}
            {
                field: 'LocalPath', //域值
                title: '<span langtag="word-localpath"></span>', //标题
                halign: 'center',
                visible: true //false表示不显示
            },
            {
                field: 'StripPre', //域值
                title: '<span langtag="word-stripprefix"></span>', //标题
                halign: 'center',
                visible: true //false表示不显示
            },
            {{ end }}
            {{ if and .type (eq .type "mixProxy") }}
            {
                field: 'HttpProxy', //域值
                title: '<span langtag="word-httpproxy"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    btn_group = '<div class="btn-group">'
                    if (value) {
                        btn_group += '<a onclick="submitform(\'stop\', \'{{.web_base_url}}/index/stop\', {\'id\':' + row.Id + ', \'mode\': \'http\'})" class="btn btn-outline btn-warning"><i class="fa fa-pause"></i></a>'
                    } else {
                        btn_group += '<a onclick="submitform(\'start\', \'{{.web_base_url}}/index/start\', {\'id\':' + row.Id + ', \'mode\': \'http\'})" class="btn btn-outline btn-primary"><i class="fa fa-play"></i></a>'
                    }
                    btn_group += '</div>'
                    return btn_group

                }
            },
            {
                field: 'Socks5Proxy', //域值
                title: '<span langtag="word-socks5proxy"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    btn_group = '<div class="btn-group">'
                    if (value) {
                        btn_group += '<a onclick="submitform(\'stop\', \'{{.web_base_url}}/index/stop\', {\'id\':' + row.Id + ', \'mode\': \'socks5\'})" class="btn btn-outline btn-warning"><i class="fa fa-pause"></i></a>'
                    } else {
                        btn_group += '<a onclick="submitform(\'start\', \'{{.web_base_url}}/index/start\', {\'id\':' + row.Id + ', \'mode\': \'socks5\'})" class="btn btn-outline btn-primary"><i class="fa fa-play"></i></a>'
                    }
                    btn_group += '</div>'
                    return btn_group
                }
            },
            {{ end }}
            {
                field: 'InletFlow', //域值
                title: '<span langtag="word-inletflow"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.InletFlow) + '</span>'
                }
            },
            {
                field: 'ExportFlow', //域值
                title: '<span langtag="word-exportflow"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.ExportFlow) + '</span>'
                }
            },
            {
                field: 'TotalFlow', //域值
                title: '<span langtag="word-totalflow"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.InletFlow + row.Flow.ExportFlow) + '</span>'
                }
            },
            {
                field: 'NowConn', //域值
                title: '<span langtag="word-nowconn"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'Status', //域值
                title: '<span langtag="word-status"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span class="badge badge-primary" langtag="word-open"></span>'
                    } else {
                        return '<span class="badge badge-badge" langtag="word-close"></span>'
                    }
                }
            },
            {
                field: 'RunStatus', //域值
                title: '<span langtag="word-runstatus"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        if (row.Mode && row.Mode == "tcp") {
                            return '<a href="' + 'http://{{.ip}}:' + row.Port + '" target="_blank"><span class="badge badge-primary" langtag="word-open"></span></a>'
                        } else {
                            return '<span class="badge badge-primary" langtag="word-open"></span>'
                        }
                    } else {
                        return '<span class="badge badge-badge" langtag="word-close"></span>'
                    }
                }
            },
            {
                field: 'Client.IsConnect', //域值
                title: '<span langtag="word-clientstatus"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        if (row.Mode && row.Mode == "tcp") {
                            return '<a href="' + (row.IsHttp ? 'http://' : 'https://') + '{{.ip}}:' + row.Port + '" target="_blank"><span class="badge badge-primary" langtag="word-online"></span></a>'
                        } else {
                            return '<span class="badge badge-primary" langtag="word-online"></span>'
                        }
                    } else {
                        return '<span class="badge badge-badge" langtag="word-offline"></span>'
                    }
                }
            },
            {
                field: 'option', //域值
                title: '<span langtag="word-option"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: true, //false表示不显示
                formatter: function (value, row, index) {
                    btn_group = '<div class="btn-group">'
                    if (row.Status) {
                        btn_group += "<a onclick=\"submitform('stop', '{{.web_base_url}}/index/stop', {'id':" + row.Id
                        btn_group += '})" class="btn btn-outline btn-warning"><i class="fa fa-pause"></i></a>'
                    } else {
                        btn_group += "<a onclick=\"submitform('start', '{{.web_base_url}}/index/start', {\'id\':" + row.Id
                        btn_group += '})" class="btn btn-outline btn-primary"><i class="fa fa-play"></i></a>'
                    }
                    btn_group += "<a onclick=\"submitform('delete', '{{.web_base_url}}/index/del', {'id':" + row.Id
                    btn_group += '})" class="btn btn-outline btn-danger"><i class="fa fa-trash"></i></a>'
                    if (row.Mode && row.Mode !== "file") {
                        btn_group += '<a href="{{.web_base_url}}/index/edit?id=' + row.Id + '" class="btn btn-outline btn-success"><i class="fa fa-edit"></i></a>'
                    }
                    btn_group += '</div>'
                    return btn_group
                }
            }
        ]
    });
</script>