From ea0a4dc5221274e69e712a666fb11f67501ae29b Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Thu, 28 Oct 2010 20:04:12 -0700
Subject: [PATCH] new UI - global setting page - refactor the whole page, make
 it grid-base. When clicking Edit Global Setting link,  the whole grid is
 editable. When clicking Save Button, only rows whose value have been  changed
 will have updateConfiguration API call.

---
 ui/new/jsp/globalsetting.jsp                |  82 ++++------
 ui/new/scripts/cloud.core2.globalsetting.js | 167 +++++++++++---------
 ui/new/scripts/cloud.core2.init.js          |  24 ++-
 3 files changed, 144 insertions(+), 129 deletions(-)

diff --git a/ui/new/jsp/globalsetting.jsp b/ui/new/jsp/globalsetting.jsp
index f7d24ffeba5..b613e1ccee0 100644
--- a/ui/new/jsp/globalsetting.jsp
+++ b/ui/new/jsp/globalsetting.jsp
@@ -36,18 +36,15 @@
         </div>
         <div class="grid_container">
         	<div class="grid_header">
-            	<div class="grid_header_cell" style="width:25%; border:none;">
+            	<div class="grid_header_cell" style="width:35%; border:none;">
             		<div class="grid_header_title">Name</div>
                 </div>
-                <div class="grid_header_cell" style="width:18%; border:none;">
+                <div class="grid_header_cell" style="width:23%; border:none;">
             		<div class="grid_header_title">Value</div>
                 </div>
-                <div class="grid_header_cell" style="width:22%; border:none;">
+                <div class="grid_header_cell" style="width:27%; border:none;">
             		<div class="grid_header_title">Description</div>
-                </div>
-                <div class="grid_header_cell" style="width:20%; border:none;">
-            		<div class="grid_header_title">Category</div>
-                </div>
+                </div>                
                 <div class="grid_header_cell" style="width:15%; border:none;">
             		<div id="action_link" class="grid_actionbox" id="account_action_link">
                         <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
@@ -57,54 +54,10 @@
                             </ul>
                         </div>
                     </div>
-                </div>
-                     
-            </div>
-            <div class="grid_rows even">
-                <div class="grid_row_cell" style="width: 25%;">
-                    <div class="row_celltitles" id="name"></div>
-                </div>
-                <div class="grid_row_cell" style="width: 18%;">
-                    <div class="row_celltitles" id="value">
-                    </div>                    
-                    <input class="text" id="value_edit" style="width: 200px; display: none;" type="text" />
-                    <div id="value_edit_errormsg" style="display:none"></div>                    
-                </div>
-                <div class="grid_row_cell" style="width: 22%;">
-                    <div class="row_celltitles" id="description">
-                    </div>
-                </div>
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles" id="category">
-                    </div>
-                </div>
-             
-               
-            </div>
-            
-            <div class="grid_rows odd">
-                <div class="grid_row_cell" style="width: 25%;">
-                    <div class="row_celltitles" id="name"></div>
-                </div>
-                <div class="grid_row_cell" style="width: 18%;">
-                    <div class="row_celltitles" id="value">
-                    </div>                    
-                    <input class="text" id="value_edit" style="width: 200px; display: none;" type="text" />
-                    <div id="value_edit_errormsg" style="display:none"></div>                    
-                </div>
-                <div class="grid_row_cell" style="width: 22%;">
-                    <div class="row_celltitles" id="description">
-                    </div>
-                </div>
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles" id="category">
-                    </div>
-                </div>
-              
-               
-            </div>
-                        
-                           
+                </div>                     
+            </div>            
+            <div id="grid_content">             	
+         	</div>               
         </div>        
         <div class="grid_botactionpanel">
         	<div class="gridbot_buttons" id="save_button" style="display:none;">Save</div>
@@ -112,6 +65,25 @@
         </div>  
     </div>
 </div>
