From 6ee817db62ae39cffbb3bd11f0ca6c0aa9962b6b Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Fri, 17 Sep 2010 20:47:37 -0700
Subject: [PATCH] new UI - IP address page - port forwarding tab - implement
 updatePortForwardingRule.

---
 ui/new/jsp/ip_address.jsp               | 71 ++++++++++++---------
 ui/new/scripts/cloud.core2.ipaddress.js | 84 ++++++++++++-------------
 2 files changed, 79 insertions(+), 76 deletions(-)

diff --git a/ui/new/jsp/ip_address.jsp b/ui/new/jsp/ip_address.jsp
index 6f8f2c606aa..4280dff999d 100644
--- a/ui/new/jsp/ip_address.jsp
+++ b/ui/new/jsp/ip_address.jsp
@@ -142,43 +142,47 @@
     <div id="tab_content_port_forwarding" style="display:none">
         <div class="grid_container" id="grid_container">
             <div class="grid_header">
-                <div class="grid_header_cell" style="width: 20%">
+                <div class="grid_header_cell" style="width: 15%">
                     <div class="grid_header_title">
                         Public Port</div>
                 </div>
-                <div class="grid_header_cell" style="width: 20%">
+                <div class="grid_header_cell" style="width: 15%">
                     <div class="grid_header_title">
                         Private Port</div>
                 </div>
-                <div class="grid_header_cell" style="width: 29%">
+                <div class="grid_header_cell" style="width: 15%">
                     <div class="grid_header_title">
                         Protocol</div>
                 </div>
-                <div class="grid_header_cell" style="width: 30%; border: none;">
+                <div class="grid_header_cell" style="width: 39%; border: none;">
                     <div class="grid_header_title">
                         Instance</div>
                 </div>
+                <div class="grid_header_cell" style="width: 15%">
+                    <div class="grid_header_title">
+                        Action</div>
+                </div>
             </div>
             <div class="grid_rows even" id="create_port_forwarding_row">
-                <div class="grid_row_cell" style="width: 20%;">
+                <div class="grid_row_cell" style="width: 15%;">
                     <input id="public_port" class="text" style="width: 90%;" type="text" />
                     <div id="public_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
                 </div>
-                <div class="grid_row_cell" style="width: 20%;">
+                <div class="grid_row_cell" style="width: 15%;">
                     <input id="private_port" class="text" style="width: 90%;" type="text" />
                     <div id="private_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
                 </div>
-                <div class="grid_row_cell" style="width: 29%;">  
+                <div class="grid_row_cell" style="width: 15%;">  
                    <select class="select" id="protocol">
                        <option value="TCP">TCP</option>
                        <option value="UDP">UDP</option>
                    </select>
                 </div>
-                <div class="grid_row_cell" style="width: 20%;">                   
+                <div class="grid_row_cell" style="width: 39%;">                   
                     <select class="select" style="width: 104px;" id="vm">
                     </select>
                 </div>
-                <div class="grid_row_cell" style="width: 10%;">
+                <div class="grid_row_cell" style="width: 15%;">
                     <div class="row_celltitles">
                         <a id="add_link" href="#">Add</a></div>
                 </div>
@@ -350,55 +354,60 @@
 <div class="grid_rows odd" id="port_forwarding_template" style="display: none">
     
     <div id="row_container">
-        <div class="grid_row_cell" style="width: 20%;">
+        <div class="grid_row_cell" style="width: 15%;">
             <div class="row_celltitles" id="public_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 20%;">
+        <div class="grid_row_cell" style="width: 15%;">
             <div class="row_celltitles" id="private_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 29%;">
+        <div class="grid_row_cell" style="width: 15%;">
             <div class="row_celltitles" id="protocol"></div>
         </div>
-        <div class="grid_row_cell" style="width: 30%;">
+        <div class="grid_row_cell" style="width: 39%;">
             <div class="row_celltitles" id="vm_name"></div>
