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