+<!-- global setting grid template (begin) -->
+<div id="globalsetting_template" class="grid_rows even" style="display:none">
+    <div class="grid_row_cell" style="width: 35%;">
+        <div class="row_celltitles" id="name">
+        </div>
+    </div>
+    <div class="grid_row_cell" style="width: 23%;">
+        <div class="row_celltitles" id="value">
+        </div>
+        <input class="text" id="value_edit" style="width: 200px; display: none;" type="text" />
+        <div id="value_edit_errormsg" style="display: none">
+        </div>
+    </div>
+    <div class="grid_row_cell" style="width: 27%;">
+        <div class="row_celltitles" id="description">description
+        </div>
+    </div>
+</div>
+<!-- global setting grid template (end) -->
 
 <div id="dialog_alert_restart_management_server" title="Alert" style="display:none">
     <p>
diff --git a/ui/new/scripts/cloud.core2.globalsetting.js b/ui/new/scripts/cloud.core2.globalsetting.js
index 215e5636daa..7b304665108 100644
--- a/ui/new/scripts/cloud.core2.globalsetting.js
+++ b/ui/new/scripts/cloud.core2.globalsetting.js
@@ -17,82 +17,107 @@
  */
 
 function afterLoadGlobalSettingJSP() {
-    var $detailsTab = $("#right_panel_content #tab_content_details"); 
-
-    //edit button ***
-    var $readonlyFields  = $detailsTab.find("#value");
-    var $editFields = $detailsTab.find("#value_edit"); 
-    initializeEditFunction($readonlyFields, $editFields, doUpdateGlobalSetting);   
+    populateGlobalSettingGrid();
     
-    //initialize dialogs
+    //actions      
+    var $actionList = $("#right_panel_content #tab_content_details #action_link #action_menu").find("#action_list").empty();        
+    var $listItem = $("#action_list_item").clone();
+    $listItem.find("#link").text("Edit Global Setting");   
+    $listItem.bind("click", function(event) {        
+        doEditGlobalSetting();
+        return false;
+    });
+    $actionList.append($listItem.show());
+    
+    //dialogs
     initDialogWithOK("dialog_alert_restart_management_server");   
 }
 