-        </div> 
+        </div>       
+        <div class="grid_row_cell" style="width: 15%;">
+            <div class="row_celltitles">
+                <a id="edit_link" href="#">Edit</a>
+                <a id="delete_link" href="#">Delete</a>
+            </div>
+        </div>
         <div class="gridrow_loaderbox" style="display: none;" id="spinning_wheel">
             <div class="gridrow_loader">
             </div>
-            <p>
-                Adding &hellip;</p>
+            <p id="description">
+                Waiting &hellip;
+            </p>
         </div>
     </div>
     <div id="row_container_edit" style="display:none">
-        <div class="grid_row_cell" style="width: 20%;">
-            <input id="public_port" class="text" style="width: 90%;" type="text" />
-            <div id="public_port_errormsg" class="errormsg" style="display: none;">
-                Error msg will appear here</div>
+        <div class="grid_row_cell" style="width: 15%;">
+            <div class="row_celltitles" id="public_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 20%;">
+        <div class="grid_row_cell" style="width: 15%;">
             <input id="private_port" class="text" style="width: 90%;" type="text" />
             <div id="private_port_errormsg" class="errormsg" style="display: none;">
                 Error msg will appear here</div>
         </div>
-        <div class="grid_row_cell" style="width: 29%;">
-            <select class="select" id="protocol">
-                <option value="TCP">TCP</option>
-                <option value="UDP">UDP</option>
-            </select>
+        <div class="grid_row_cell" style="width: 15%;">
+            <div class="row_celltitles" id="protocol"></div>
         </div>
-        <div class="grid_row_cell" style="width: 20%;">
+        <div class="grid_row_cell" style="width: 39%;">
             <select class="select" style="width: 104px;" id="vm">
             </select>
         </div>
-        <div class="grid_row_cell" style="width: 10%;">
+        <div class="grid_row_cell" style="width: 15%;">
             <div class="row_celltitles">
-                <a id="add_link" href="#">Add</a></div>
+                <a id="save_link" href="#">Save</a>
+                <a id="cancel_link" href="#">Cancel</a>
+            </div>
         </div>
         <div class="gridrow_loaderbox" style="display: none;" id="spinning_wheel">
             <div class="gridrow_loader">
             </div>
-            <p>
-                Saving &hellip;</p>
+            <p id="description">
+                Waiting &hellip;
+            </p>
         </div>
     </div>
 </div>
