diff --git a/assets/static/css/index.css b/assets/static/css/index.css index 86ff1f4..4dc1af2 100644 --- a/assets/static/css/index.css +++ b/assets/static/css/index.css @@ -145,8 +145,8 @@ section.server-info .chart-info > .chart-count { margin-top: 30px; } -section.server-info .chart-info #trafficChart, -section.server-info .chart-info #countChart { +section.server-info .chart-info #trafficPieChart, +section.server-info .chart-info #countPieChart { width: 400px; height: 250px; } @@ -168,3 +168,7 @@ section.server-info .chart-info #countChart { .proxy-info .layui-col-xs6 .layui-row{ padding: 0; } + +#trafficBarChart{ + height: 100%; +} diff --git a/assets/static/js/index-proxy-list.js b/assets/static/js/index-proxy-list.js index f89f241..18294a2 100644 --- a/assets/static/js/index-proxy-list.js +++ b/assets/static/js/index-proxy-list.js @@ -34,25 +34,47 @@ var loadProxyInfo = (function ($) { function renderProxyListTable(data, proxyType) { var $section = $('#content > section'); var cols = [ - {field: 'id', title: '', width: 30, templet: '#toggleProxyInfoArrowTemplate'}, + {field: 'id', type: 'space', width: 60, align: 'center', templet: '#toggleProxyInfoArrowTemplate'}, {field: 'name', title: 'Name', sort: true}, { - field: 'port', title: 'Port', sort: true, templet: '{{ d.conf.remote_port }}' + field: 'port', title: 'Port', width: '12%', sort: true, templet: '{{ d.conf.remote_port }}' }, - {field: 'cur_conns', title: 'Connections', sort: true}, + {field: 'cur_conns', title: 'Connections', minWidth: 140, width: '12%', sort: true}, { - field: 'today_traffic_in', title: 'Traffic In', sort: true, templet: function (d) { + field: 'today_traffic_in', + title: 'Traffic In', + minWidth: 140, + width: '12%', + sort: true, + templet: function (d) { return size(d.today_traffic_in); } }, { - field: 'today_traffic_out', title: 'Traffic Out', sort: true, templet: function (d) { + field: 'today_traffic_out', + title: 'Traffic Out', + minWidth: 140, + width: '12%', + sort: true, + templet: function (d) { return size(d.today_traffic_out); } }, - {field: 'client_version', title: 'ClientVersion', sort: true}, - {field: 'status', title: 'Status', sort: true} + {field: 'client_version', title: 'ClientVersion', minWidth: 140, width: '12%', sort: true}, + {field: 'status', title: 'Status', width: '12%', sort: true} ]; + + proxyType = proxyType.toLowerCase(); + if (proxyType === 'http' || proxyType === 'https') { + data.forEach(function (temp) { + if (proxyType === 'http') { + temp.conf.remote_port = http_port; + } else if (proxyType === 'https') { + temp.conf.remote_port = https_port; + } + }); + } + var proxyListTable = layui.table.render({ elem: '#proxyListTable', height: $section.height(), @@ -89,5 +111,113 @@ var loadProxyInfo = (function ($) { } } + /** + * load traffic statistics data + */ + function loadTrafficStatistics() { + var proxyName = $(this).closest('.layui-row').find('input').val(); + var loading = layui.layer.load(); + $.getJSON('/proxy/api/traffic/' + proxyName).done(function (result) { + if (result.success) { + renderTrafficChart(JSON.parse(result.data)); + } else { + layui.layer.msg(result.message); + } + }).always(function () { + layui.layer.close(loading); + }); + } + + /** + * render traffic statistics chart + * @param data traffic data + */ + function renderTrafficChart(data) { + var html = layui.laytpl($('#trafficStaticTemplate').html()).render(); + var dates = []; + var now = new Date(); + for (var i = 0; i < data.traffic_in.length; i++) { + dates.push(now.getFullYear() + "/" + (now.getMonth() + 1) + "/" + now.getDate()); + now.setDate(now.getDate() - 1); + } + layui.layer.open({ + title: 'Traffic Statistics', + type: 1, + content: html, + area: ['800px', '400px'], + success: function () { + var chartDom = document.getElementById('trafficBarChart'); + var chart = echarts.init(chartDom); + var option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + formatter: function (data) { + var html = '' + if (data.length > 0) { + html += data[0].name + '
' + } + for (var v of data) { + var colorEl = '' + html += colorEl + v.seriesName + ': ' + size(v.value) + '
' + } + return html + }, + }, + legend: { + data: ['Traffic In', 'Traffic Out'], + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + data: dates.reverse(), + }, + ], + yAxis: [ + { + type: 'value', + axisLabel: { + formatter: function (value) { + return size(value) + }, + }, + }, + ], + series: [ + { + name: 'Traffic In', + type: 'bar', + data: data.traffic_in.reverse(), + }, + { + name: 'Traffic Out', + type: 'bar', + data: data.traffic_out.reverse(), + }, + ], + }; + + option && chart.setOption(option); + } + }); + } + + /** + * document event + */ + (function bindDocumentEvent() { + $(document).on('click.trafficStatistics', '.traffic-statistics', function () { + loadTrafficStatistics.call(this); + }); + })(); + return loadProxyInfo; })(layui.$); \ No newline at end of file diff --git a/assets/static/js/index-server-info.js b/assets/static/js/index-server-info.js index 3ca5303..ce32975 100644 --- a/assets/static/js/index-server-info.js +++ b/assets/static/js/index-server-info.js @@ -17,6 +17,8 @@ var loadServerInfo = (function ($) { if (result.success) { var data = JSON.parse(result.data); data.proxy_counts = 0; + http_port = data.vhost_http_port; + https_port = data.vhost_https_port; for (var proxy in data.proxy_type_count) { data.proxy_counts = data.proxy_counts + data.proxy_type_count[proxy]; } @@ -46,11 +48,12 @@ var loadServerInfo = (function ($) { * @param data traffic data */ function renderTrafficChart(data) { + var chartLegend = ['total_traffic_in', 'total_traffic_out']; var chartData = [ {value: data.total_traffic_in, name: 'Traffic In'}, {value: data.total_traffic_out, name: 'Traffic Out'} ]; - var chartDom = document.getElementById('trafficChart'); + var chartDom = document.getElementById('trafficPieChart'); var chart = echarts.init(chartDom); var option = { title: { @@ -67,7 +70,7 @@ var loadServerInfo = (function ($) { legend: { orient: 'vertical', left: 'left', - data: ['total_traffic_in', 'total_traffic_out'], + data: chartLegend, }, series: [ { @@ -95,7 +98,7 @@ var loadServerInfo = (function ($) { */ function renderCountChart(data) { var proxies = data.proxy_type_count; - var charLegend = []; + var chartLegend = []; var chartData = []; for (var type in proxies) { @@ -103,11 +106,10 @@ var loadServerInfo = (function ($) { name: type.toUpperCase(), value: proxies[type] }; - charLegend.push(type); + chartLegend.push(type); chartData.push(temp); } - - var chartDom = document.getElementById('countChart'); + var chartDom = document.getElementById('countPieChart'); var chart = echarts.init(chartDom); var option = { title: { @@ -118,13 +120,13 @@ var loadServerInfo = (function ($) { tooltip: { trigger: 'item', formatter: function (v) { - return v.value; - }, + return v.value + ' (' + v.percent + '%)'; + } }, legend: { orient: 'vertical', left: 'left', - data: charLegend, + data: chartLegend, }, series: [ { diff --git a/assets/static/js/index-user-list.js b/assets/static/js/index-user-list.js index e7d24a2..56e9115 100644 --- a/assets/static/js/index-user-list.js +++ b/assets/static/js/index-user-list.js @@ -1,4 +1,91 @@ var loadUserList = (function ($) { + var i18n = {}; + var apiType = { + Remove: 1, + Enable: 2, + Disable: 3 + }; + var verifyRules = { + user: function (value, item) { + var result = verifyUser(value); + if (!result.valid) { + return i18n['UserFormatError']; + } + if (item != null) { + if (typeof item === "function") { + item && item(result.trim); + } else { + $(item).val(result.trim); + } + } + }, + token: function (value, item) { + var result = verifyToken(value); + if (!result.valid) { + return i18n['TokenFormatError']; + } + if (item != null) { + if (typeof item === "function") { + item && item(result.trim); + } else { + $(item).val(result.trim); + } + } + }, + comment: function (value, item) { + var result = verifyComment(value); + if (!result.valid) { + return i18n['CommentInvalid']; + } + if (item != null) { + if (typeof item === "function") { + item && item(result.trim); + } else { + $(item).val(result.trim); + } + } + }, + ports: function (value, item) { + var result = verifyPorts(value); + if (!result.valid) { + return i18n['PortsInvalid']; + } + if (item != null) { + if (typeof item === "function") { + item && item(result.trim); + } else { + $(item).val(result.trim); + } + } + }, + domains: function (value, item) { + var result = verifyDomains(value); + if (!result.valid) { + return i18n['DomainsInvalid']; + } + if (item != null) { + if (typeof item === "function") { + item && item(result.trim); + } else { + $(item).val(result.trim); + } + } + }, + subdomains: function (value, item) { + var result = verifySubdomains(value); + if (!result.valid) { + return i18n['SubdomainsInvalid']; + } + if (item != null) { + if (typeof item === "function") { + item && item(result.trim); + } else { + $(item).val(result.trim); + } + } + } + }; + /** * verify user value * @param username @@ -136,114 +223,32 @@ var loadUserList = (function ($) { }; } + /** + * set verify rule of layui.form + */ + (function setFormVerifyRule() { + layui.form.set({ + verIncludeRequired: true, + verify: verifyRules + }); + })(); + /** * load i18n language * @param lang {{}} language json * @param title page title */ function loadUserList(lang, title) { + i18n = lang; $("#title").text(title); var html = layui.laytpl($('#userListTemplate').html()).render(); $('#content').html(html); - var apiType = { - Remove: 1, - Enable: 2, - Disable: 3 - } - - //set verify rules - var verifyRules = { - user: function (value, item) { - var result = verifyUser(value); - if (!result.valid) { - return lang['UserFormatError']; - } - if (item != null) { - if (typeof item === "function") { - item && item(result.trim); - } else { - $(item).val(result.trim); - } - } - }, - token: function (value, item) { - var result = verifyToken(value); - if (!result.valid) { - return lang['TokenFormatError']; - } - if (item != null) { - if (typeof item === "function") { - item && item(result.trim); - } else { - $(item).val(result.trim); - } - } - }, - comment: function (value, item) { - var result = verifyComment(value); - if (!result.valid) { - return lang['CommentInvalid']; - } - if (item != null) { - if (typeof item === "function") { - item && item(result.trim); - } else { - $(item).val(result.trim); - } - } - }, - ports: function (value, item) { - var result = verifyPorts(value); - if (!result.valid) { - return lang['PortsInvalid']; - } - if (item != null) { - if (typeof item === "function") { - item && item(result.trim); - } else { - $(item).val(result.trim); - } - } - }, - domains: function (value, item) { - var result = verifyDomains(value); - if (!result.valid) { - return lang['DomainsInvalid']; - } - if (item != null) { - if (typeof item === "function") { - item && item(result.trim); - } else { - $(item).val(result.trim); - } - } - }, - subdomains: function (value, item) { - var result = verifySubdomains(value); - if (!result.valid) { - return lang['SubdomainsInvalid']; - } - if (item != null) { - if (typeof item === "function") { - item && item(result.trim); - } else { - $(item).val(result.trim); - } - } - } - }; - - layui.form.set({ - verIncludeRequired: true, - verify: verifyRules - }); - var $section = $('#content > section'); layui.table.render({ elem: '#tokenTable', height: $section.height() - $('#searchForm').height() + 8, - text: {none: lang['EmptyData']}, + text: {none: i18n['EmptyData']}, url: '/tokens', method: 'get', where: {}, @@ -254,35 +259,30 @@ var loadUserList = (function ($) { defaultToolbar: false, cols: [[ {type: 'checkbox'}, - {field: 'user', title: lang['User'], width: 150, sort: true}, - {field: 'token', title: lang['Token'], width: 200, sort: true, edit: true}, - {field: 'comment', title: lang['Notes'], sort: true, edit: 'textarea'}, - {field: 'ports', title: lang['AllowedPorts'], sort: true, edit: 'textarea'}, - {field: 'domains', title: lang['AllowedDomains'], sort: true, edit: 'textarea'}, - {field: 'subdomains', title: lang['AllowedSubdomains'], sort: true, edit: 'textarea'}, + {field: 'user', title: i18n['User'], width: 150, sort: true}, + {field: 'token', title: i18n['Token'], width: 200, sort: true, edit: true}, + {field: 'comment', title: i18n['Notes'], sort: true, edit: 'textarea'}, + {field: 'ports', title: i18n['AllowedPorts'], sort: true, edit: 'textarea'}, + {field: 'domains', title: i18n['AllowedDomains'], sort: true, edit: 'textarea'}, + {field: 'subdomains', title: i18n['AllowedSubdomains'], sort: true, edit: 'textarea'}, { field: 'status', - title: lang['Status'], + title: i18n['Status'], width: 100, - templet: '{{d.status? "' + lang['Enable'] + '":"' + lang['Disable'] + '"}}', + templet: '{{d.status? "' + i18n['Enable'] + '":"' + i18n['Disable'] + '"}}', sort: true }, - {title: lang['Operation'], width: 150, toolbar: '#userListOperationTemplate'} + {title: i18n['Operation'], width: 150, toolbar: '#userListOperationTemplate'} ]] }); - /** - * update layui table data - * @param obj table update obj - * @param field update field - * @param trim new value - */ - function updateTableField(obj, field, trim) { - var newData = {}; - newData[field] = trim; - obj.update(newData); - } + bindFormEvent(); + } + /** + * bind event of layui.form + */ + function bindFormEvent() { layui.table.on('edit(tokenTable)', function (obj) { var field = obj.field; var value = obj.value; @@ -368,6 +368,7 @@ var loadUserList = (function ($) { break } }); + layui.table.on('tool(tokenTable)', function (obj) { var data = obj.data; switch (obj.event) { @@ -382,253 +383,267 @@ var loadUserList = (function ($) { break } }); + } - /** - * add user popup - */ - function addPopup() { - layui.layer.open({ - type: 1, - title: lang['NewUser'], - area: ['500px'], - content: layui.laytpl(document.getElementById('addUserTemplate').innerHTML).render(), - btn: [lang['Confirm'], lang['Cancel']], - btn1: function (index) { - if (layui.form.validate('#addUserForm')) { - add(layui.form.val('addUserForm'), index); - } - }, - btn2: function (index) { + /** + * update layui table data + * @param obj table update obj + * @param field update field + * @param trim new value + */ + function updateTableField(obj, field, trim) { + var newData = {}; + newData[field] = trim; + obj.update(newData); + } + + /** + * add user popup + */ + function addPopup() { + layui.layer.open({ + type: 1, + title: i18n['NewUser'], + area: ['500px'], + content: layui.laytpl(document.getElementById('addUserTemplate').innerHTML).render(), + btn: [i18n['Confirm'], i18n['Cancel']], + btn1: function (index) { + if (layui.form.validate('#addUserForm')) { + add(layui.form.val('addUserForm'), index); + } + }, + btn2: function (index) { + layui.layer.close(index); + } + }); + } + + /** + * add user action + * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data + * @param index popup index + */ + function add(data, index) { + var loading = layui.layer.load(); + $.ajax({ + url: '/add', + type: 'post', + contentType: 'application/json', + data: JSON.stringify(data), + success: function (result) { + if (result.success) { + reloadTable(); layui.layer.close(index); - } - }); - } - - /** - * add user action - * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data - * @param index popup index - */ - function add(data, index) { - var loading = layui.layer.load(); - $.ajax({ - url: '/add', - type: 'post', - contentType: 'application/json', - data: JSON.stringify(data), - success: function (result) { - if (result.success) { - reloadTable(); + layui.layer.msg(i18n['OperateSuccess'], function (index) { layui.layer.close(index); - layui.layer.msg(lang['OperateSuccess'], function (index) { - layui.layer.close(index); - }); - } else { - errorMsg(result); - } - }, - complete: function () { - layui.layer.close(loading); + }); + } else { + errorMsg(result); } - }); - } + }, + complete: function () { + layui.layer.close(loading); + } + }); + } - /** - * update user action - * @param before {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} data before update - * @param after {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} data after update - */ - function update(before, after) { - var loading = layui.layer.load(); - $.ajax({ - url: '/update', - type: 'post', - contentType: 'application/json', - data: JSON.stringify({ - before: before, - after: after, - }), - success: function (result) { - if (result.success) { - layui.layer.msg(lang['OperateSuccess']); - } else { - errorMsg(result); - } - }, - complete: function () { - layui.layer.close(loading); + /** + * update user action + * @param before {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} data before update + * @param after {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} data after update + */ + function update(before, after) { + var loading = layui.layer.load(); + $.ajax({ + url: '/update', + type: 'post', + contentType: 'application/json', + data: JSON.stringify({ + before: before, + after: after, + }), + success: function (result) { + if (result.success) { + layui.layer.msg(i18n['OperateSuccess']); + } else { + errorMsg(result); } - }); - } - - /** - * batch remove user popup - * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list - */ - function batchRemovePopup(data) { - if (data.length === 0) { - layui.layer.msg(lang['ShouldCheckUser']); - return; + }, + complete: function () { + layui.layer.close(loading); } - layui.layer.confirm(lang['ConfirmRemoveUser'], { - title: lang['OperationConfirm'], - btn: [lang['Confirm'], lang['Cancel']] - }, function (index) { - operate(apiType.Remove, data, index); - }); - } + }); + } - /** - * batch disable user popup - * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list - */ - function batchDisablePopup(data) { - if (data.length === 0) { - layui.layer.msg(lang['ShouldCheckUser']); - return; - } - layui.layer.confirm(lang['ConfirmDisableUser'], { - title: lang['OperationConfirm'], - btn: [lang['Confirm'], lang['Cancel']] - }, function (index) { - operate(apiType.Disable, data, index); - }); + /** + * batch remove user popup + * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list + */ + function batchRemovePopup(data) { + if (data.length === 0) { + layui.layer.msg(i18n['ShouldCheckUser']); + return; } + layui.layer.confirm(i18n['ConfirmRemoveUser'], { + title: i18n['OperationConfirm'], + btn: [i18n['Confirm'], i18n['Cancel']] + }, function (index) { + operate(apiType.Remove, data, index); + }); + } - /** - * batch enable user popup - * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list - */ - function batchEnablePopup(data) { - if (data.length === 0) { - layui.layer.msg(lang['ShouldCheckUser']); - return; - } - layui.layer.confirm(lang['ConfirmEnableUser'], { - title: lang['OperationConfirm'], - btn: [lang['Confirm'], lang['Cancel']] - }, function (index) { - operate(apiType.Enable, data, index); - }); + /** + * batch disable user popup + * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list + */ + function batchDisablePopup(data) { + if (data.length === 0) { + layui.layer.msg(i18n['ShouldCheckUser']); + return; } + layui.layer.confirm(i18n['ConfirmDisableUser'], { + title: i18n['OperationConfirm'], + btn: [i18n['Confirm'], i18n['Cancel']] + }, function (index) { + operate(apiType.Disable, data, index); + }); + } - /** - * remove one user popup - * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data - */ - function removePopup(data) { - layui.layer.confirm(lang['ConfirmRemoveUser'], { - title: lang['OperationConfirm'], - btn: [lang['Confirm'], lang['Cancel']] - }, function (index) { - operate(apiType.Remove, [data], index); - }); + /** + * batch enable user popup + * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list + */ + function batchEnablePopup(data) { + if (data.length === 0) { + layui.layer.msg(i18n['ShouldCheckUser']); + return; } + layui.layer.confirm(i18n['ConfirmEnableUser'], { + title: i18n['OperationConfirm'], + btn: [i18n['Confirm'], i18n['Cancel']] + }, function (index) { + operate(apiType.Enable, data, index); + }); + } - /** - * disable one user popup - * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data - */ - function disablePopup(data) { - layui.layer.confirm(lang['ConfirmDisableUser'], { - title: lang['OperationConfirm'], - btn: [lang['Confirm'], lang['Cancel']] - }, function (index) { - operate(apiType.Disable, [data], index); - }); + /** + * remove one user popup + * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data + */ + function removePopup(data) { + layui.layer.confirm(i18n['ConfirmRemoveUser'], { + title: i18n['OperationConfirm'], + btn: [i18n['Confirm'], i18n['Cancel']] + }, function (index) { + operate(apiType.Remove, [data], index); + }); + } + + /** + * disable one user popup + * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data + */ + function disablePopup(data) { + layui.layer.confirm(i18n['ConfirmDisableUser'], { + title: i18n['OperationConfirm'], + btn: [i18n['Confirm'], i18n['Cancel']] + }, function (index) { + operate(apiType.Disable, [data], index); + }); + } + + /** + * enable one user popup + * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data + */ + function enablePopup(data) { + layui.layer.confirm(i18n['ConfirmEnableUser'], { + title: i18n['OperationConfirm'], + btn: [i18n['Confirm'], i18n['Cancel']] + }, function (index) { + operate(apiType.Enable, [data], index); + }); + } + + /** + * operate actions + * @param type {apiType} action type + * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list + * @param index popup index + */ + function operate(type, data, index) { + var url; + var extendMessage = ''; + if (type === apiType.Remove) { + url = "/remove"; + extendMessage = ', ' + i18n['RemoveUser'] + i18n['TakeTimeMakeEffective']; + } else if (type === apiType.Disable) { + url = "/disable"; + extendMessage = ', ' + i18n['RemoveUser'] + i18n['TakeTimeMakeEffective']; + } else if (type === apiType.Enable) { + url = "/enable"; + } else { + layer.layer.msg(i18n['OperateError']); + return; } - - /** - * enable one user popup - * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data - */ - function enablePopup(data) { - layui.layer.confirm(lang['ConfirmEnableUser'], { - title: lang['OperationConfirm'], - btn: [lang['Confirm'], lang['Cancel']] - }, function (index) { - operate(apiType.Enable, [data], index); - }); - } - - /** - * operate actions - * @param type {apiType} action type - * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list - * @param index popup index - */ - function operate(type, data, index) { - var url; - var extendMessage = ''; - if (type === apiType.Remove) { - url = "/remove"; - extendMessage = ', ' + lang['RemoveUser'] + lang['TakeTimeMakeEffective']; - } else if (type === apiType.Disable) { - url = "/disable"; - extendMessage = ', ' + lang['RemoveUser'] + lang['TakeTimeMakeEffective']; - } else if (type === apiType.Enable) { - url = "/enable"; - } else { - layer.layer.msg(lang['OperateError']); - return; - } - var loading = layui.layer.load(); - $.post({ - url: url, - type: 'post', - contentType: 'application/json', - data: JSON.stringify({ - users: data - }), - success: function (result) { - if (result.success) { - reloadTable(); + var loading = layui.layer.load(); + $.post({ + url: url, + type: 'post', + contentType: 'application/json', + data: JSON.stringify({ + users: data + }), + success: function (result) { + if (result.success) { + reloadTable(); + layui.layer.close(index); + layui.layer.msg(i18n['OperateSuccess'] + extendMessage, function (index) { layui.layer.close(index); - layui.layer.msg(lang['OperateSuccess'] + extendMessage, function (index) { - layui.layer.close(index); - }); - } else { - errorMsg(result); - } - }, - complete: function () { - layui.layer.close(loading); + }); + } else { + errorMsg(result); } - }); - } + }, + complete: function () { + layui.layer.close(loading); + } + }); + } - /** - * reload user table - */ - function reloadTable() { - var searchData = layui.form.val('searchForm'); - layui.table.reloadData('tokenTable', { - where: searchData - }, true) - } + /** + * reload user table + */ + function reloadTable() { + var searchData = layui.form.val('searchForm'); + layui.table.reloadData('tokenTable', { + where: searchData + }, true) + } - /** - * show error message popup - * @param result - */ - function errorMsg(result) { - var reason = lang['Other Error']; - if (result.code === 1) - reason = lang['ParamError']; - else if (result.code === 2) - reason = lang['UserExist']; - else if (result.code === 3) - reason = lang['ParamError']; - else if (result.code === 4) - reason = lang['UserFormatError']; - else if (result.code === 5) - reason = lang['TokenFormatError']; - layui.layer.msg(lang['OperateFailed'] + ',' + reason) - } + /** + * show error message popup + * @param result + */ + function errorMsg(result) { + var reason = i18n['Other Error']; + if (result.code === 1) + reason = i18n['ParamError']; + else if (result.code === 2) + reason = i18n['UserExist']; + else if (result.code === 3) + reason = i18n['ParamError']; + else if (result.code === 4) + reason = i18n['UserFormatError']; + else if (result.code === 5) + reason = i18n['TokenFormatError']; + layui.layer.msg(i18n['OperateFailed'] + ',' + reason) + } - /** - * click event - */ + /** + * document event + */ + (function bindDocumentEvent() { $(document).on('click.search', '#searchBtn', function () { reloadTable(); return false; @@ -637,7 +652,7 @@ var loadUserList = (function ($) { reloadTable(); return false; }); - } + })(); return loadUserList; })(layui.$) diff --git a/assets/static/js/index.js b/assets/static/js/index.js index c4d4175..e269ce4 100644 --- a/assets/static/js/index.js +++ b/assets/static/js/index.js @@ -1,3 +1,4 @@ +var http_port, https_port; (function ($) { $(function () { var langLoading = layui.layer.load() diff --git a/assets/templates/index.html b/assets/templates/index.html index 299b924..3ac9002 100644 --- a/assets/templates/index.html +++ b/assets/templates/index.html @@ -69,9 +69,7 @@ -
- -
+
@@ -145,10 +143,10 @@
-
+
-
+
@@ -285,6 +283,16 @@ +
+
+
+
+ +
Traffic Statistics
+
+
+
+
{{# if (d.proxyType === 'http' || d.proxyType === 'https') { }}
@@ -411,5 +419,10 @@ + + + diff --git a/config/frps-panel.ini b/config/frps-panel.ini index f714045..fa36c15 100644 --- a/config/frps-panel.ini +++ b/config/frps-panel.ini @@ -1,18 +1,19 @@ ; basic options [common] -; frps config info +; frps panel config info plugin_addr = 127.0.0.1 plugin_port = 7200 admin_user = admin admin_pwd = admin -; frp dashboard config info -dashboard_addr = frp.yanghuanglin.com +; frp dashboard info +dashboard_addr = 127.0.0.1 dashboard_port = 7500 dashboard_user = admin -dashboard_pwd = 19910621 +dashboard_pwd = admin ; user tokens [users] +user1 = token1 ; user been disabled [disabled]