src/form/BandwidthSelector.js

   1 Ext.define('Proxmox.form.SizeField', {
   2     extend: 'Ext.form.FieldContainer',
   3     alias: 'widget.pmxSizeField',
   4
   5     mixins: ['Proxmox.Mixin.CBind'],
   6
   7     viewModel: {
   8         data: {
   9             unit: 'MiB',
  10             unitPostfix: '',
  11         },
  12         formulas: {
  13             unitlabel: (get) => get('unit') + get('unitPostfix'),
  14         },
  15     },
  16
  17     emptyText: '',
  18
  19     layout: 'hbox',
  20     defaults: {
  21         hideLabel: true,
  22     },
  23
  24     // display unit (TODO: make (optionally) selectable)
  25     unit: 'MiB',
  26     unitPostfix: '',
  27
  28     // use this if the backend saves values in another unit than bytes, e.g.,
  29     // for KiB set it to 'KiB'
  30     backendUnit: undefined,
  31
  32     // submit a canonical size unit, e.g., 20.5 MiB
  33     submitAutoScaledSizeUnit: false,
  34
  35     // allow setting 0 and using it as a submit value
  36     allowZero: false,
  37
  38     emptyValue: null,
  39
  40     items: [
  41         {
  42             xtype: 'numberfield',
  43             cbind: {
  44                 name: '{name}',
  45                 emptyText: '{emptyText}',
  46                 allowZero: '{allowZero}',
  47                 emptyValue: '{emptyValue}',
  48             },
  49             minValue: 0,
  50             step: 1,
  51             submitLocaleSeparator: false,
  52             fieldStyle: 'text-align: right',
  53             flex: 1,
  54             enableKeyEvents: true,
  55             setValue: function(v) {
  56                 if (!this._transformed) {
  57                     let fieldContainer = this.up('fieldcontainer');
  58                     let vm = fieldContainer.getViewModel();
  59                     let unit = vm.get('unit');
  60
  61                     if (typeof v === "string") {
  62                         v = Proxmox.Utils.size_unit_to_bytes(v);
  63                     }
  64                     v /= Proxmox.Utils.SizeUnits[unit];
  65                     v *= fieldContainer.backendFactor;
  66
  67                     this._transformed = true;
  68                 }
  69
  70                 if (Number(v) === 0 && !this.allowZero) {
  71                     v = undefined;
  72                 }
  73
  74                 return Ext.form.field.Text.prototype.setValue.call(this, v);
  75             },
  76             getSubmitValue: function() {
  77                 let v = this.processRawValue(this.getRawValue());
  78                 v = v.replace(this.decimalSeparator, '.');
  79
  80                 if (v === undefined || v === '') {
  81                     return this.emptyValue;
  82                 }
  83
  84                 if (Number(v) === 0) {
  85                     return this.allowZero ? 0 : null;
  86                 }
  87
  88                 let fieldContainer = this.up('fieldcontainer');
  89                 let vm = fieldContainer.getViewModel();
  90                 let unit = vm.get('unit');
  91
  92                 v = parseFloat(v) * Proxmox.Utils.SizeUnits[unit];
  93
  94                 if (fieldContainer.submitAutoScaledSizeUnit) {
  95                     return Proxmox.Utils.format_size(v, !unit.endsWith('iB'));
  96                 } else {
  97                     return String(Math.floor(v / fieldContainer.backendFactor));
  98                 }
  99             },
 100             listeners: {
 101                 // our setValue gets only called if we have a value, avoid
 102                 // transformation of the first user-entered value
 103                 keydown: function() { this._transformed = true; },
 104             },
 105         },
 106         {
 107             xtype: 'displayfield',
 108             name: 'unit',
 109             submitValue: false,
 110             padding: '0 0 0 10',
 111             bind: {
 112                 value: '{unitlabel}',
 113             },
 114             listeners: {
 115                 change: (f, v) => {
 116                     f.originalValue = v;
 117                 },
 118             },
 119             width: 40,
 120         },
 121     ],
 122
 123     initComponent: function() {
 124         let me = this;
 125
 126         me.unit = me.unit || 'MiB';
 127         if (!(me.unit in Proxmox.Utils.SizeUnits)) {
 128             throw "unknown unit: " + me.unit;
 129         }
 130
 131         me.backendFactor = 1;
 132         if (me.backendUnit !== undefined) {
 133             if (!(me.unit in Proxmox.Utils.SizeUnits)) {
 134                 throw "unknown backend unit: " + me.backendUnit;
 135             }
 136             me.backendFactor = Proxmox.Utils.SizeUnits[me.backendUnit];
 137         }
 138
 139         me.callParent(arguments);
 140
 141         me.getViewModel().set('unit', me.unit);
 142         me.getViewModel().set('unitPostfix', me.unitPostfix);
 143     },
 144 });
 145
 146 Ext.define('Proxmox.form.BandwidthField', {
 147     extend: 'Proxmox.form.SizeField',
 148     alias: 'widget.pmxBandwidthField',
 149
 150     unitPostfix: '/s',
 151 });