show proxy detail

assets/static/js/index-proxy-list.js

@@ -0,0 +1,95 @@
+var loadProxyInfo = (function ($) {
+    var size = filesize.partial({base: 2, standard: "jedec"});
+    var i18n = {};
+
+    /**
+     * get proxy info
+     * @param lang {{}} language json
+     * @param title page title
+     * @param proxyType proxy type
+     */
+    function loadProxyInfo(lang, title, proxyType) {
+        i18n = lang;
+        $("#title").text(title);
+        $('#content').empty();
+        var loading = layui.layer.load();
+
+        $.getJSON('/proxy/api/proxy/' + proxyType).done(function (result) {
+            if (result.success) {
+                $('#content').html($('#proxyListTableTemplate').html());
+                renderProxyListTable(JSON.parse(result.data)['proxies'], proxyType);
+            } else {
+                layui.layer.msg(result.message);
+            }
+        }).always(function () {
+            layui.layer.close(loading);
+        });
+    }
+
+    /**
+     * render proxy list table
+     * @param data proxy data
+     * @param proxyType proxy type
+     */
+    function renderProxyListTable(data, proxyType) {
+        data = data.concat(data)
+        data = data.concat(data)
+        var $section = $('#content > section');
+        var cols = [
+            {field: 'id', title: '', width: 30, templet: '#toggleProxyInfoArrowTemplate'},
+            {field: 'name', title: 'Name', sort: true},
+            {
+                field: 'port', title: 'Port', sort: true, templet: '<span>{{ d.conf.remote_port }}</span>'
+            },
+            {field: 'cur_conns', title: 'Connections', sort: true},
+            {
+                field: 'today_traffic_in', title: 'Traffic In', sort: true, templet: function (d) {
+                    return size(d.today_traffic_in);
+                }
+            },
+            {
+                field: 'today_traffic_out', title: 'Traffic Out', sort: true, templet: function (d) {
+                    return size(d.today_traffic_out);
+                }
+            },
+            {field: 'client_version', title: 'ClientVersion', sort: true},
+            {field: 'status', title: 'Status', sort: true}
+        ];
+        var proxyListTable = layui.table.render({
+            elem: '#proxyListTable',
+            height: $section.height(),
+            text: {none: i18n['EmptyData']},
+            cols: [cols],
+            page: navigator.language.indexOf("zh") !== -1,
+            data: data,
+            done: function (res, curr, count, origin) {
+                //向每一行tr后面追加显示子table的tr
+                var $tr = $('.layui-table-view[lay-id=' + this.id + '] tbody tr');
+                var expandTrTemplateHtml = $('#expandTrTemplate').html();
+                for (var i = 0; i < $tr.length; i++) {
+                    var html = layui.laytpl(expandTrTemplateHtml).render({
+                        index: i,
+                        colspan: cols.length - 1,
+                        proxyType: proxyType,
+                        data: res.data[i]
+                    });
+                    $($tr[i]).after(html);
+                }
+            }
+        });
+
+        layui.table.on('tool(proxyListTable)', function (obj) {
+            var index = obj.index;
+            $(this).toggleClass('open');
+            var open = $(this).hasClass('open');
+            $('#childTr_' + index).toggleClass('layui-hide', !open);
+            proxyListTable.resize();
+        });
+
+        window.onresize = function () {
+            proxyListTable.resize();
+        }
+    }
+
+    return loadProxyInfo;
+})(layui.$);

assets/static/js/index-server-info.js

