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