]>
Commit | Line | Data |
---|---|---|
56b14a54 TL |
1 | Ext.define('PVE.form.BandwidthField', { |
2 | extend: 'Ext.form.FieldContainer', | |
3 | alias: 'widget.pveBandwidthField', | |
4 | ||
8058410f | 5 | mixins: ['Proxmox.Mixin.CBind'], |
56b14a54 TL |
6 | |
7 | viewModel: { | |
8 | data: { | |
9 | unit: 'MiB', | |
10 | }, | |
11 | formulas: { | |
12 | unitlabel: (get) => get('unit') + '/s', | |
f6710aac | 13 | }, |
56b14a54 TL |
14 | }, |
15 | ||
16 | emptyText: '', | |
17 | ||
18 | layout: 'hbox', | |
19 | defaults: { | |
f6710aac | 20 | hideLabel: true, |
56b14a54 TL |
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 | ||
dcbc3b3e FE |
39 | // allow setting 0 and using it as a submit value |
40 | allowZero: false, | |
41 | ||
56b14a54 TL |
42 | items: [ |
43 | { | |
44 | xtype: 'numberfield', | |
45 | cbind: { | |
46 | name: '{name}', | |
47 | emptyText: '{emptyText}', | |
dcbc3b3e | 48 | allowZero: '{allowZero}', |
56b14a54 TL |
49 | }, |
50 | minValue: 0, | |
51 | step: 1, | |
52 | submitLocaleSeparator: false, | |
53 | fieldStyle: 'text-align: right', | |
54 | flex: 1, | |
55 | enableKeyEvents: true, | |
56 | setValue: function(v) { | |
57 | if (!this._transformed) { | |
58 | let fieldct = this.up('pveBandwidthField'); | |
59 | let vm = fieldct.getViewModel(); | |
60 | let unit = vm.get('unit'); | |
61 | ||
62 | v /= fieldct.units[unit]; | |
63 | v *= fieldct.backendFactor; | |
64 | ||
65 | this._transformed = true; | |
66 | } | |
67 | ||
dcbc3b3e FE |
68 | if (Number(v) === 0 && !this.allowZero) { |
69 | v = undefined; | |
70 | } | |
56b14a54 TL |
71 | |
72 | return Ext.form.field.Text.prototype.setValue.call(this, v); | |
73 | }, | |
74 | getSubmitValue: function() { | |
75 | let v = this.processRawValue(this.getRawValue()); | |
8058410f | 76 | v = v.replace(this.decimalSeparator, '.'); |
56b14a54 | 77 | |
dcbc3b3e FE |
78 | if (v === undefined || v === '') { |
79 | return null; | |
80 | } | |
81 | ||
82 | if (Number(v) === 0) { | |
83 | return this.allowZero ? 0 : null; | |
84 | } | |
56b14a54 TL |
85 | |
86 | let fieldct = this.up('pveBandwidthField'); | |
87 | let vm = fieldct.getViewModel(); | |
88 | let unit = vm.get('unit'); | |
89 | ||
90 | v = parseFloat(v) * fieldct.units[unit]; | |
91 | v /= fieldct.backendFactor; | |
92 | ||
93 | return ''+ Math.floor(v); | |
94 | }, | |
95 | listeners: { | |
96 | // our setValue gets only called if we have a value, avoid | |
97 | // transformation of the first user-entered value | |
8058410f | 98 | keydown: function() { this._transformed = true; }, |
56b14a54 TL |
99 | }, |
100 | }, | |
101 | { | |
102 | xtype: 'displayfield', | |
103 | name: 'unit', | |
104 | submitValue: false, | |
105 | padding: '0 0 0 10', | |
106 | bind: { | |
107 | value: '{unitlabel}', | |
108 | }, | |
109 | listeners: { | |
110 | change: (f, v) => f.originalValue = v, | |
111 | }, | |
112 | width: 40, | |
113 | }, | |
114 | ], | |
115 | ||
116 | initComponent: function() { | |
117 | let me = this; | |
118 | ||
119 | me.unit = me.unit || 'MiB'; | |
120 | if (!(me.unit in me.units)) { | |
121 | throw "unknown unit: " + me.unit; | |
122 | } | |
123 | ||
124 | me.backendFactor = 1; | |
125 | if (me.backendUnit !== undefined) { | |
126 | if (!(me.unit in me.units)) { | |
127 | throw "unknown backend unit: " + me.backendUnit; | |
128 | } | |
129 | me.backendFactor = me.units[me.backendUnit]; | |
130 | } | |
131 | ||
132 | ||
133 | me.callParent(arguments); | |
134 | ||
135 | me.getViewModel().set('unit', me.unit); | |
136 | }, | |
137 | }); | |
138 |