@@ -1,19 +1,26 @@
 var loadServerInfo = (function ($) {
     var size = filesize.partial({base: 2, standard: "jedec"});
+    var i18n = {};
 
     /**
      * get server info
      * @param lang {{}} language json
+     * @param title page title
      */
     function loadServerInfo(lang, title) {
-        console.log(title)
+        i18n = lang;
         $("#title").text(title);
         $('#content').empty();
         var loading = layui.layer.load();
 
         $.getJSON('/proxy/api/serverinfo').done(function (result) {
             if (result.success) {
-                renderServerInfo(JSON.parse(result.data));
+                var data = JSON.parse(result.data);
+                data.proxy_counts = 0;
+                for (var proxy in data.proxy_type_count) {
+                    data.proxy_counts = data.proxy_counts + data.proxy_type_count[proxy];
+                }
+                renderServerInfo(data);
             } else {
                 layui.layer.msg(result.message);
             }
@@ -22,6 +29,10 @@ var loadServerInfo = (function ($) {
         });
     }
 
+    /**
+     * render server info page
+     * @param data server info data
+     */
     function renderServerInfo(data) {
         var html = layui.laytpl($('#serverInfoTemplate').html()).render(data);
         $('#content').html(html);
@@ -30,10 +41,14 @@ var loadServerInfo = (function ($) {
         renderCountChart(data);
     }
 
+    /**
+     * render traffic chart with echarts
+     * @param data traffic data
+     */
     function renderTrafficChart(data) {
         var chartData = [
-            {value: data.total_traffic_in, name: 'total_traffic_in'},
-            {value: data.total_traffic_out, name: 'total_traffic_out'}
+            {value: data.total_traffic_in, name: 'Traffic In'},
+            {value: data.total_traffic_out, name: 'Traffic Out'}
         ];
         var chartDom = document.getElementById('trafficChart');
         var chart = echarts.init(chartDom);
@@ -74,6 +89,10 @@ var loadServerInfo = (function ($) {
         option && chart.setOption(option);
     }
 
+    /**
+     * render proxy count chat with echarts
+     * @param data proxy count data
+     */
     function renderCountChart(data) {
         var proxies = data.proxy_type_count;
         var charLegend = [];
@@ -81,7 +100,7 @@ var loadServerInfo = (function ($) {
 
         for (var type in proxies) {
             var temp = {
-                name: type,
+                name: type.toUpperCase(),
                 value: proxies[type]
             };
             charLegend.push(type);

assets/static/js/index-user-list.js

@@ -139,6 +139,7 @@ var loadUserList = (function ($) {
     /**
      * load i18n language
      * @param lang {{}} language json
+     * @param title page title
      */
     function loadUserList(lang, title) {
         $("#title").text(title);
@@ -245,8 +246,8 @@ var loadUserList = (function ($) {
             where: {},
             dataType: 'json',
             editTrigger: 'dblclick',
-            page: navigator.language.indexOf("zh") === 0,
-            toolbar: '#toolbarTemplate',
+            page: navigator.language.indexOf("zh") !== -1,
+            toolbar: '#userListToolbarTemplate',
             defaultToolbar: false,
             text: {none: lang['EmptyData']},
             cols: [[
@@ -264,7 +265,7 @@ var loadUserList = (function ($) {
                     templet: '<span>{{d.status? "' + lang['Enable'] + '":"' + lang['Disable'] + '"}}</span>',
                     sort: true
                 },
-                {title: lang['Operation'], width: 150, toolbar: '#operationTemplate'}
+                {title: lang['Operation'], width: 150, toolbar: '#userListOperationTemplate'}
             ]]
         });
 
@@ -388,7 +389,7 @@ var loadUserList = (function ($) {
                 type: 1,
                 title: lang['NewUser'],
                 area: ['500px'],
-                content: layui.laytpl(document.getElementById('addTemplate').innerHTML).render(),
+                content: layui.laytpl(document.getElementById('addUserTemplate').innerHTML).render(),
                 btn: [lang['Confirm'], lang['Cancel']],
                 btn1: function (index) {
                     if (layui.form.validate('#addUserForm')) {

assets/static/js/index.js

@@ -3,10 +3,17 @@
         var langLoading = layui.layer.load()
         $.getJSON('/lang').done(function (lang) {
             layui.element.on('nav(leftNav)', function (elem) {
-                if (elem.attr('id') === 'serverInfo') {
-                    loadServerInfo(lang, elem.text().trim());
-                } else if (elem.attr('id') === 'userList') {
-                    loadUserList(lang, elem.text().trim());
+                var id = elem.attr('id');
+                var title = elem.text();
+                if (id === 'serverInfo') {
+                    loadServerInfo(lang, title.trim());
+                } else if (id === 'userList') {
+                    loadUserList(lang, title.trim());
+                } else if (elem.closest('.layui-nav-item').attr('id') === 'proxyList') {
+                    if (id != null && id.trim() !== '') {
+                        var suffix = elem.closest('.layui-nav-item').children('a').text().trim();
+                        loadProxyInfo(lang, title + " " + suffix, id);
+                    }
                 }
             });