From: ShaoHe Feng <shaohef@linux.vnet.ibm.com>

The backend already support spice.
Just need to add a graphics selection in template edit page.

Signed-off-by: ShaoHe Feng <shaohef@linux.vnet.ibm.com>
---
 ui/js/src/kimchi.template_edit_main.js | 14 ++++++++++++--
 ui/pages/template-edit.html.tmpl       | 15 +++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
index 17e9a41..c2fea31 100644
--- a/ui/js/src/kimchi.template_edit_main.js
+++ b/ui/js/src/kimchi.template_edit_main.js
@@ -22,10 +22,16 @@ kimchi.template_edit_main = function() {
     kimchi.retrieveTemplate(kimchi.selectedTemplate, function(template) {
         origDisks =  template.disks;
         for ( var prop in template) {
-            $('input[name="' + prop + '"]', templateEditForm).val(template[prop]);

+            value = template[prop];

+            if (prop == 'graphics') {
+               value = value["type"];
+            }
+            $('input[name="' + prop + '"]', templateEditForm).val(value);
         }
         var disks = template.disks;
         $('input[name="disks"]').val(disks[0].size);
+        var options = [{label: 'vnc', value: 'vnc'}, {label: 'spice', value: 'spice'}];
+        kimchi.select('template-edit-graphics-list', options);
         kimchi.listStoragePools(function(result) {
             var options = [];
             if (result && result.length) {
@@ -67,7 +73,7 @@ kimchi.template_edit_main = function() {
     });

     $('#tmpl-edit-button-save').on('click', function() {
-        var editableFields = [ 'name', 'cpus', 'memory', 'storagepool', 'disks'];
+        var editableFields = [ 'name', 'cpus', 'memory', 'storagepool', 'disks', 'graphics'];
         var data = {};
         $.each(editableFields, function(i, field) {
             /* Support only 1 disk at this moment */
@@ -75,6 +81,10 @@ kimchi.template_edit_main = function() {
                origDisks[0].size = Number($('#form-template-edit [name="' + field + '"]').val());
                data[field] = origDisks;
             }
+            else if (field == 'graphics') {
+               var type = $('#form-template-edit [name="' + field + '"]').val();
+               data[field] = {'type': type};
+            }
             else {
                data[field] = $('#form-template-edit [name="' + field + '"]').val();
             }
diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl
index 6056997..0f663d4 100644
--- a/ui/pages/template-edit.html.tmpl
+++ b/ui/pages/template-edit.html.tmpl
@@ -91,6 +91,21 @@
                 </div>
                 <div>
                     <div class="template-edit-wrapper-label">
+                        <label>$_("graphics")</label>
+                    </div>
+                    <div class="template-edit-wrapper-controls">
+                        <div class="btn dropdown popable">
+                            <input id="template-edit-graphics" name="graphics" type="hidden" />
+                            <span class="text" id="template-edit-graphics-label"></span><span class="arrow"></span>
+                            <div class="popover" style="width: 100%">
+                                <ul class="select-list" id="template-edit-graphics-list" data-target="template-edit-graphics" data-label="template-edit-graphics-label">
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="template-edit-wrapper-label">
                         <label>$_("Storage Pool")</label>
                     </div>
                     <div class="template-edit-wrapper-controls">