]>
Commit | Line | Data |
---|---|---|
056fdce9 DC |
1 | Ext.define('PMG.window.Settings', { |
2 | extend: 'Ext.window.Window', | |
3 | ||
4 | width: '800px', | |
5 | title: gettext('My Settings'), | |
6 | iconCls: 'fa fa-gear', | |
7 | modal: true, | |
8 | bodyPadding: 10, | |
9 | resizable: false, | |
10 | ||
11 | buttons: [ | |
12 | '->', | |
13 | { | |
14 | text: gettext('Close'), | |
15 | handler: function() { | |
16 | this.up('window').close(); | |
17 | }, | |
18 | }, | |
19 | ], | |
20 | ||
21 | layout: 'hbox', | |
22 | ||
23 | controller: { | |
24 | xclass: 'Ext.app.ViewController', | |
25 | ||
26 | init: function(view) { | |
27 | let me = this; | |
28 | let sp = Ext.state.Manager.getProvider(); | |
29 | ||
30 | let username = sp.get('login-username') || Proxmox.Utils.noneText; | |
31 | me.lookupReference('savedUserName').setValue(Ext.String.htmlEncode(username)); | |
32 | ||
33 | let summarycolumns = sp.get('summarycolumns', 'auto'); | |
34 | me.lookup('summarycolumns').setValue(summarycolumns); | |
35 | ||
36 | let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight']; | |
37 | settings.forEach(function(setting) { | |
38 | let val = localStorage.getItem('pve-xterm-' + setting); | |
39 | if (val !== undefined && val !== null) { | |
40 | let field = me.lookup(setting); | |
41 | field.setValue(val); | |
42 | field.resetOriginalValue(); | |
43 | } | |
44 | }); | |
45 | }, | |
46 | ||
47 | set_button_status: function() { | |
48 | let me = this; | |
49 | ||
50 | let form = me.lookup('xtermform'); | |
51 | let valid = form.isValid(); | |
52 | let dirty = form.isDirty(); | |
53 | ||
54 | let hasvalues = false; | |
55 | let values = form.getValues(); | |
56 | Ext.Object.eachValue(values, function(value) { | |
57 | if (value) { | |
58 | hasvalues = true; | |
59 | return false; | |
60 | } | |
61 | return true; | |
62 | }); | |
63 | ||
64 | me.lookup('xtermsave').setDisabled(!dirty || !valid); | |
65 | me.lookup('xtermreset').setDisabled(!hasvalues); | |
66 | }, | |
67 | ||
68 | control: { | |
69 | '#xtermjs form': { | |
70 | dirtychange: 'set_button_status', | |
71 | validitychange: 'set_button_status', | |
72 | }, | |
73 | '#xtermjs button': { | |
74 | click: function(button) { | |
75 | let me = this; | |
76 | let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight']; | |
77 | settings.forEach(function(setting) { | |
78 | let field = me.lookup(setting); | |
79 | if (button.reference === 'xtermsave') { | |
80 | let value = field.getValue(); | |
81 | if (value) { | |
82 | localStorage.setItem('pve-xterm-' + setting, value); | |
83 | } else { | |
84 | localStorage.removeItem('pve-xterm-' + setting); | |
85 | } | |
86 | } else if (button.reference === 'xtermreset') { | |
87 | field.setValue(undefined); | |
88 | localStorage.removeItem('pve-xterm-' + setting); | |
89 | } | |
90 | field.resetOriginalValue(); | |
91 | }); | |
92 | me.set_button_status(); | |
93 | }, | |
94 | }, | |
95 | 'button[name=reset]': { | |
96 | click: function() { | |
97 | let blacklist = ['login-username']; | |
98 | let sp = Ext.state.Manager.getProvider(); | |
99 | for (const state of Object.values(sp.state)) { | |
100 | if (blacklist.indexOf(state) !== -1) { | |
101 | continue; | |
102 | } | |
103 | ||
104 | sp.clear(state); | |
105 | } | |
106 | ||
107 | window.location.reload(); | |
108 | }, | |
109 | }, | |
110 | 'button[name=clear-username]': { | |
111 | click: function() { | |
112 | let me = this; | |
113 | let usernamefield = me.lookupReference('savedUserName'); | |
114 | let sp = Ext.state.Manager.getProvider(); | |
115 | ||
116 | usernamefield.setValue(Proxmox.Utils.noneText); | |
117 | sp.clear('login-username'); | |
118 | }, | |
119 | }, | |
120 | 'field[reference=summarycolumns]': { | |
121 | change: function(el, newValue) { | |
122 | var sp = Ext.state.Manager.getProvider(); | |
123 | sp.set('summarycolumns', newValue); | |
124 | }, | |
125 | }, | |
126 | }, | |
127 | }, | |
128 | ||
129 | items: [{ | |
130 | xtype: 'fieldset', | |
131 | flex: 1, | |
132 | title: gettext('Webinterface Settings'), | |
133 | margin: '5', | |
134 | layout: { | |
135 | type: 'vbox', | |
136 | align: 'left', | |
137 | }, | |
138 | defaults: { | |
139 | width: '100%', | |
140 | margin: '0 0 10 0', | |
141 | }, | |
142 | items: [ | |
143 | { | |
144 | xtype: 'container', | |
145 | layout: 'hbox', | |
146 | items: [ | |
147 | { | |
148 | xtype: 'displayfield', | |
149 | fieldLabel: gettext('Saved User Name') + ':', | |
150 | labelWidth: 150, | |
151 | stateId: 'login-username', | |
152 | reference: 'savedUserName', | |
153 | flex: 1, | |
154 | value: '', | |
155 | }, | |
156 | { | |
157 | xtype: 'button', | |
158 | cls: 'x-btn-default-toolbar-small proxmox-inline-button', | |
159 | text: gettext('Reset'), | |
160 | name: 'clear-username', | |
161 | }, | |
162 | ], | |
163 | }, | |
164 | { | |
165 | xtype: 'box', | |
166 | autoEl: { tag: 'hr' }, | |
167 | }, | |
168 | { | |
169 | xtype: 'container', | |
170 | layout: 'hbox', | |
171 | items: [ | |
172 | { | |
173 | xtype: 'displayfield', | |
174 | fieldLabel: gettext('Layout') + ':', | |
175 | flex: 1, | |
176 | }, | |
177 | { | |
178 | xtype: 'button', | |
179 | cls: 'x-btn-default-toolbar-small proxmox-inline-button', | |
180 | text: gettext('Reset'), | |
181 | tooltip: gettext('Reset all layout changes (for example, column widths)'), | |
182 | name: 'reset', | |
183 | }, | |
184 | ], | |
185 | }, | |
186 | { | |
187 | xtype: 'box', | |
188 | autoEl: { tag: 'hr' }, | |
189 | }, | |
190 | { | |
191 | xtype: 'proxmoxKVComboBox', | |
192 | fieldLabel: gettext('Summary/Dashboard columns') + ':', | |
193 | labelWidth: 150, | |
194 | stateId: 'summarycolumns', | |
195 | reference: 'summarycolumns', | |
196 | comboItems: [ | |
197 | ['auto', 'auto'], | |
198 | ['1', '1'], | |
199 | ['2', '2'], | |
200 | ['3', '3'], | |
201 | ], | |
202 | }, | |
203 | ], | |
204 | }, | |
205 | { | |
206 | xtype: 'container', | |
207 | layout: 'vbox', | |
208 | flex: 1, | |
209 | margin: '5', | |
210 | defaults: { | |
211 | width: '100%', | |
212 | // right margin ensures that the right border of the fieldsets | |
213 | // is shown | |
214 | margin: '0 2 10 0', | |
215 | }, | |
216 | items: [ | |
217 | { | |
218 | xtype: 'fieldset', | |
219 | itemId: 'xtermjs', | |
220 | title: gettext('xterm.js Settings'), | |
221 | items: [{ | |
222 | xtype: 'form', | |
223 | reference: 'xtermform', | |
224 | border: false, | |
225 | layout: { | |
226 | type: 'vbox', | |
227 | algin: 'left', | |
228 | }, | |
229 | defaults: { | |
230 | width: '100%', | |
231 | margin: '0 0 10 0', | |
232 | }, | |
233 | items: [ | |
234 | { | |
235 | xtype: 'textfield', | |
236 | name: 'fontFamily', | |
237 | reference: 'fontFamily', | |
238 | emptyText: Proxmox.Utils.defaultText, | |
239 | fieldLabel: gettext('Font-Family'), | |
240 | }, | |
241 | { | |
242 | xtype: 'proxmoxintegerfield', | |
243 | emptyText: Proxmox.Utils.defaultText, | |
244 | name: 'fontSize', | |
245 | reference: 'fontSize', | |
246 | minValue: 1, | |
247 | fieldLabel: gettext('Font-Size'), | |
248 | }, | |
249 | { | |
250 | xtype: 'numberfield', | |
251 | name: 'letterSpacing', | |
252 | reference: 'letterSpacing', | |
253 | emptyText: Proxmox.Utils.defaultText, | |
254 | fieldLabel: gettext('Letter Spacing'), | |
255 | }, | |
256 | { | |
257 | xtype: 'numberfield', | |
258 | name: 'lineHeight', | |
259 | minValue: 0.1, | |
260 | reference: 'lineHeight', | |
261 | emptyText: Proxmox.Utils.defaultText, | |
262 | fieldLabel: gettext('Line Height'), | |
263 | }, | |
264 | { | |
265 | xtype: 'container', | |
266 | layout: { | |
267 | type: 'hbox', | |
268 | pack: 'end', | |
269 | }, | |
270 | defaults: { | |
271 | margin: '0 0 0 5', | |
272 | }, | |
273 | items: [ | |
274 | { | |
275 | xtype: 'button', | |
276 | reference: 'xtermreset', | |
277 | disabled: true, | |
278 | text: gettext('Reset'), | |
279 | }, | |
280 | { | |
281 | xtype: 'button', | |
282 | reference: 'xtermsave', | |
283 | disabled: true, | |
284 | text: gettext('Save'), | |
285 | }, | |
286 | ], | |
287 | }, | |
288 | ], | |
289 | }], | |
290 | }, | |
291 | ], | |
292 | }], | |
293 | }); |