www/manager6/window/Settings.js

   1 Ext.define('PVE.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             xtype: 'proxmoxHelpButton',
  14             onlineHelp: 'gui_my_settings',
  15             hidden: false,
  16         },
  17         '->',
  18         {
  19             text: gettext('Close'),
  20             handler: function() {
  21                 this.up('window').close();
  22             },
  23         },
  24     ],
  25
  26     layout: 'hbox',
  27
  28     controller: {
  29         xclass: 'Ext.app.ViewController',
  30
  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;
  36             me.lookupReference('savedUserName').setValue(Ext.String.htmlEncode(username));
  37             var vncMode = sp.get('novnc-scaling') || 'auto';
  38             me.lookupReference('noVNCScalingGroup').setValue({ noVNCScalingField: vncMode });
  39
  40             let summarycolumns = sp.get('summarycolumns', 'auto');
  41             me.lookup('summarycolumns').setValue(summarycolumns);
  42
  43             me.lookup('guestNotesCollapse').setValue(sp.get('guest-notes-collapse', 'never'));
  44
  45             var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
  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);
  51                     field.resetOriginalValue();
  52                 }
  53             });
  54         },
  55
  56         set_button_status: function() {
  57             let me = this;
  58             let form = me.lookup('xtermform');
  59
  60             let valid = form.isValid(), dirty = form.isDirty();
  61             let hasValues = Object.values(form.getValues()).some(v => !!v);
  62
  63             me.lookup('xtermsave').setDisabled(!dirty || !valid);
  64             me.lookup('xtermreset').setDisabled(!hasValues);
  65         },
  66
  67         control: {
  68             '#xtermjs form': {
  69                 dirtychange: 'set_button_status',
  70                 validitychange: 'set_button_status',
  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                         }
  89                         field.resetOriginalValue();
  90                     });
  91                     me.set_button_status();
  92                 },
  93             },
  94             'button[name=reset]': {
  95                 click: function() {
  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)) {
 100                             sp.clear(state);
 101                         }
 102                     }
 103                     window.location.reload();
 104                 },
 105             },
 106             'button[name=clear-username]': {
 107                 click: function() {
 108                     let me = this;
 109                     me.lookupReference('savedUserName').setValue(Proxmox.Utils.noneText);
 110                     Ext.state.Manager.getProvider().clear('login-username');
 111                 },
 112             },
 113             'grid[reference=dashboard-storages]': {
 114                 selectionchange: function(grid, selected) {
 115                     var me = this;
 116                     var sp = Ext.state.Manager.getProvider();
 117
 118                     // saves the selected storageids as "id1,id2,id3,..." or clears the variable
 119                     if (selected.length > 0) {
 120                         sp.set('dash-storages', Ext.Array.pluck(selected, 'id').join(','));
 121                     } else {
 122                         sp.clear('dash-storages');
 123                     }
 124                 },
 125                 afterrender: function(grid) {
 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);
 133                             if (item) {
 134                                 items.push(item);
 135                             }
 136                         }
 137                     });
 138                     grid.suspendEvent('selectionchange');
 139                     grid.getSelectionModel().select(items);
 140                     grid.resumeEvent('selectionchange');
 141                 },
 142             },
 143             'field[reference=summarycolumns]': {
 144                 change: (el, newValue) => Ext.state.Manager.getProvider().set('summarycolumns', newValue),
 145             },
 146             'field[reference=guestNotesCollapse]': {
 147                 change: (e, v) => Ext.state.Manager.getProvider().set('guest-notes-collapse', v),
 148             },
 149         },
 150     },
 151
 152     items: [{
 153         xtype: 'fieldset',
 154         flex: 1,
 155         title: gettext('Webinterface Settings'),
 156         margin: '5',
 157         layout: {
 158             type: 'vbox',
 159             align: 'left',
 160         },
 161         defaults: {
 162             width: '100%',
 163             margin: '0 0 10 0',
 164         },
 165         items: [
 166             {
 167                 xtype: 'displayfield',
 168                 fieldLabel: gettext('Dashboard Storages'),
 169                 labelAlign: 'left',
 170                 labelWidth: '50%',
 171             },
 172             {
 173                 xtype: 'grid',
 174                 maxHeight: 150,
 175                 reference: 'dashboard-storages',
 176                 selModel: {
 177                     selType: 'checkboxmodel',
 178                 },
 179                 columns: [{
 180                     header: gettext('Name'),
 181                     dataIndex: 'storage',
 182                     flex: 1,
 183                 }, {
 184                     header: gettext('Node'),
 185                     dataIndex: 'node',
 186                     flex: 1,
 187                 }],
 188                 store: {
 189                     type: 'diff',
 190                     field: ['type', 'storage', 'id', 'node'],
 191                     rstore: PVE.data.ResourceStore,
 192                     filters: [{
 193                         property: 'type',
 194                         value: 'storage',
 195                     }],
 196                     sorters: ['node', 'storage'],
 197                 },
 198             },
 199             {
 200                 xtype: 'box',
 201                 autoEl: { tag: 'hr' },
 202             },
 203             {
 204                 xtype: 'container',
 205                 layout: 'hbox',
 206                 items: [
 207                     {
 208                         xtype: 'displayfield',
 209                         fieldLabel: gettext('Saved User Name') + ':',
 210                         labelWidth: 150,
 211                         stateId: 'login-username',
 212                         reference: 'savedUserName',
 213                         flex: 1,
 214                         value: '',
 215                     },
 216                     {
 217                         xtype: 'button',
 218                         cls: 'x-btn-default-toolbar-small proxmox-inline-button',
 219                         text: gettext('Reset'),
 220                         name: 'clear-username',
 221                     },
 222                 ],
 223             },
 224             {
 225                 xtype: 'box',
 226                 autoEl: { tag: 'hr' },
 227             },
 228             {
 229                 xtype: 'container',
 230                 layout: 'hbox',
 231                 items: [
 232                     {
 233                         xtype: 'displayfield',
 234                         fieldLabel: gettext('Layout') + ':',
 235                         flex: 1,
 236                     },
 237                     {
 238                         xtype: 'button',
 239                         cls: 'x-btn-default-toolbar-small proxmox-inline-button',
 240                         text: gettext('Reset'),
 241                         tooltip: gettext('Reset all layout changes (for example, column widths)'),
 242                         name: 'reset',
 243                     },
 244                 ],
 245             },
 246             {
 247                 xtype: 'box',
 248                 autoEl: { tag: 'hr' },
 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             },
 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             },
 275         ],
 276     },
 277     {
 278         xtype: 'container',
 279         layout: 'vbox',
 280         flex: 1,
 281         margin: '5',
 282         defaults: {
 283             width: '100%',
 284             // right margin ensures that the right border of the fieldsets
 285             // is shown
 286             margin: '0 2 10 0',
 287         },
 288         items: [
 289             {
 290                 xtype: 'fieldset',
 291                 itemId: 'xtermjs',
 292                 title: gettext('xterm.js Settings'),
 293                 items: [{
 294                     xtype: 'form',
 295                     reference: 'xtermform',
 296                     border: false,
 297                     layout: {
 298                         type: 'vbox',
 299                         algin: 'left',
 300                     },
 301                     defaults: {
 302                         width: '100%',
 303                         margin: '0 0 10 0',
 304                     },
 305                     items: [
 306                         {
 307                             xtype: 'textfield',
 308                             name: 'fontFamily',
 309                             reference: 'fontFamily',
 310                             emptyText: Proxmox.Utils.defaultText,
 311                             fieldLabel: gettext('Font-Family'),
 312                         },
 313                         {
 314                             xtype: 'proxmoxintegerfield',
 315                             emptyText: Proxmox.Utils.defaultText,
 316                             name: 'fontSize',
 317                             reference: 'fontSize',
 318                             minValue: 1,
 319                             fieldLabel: gettext('Font-Size'),
 320                         },
 321                         {
 322                             xtype: 'numberfield',
 323                             name: 'letterSpacing',
 324                             reference: 'letterSpacing',
 325                             emptyText: Proxmox.Utils.defaultText,
 326                             fieldLabel: gettext('Letter Spacing'),
 327                         },
 328                         {
 329                             xtype: 'numberfield',
 330                             name: 'lineHeight',
 331                             minValue: 0.1,
 332                             reference: 'lineHeight',
 333                             emptyText: Proxmox.Utils.defaultText,
 334                             fieldLabel: gettext('Line Height'),
 335                         },
 336                         {
 337                             xtype: 'container',
 338                             layout: {
 339                                 type: 'hbox',
 340                                 pack: 'end',
 341                             },
 342                             defaults: {
 343                                 margin: '0 0 0 5',
 344                             },
 345                             items: [
 346                                 {
 347                                     xtype: 'button',
 348                                     reference: 'xtermreset',
 349                                     disabled: true,
 350                                     text: gettext('Reset'),
 351                                 },
 352                                 {
 353                                     xtype: 'button',
 354                                     reference: 'xtermsave',
 355                                     disabled: true,
 356                                     text: gettext('Save'),
 357                                 },
 358                             ],
 359                         },
 360                     ],
 361                 }],
 362             }, {
 363                 xtype: 'fieldset',
 364                 title: gettext('noVNC Settings'),
 365                 items: [
 366                     {
 367                         xtype: 'radiogroup',
 368                         fieldLabel: gettext('Scaling mode'),
 369                         reference: 'noVNCScalingGroup',
 370                         height: '15px', // renders faster with value assigned
 371                         layout: {
 372                             type: 'hbox',
 373                         },
 374                         items: [
 375                             {
 376                                 xtype: 'radiofield',
 377                                 name: 'noVNCScalingField',
 378                                 inputValue: 'auto',
 379                                 boxLabel: 'Auto',
 380                             },
 381                             {
 382                                 xtype: 'radiofield',
 383                                 name: 'noVNCScalingField',
 384                                 inputValue: 'scale',
 385                                 boxLabel: 'Local Scaling',
 386                                 margin: '0 0 0 10',
 387                             }, {
 388                                 xtype: 'radiofield',
 389                                 name: 'noVNCScalingField',
 390                                 inputValue: 'off',
 391                                 boxLabel: 'Off',
 392                                 margin: '0 0 0 10',
 393                             },
 394                         ],
 395                         listeners: {
 396                             change: function(el, { noVNCScalingField }) {
 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                                 }
 403                             },
 404                         },
 405                     },
 406                 ],
 407             },
 408         ],
 409     }],
 410 });