]>
Commit | Line | Data |
---|---|---|
1 | Ext.define('PVE.form.SizeField', { | |
2 | extend: 'Ext.form.FieldContainer', | |
3 | alias: 'widget.pveSizeField', | |
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 | units: { | |
25 | 'B': 1, | |
26 | 'KiB': 1024, | |
27 | 'MiB': 1024*1024, | |
28 | 'GiB': 1024*1024*1024, | |
29 | 'TiB': 1024*1024*1024*1024, | |
30 | 'KB': 1000, | |
31 | 'MB': 1000*1000, | |
32 | 'GB': 1000*1000*1000, | |
33 | 'TB': 1000*1000*1000*1000, | |
34 | }, | |
35 | ||
36 | // display unit (TODO: make (optionally) selectable) | |
37 | unit: 'MiB', | |
38 | unitPostfix: '', | |
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 | ||
44 | // allow setting 0 and using it as a submit value | |
45 | allowZero: false, | |
46 | ||
47 | emptyValue: null, | |
48 | ||
49 | items: [ | |
50 | { | |
51 | xtype: 'numberfield', | |
52 | cbind: { | |
53 | name: '{name}', | |
54 | emptyText: '{emptyText}', | |
55 | allowZero: '{allowZero}', | |
56 | emptyValue: '{emptyValue}', | |
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) { | |
66 | let fieldContainer = this.up('fieldcontainer'); | |
67 | let vm = fieldContainer.getViewModel(); | |
68 | let unit = vm.get('unit'); | |
69 | ||
70 | v /= fieldContainer.units[unit]; | |
71 | v *= fieldContainer.backendFactor; | |
72 | ||
73 | this._transformed = true; | |
74 | } | |
75 | ||
76 | if (Number(v) === 0 && !this.allowZero) { | |
77 | v = undefined; | |
78 | } | |
79 | ||
80 | return Ext.form.field.Text.prototype.setValue.call(this, v); | |
81 | }, | |
82 | getSubmitValue: function() { | |
83 | let v = this.processRawValue(this.getRawValue()); | |
84 | v = v.replace(this.decimalSeparator, '.'); | |
85 | ||
86 | if (v === undefined || v === '') { | |
87 | return this.emptyValue; | |
88 | } | |
89 | ||
90 | if (Number(v) === 0) { | |
91 | return this.allowZero ? 0 : null; | |
92 | } | |
93 | ||
94 | let fieldContainer = this.up('fieldcontainer'); | |
95 | let vm = fieldContainer.getViewModel(); | |
96 | let unit = vm.get('unit'); | |
97 | ||
98 | v = parseFloat(v) * fieldContainer.units[unit]; | |
99 | v /= fieldContainer.backendFactor; | |
100 | ||
101 | return String(Math.floor(v)); | |
102 | }, | |
103 | listeners: { | |
104 | // our setValue gets only called if we have a value, avoid | |
105 | // transformation of the first user-entered value | |
106 | keydown: function() { this._transformed = true; }, | |
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: { | |
118 | change: (f, v) => { | |
119 | f.originalValue = v; | |
120 | }, | |
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 | ||
142 | me.callParent(arguments); | |
143 | ||
144 | me.getViewModel().set('unit', me.unit); | |
145 | me.getViewModel().set('unitPostfix', me.unitPostfix); | |
146 | }, | |
147 | }); | |
148 | ||
149 | Ext.define('PVE.form.BandwidthField', { | |
150 | extend: 'PVE.form.SizeField', | |
151 | alias: 'widget.pveBandwidthField', | |
152 | ||
153 | unitPostfix: '/s', | |
154 | }); |