From 94923cb0c8e6dfdb2dc7210dda00c7258dd762e5 Mon Sep 17 00:00:00 2001
From: Hector Sanjuan <hsanjuan@opennebula.org>
Date: Mon, 21 Mar 2011 18:05:30 +0100
Subject: [PATCH] Bug #537: Improved the context section making it more
 intuitive (cherry picked from commit
 68946d294d144f41b76cbf9ece77f5f41538a69f)

---
 src/sunstone/public/js/one-ui_views.js        | 31 ++++++++++++++++---
 .../public/js/one-ui_views.templates.js       | 25 +++++++++++----
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/sunstone/public/js/one-ui_views.js b/src/sunstone/public/js/one-ui_views.js
index eaa2e221cc..7f45f58030 100644
--- a/src/sunstone/public/js/one-ui_views.js
+++ b/src/sunstone/public/js/one-ui_views.js
@@ -1718,6 +1718,25 @@ function createVMachineDialog(){
 				$('fieldset',section_context).toggle();
                 return false;
 		});
+              
+        $('#add_context_button', section_context).click(function(){
+            var name = $('#var_name',section_context).val();
+            var value = $('#var_value',section_context).val();
+            if (!name.length || !value.length) {
+                notifyError("Context variable name and value must be filled in");
+                return false;
+            }
+            option= '<option value=\''+value+'\' name=\''+name+'\'>'+
+            name+'='+value+
+            '</option>';
+            $('select#context_box',section_context).append(option);
+            return false; 
+        });
+        
+        $('#remove_context_button', section_context).click(function(){
+           box_remove_element(section_context,'#context_box');
+           return false; 
+        });
 
 	};
 
@@ -1879,11 +1898,15 @@ function createVMachineDialog(){
 		vm_json["GRAPHICS"] = {};
 		addSectionJSON(vm_json["GRAPHICS"],scope);
 
-		//context -> include
+		//context
 		scope = section_context;
-        var context = $('#CONTEXT',scope).val();
-        if (context)
-            vm_json["CONTEXT"] = context;
+        vm_json["CONTEXT"] = {};
+        var pair;
+        $('#context_box option',scope).each(function(){
+            name = $(this).attr("name");
+            value = $(this).val();
+            vm_json["CONTEXT"][name]=value;
+        });
 
 		//placement -> fetch with value
 		scope = section_placement;
diff --git a/src/sunstone/public/js/one-ui_views.templates.js b/src/sunstone/public/js/one-ui_views.templates.js
index 10f2c09d51..4781950f9a 100644
--- a/src/sunstone/public/js/one-ui_views.templates.js
+++ b/src/sunstone/public/js/one-ui_views.templates.js
@@ -693,14 +693,27 @@ var create_vm_tmpl =
 			  <!--context textarea? -->\
 			  <div class="vm_section" id="context">\
 			  	<div class="show_hide" id="add_context_cb">\
-			  	  <h3>Add context <a id="add_context" class="icon_left" href="#"><span class="ui-icon ui-icon-plus" /></a></h3>\
+			  	  <h3>Add context variables <a id="add_context" class="icon_left" href="#"><span class="ui-icon ui-icon-plus" /></a></h3>\
 			    </div>\
 			  <fieldset><legend>Context</legend>\
-			  <div class="vm_param kvm_opt xen_opt">\
-			  <label for="CONTEXT">Context:</label>\
-			  <input type="text" id="CONTEXT" name="context" />\
-			  <!--<textarea id="CONTEXT" style="width:320px;height:15em;"></textarea>-->\
-			  </div>\
+              <div class="vm_param kvm_opt xen_opt">\
+				  <label for="var_name">Name:</label>\
+				  <input type="text" id="var_name" name="var_name" />\
+				  <div class="tip">Name for the context variable</div>\
+			    </div>\
+			    <div class="vm_param kvm_opt xen_opt">\
+				  <label for="var_value">Value:</label>\
+				  <input type="text" id="var_value" name="var_value" />\
+				  <div class="tip">Value of the context variable</div>\
+              </div>\
+                <div class="">\
+					<button class="add_remove_button add_button" id="add_context_button" value="add_context">Add</button>\
+					<button class="add_remove_button" id="remove_context_button" value="remove_input">Remove selected</button>\
+					<div class="clear"></div>\
+					<label for="context_box">Current variables:</label>\
+					<select id="context_box" name="context_box" style="width:150px;height:100px;" multiple>\
+					</select>\
+                </div>\
 			  </fieldset>\
 			  </div>\
 \