]>
Commit | Line | Data |
---|---|---|
ce11a8af DC |
1 | Ext.define('PVE.window.Settings', { |
2 | extend: 'Ext.window.Window', | |
3 | ||
d9ace13c | 4 | width: '800px', |
ce11a8af DC |
5 | title: gettext('My Settings'), |
6 | iconCls: 'fa fa-gear', | |
7 | modal: true, | |
8 | bodyPadding: 10, | |
9 | resizable: false, | |
10 | ||
75ceae78 DL |
11 | buttons: [ |
12 | { | |
13 | xtype: 'proxmoxHelpButton', | |
14 | onlineHelp: 'gui_my_settings', | |
f6710aac | 15 | hidden: false, |
75ceae78 DL |
16 | }, |
17 | '->', | |
18 | { | |
19 | text: gettext('Close'), | |
20 | handler: function() { | |
21 | this.up('window').close(); | |
f6710aac TL |
22 | }, |
23 | }, | |
75ceae78 | 24 | ], |
ce11a8af | 25 | |
d27a44a6 | 26 | layout: 'hbox', |
ce11a8af DC |
27 | |
28 | controller: { | |
29 | xclass: 'Ext.app.ViewController', | |
30 | ||
d9ace13c DC |
31 | init: function(view) { |
32 | var me = this; | |
33 | var sp = Ext.state.Manager.getProvider(); | |
34 | ||
35 | var username = sp.get('login-username') || Proxmox.Utils.noneText; | |
1011b569 | 36 | me.lookupReference('savedUserName').setValue(Ext.String.htmlEncode(username)); |
758690bf | 37 | var vncMode = sp.get('novnc-scaling') || 'auto'; |
07195aa0 | 38 | me.lookupReference('noVNCScalingGroup').setValue({ noVNCScalingField: vncMode }); |
d9ace13c | 39 | |
6b6cd0e4 TL |
40 | let summarycolumns = sp.get('summarycolumns', 'auto'); |
41 | me.lookup('summarycolumns').setValue(summarycolumns); | |
f973c5b2 | 42 | |
300c0f73 TL |
43 | me.lookup('guestNotesCollapse').setValue(sp.get('guest-notes-collapse', 'never')); |
44 | ||
d9ace13c | 45 | var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight']; |
d9ace13c DC |
46 | settings.forEach(function(setting) { |
47 | var val = localStorage.getItem('pve-xterm-' + setting); | |
48 | if (val !== undefined && val !== null) { | |
49 | var field = me.lookup(setting); | |
50 | field.setValue(val); | |
2b0bdc46 | 51 | field.resetOriginalValue(); |
d9ace13c DC |
52 | } |
53 | }); | |
2b0bdc46 DC |
54 | }, |
55 | ||
56 | set_button_status: function() { | |
cb139584 TL |
57 | let me = this; |
58 | let form = me.lookup('xtermform'); | |
d9ace13c | 59 | |
cb139584 TL |
60 | let valid = form.isValid(), dirty = form.isDirty(); |
61 | let hasValues = Object.values(form.getValues()).some(v => !!v); | |
2b0bdc46 DC |
62 | |
63 | me.lookup('xtermsave').setDisabled(!dirty || !valid); | |
cb139584 | 64 | me.lookup('xtermreset').setDisabled(!hasValues); |
d9ace13c DC |
65 | }, |
66 | ||
ce11a8af | 67 | control: { |
2b0bdc46 DC |
68 | '#xtermjs form': { |
69 | dirtychange: 'set_button_status', | |
f6710aac | 70 | validitychange: 'set_button_status', |
d9ace13c DC |
71 | }, |
72 | '#xtermjs button': { | |
73 | click: function(button) { | |
74 | var me = this; | |
75 | var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight']; | |
76 | settings.forEach(function(setting) { | |
77 | var field = me.lookup(setting); | |
78 | if (button.reference === 'xtermsave') { | |
79 | var value = field.getValue(); | |
80 | if (value) { | |
81 | localStorage.setItem('pve-xterm-' + setting, value); | |
82 | } else { | |
83 | localStorage.removeItem('pve-xterm-' + setting); | |
84 | } | |
85 | } else if (button.reference === 'xtermreset') { | |
86 | field.setValue(undefined); | |
87 | localStorage.removeItem('pve-xterm-' + setting); | |
88 | } | |
2b0bdc46 | 89 | field.resetOriginalValue(); |
d9ace13c | 90 | }); |
2b0bdc46 | 91 | me.set_button_status(); |
f6710aac | 92 | }, |
ce11a8af DC |
93 | }, |
94 | 'button[name=reset]': { | |
8058410f | 95 | click: function() { |
cb139584 TL |
96 | let blacklist = ['GuiCap', 'login-username', 'dash-storages']; |
97 | let sp = Ext.state.Manager.getProvider(); | |
98 | for (const state of Object.keys(sp.state)) { | |
99 | if (!blacklist.includes(state)) { | |
ce11a8af DC |
100 | sp.clear(state); |
101 | } | |
102 | } | |
ce11a8af | 103 | window.location.reload(); |
f6710aac | 104 | }, |
ce11a8af DC |
105 | }, |
106 | 'button[name=clear-username]': { | |
8058410f | 107 | click: function() { |
cb139584 TL |
108 | let me = this; |
109 | me.lookupReference('savedUserName').setValue(Proxmox.Utils.noneText); | |
110 | Ext.state.Manager.getProvider().clear('login-username'); | |
f6710aac | 111 | }, |
2488c226 DC |
112 | }, |
113 | 'grid[reference=dashboard-storages]': { | |
114 | selectionchange: function(grid, selected) { | |
115 | var me = this; | |
116 | var sp = Ext.state.Manager.getProvider(); | |
117 | ||
cb139584 | 118 | // saves the selected storageids as "id1,id2,id3,..." or clears the variable |
2488c226 | 119 | if (selected.length > 0) { |
cb139584 | 120 | sp.set('dash-storages', Ext.Array.pluck(selected, 'id').join(',')); |
2488c226 DC |
121 | } else { |
122 | sp.clear('dash-storages'); | |
123 | } | |
124 | }, | |
125 | afterrender: function(grid) { | |
cb139584 TL |
126 | let store = grid.getStore(); |
127 | let storages = Ext.state.Manager.getProvider().get('dash-storages') || ''; | |
128 | ||
129 | let items = []; | |
130 | storages.split(',').forEach(storage => { | |
131 | if (storage !== '') { // we have to get the records to be able to select them | |
132 | let item = store.getById(storage); | |
2488c226 DC |
133 | if (item) { |
134 | items.push(item); | |
135 | } | |
136 | } | |
137 | }); | |
cb139584 TL |
138 | grid.suspendEvent('selectionchange'); |
139 | grid.getSelectionModel().select(items); | |
140 | grid.resumeEvent('selectionchange'); | |
f6710aac | 141 | }, |
f973c5b2 DC |
142 | }, |
143 | 'field[reference=summarycolumns]': { | |
cb139584 | 144 | change: (el, newValue) => Ext.state.Manager.getProvider().set('summarycolumns', newValue), |
300c0f73 TL |
145 | }, |
146 | 'field[reference=guestNotesCollapse]': { | |
cb139584 | 147 | change: (e, v) => Ext.state.Manager.getProvider().set('guest-notes-collapse', v), |
300c0f73 | 148 | }, |
f6710aac | 149 | }, |
ce11a8af DC |
150 | }, |
151 | ||
152 | items: [{ | |
26fcae33 | 153 | xtype: 'fieldset', |
d27a44a6 | 154 | flex: 1, |
26fcae33 DJ |
155 | title: gettext('Webinterface Settings'), |
156 | margin: '5', | |
157 | layout: { | |
158 | type: 'vbox', | |
f6710aac | 159 | align: 'left', |
26fcae33 DJ |
160 | }, |
161 | defaults: { | |
162 | width: '100%', | |
f6710aac | 163 | margin: '0 0 10 0', |
26fcae33 DJ |
164 | }, |
165 | items: [ | |
166 | { | |
167 | xtype: 'displayfield', | |
168 | fieldLabel: gettext('Dashboard Storages'), | |
169 | labelAlign: 'left', | |
f6710aac | 170 | labelWidth: '50%', |
ce11a8af | 171 | }, |
26fcae33 DJ |
172 | { |
173 | xtype: 'grid', | |
174 | maxHeight: 150, | |
175 | reference: 'dashboard-storages', | |
176 | selModel: { | |
f6710aac | 177 | selType: 'checkboxmodel', |
2488c226 | 178 | }, |
26fcae33 DJ |
179 | columns: [{ |
180 | header: gettext('Name'), | |
181 | dataIndex: 'storage', | |
f6710aac TL |
182 | flex: 1, |
183 | }, { | |
26fcae33 DJ |
184 | header: gettext('Node'), |
185 | dataIndex: 'node', | |
f6710aac | 186 | flex: 1, |
26fcae33 DJ |
187 | }], |
188 | store: { | |
189 | type: 'diff', | |
190 | field: ['type', 'storage', 'id', 'node'], | |
191 | rstore: PVE.data.ResourceStore, | |
192 | filters: [{ | |
193 | property: 'type', | |
f6710aac | 194 | value: 'storage', |
2488c226 | 195 | }], |
8058410f | 196 | sorters: ['node', 'storage'], |
f6710aac | 197 | }, |
26fcae33 DJ |
198 | }, |
199 | { | |
200 | xtype: 'box', | |
8058410f | 201 | autoEl: { tag: 'hr' }, |
26fcae33 DJ |
202 | }, |
203 | { | |
bd7aef86 | 204 | xtype: 'container', |
8058410f | 205 | layout: 'hbox', |
bd7aef86 DJ |
206 | items: [ |
207 | { | |
208 | xtype: 'displayfield', | |
94666c47 | 209 | fieldLabel: gettext('Saved User Name') + ':', |
ad8b37fa | 210 | labelWidth: 150, |
bd7aef86 DJ |
211 | stateId: 'login-username', |
212 | reference: 'savedUserName', | |
213 | flex: 1, | |
f6710aac | 214 | value: '', |
bd7aef86 DJ |
215 | }, |
216 | { | |
217 | xtype: 'button', | |
218 | cls: 'x-btn-default-toolbar-small proxmox-inline-button', | |
219 | text: gettext('Reset'), | |
220 | name: 'clear-username', | |
221 | }, | |
f6710aac | 222 | ], |
26fcae33 DJ |
223 | }, |
224 | { | |
225 | xtype: 'box', | |
8058410f | 226 | autoEl: { tag: 'hr' }, |
26fcae33 DJ |
227 | }, |
228 | { | |
bd7aef86 DJ |
229 | xtype: 'container', |
230 | layout: 'hbox', | |
9a08bd8a TL |
231 | items: [ |
232 | { | |
233 | xtype: 'displayfield', | |
94666c47 | 234 | fieldLabel: gettext('Layout') + ':', |
bd7aef86 | 235 | flex: 1, |
9a08bd8a TL |
236 | }, |
237 | { | |
238 | xtype: 'button', | |
239 | cls: 'x-btn-default-toolbar-small proxmox-inline-button', | |
bd7aef86 | 240 | text: gettext('Reset'), |
9a08bd8a TL |
241 | tooltip: gettext('Reset all layout changes (for example, column widths)'), |
242 | name: 'reset', | |
9a08bd8a | 243 | }, |
f6710aac | 244 | ], |
26fcae33 | 245 | }, |
f973c5b2 DC |
246 | { |
247 | xtype: 'box', | |
8058410f | 248 | autoEl: { tag: 'hr' }, |
f973c5b2 DC |
249 | }, |
250 | { | |
251 | xtype: 'proxmoxKVComboBox', | |
252 | fieldLabel: gettext('Summary columns') + ':', | |
253 | labelWidth: 150, | |
254 | stateId: 'summarycolumns', | |
255 | reference: 'summarycolumns', | |
256 | comboItems: [ | |
257 | ['auto', 'auto'], | |
258 | ['1', '1'], | |
259 | ['2', '2'], | |
260 | ['3', '3'], | |
261 | ], | |
262 | }, | |
300c0f73 TL |
263 | { |
264 | xtype: 'proxmoxKVComboBox', | |
265 | fieldLabel: gettext('Guest Notes') + ':', | |
266 | labelWidth: 150, | |
267 | stateId: 'guest-notes-collapse', | |
268 | reference: 'guestNotesCollapse', | |
269 | comboItems: [ | |
270 | ['never', 'Show by default'], | |
271 | ['always', 'Collapse by default'], | |
272 | ['auto', 'auto (Collapse if empty)'], | |
273 | ], | |
274 | }, | |
f6710aac | 275 | ], |
9d6d8d86 TL |
276 | }, |
277 | { | |
26fcae33 DJ |
278 | xtype: 'container', |
279 | layout: 'vbox', | |
d27a44a6 | 280 | flex: 1, |
d9ace13c | 281 | margin: '5', |
26fcae33 DJ |
282 | defaults: { |
283 | width: '100%', | |
284 | // right margin ensures that the right border of the fieldsets | |
285 | // is shown | |
f6710aac | 286 | margin: '0 2 10 0', |
26fcae33 | 287 | }, |
8058410f | 288 | items: [ |
26fcae33 DJ |
289 | { |
290 | xtype: 'fieldset', | |
291 | itemId: 'xtermjs', | |
292 | title: gettext('xterm.js Settings'), | |
293 | items: [{ | |
294 | xtype: 'form', | |
295 | reference: 'xtermform', | |
296 | border: false, | |
2b0bdc46 | 297 | layout: { |
26fcae33 | 298 | type: 'vbox', |
f6710aac | 299 | algin: 'left', |
26fcae33 DJ |
300 | }, |
301 | defaults: { | |
302 | width: '100%', | |
303 | margin: '0 0 10 0', | |
d9ace13c | 304 | }, |
2b0bdc46 DC |
305 | items: [ |
306 | { | |
26fcae33 DJ |
307 | xtype: 'textfield', |
308 | name: 'fontFamily', | |
309 | reference: 'fontFamily', | |
310 | emptyText: Proxmox.Utils.defaultText, | |
f6710aac | 311 | fieldLabel: gettext('Font-Family'), |
26fcae33 DJ |
312 | }, |
313 | { | |
314 | xtype: 'proxmoxintegerfield', | |
315 | emptyText: Proxmox.Utils.defaultText, | |
316 | name: 'fontSize', | |
317 | reference: 'fontSize', | |
318 | minValue: 1, | |
f6710aac | 319 | fieldLabel: gettext('Font-Size'), |
26fcae33 DJ |
320 | }, |
321 | { | |
322 | xtype: 'numberfield', | |
323 | name: 'letterSpacing', | |
324 | reference: 'letterSpacing', | |
325 | emptyText: Proxmox.Utils.defaultText, | |
f6710aac | 326 | fieldLabel: gettext('Letter Spacing'), |
26fcae33 DJ |
327 | }, |
328 | { | |
329 | xtype: 'numberfield', | |
330 | name: 'lineHeight', | |
331 | minValue: 0.1, | |
332 | reference: 'lineHeight', | |
333 | emptyText: Proxmox.Utils.defaultText, | |
f6710aac | 334 | fieldLabel: gettext('Line Height'), |
2b0bdc46 DC |
335 | }, |
336 | { | |
26fcae33 DJ |
337 | xtype: 'container', |
338 | layout: { | |
339 | type: 'hbox', | |
f6710aac | 340 | pack: 'end', |
26fcae33 | 341 | }, |
a3c30fbc TL |
342 | defaults: { |
343 | margin: '0 0 0 5', | |
344 | }, | |
26fcae33 DJ |
345 | items: [ |
346 | { | |
347 | xtype: 'button', | |
348 | reference: 'xtermreset', | |
349 | disabled: true, | |
f6710aac | 350 | text: gettext('Reset'), |
26fcae33 DJ |
351 | }, |
352 | { | |
353 | xtype: 'button', | |
354 | reference: 'xtermsave', | |
355 | disabled: true, | |
f6710aac TL |
356 | text: gettext('Save'), |
357 | }, | |
358 | ], | |
359 | }, | |
360 | ], | |
361 | }], | |
362 | }, { | |
26fcae33 DJ |
363 | xtype: 'fieldset', |
364 | title: gettext('noVNC Settings'), | |
365 | items: [ | |
26fcae33 DJ |
366 | { |
367 | xtype: 'radiogroup', | |
b89a26bc | 368 | fieldLabel: gettext('Scaling mode'), |
26fcae33 DJ |
369 | reference: 'noVNCScalingGroup', |
370 | height: '15px', // renders faster with value assigned | |
371 | layout: { | |
372 | type: 'hbox', | |
373 | }, | |
374 | items: [ | |
758690bf DC |
375 | { |
376 | xtype: 'radiofield', | |
377 | name: 'noVNCScalingField', | |
378 | inputValue: 'auto', | |
379 | boxLabel: 'Auto', | |
380 | }, | |
26fcae33 DJ |
381 | { |
382 | xtype: 'radiofield', | |
383 | name: 'noVNCScalingField', | |
384 | inputValue: 'scale', | |
385 | boxLabel: 'Local Scaling', | |
758690bf | 386 | margin: '0 0 0 10', |
f6710aac | 387 | }, { |
26fcae33 DJ |
388 | xtype: 'radiofield', |
389 | name: 'noVNCScalingField', | |
390 | inputValue: 'off', | |
391 | boxLabel: 'Off', | |
392 | margin: '0 0 0 10', | |
f6710aac | 393 | }, |
26fcae33 DJ |
394 | ], |
395 | listeners: { | |
cb139584 | 396 | change: function(el, { noVNCScalingField }) { |
758690bf DC |
397 | let provider = Ext.state.Manager.getProvider(); |
398 | if (noVNCScalingField === 'auto') { | |
399 | provider.clear('novnc-scaling'); | |
400 | } else { | |
401 | provider.set('novnc-scaling', noVNCScalingField); | |
402 | } | |
f6710aac | 403 | }, |
26fcae33 DJ |
404 | }, |
405 | }, | |
f6710aac | 406 | ], |
26fcae33 | 407 | }, |
f6710aac | 408 | ], |
ce11a8af | 409 | }], |
ce11a8af | 410 | }); |