www/manager6/form/BandwidthSelector.js

   1 Ext.define('PVE.form.BandwidthField', {
   2     extend: 'Ext.form.FieldContainer',
   3     alias: 'widget.pveBandwidthField',
   4
   5     mixins: ['Proxmox.Mixin.CBind'],
   6
   7     viewModel: {
   8         data: {
   9             unit: 'MiB',
  10         },
  11         formulas: {
  12             unitlabel: (get) => get('unit') + '/s',
  13         },
  14     },
  15
  16     emptyText: '',
  17
  18     layout: 'hbox',
  19     defaults: {
  20         hideLabel: true,
  21     },
  22
  23     units: {
  24         'KiB': 1024,
  25         'MiB': 1024*1024,
  26         'GiB': 1024*1024*1024,
  27         'KB': 1000,
  28         'MB': 1000*1000,
  29         'GB': 1000*1000*1000,
  30     },
  31
  32     // display unit (TODO: make (optionally) selectable)
  33     unit: 'MiB',
  34
  35     // use this if the backend saves values in another unit tha bytes, e.g.,
  36     // for KiB set it to 'KiB'
  37     backendUnit: undefined,
  38
  39     items: [
  40         {
  41             xtype: 'numberfield',
  42             cbind: {
  43                 name: '{name}',
  44                 emptyText: '{emptyText}',
  45             },
  46             minValue: 0,
  47             step: 1,
  48             submitLocaleSeparator: false,
  49             fieldStyle: 'text-align: right',
  50             flex: 1,
  51             enableKeyEvents: true,
  52             setValue: function(v) {
  53                 if (!this._transformed) {
  54                     let fieldct = this.up('pveBandwidthField');
  55                     let vm = fieldct.getViewModel();
  56                     let unit = vm.get('unit');
  57
  58                     v /= fieldct.units[unit];
  59                     v *= fieldct.backendFactor;
  60
  61                     this._transformed = true;
  62                 }
  63
  64                 if (v == 0) v = undefined;
  65
  66                 return Ext.form.field.Text.prototype.setValue.call(this, v);
  67             },
  68             getSubmitValue: function() {
  69                 let v = this.processRawValue(this.getRawValue());
  70                 v = v.replace(this.decimalSeparator, '.');
  71
  72                 if (v === undefined) return null;
  73                 // FIXME: make it configurable, as this only works if 0 === default
  74                 if (v == 0 || v == 0.0) return null;
  75
  76                 let fieldct = this.up('pveBandwidthField');
  77                 let vm = fieldct.getViewModel();
  78                 let unit = vm.get('unit');
  79
  80                 v = parseFloat(v) * fieldct.units[unit];
  81                 v /= fieldct.backendFactor;
  82
  83                 return ''+ Math.floor(v);
  84             },
  85             listeners: {
  86                 // our setValue gets only called if we have a value, avoid
  87                 // transformation of the first user-entered value
  88                 keydown: function() { this._transformed = true; },
  89             },
  90         },
  91         {
  92             xtype: 'displayfield',
  93             name: 'unit',
  94             submitValue: false,
  95             padding: '0 0 0 10',
  96             bind: {
  97                 value: '{unitlabel}',
  98             },
  99             listeners: {
 100                 change: (f, v) => f.originalValue = v,
 101             },
 102             width: 40,
 103         },
 104     ],
 105
 106     initComponent: function() {
 107         let me = this;
 108
 109         me.unit = me.unit || 'MiB';
 110         if (!(me.unit in me.units)) {
 111             throw "unknown unit: " + me.unit;
 112         }
 113
 114         me.backendFactor = 1;
 115         if (me.backendUnit !== undefined) {
 116             if (!(me.unit in me.units)) {
 117                 throw "unknown backend unit: " + me.backendUnit;
 118             }
 119             me.backendFactor = me.units[me.backendUnit];
 120         }
 121
 122
 123         me.callParent(arguments);
 124
 125         me.getViewModel().set('unit', me.unit);
 126     },
 127 });
 128