[pve-devel] [PATCH manager 3/4] OSType edit: switch to combobox

[Thomas Lamprecht]

Move from the radiogroup to two comboboxes, where the base OS and
then a specific Version can be choosen.

Avoids multiple occurences of strings like "Microsoft Windows" and
saves a lot of space - which will be used to merge this panel with
the ISO selector panel in the create wizard.

Signed-off-by: Thomas Lamprecht <t.lamprecht at proxmox.com>
---

I see rather now that I could but my change listener from the osbase field
also in the controller block, I guess this would be the nicer approach?

 www/manager6/qemu/OSTypeEdit.js | 130 ++++++++++++++--------------------------
 1 file changed, 46 insertions(+), 84 deletions(-)

diff --git a/www/manager6/qemu/OSTypeEdit.js b/www/manager6/qemu/OSTypeEdit.js
index 162a92ec..ba1fdaa6 100644
--- a/www/manager6/qemu/OSTypeEdit.js
+++ b/www/manager6/qemu/OSTypeEdit.js
@@ -7,7 +7,7 @@ Ext.define('PVE.qemu.OSTypeInputPanel', {
     controller: {
 	xclass: 'Ext.app.ViewController',
 	control: {
-	    'radiogroup': {
+	    'combobox[name=ostype]': {
 		    change: function(field, value) {
 			var me = this;
 			if (!me.getView().insideWizard) {
@@ -15,9 +15,8 @@ Ext.define('PVE.qemu.OSTypeInputPanel', {
 			}
 
 			var targetValues;
-
-			if (PVE.qemu.OSDefaults[value.ostype]) {
-			    targetValues = PVE.qemu.OSDefaults[value.ostype];
+			if (PVE.qemu.OSDefaults[value]) {
+			    targetValues = PVE.qemu.OSDefaults[value];
 			} else {
 			    targetValues = PVE.qemu.OSDefaults.generic;
 			}
@@ -51,92 +50,54 @@ Ext.define('PVE.qemu.OSTypeInputPanel', {
     initComponent : function() {
 	var me = this;
 
-	me.column1 = [
-	    {
-		xtype: 'component', 
-		html: 'Microsoft Windows', 
-		cls:'x-form-check-group-label'
-	    },
-	    {
-		xtype: 'radiofield',
-		name: 'ostype',
-		inputValue: 'win10'
-	    },
-	    {
-		xtype: 'radiofield',
-		name: 'ostype',
-		inputValue: 'win8'
-	    },
-	    {
-		xtype: 'radiofield',
-		name: 'ostype',
-		inputValue: 'win7'
-	    },
-	    {
-		xtype: 'radiofield',
-		name: 'ostype',
-		inputValue: 'w2k8'
-	    },
-	    {
-		xtype: 'radiofield',
-		name: 'ostype',
-		inputValue: 'wxp'
-	    },
-	    {
-		xtype: 'radiofield',
-		name: 'ostype',
-		inputValue: 'w2k'
+	var ostype = Ext.create({
+	    xtype: 'combobox',
+	    name: 'ostype',
+	    allowBlank : false,
+	    editable: false,
+	    fieldLabel: gettext('Version'),
+	    valueField: 'val',
+	    displayField: 'desc',
+	    queryMode: 'local',
+	    store: {
+		fields: ['desc', 'val']
 	    }
-	];
+	});
 
-	me.column2 = [
-	    {
-		xtype: 'component', 
-		html: 'Linux/' + gettext('Other OS types'), 
-		cls:'x-form-check-group-label'
-	    },
+	/*jslint confusion: true */
+	me.items = [
 	    {
-		xtype: 'radiofield',
-		name: 'ostype',
-		inputValue: 'l26'
+		xtype: 'displayfield',
+		value: gettext('Guest OS') + ':',
+		hidden: !me.insideWizard
 	    },
 	    {
-		xtype: 'radiofield',
-		name: 'ostype',
-		inputValue: 'l24'
-	    },
-	    {
-		xtype: 'radiofield',
-		name: 'ostype',
-		inputValue: 'solaris'
+		xtype: 'combobox',
+		submitValue: false,
+		name: 'osbase',
+		fieldLabel: gettext('Vendor'),
+		editable: false,
+		store: Object.keys(PVE.Utils.kvm_ostypes),
+		listeners: {
+		    change: function(field, value) {
+			var store = ostype.getStore();
+			var old_val = ostype.getValue(), restore = !store.count();
+			store.setData(PVE.Utils.kvm_ostypes[value]);
+			// ensure ostype is set to config value if we are in edit window
+			if (restore && old_val) {
+			    ostype.setValue(old_val);
+			} else {
+			    ostype.setValue(store.getAt(0)); // for convenience
+			}
+		    }
+		}
 	    },
-	    {
-		xtype: 'radiofield',
-		name: 'ostype',
-		inputValue: 'other'
-	    }
+	    ostype
 	];
-
-	Ext.Array.each(me.column1, function(def) {
-	    if (def.inputValue) {
-		def.boxLabel = PVE.Utils.render_kvm_ostype(def.inputValue);
-	    }
-	});
-	Ext.Array.each(me.column2, function(def) {
-	    if (def.inputValue) {
-		def.boxLabel = PVE.Utils.render_kvm_ostype(def.inputValue);
-	    }
-	});
-
-	Ext.apply(me, {
-	    useFieldContainer: {
-		xtype: 'radiogroup',
-		allowBlank: false
-	    }
-	});
+	/*jslint confusion: false */
 
 	me.callParent();
-    }   
+    }
 });
 
 Ext.define('PVE.qemu.OSTypeEdit', {
@@ -144,10 +105,10 @@ Ext.define('PVE.qemu.OSTypeEdit', {
 
     initComponent : function() {
 	var me = this;
-	
+
 	Ext.apply(me, {
 	    subject: 'OS Type',
-	    items: Ext.create('PVE.qemu.OSTypeInputPanel')
+	    items: [{ xtype: 'pveQemuOSTypePanel' }]
 	});
 
 	me.callParent();
@@ -155,7 +116,8 @@ Ext.define('PVE.qemu.OSTypeEdit', {
 	me.load({
 	    success: function(response, options) {
 		var value = response.result.data.ostype || 'other';
-		me.setValues({ ostype: value});
+		var osinfo = PVE.Utils.get_kvm_osinfo(value);
+		me.setValues({ ostype: value, osbase: osinfo.base });
 	    }
 	});
     }
-- 
2.11.0