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