[pve-devel] applied: [PATCH manager 1/2] ui: add Bandwidth selector widget

[Thomas Lamprecht]

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

I talked a bit with Dominik, while he prefered to use a hidden field for the
"real" value and a dummy field for the user editing side with the transformed
value it was not really easier than this, even if it might be the less
"hackier" or a bit nicer interface.

 www/manager6/Makefile                  |   1 +
 www/manager6/form/BandwidthSelector.js | 128 +++++++++++++++++++++++++
 2 files changed, 129 insertions(+)
 create mode 100644 www/manager6/form/BandwidthSelector.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index b7ffc44b..a027e66b 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -21,6 +21,7 @@ JSSRC= 				                 	\
 	data/model/RRDModels.js				\
 	form/VLanField.js				\
 	form/Boolean.js					\
+	form/BandwidthSelector.js			\
 	form/CompressionSelector.js			\
 	form/PoolSelector.js				\
 	form/PrivilegesSelector.js			\
diff --git a/www/manager6/form/BandwidthSelector.js b/www/manager6/form/BandwidthSelector.js
new file mode 100644
index 00000000..fa27e560
--- /dev/null
+++ b/www/manager6/form/BandwidthSelector.js
@@ -0,0 +1,128 @@
+Ext.define('PVE.form.BandwidthField', {
+    extend: 'Ext.form.FieldContainer',
+    alias: 'widget.pveBandwidthField',
+
+    mixins: ['Proxmox.Mixin.CBind' ],
+
+    viewModel: {
+	data: {
+	    unit: 'MiB',
+	},
+	formulas: {
+	    unitlabel: (get) => get('unit') + '/s',
+	}
+    },
+
+    emptyText: '',
+
+    layout: 'hbox',
+    defaults: {
+	hideLabel: true
+    },
+
+    units: {
+	'KiB': 1024,
+	'MiB': 1024*1024,
+	'GiB': 1024*1024*1024,
+	'KB': 1000,
+	'MB': 1000*1000,
+	'GB': 1000*1000*1000,
+    },
+
+    // display unit (TODO: make (optionally) selectable)
+    unit: 'MiB',
+
+    // use this if the backend saves values in another unit tha bytes, e.g.,
+    // for KiB set it to 'KiB'
+    backendUnit: undefined,
+
+    items: [
+	{
+	    xtype: 'numberfield',
+	    cbind: {
+		name: '{name}',
+		emptyText: '{emptyText}',
+	    },
+	    minValue: 0,
+	    step: 1,
+	    submitLocaleSeparator: false,
+	    fieldStyle: 'text-align: right',
+	    flex: 1,
+	    enableKeyEvents: true,
+	    setValue: function(v) {
+		if (!this._transformed) {
+		    let fieldct = this.up('pveBandwidthField');
+		    let vm = fieldct.getViewModel();
+		    let unit = vm.get('unit');
+
+		    v /= fieldct.units[unit];
+		    v *= fieldct.backendFactor;
+
+		    this._transformed = true;
+		}
+
+		if (v == 0) v = undefined;
+
+		return Ext.form.field.Text.prototype.setValue.call(this, v);
+	    },
+	    getSubmitValue: function() {
+		let v = this.processRawValue(this.getRawValue());
+		v = v.replace(this.decimalSeparator, '.')
+
+		if (v === undefined) return v;
+		// FIXME: make it configurable, as this only works if 0 === default
+		if (v == 0 || v == 0.0) return '';
+
+		let fieldct = this.up('pveBandwidthField');
+		let vm = fieldct.getViewModel();
+		let unit = vm.get('unit');
+
+		v = parseFloat(v) * fieldct.units[unit];
+		v /= fieldct.backendFactor;
+
+		return ''+ Math.floor(v);
+	    },
+	    listeners: {
+		// our setValue gets only called if we have a value, avoid
+		// transformation of the first user-entered value
+		keydown: function () { this._transformed = true; },
+	    },
+	},
+	{
+	    xtype: 'displayfield',
+	    name: 'unit',
+	    submitValue: false,
+	    padding: '0 0 0 10',
+	    bind: {
+		value: '{unitlabel}',
+	    },
+	    listeners: {
+		change: (f, v) => f.originalValue = v,
+	    },
+	    width: 40,
+	},
+    ],
+
+    initComponent: function() {
+	let me = this;
+
+	me.unit = me.unit || 'MiB';
+	if (!(me.unit in me.units)) {
+	    throw "unknown unit: " + me.unit;
+	}
+
+	me.backendFactor = 1;
+	if (me.backendUnit !== undefined) {
+	    if (!(me.unit in me.units)) {
+		throw "unknown backend unit: " + me.backendUnit;
+	    }
+	    me.backendFactor = me.units[me.backendUnit];
+	}
+
+
+	me.callParent(arguments);
+
+	me.getViewModel().set('unit', me.unit);
+    },
+});
+
-- 
2.20.1