auto update script executed

web/components/tcpprox.html

@@ -3,7 +3,7 @@
         <h2>TCP Proxy</h2>
         <p>Proxy traffic flow on layer 3 via TCP/IP</p>
     </div>
-    <button class="ui basic orange button" onclick="$('#addproxyConfig').slideToggle('fast');"><i class="ui add icon"></i> Add Proxy Config</button>
+    <button class="ui basic orange button" id="addProxyConfigButton"><i class="ui add icon"></i> Add Proxy Config</button>
     <button class="ui basic circular right floated icon button" title="Refresh List"><i class="ui green refresh icon"></i></button>
     <div class="ui divider"></div>
     <div class="ui basic segment" id="addproxyConfig"  style="display:none;">
@@ -39,8 +39,8 @@
                     <option value="starter">Starter</option>
                 </select>
             </div>
-            <button class="ui basic button" type="submit"><i class="ui blue add icon"></i> Create</button>  
-            <button class="ui basic button" onclick="confirmEditTCPProxyConfig(event);"><i class="ui blue save icon"></i> Update</button>  
+            <button id="addTcpProxyButton" class="ui basic button" type="submit"><i class="ui blue add icon"></i> Create</button>  
+            <button id="editTcpProxyButton" class="ui basic button" onclick="confirmEditTCPProxyConfig(event);"><i class="ui blue save icon"></i> Update</button>  
             <table class="ui celled padded table">
                 <thead>
                   <tr><th class="single line">Mode</th>
@@ -151,6 +151,9 @@
                     }else{
                         msgbox("Config Added");
                     }
+                    clearTCPProxyAddEditForm();
+                    initProxyConfigList();
+                    $("#addproxyConfig").slideUp("fast");
                 },
                 error: function() {
                     msgbox('An error occurred while processing the request', false);
@@ -158,6 +161,18 @@
             });
         });
 
+        //Add proxy button pressed. Show add TCP proxy menu
+        $("#addProxyConfigButton").on("click", function(){
+            $('#addproxyConfig').slideToggle('fast');
+            $("#addTcpProxyButton").show();
+            $("#editTcpProxyButton").hide();
+        });
+
+            
+        function clearTCPProxyAddEditForm(){
+            $('#tcpProxyForm input, #tcpProxyForm select').val('');
+        }
+
         function validateTCPProxyConfig(form){
             // Validate timeout is an integer
             var timeout = parseInt(form.find('input[name="timeout"]').val());
@@ -183,7 +198,7 @@
 
         function renderProxyConfigs(proxyConfigs) {
             var tableBody = $('#proxyTable tbody');
-
+            tableBody.empty();
             if (proxyConfigs.length === 0) {
             var noResultsRow = $('<tr><td colspan="7"><i class="green check circle icon"></i>No Proxy Configs</td></tr>');
                 tableBody.append(noResultsRow);
@@ -259,7 +274,8 @@
         function editTCPProxyConfig(configUUID){
             let targetConfig = getConfigDetailsFromDOM(configUUID);
             if (targetConfig != null){
-                console.log(targetConfig);
+                $("#addTcpProxyButton").hide();
+                $("#editTcpProxyButton").show();
                $.each(targetConfig, function(key, value) {
                     var field = $("#tcpProxyForm").find('[name="' + key.toLowerCase() + '"]');
                     if (field.length > 0) {
@@ -308,6 +324,9 @@
                     }else{
                         msgbox("Config Updated");
                     }
+                    initProxyConfigList();
+                    clearTCPProxyAddEditForm();
+                    $("#addproxyConfig").slideUp("fast");
                 },
                 error: function() {
                     msgbox('An error occurred while processing the request', false);