parse and show proxy params in popup;

dynamic add extra params in popup;

assets/static/css/index.css

@@ -144,12 +144,12 @@ section.common-info .text-row .text-col {
     margin: 0 5px !important;
 }
 
-.add-popup .layui-layer-setwin {
+.proxy-popup .layui-layer-setwin {
     top: 0;
     right: 0;
 }
 
-.add-popup .layui-layer-close2 {
+.proxy-popup .layui-layer-close2 {
     padding: 0;
     border: none;
     right: 0;
@@ -163,11 +163,11 @@ section.common-info .text-row .text-col {
     text-align: center;
 }
 
-.add-popup .layui-layer-close2:hover {
+.proxy-popup .layui-layer-close2:hover {
     background: none;
 }
 
-.add-popup form {
+.proxy-popup form {
     padding: 0;
     position: absolute;
     left: 0;
@@ -178,13 +178,14 @@ section.common-info .text-row .text-col {
     flex-direction: column;
 }
 
-.add-popup .layui-tab {
+.proxy-popup .layui-tab {
     flex: 1;
     margin: 0;
 }
 
-.add-popup .layui-tab .layui-tab-content {
-    padding: 15px 8px 0 8px;
+.proxy-popup .layui-tab .layui-tab-content {
+    padding: 0 8px;
+    margin: 8px 0;
     position: absolute;
     top: 41px;
     bottom: 0;
@@ -193,20 +194,37 @@ section.common-info .text-row .text-col {
     overflow: auto;
 }
 
-.add-popup .layui-textarea {
+.proxy-popup .layui-textarea {
     min-height: 80px;
     padding: 9px 10px;
     resize: none;
 }
 
-.add-popup .layui-form-select dl {
+.proxy-popup .layui-form-select dl {
     max-height: 156px;
 }
 
-.add-popup .layui-row .layui-form-item {
+.proxy-popup .layui-row .layui-form-item {
     margin-bottom: 0;
 }
 
+.proxy-popup .extra-param-tab-item .layui-form-item {
+    display: flex;
+}
+
+.proxy-popup .extra-param-tab-item .layui-form-item:last-child {
+    margin-bottom: 0;
+}
+
+.proxy-popup .extra-param-tab-item .layui-form-item .layui-input-inline:nth-child(1) {
+    width: 150px;
+}
+
+.proxy-popup .extra-param-tab-item .layui-form-item .layui-input-inline:nth-child(3) {
+    flex: 1;
+    margin-right: 0;
+}
+
 #searchForm input {
     height: 30px;
     line-height: 28px;

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

@@ -1,5 +1,7 @@
 var loadProxyInfo = (function ($) {
     var i18n = {};
+    //param names in Basic tab
+    var basicParamNames = ['name', 'type', 'local_ip', 'local_port', 'custom_domains', 'subdomain', 'remote_port', 'use_encryption', 'use_compression'];
 
     /**
      * get proxy info
@@ -84,9 +86,13 @@ var loadProxyInfo = (function ($) {
             var checkStatus = layui.table.checkStatus(id);
             var data = checkStatus.data;
 
+            for (var key in data) {
+                data[key] = data[key] === '-' ? '' : data[key];
+            }
+
             switch (obj.event) {
                 case 'add':
-                    addPopup(type);
+                    proxyPopup(type, null);
                     break
                 case 'remove':
                     // batchRemovePopup(data);
@@ -97,10 +103,14 @@ var loadProxyInfo = (function ($) {
         layui.table.on('tool(proxyListTable)', function (obj) {
             var data = obj.data;
 
+            for (var key in data) {
+                data[key] = data[key] === '-' ? '' : data[key];
+            }
+
             switch (obj.event) {
                 case 'update':
+                    proxyPopup(type, data);
                     break;
-                // updatePopup(data);
                 case 'remove':
                     // removePopup(data);
                     break;
@@ -111,16 +121,37 @@ var loadProxyInfo = (function ($) {
     /**
      * add proxy popup
      * @param type proxy type
+     * @param data {Map<string,object>} proxy data
      */
-    function addPopup(type) {
+    function proxyPopup(type, data) {
+        var basicData = {};
+        var extraData = [];
+        if (data != null) {
+            var tempData = $.extend(true, {}, data);
+            basicParamNames.forEach(function (basicName) {
+                if (data.hasOwnProperty(basicName)) {
+                    basicData[basicName] = tempData[basicName];
+                    delete tempData[basicName];
+                }
+            });
+            for (var key in tempData) {
+                extraData.push({
+                    name: key,
+                    value: tempData[key]
+                });
+            }
+        }
+        var html = document.getElementById('addProxyTemplate').innerHTML;
+        var content = layui.laytpl(html).render({
+            type: type,
+            extraData: extraData
+        });
         layui.layer.open({
             type: 1,
             title: false,
-            skin: 'add-popup',
+            skin: 'proxy-popup',
             area: ['500px', '400px'],
-            content: layui.laytpl(document.getElementById('addProxyTemplate').innerHTML).render({
-                type: type
-            }),
+            content: content,
             btn: ['Confirm', 'Cancel'],
             btn1: function (index) {
                 if (layui.form.validate('#addProxyTemplate')) {
@@ -132,11 +163,40 @@ var loadProxyInfo = (function ($) {
                 layui.layer.close(index);
             },
             success: function (layero, index, that) {
-                layui.form.render(null, 'addProxyForm');
+                layui.form.val('addProxyForm', basicData);
+                proxyPopupSuccess(layero, index, that, basicData);
             }
         });
     }
 
+    function proxyPopupSuccess(layero, index, that) {
+        layui.form.render(null, 'addProxyForm');
+        layui.form.on('input-affix(addition)', function (obj) {
+            var $paramValue = $(obj.elem);
+            var $paramName = $paramValue.closest('.layui-form-item').find('input');
+            var name = $paramName.first().val();
+            var value = $paramValue.val();
+            var html = document.getElementById('extraParamAddedTemplate').innerHTML;
+            var formItem = layui.laytpl(html).render({
+                name: name,
+                value: value
+            });
+            $paramValue.closest('.layui-tab-item').prepend(formItem);
+            $paramName.val('');
+            $paramValue.val('');
+
+            layui.form.render();
+
+            var tabContent = $paramValue.closest('.layui-tab-content');
+            var scrollHeight = tabContent.prop("scrollHeight");
+            tabContent.scrollTop(scrollHeight)
+        });
+        layui.form.on('input-affix(subtraction)', function (obj) {
+            var $elem = $(obj.elem);
+            $elem.closest('.layui-form-item').remove();
+        });
+    }
+
     /**
      * add proxy action
      * @param data {{user:string, token:string, comment:string, enable:boolean, ports:[string|number], domains:[string], subdomains:[string]}} user data