From aeaa7ce66663452ae2c98424d286c1464a686355 Mon Sep 17 00:00:00 2001
From: Abel Coronado <acoronado@opennebula.org>
Date: Fri, 21 Apr 2017 16:44:21 +0200
Subject: [PATCH] F #4913 Restyled advanced options [import vCenter template]
 (#273)

---
 .../public/app/utils/vcenter/templates.js     | 20 ++++++++++++++++---
 .../app/utils/vcenter/templates/row.hbs       | 12 +++++++----
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/sunstone/public/app/utils/vcenter/templates.js b/src/sunstone/public/app/utils/vcenter/templates.js
index 373d14cde7..20b02d567e 100644
--- a/src/sunstone/public/app/utils/vcenter/templates.js
+++ b/src/sunstone/public/app/utils/vcenter/templates.js
@@ -108,9 +108,19 @@ define(function(require) {
               }
 
               opts.data = element;
+              opts.resourcePool.params = opts.resourcePool.params.split(",");
+              opts.id = UniqueId.id();
 
               var trow = $(RowTemplate(opts)).appendTo(tbody);
-
+              
+              $.each(opts.resourcePool.params, function(){
+                $("#available_rps_" + opts.id + " [value ='" + this + "']").mousedown(function(e) {
+                  e.preventDefault();
+                  $(this).prop('selected', !$(this).prop('selected'));
+                  return false;
+                });
+              });
+            
               $('.check_item', trow).data("import_data", element);
             });
 
@@ -172,7 +182,11 @@ define(function(require) {
         if (rpInput.length > 0) {
           var rpModify = $('.modify_rp', rpInput).val();
           var rpInitial = $('.initial_rp', rpInput).val();
-          var rpParams = $('.available_rps', rpInput).val();
+          var rpParams = "";
+          $.each($('.available_rps option:selected', rpInput), function(){
+            rpParams += $(this).val() + ",";
+          });
+          var rpParams = rpParams.slice(0,-1);
 
           if (rpModify === 'fixed' && rpInitial !== '') {
             attrs.push('VCENTER_RESOURCE_POOL="' + rpInitial + '"');
@@ -181,7 +195,7 @@ define(function(require) {
                 type: 'list',
                 description: Locale.tr("Which resource pool you want this VM to run in?"),
                 initial: rpInitial,
-                params: $('.available_rps', rpInput).val()
+                params: rpParams
               });
 
             userInputs.push('VCENTER_RESOURCE_POOL="' + rpUserInputs + '"');
diff --git a/src/sunstone/public/app/utils/vcenter/templates/row.hbs b/src/sunstone/public/app/utils/vcenter/templates/row.hbs
index f205af1367..95521054ff 100644
--- a/src/sunstone/public/app/utils/vcenter/templates/row.hbs
+++ b/src/sunstone/public/app/utils/vcenter/templates/row.hbs
@@ -15,8 +15,8 @@
 {{! -------------------------------------------------------------------------- }}
 
 <tr>
-  <td>
-    <input type="checkbox" class="check_item"/>
+  <td style="vertical-align: top">
+    <input type="checkbox" class="check_item" style="margin-top: 5px"/>
   </td>
   <td>
     <div class="accordion_advanced vcenter_row">
@@ -33,7 +33,7 @@
         <div class="large-11 large-centered columns">
           <div id="{{data.vcenter_ref}}Advanced" class="content" hidden>
             {{#if resourcePool}}
-            <div class="vcenter_rp_input row">
+            <div class="vcenter_rp_input row" style="margin-left: 11px">
               <div class="medium-3 columns">
                 <label>
                   {{tr "Default Resource Pool"}}
@@ -52,7 +52,11 @@
               <div class="medium-4 columns end">
                 <label>
                   {{tr "Available Resource Pools"}}
-                  <input type="text" class="available_rps" value="{{resourcePool.params}}"/>
+                  <select multiple="true" size="3" class="available_rps" id="available_rps_{{id}}">
+                    {{#each resourcePool.params}}
+                      <option value="{{this}}" selected>{{this}}</option>
+                    {{/each}}
+                  </select>
                 </label>
               </div>
             </div>