[pve-devel] [PATCH manager v3 3/6] 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>
---
 www/manager6/qemu/OSTypeEdit.js | 131 ++++++++++++++++------------------------
 1 file changed, 51 insertions(+), 80 deletions(-)

diff --git a/www/manager6/qemu/OSTypeEdit.js b/www/manager6/qemu/OSTypeEdit.js
index 14a1245b..d7c27e99 100644
--- a/www/manager6/qemu/OSTypeEdit.js
+++ b/www/manager6/qemu/OSTypeEdit.js
@@ -7,10 +7,17 @@ Ext.define('PVE.qemu.OSTypeInputPanel', {
     controller: {
 	xclass: 'Ext.app.ViewController',
 	control: {
-	    'radiogroup': {
+	    'combobox[name=osbase]': {
+		change: 'onOSBaseChange'
+	    },
+	    'combobox[name=ostype]': {
+		afterrender: 'onOSTypeChange',
 		change: 'onOSTypeChange'
 	    }
 	},
+	onOSBaseChange: function(field, value) {
+	    this.lookup('ostype').getStore().setData(PVE.Utils.kvm_ostypes[value]);
+	},
 	onOSTypeChange: function(field) {
 	    var me = this, ostype = field.getValue();
 	    if (!me.getView().insideWizard) {
@@ -45,92 +52,55 @@ 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'
-	    }
-	];
-
-	me.column2 = [
+	/*jslint confusion: true */
+	me.items = [
 	    {
-		xtype: 'component', 
-		html: 'Linux/' + gettext('Other OS types'), 
-		cls:'x-form-check-group-label'
+		xtype: 'displayfield',
+		value: gettext('Guest OS') + ':',
+		hidden: !me.insideWizard
 	    },
 	    {
-		xtype: 'radiofield',
-		name: 'ostype',
-		inputValue: 'l26'
+		xtype: 'combobox',
+		submitValue: false,
+		name: 'osbase',
+		fieldLabel: gettext('Type'),
+		editable: false,
+		queryMode: 'local',
+		value: 'Linux',
+		store: Object.keys(PVE.Utils.kvm_ostypes)
 	    },
 	    {
-		xtype: 'radiofield',
+		xtype: 'combobox',
 		name: 'ostype',
-		inputValue: 'l24'
-	    },
-	    {
-		xtype: 'radiofield',
-		name: 'ostype',
-		inputValue: 'solaris'
-	    },
-	    {
-		xtype: 'radiofield',
-		name: 'ostype',
-		inputValue: 'other'
+		reference: 'ostype',
+		fieldLabel: gettext('Version'),
+		value: 'l26',
+		allowBlank : false,
+		editable: false,
+		queryMode: 'local',
+		valueField: 'val',
+		displayField: 'desc',
+		store: {
+		    fields: ['desc', 'val'],
+		    data: PVE.Utils.kvm_ostypes.Linux,
+		    listeners: {
+			datachanged: function (store) {
+			    var ostype = me.lookup('ostype');
+			    var old_val = ostype.getValue();
+			    if (!me.insideWizard && old_val && store.find('val', old_val) != -1) {
+				ostype.setValue(old_val);
+			    } else {
+				ostype.setValue(store.getAt(0));
+			    }
+			}
+		    }
+		}
 	    }
 	];
-
-	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', {
@@ -138,10 +108,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();
@@ -149,7 +119,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