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