diff --git a/ui/new/scripts/cloud.core2.ipaddress.js b/ui/new/scripts/cloud.core2.ipaddress.js
index cd1ab4cb879..249bf0aa525 100644
--- a/ui/new/scripts/cloud.core2.ipaddress.js
+++ b/ui/new/scripts/cloud.core2.ipaddress.js
@@ -36,7 +36,8 @@ function afterLoadIpJSP() {
 	    var $template = $("#port_forwarding_template").clone();
 	    $("#tab_content_port_forwarding #grid_container").append($template.show());		
 	    
-	    var $spinningWheel = $template.find("#spinning_wheel");		
+	    var $spinningWheel = $template.find("row_container").find("#spinning_wheel");	
+	    $spinningWheel.find("#description").text("Adding....");	
         $spinningWheel.show();   
 	    
 	    var $detailsTab = $("#right_panel_content #tab_content_details");   
@@ -147,13 +148,13 @@ function portForwardingJsonToTemplate(jsonObj, template) {
     template.attr("id", "portForwarding_" + jsonObj.id).data("portForwardingId", jsonObj.id);	
     		     
     template.find("#row_container #public_port").text(jsonObj.publicport);
-    template.find("#row_container_edit #public_port").val(jsonObj.publicport);
+    template.find("#row_container_edit #public_port").text(jsonObj.publicport);
     
     template.find("#row_container #private_port").text(jsonObj.privateport);
     template.find("#row_container_edit #private_port").val(jsonObj.privateport);
     
     template.find("#row_container #protocol").text(jsonObj.protocol);
-    template.find("#row_container_edit #protocol").val(jsonObj.protocol);
+    template.find("#row_container_edit #protocol").text(jsonObj.protocol);
     
     template.find("#row_container #vm_name").text(jsonObj.vmname);		    
     var virtualMachineId = jsonObj.virtualmachineid;
@@ -164,7 +165,7 @@ function portForwardingJsonToTemplate(jsonObj, template) {
     var IpAccount = jsonObj.account;
     	    
     $.ajax({
-	   data: createURL("command=listVirtualMachines&response=json&domainid="+IpDomainid+"&account="+IpAccount+maxPageSize),
+	   data: createURL("command=listVirtualMachines&domainid="+IpDomainid+"&account="+IpAccount+maxPageSize),
 	    dataType: "json",
 	    success: function(json) {			    
 		    var instances = json.listvirtualmachinesresponse.virtualmachine;			   
@@ -179,18 +180,16 @@ function portForwardingJsonToTemplate(jsonObj, template) {
 	    }
     });		    
    	
-   	/*	        	
-    var loadingImg = template.find(".adding_loading");		
-    var rowContainer = template.find("#row_container");      
-    var rowContainerEdit = template.find("#row_container_edit");    
+   	//???       	   
+    var $rowContainer = template.find("#row_container");      
+    var $rowContainerEdit = template.find("#row_container_edit");    
     		    
     template.find("#delete_link").unbind("click").bind("click", function(event){   		                    
-        loadingImg.find(".adding_text").text("Deleting....");	
-        loadingImg.show();  
-        rowContainer.hide();                
-              
+        var $spinningWheel = $rowContainer.find("#spinning_wheel");		
+        $spinningWheel.find("#description").text("Deleting....");	
+        $spinningWheel.show();   
         $.ajax({						
-	       data: createURL("command=deletePortForwardingRule&response=json&id="+json.id),
+	       data: createURL("command=deletePortForwardingRule&id="+jsonObj.id),
             dataType: "json",
             success: function(json) {             
                 template.slideUp("slow", function(){		                    
@@ -199,42 +198,39 @@ function portForwardingJsonToTemplate(jsonObj, template) {
             },
             error: function(XMLHttpResponse) {
                 handleError(XMLHttpResponse);
-                loadingImg.hide(); 	   
-                rowContainer.show();	
+                $spinningWheel.hide(); 
             }
         });	     
         return false;
     });
     
     template.find("#edit_link").unbind("click").bind("click", function(event){   		    
-        rowContainer.hide();
-        rowContainerEdit.show();
+        $rowContainer.hide();
+        $rowContainerEdit.show();
     });
     
     template.find("#cancel_link").unbind("click").bind("click", function(event){   		    
-        rowContainer.show();
-        rowContainerEdit.hide();
+        $rowContainer.show();
+        $rowContainerEdit.hide();
     });
     
     template.find("#save_link").unbind("click").bind("click", function(event){          		       
         // validate values		    
 	    var isValid = true;					    
-	    isValid &= validateNumber("Private Port", rowContainerEdit.find("#private_port"), rowContainerEdit.find("#private_port_errormsg"), 1, 65535);				
+	    isValid &= validateNumber("Private Port", $rowContainerEdit.find("#private_port"), $rowContainerEdit.find("#private_port_errormsg"), 1, 65535);				
 	    if (!isValid) return;		    		        
 	    
-        var loadingImg = template.find(".adding_loading");	                        
-        loadingImg.find(".adding_text").text("Saving....");	
-        loadingImg.show();  
-        rowContainerEdit.hide();      
+        var $spinningWheel = $rowContainerEdit.find("#spinning_wheel");	                     
+        $spinningWheel.find("#description").text("Saving....");	
+        $spinningWheel.show();  
 	    
-        var ipAddress = $("#submenu_content_network #ip_select").val();
-		if (!isUser()) {
-			ipAddress = ipPanel.data("ip_address");
-		}
-        var publicPort = rowContainerEdit.find("#public_port").text();
-        var privatePort = rowContainerEdit.find("#private_port").val();
-        var protocol = rowContainerEdit.find("#protocol").text();
-        var virtualMachineId = rowContainerEdit.find("#vm").val();		   
+	    var jsonObj = $("#right_panel_content #tab_content_details").data("jsonObj");          
+	    var ipAddress = jsonObj.ipaddress;
+        
+        var publicPort = $rowContainerEdit.find("#public_port").text();
+        var privatePort = $rowContainerEdit.find("#private_port").val();
+        var protocol = $rowContainerEdit.find("#protocol").text();
+        var virtualMachineId = $rowContainerEdit.find("#vm").val();		   
 	    		    
         var array1 = [];
         array1.push("&publicip="+ipAddress);    
@@ -244,7 +240,7 @@ function portForwardingJsonToTemplate(jsonObj, template) {
         array1.push("&virtualmachineid=" + virtualMachineId);
                       
         $.ajax({
-       data: createURL("command=updatePortForwardingRule&response=json"+array1.join("")),
+             data: createURL("command=updatePortForwardingRule"+array1.join("")),
 			 dataType: "json",
 			 success: function(json) {					    									 
 				var jobId = json.updateportforwardingruleresponse.jobid;					        
@@ -252,7 +248,7 @@ function portForwardingJsonToTemplate(jsonObj, template) {
 		        
                 $("body").everyTime(2000, timerKey, function() {
 				    $.ajax({
-					   data: createURL("command=queryAsyncJobResult&jobId="+jobId+"&response=json"),
+					   data: createURL("command=queryAsyncJobResult&jobId="+jobId),
 					    dataType: "json",
 					    success: function(json) {										       						   
 						    var result = json.queryasyncjobresultresponse;									    
@@ -263,32 +259,30 @@ function portForwardingJsonToTemplate(jsonObj, template) {
 							    if (result.jobstatus == 1) { // Succeeded										        								    
 								    var items = result.portforwardingrule;	            	
                                     portForwardingJsonToTemplate(items[0],template);
-                                    loadingImg.hide(); 	   
-                                    rowContainer.show();						                                                               
+                                    $spinningWheel.hide(); 	     
+                                    $rowContainerEdit.hide();
+                                    $rowContainer.show();                                                      
 							    } else if (result.jobstatus == 2) { //Fail
-							        loadingImg.hide(); 		
-						            rowContainer.show(); 
-								    $("#dialog_alert").html("<p>" + sanitizeXSS(result.jobresult) + "</p>").dialog("open");											    					    
+							        $spinningWheel.hide(); 		
+						            $("#dialog_alert").html("<p>" + sanitizeXSS(result.jobresult) + "</p>").dialog("open");											    					    
 							    }
 						    }
 					    },
 					    error: function(XMLHttpResponse) {	
 					        handleError(XMLHttpResponse);								        
 						    $("body").stopTime(timerKey);
-						    loadingImg.hide(); 		
-						    rowContainer.show(); 									    								    
+						    $spinningWheel.hide(); 									    								    
 					    }
 				    });
 			    }, 0);							 
 			 },
 			 error: function(XMLHttpResponse) {
 			     handleError(XMLHttpResponse);		
-			     loadingImg.hide(); 		
-				 rowContainer.show(); 							 
+			     $spinningWheel.hide(); 						 
 			 }
 		 });                   
     });
-    */
+    //???
 }	  
     
 function listPortForwardingRules() {	
@@ -306,7 +300,7 @@ function listPortForwardingRules() {
             if (items != null && items.length > 0) {				        			        
                 for (var i = 0; i < items.length; i++) {
 	                var $template = $("#port_forwarding_template").clone(true);
-	                portForwardingJsonToTemplate(items[i], $template); //???
+	                portForwardingJsonToTemplate(items[i], $template); 
 	                $portForwardingGrid.append($template.show());						   
                 }			    
             }