-function doUpdateGlobalSetting() {
-    // validate values
-    var $detailsTab = $("#right_panel_content #tab_content_details");   
+function populateGlobalSettingGrid() {   
+    $.ajax({
+        data: createURL("command=listConfigurations"+maxPageSize),
+        dataType: "json",
+        success: function(json) {           
+            var items = json.listconfigurationsresponse.configuration;
+            $container = $("#tab_content_details").find("#grid_content").empty();
+            $template = $("#globalsetting_template");            
+            if(items != null && items.length > 0) {
+                for(var i=0; i<items.length; i++) {
+                    var $newTemplate = $template.clone();
+                    globalsettingJSONToTemplate(items[i], $newTemplate);
+                    $container.append($newTemplate.show());
+                }
+            }           
+        }
+    });    
+}
+
+var globalsettingGridIndex = 0;
+function globalsettingJSONToTemplate(jsonObj, template) {      
+    (globalsettingGridIndex++ % 2 == 0)? template.addClass("even"): template.addClass("odd");		
+	template.find("#name").text(fromdb(jsonObj.name));
+	template.find("#value").text(fromdb(jsonObj.value));
+	template.find("#value_edit").val(fromdb(jsonObj.value));	
+	template.find("#description").text(fromdb(jsonObj.description));
+}
+
+function doEditGlobalSetting() {
+    var $detailsTab = $("#right_panel_content #tab_content_details"); 
+    var $readonlyFields  = $detailsTab.find("#value");
+    var $editFields = $detailsTab.find("#value_edit"); 
+                 
+    $readonlyFields.hide();
+    $editFields.show();  
+    $detailsTab.find("#cancel_button, #save_button").show();
     
-    var isValid = true;					
-    isValid &= validateString("Value", $detailsTab.find("#value_edit"), $detailsTab.find("#value_edit_errormsg"), true);					
-    if (!isValid) 
-        return;						
-	
-	var jsonObj = $detailsTab.data("jsonObj");		
-	var name = jsonObj.name;
-    var value = trim($detailsTab.find("#value_edit").val());
-
-    $.ajax({
-      data: createURL("command=updateConfiguration&name="+todb(name)+"&value="+todb(value)+"&response=json"),
-	    dataType: "json",
-	    success: function(json) {	
-	        //call listConfigurations before bug 6506("What updateConfiguration API returns should include an embedded object") is fixed.
-		    var jsonObj;		   
-		    $.ajax({
-		        data: createURL("command=listConfigurations&name="+name),
-		        dataType: "json",
-		        async: false,
-		        success: function(json) {			                      
-		            jsonObj = json.listconfigurationsresponse.configuration[0];
-		        }
-		    });		   
-		    var $midmenuItem1 = $("#"+globalSettingGetMidmenuId(jsonObj));		   
-		    globalSettingToMidmenu(jsonObj, $midmenuItem1);
-		    globalSettingToRightPanel($midmenuItem1);		        
-		    	    
-		    $("#dialog_alert_restart_management_server").dialog("open");
-	    }
-    });		
+    $detailsTab.find("#cancel_button").unbind("click").bind("click", function(event){    
+        $editFields.hide();
+        $readonlyFields.show();   
+        $("#save_button, #cancel_button").hide();       
+        return false;
+    });
+    $detailsTab.find("#save_button").unbind("click").bind("click", function(event){        
+        doEditGlobalSetting2();     
+        $editFields.hide();      
+        $readonlyFields.show();       
+        $("#save_button, #cancel_button").hide();       
+        return false;
+    });   
 }
 
-function globalSettingGetMidmenuId(jsonObj) {
-    return "midmenuItem_" + fromdb(jsonObj.name).replace(/\./g, "_").replace(/\s/g, ""); //remove all spaces in jsonObj.name
+function doEditGlobalSetting2() {        
+    $("#right_panel_content #tab_content_details").find("#globalsetting_template").each(function(index) {        
+        var $thisRow =$(this);        
+        if($thisRow.find("#value_edit").val() != $thisRow.find("#value").text()) {            
+            // validate values        
+            var isValid = true;					
+            isValid &= validateString("Value", $thisRow.find("#value_edit"), $thisRow.find("#value_edit_errormsg"), true);					
+            if (!isValid) 
+                return;						
+        		        
+	        var name = $thisRow.find("#name").text();
+            var value = $thisRow.find("#value_edit").val();
+          
+            $.ajax({
+              data: createURL("command=updateConfiguration&name="+todb(name)+"&value="+todb(value)),
+	            dataType: "json",
+	            async: false,
+	            success: function(json) {	
+	                //call listConfigurations before bug 6506("What updateConfiguration API returns should include an embedded object") is fixed.	           
+		            var jsonObj;		   
+		            $.ajax({
+		                data: createURL("command=listConfigurations&name="+name),
+		                dataType: "json",
+		                async: false,
+		                success: function(json) {			                      
+		                    jsonObj = json.listconfigurationsresponse.configuration[0];
+		                }
+		            });		
+		            globalsettingJSONToTemplate(jsonObj, $thisRow);  
+        		    	    
+		            $("#dialog_alert_restart_management_server").dialog("open");
+	            }
+            });		           
+        }
+    });    
 }
-
-function globalSettingToMidmenu(jsonObj, $midmenuItem1) {    
-    var id = globalSettingGetMidmenuId(jsonObj);
-    $midmenuItem1.attr("id", id);   
-       
-    $midmenuItem1.data("jsonObj", jsonObj); 
-        
-    var $iconContainer = $midmenuItem1.find("#icon_container").show();   
-    $iconContainer.find("#icon").attr("src", "images/midmenuicon_system_globalsettings.png");	
-    
-    $midmenuItem1.find("#first_row").text(fromdb(jsonObj.name).substring(0,25)); 
-    $midmenuItem1.find("#second_row").text(fromdb(jsonObj.value).substring(0,25));  
-}
-
-function globalSettingToRightPanel($midmenuItem1) {
-    copyActionInfoFromMidMenuToRightPanel($midmenuItem1);
-    globalSettingJsonToDetailsTab($midmenuItem1);   
-}
-
-function globalSettingJsonToDetailsTab($midmenuItem1) { 
-    var jsonObj = $midmenuItem1.data("jsonObj");
-    var $detailsTab = $("#right_panel_content #tab_content_details");   
-    $detailsTab.data("jsonObj", jsonObj);          
-    $detailsTab.find("#name").text(fromdb(jsonObj.name));
-    $detailsTab.find("#value").text(fromdb(jsonObj.value));
-    $detailsTab.find("#value_edit").val(fromdb(jsonObj.value));
-    $detailsTab.find("#description").text(fromdb(jsonObj.description));   
-    $detailsTab.find("#category").text(fromdb(jsonObj.category)); 
-}
\ No newline at end of file
diff --git a/ui/new/scripts/cloud.core2.init.js b/ui/new/scripts/cloud.core2.init.js
index b7e07e70fe5..55ab7f66756 100644
--- a/ui/new/scripts/cloud.core2.init.js
+++ b/ui/new/scripts/cloud.core2.init.js
@@ -102,8 +102,7 @@ $(document).ready(function() {
 		bindAndListMidMenuItems($("#leftmenu_volume"), "listVolumes", "listvolumesresponse", "volume", "jsp/volume.jsp", afterLoadVolumeJSP, volumeToMidmenu, volumeToRightPanel, getMidmenuId, false);
 		bindAndListMidMenuItems($("#leftmenu_snapshot"), "listSnapshots", "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", afterLoadSnapshotJSP, snapshotToMidmenu, snapshotToRightPanel, getMidmenuId, false);
 		bindAndListMidMenuItems($("#leftmenu_ip"), "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", "jsp/ipaddress.jsp", afterLoadIpJSP, ipToMidmenu, ipToRightPanel, ipGetMidmenuId, false);
-		//bindAndListMidMenuItems("leftmenu_router", "listRouters", "listroutersresponse", "router", "jsp/router.jsp", afterLoadRouterJSP, routerToMidmenu, routerToRightPanel, getMidmenuId, false);
-		  
+		 
 		bindAndListMidMenuItems($("#leftmenu_submenu_my_template"), "listTemplates&templatefilter=self", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRightPanel, templateGetMidmenuId, false);
 		bindAndListMidMenuItems($("#leftmenu_submenu_featured_template"), "listTemplates&templatefilter=featured", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRightPanel, templateGetMidmenuId, false);
 		bindAndListMidMenuItems($("#leftmenu_submenu_community_template"), "listTemplates&templatefilter=community", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRightPanel, templateGetMidmenuId, false);
@@ -114,7 +113,26 @@ $(document).ready(function() {
 		
 		bindAndListMidMenuItems($("#leftmenu_service_offering"), "listServiceOfferings", "listserviceofferingsresponse", "serviceoffering", "jsp/serviceoffering.jsp", afterLoadServiceOfferingJSP, serviceOfferingToMidmenu, serviceOfferingToRightPanel, getMidmenuId, false); 
 		bindAndListMidMenuItems($("#leftmenu_disk_offering"), "listDiskOfferings", "listdiskofferingsresponse", "diskoffering", "jsp/diskoffering.jsp", afterLoadDiskOfferingJSP, diskOfferingToMidmenu, diskOfferingToRightPanel, getMidmenuId, false); 
-		bindAndListMidMenuItems($("#leftmenu_global_setting"), "listConfigurations", "listconfigurationsresponse", "configuration", "jsp/globalsetting.jsp", afterLoadGlobalSettingJSP, globalSettingToMidmenu, globalSettingToRightPanel, globalSettingGetMidmenuId, false); 
+		
+		$("#leftmenu_global_setting").bind("click", function(event) {
+		    selectLeftSubMenu($(this));		
+		    		    
+		    $("#right_panel").load("jsp/globalsetting.jsp", function(){     
+		        var $actionLink = $("#right_panel_content #tab_content_details #action_link");
+		        $actionLink.bind("mouseover", function(event) {	    
+			        $(this).find("#action_menu").show();    
+			        return false;
+		        });
+		        $actionLink.bind("mouseout", function(event) {       
+			        $(this).find("#action_menu").hide();    
+			        return false;
+		        });	   
+        					  
+		        afterLoadGlobalSettingJSP();   
+	        });    
+		    
+		    return false;
+		});
 		
 		$("#leftmenu_resource").bind("click", function(event) {
 			showMiddleMenu();