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

assets/templates/index.html

@@ -153,6 +153,13 @@
             </ul>
             <div class="layui-tab-content">
                 <div class="layui-tab-item layui-show">
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">ProxyName</label>
+                        <div class="layui-input-block">
+                            <input type="text" name="name" placeholder="ProxyName" autocomplete="off"
+                                   class="layui-input"/>
+                        </div>
+                    </div>
                     <div class="layui-form-item">
                         <label class="layui-form-label">ProxyType</label>
                         <div class="layui-input-block">
@@ -163,15 +170,15 @@
                     <div class="layui-form-item">
                         <label class="layui-form-label">LocalIp</label>
                         <div class="layui-input-block">
-                            <input type="text" name="local_ip" placeholder="LocalIp"
-                                   autocomplete="off" class="layui-input"/>
+                            <input type="text" name="local_ip" placeholder="LocalIp" autocomplete="off"
+                                   class="layui-input"/>
                         </div>
                     </div>
                     <div class="layui-form-item">
                         <label class="layui-form-label">LocalPort</label>
                         <div class="layui-input-block">
-                            <input type="text" name="local_port" placeholder="LocalPort"
-                                   autocomplete="off" class="layui-input"/>
+                            <input type="text" name="local_port" placeholder="LocalPort" autocomplete="off"
+                                   class="layui-input"/>
                         </div>
                     </div>
                     {{# if (d.type === 'http' || d.type === 'https') { }}
@@ -194,8 +201,8 @@
                     <div class="layui-form-item tcp udp">
                         <label class="layui-form-label">RemotePort</label>
                         <div class="layui-input-block">
-                            <input type="text" name="remote_port" placeholder="RemotePort"
-                                   autocomplete="off" class="layui-input"/>
+                            <input type="text" name="remote_port" placeholder="RemotePort" autocomplete="off"
+                                   class="layui-input"/>
                         </div>
                     </div>
                     {{# } }}
@@ -204,7 +211,7 @@
                             <div class="layui-form-item">
                                 <label class="layui-form-label">UseEncryption</label>
                                 <div class="layui-input-block">
-                                    <input type="checkbox" name="use_encryption" value="true" title="ON">
+                                    <input type="checkbox" name="use_encryption" value="true" title="YES">
                                 </div>
                             </div>
                         </div>
@@ -212,18 +219,55 @@
                             <div class="layui-form-item">
                                 <label class="layui-form-label">UseCompression</label>
                                 <div class="layui-input-block">
-                                    <input type="checkbox" name="use_compression" value="true" title="ON">
+                                    <input type="checkbox" name="use_compression" value="true" title="YES">
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="layui-tab-item">内容-2</div>
+                <div class="layui-tab-item extra-param-tab-item">
+                    {{# layui.each(d.extraData, function(index, extra){ }}
+                    <div class="layui-form-item">
+                        <div class="layui-input-inline">
+                            <input type="text" name="paramName" value="{{= extra.name}}" class="layui-input"
+                                   placeholder="paramName">
+                        </div>
+                        <div class="layui-form-mid">=</div>
+                        <div class="layui-input-inline">
+                            <input type="text" name="paramValue" value="{{= extra.value }}" class="layui-input"
+                                   lay-filter="subtraction" lay-affix="subtraction" placeholder="paramValue">
+                        </div>
+                    </div>
+                    {{# }); }}
+                    <div class="layui-form-item">
+                        <div class="layui-input-inline">
+                            <input type="text" name="paramName" class="layui-input" placeholder="paramName">
+                        </div>
+                        <div class="layui-form-mid">=</div>
+                        <div class="layui-input-inline">
+                            <input type="text" name="paramValue" class="layui-input" lay-filter="addition"
+                                   lay-affix="addition" placeholder="paramValue">
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </form>
 </script>
 
+<script type="text/html" id="extraParamAddedTemplate">
+    <div class="layui-form-item">
+        <div class="layui-input-inline">
+            <input type="text" name="paramName" value="{{= d.name}}" class="layui-input" placeholder="paramName">
+        </div>
+        <div class="layui-form-mid">=</div>
+        <div class="layui-input-inline">
+            <input type="text" name="paramValue" value="{{= d.value }}" class="layui-input"
+                   lay-filter="subtraction" lay-affix="subtraction" placeholder="paramValue">
+        </div>
+    </div>
+</script>
+
 <!--代理列表-代理表格模板-->
 <script type="text/html" id="proxyListTableTemplate">
     <section class="proxy-list">