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