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         text: gettext('Close'),
  13         handler: function() {
  14             this.up('window').close();
  15         }
  16     }],
  17
  18     layout: {
  19         type: 'hbox',
  20         align: 'top'
  21     },
  22
  23     controller: {
  24         xclass: 'Ext.app.ViewController',
  25
  26         init: function(view) {
  27             var me = this;
  28             var sp = Ext.state.Manager.getProvider();
  29
  30             var username = sp.get('login-username') || Proxmox.Utils.noneText;
  31             me.lookupReference('savedUserName').setValue(username);
  32
  33             var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
  34             var defaultSettings = true;
  35             settings.forEach(function(setting) {
  36                 var val = localStorage.getItem('pve-xterm-' + setting);
  37                 if (val !== undefined && val !== null) {
  38                     var field = me.lookup(setting);
  39                     field.setValue(val);
  40                     defaultSettings = false;
  41                 }
  42             });
  43
  44             me.lookup('xtermsave').setDisabled(true);
  45             me.lookup('xtermreset').setDisabled(defaultSettings);
  46         },
  47
  48         control: {
  49             '#xtermjs field': {
  50                 change: function(field) {
  51                     var me = this;
  52                     me.lookup('xtermsave').setDisabled(false);
  53                     me.lookup('xtermreset').setDisabled(false);
  54                 }
  55             },
  56             '#xtermjs button': {
  57                 click: function(button) {
  58                     var me = this;
  59                     var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
  60                     settings.forEach(function(setting) {
  61                         var field = me.lookup(setting);
  62                         if (button.reference === 'xtermsave') {
  63                             var value = field.getValue();
  64                             if (value) {
  65                                 localStorage.setItem('pve-xterm-' + setting, value);
  66                             } else {
  67                                 localStorage.removeItem('pve-xterm-' + setting);
  68                             }
  69                         } else if (button.reference === 'xtermreset') {
  70                             field.setValue(undefined);
  71                             localStorage.removeItem('pve-xterm-' + setting);
  72                         }
  73                     });
  74                     button.setDisabled(true);
  75                 }
  76             },
  77             'button[name=reset]': {
  78                 click: function () {
  79                     var blacklist = ['GuiCap', 'login-username', 'dash-storages'];
  80                     var sp = Ext.state.Manager.getProvider();
  81                     var state;
  82                     for (state in sp.state) {
  83                         if (sp.state.hasOwnProperty(state)) {
  84                             if (blacklist.indexOf(state) !== -1) {
  85                                 continue;
  86                             }
  87
  88                             sp.clear(state);
  89                         }
  90                     }
  91
  92                     window.location.reload();
  93                 }
  94             },
  95             'button[name=clear-username]': {
  96                 click: function () {
  97                     var me = this;
  98                     var usernamefield = me.lookupReference('savedUserName');
  99                     var sp = Ext.state.Manager.getProvider();
 100
 101                     usernamefield.setValue(Proxmox.Utils.noneText);
 102                     sp.clear('login-username');
 103                 }
 104             },
 105             'grid[reference=dashboard-storages]': {
 106                 selectionchange: function(grid, selected) {
 107                     var me = this;
 108                     var sp = Ext.state.Manager.getProvider();
 109
 110                     // saves the selected storageids as
 111                     // "id1,id2,id3,..."
 112                     // or clears the variable
 113                     if (selected.length > 0) {
 114                         sp.set('dash-storages',
 115                             Ext.Array.pluck(selected, 'id').join(','));
 116                     } else {
 117                         sp.clear('dash-storages');
 118                     }
 119                 },
 120                 afterrender: function(grid) {
 121                     var me = grid;
 122                     var sp = Ext.state.Manager.getProvider();
 123                     var store = me.getStore();
 124                     var items = [];
 125                     me.suspendEvent('selectionchange');
 126                     var storages = sp.get('dash-storages') || '';
 127                     storages.split(',').forEach(function(storage){
 128                         // we have to get the records
 129                         // to be able to select them
 130                         if (storage !== '') {
 131                             var item = store.getById(storage);
 132                             if (item) {
 133                                 items.push(item);
 134                             }
 135                         }
 136                     });
 137                     me.getSelectionModel().select(items);
 138                     me.resumeEvent('selectionchange');
 139                 }
 140             }
 141         }
 142     },
 143
 144     items: [{
 145             xtype: 'fieldset',
 146             width: '50%',
 147             title: gettext('Webinterface Settings'),
 148             margin: '5',
 149             layout: {
 150                 type: 'vbox',
 151                 align: 'left'
 152             },
 153             defaults: {
 154                 width: '100%',
 155                 margin: '0 0 10 0'
 156             },
 157             items: [
 158                 {
 159                     xtype: 'displayfield',
 160                     fieldLabel: gettext('Dashboard Storages'),
 161                     labelAlign: 'left',
 162                     labelWidth: '50%'
 163                 },
 164                 {
 165                     xtype: 'grid',
 166                     maxHeight: 150,
 167                     reference: 'dashboard-storages',
 168                     selModel: {
 169                         selType: 'checkboxmodel'
 170                     },
 171                     columns: [{
 172                         header: gettext('Name'),
 173                         dataIndex: 'storage',
 174                         flex: 1
 175                     },{
 176                         header: gettext('Node'),
 177                         dataIndex: 'node',
 178                         flex: 1
 179                     }],
 180                     store: {
 181                         type: 'diff',
 182                         field: ['type', 'storage', 'id', 'node'],
 183                         rstore: PVE.data.ResourceStore,
 184                         filters: [{
 185                             property: 'type',
 186                             value: 'storage'
 187                         }],
 188                         sorters: [ 'node','storage']
 189                     }
 190                 },
 191                 {
 192                     xtype: 'box',
 193                     autoEl: { tag: 'hr'}
 194                 },
 195                 {
 196                     xtype: 'displayfield',
 197                     fieldLabel: gettext('Saved User name'),
 198                     labelAlign: 'left',
 199                     labelWidth: '50%',
 200                     stateId: 'login-username',
 201                     reference: 'savedUserName',
 202                     value: ''
 203                 },
 204                 {
 205                     xtype: 'button',
 206                     cls: 'x-btn-default-toolbar-small proxmox-inline-button',
 207                     text: gettext('Clear User name'),
 208                     width: 'auto',
 209                     name: 'clear-username'
 210                 },
 211                 {
 212                     xtype: 'box',
 213                     autoEl: { tag: 'hr'}
 214                 },
 215                 {
 216                     xtype: 'displayfield',
 217                     fieldLabel: gettext('Layout'),
 218                     labelAlign: 'left',
 219                     labelWidth: '50%'
 220                 },
 221                 {
 222                     xtype: 'button',
 223                     cls: 'x-btn-default-toolbar-small proxmox-inline-button',
 224                     text: gettext('Reset Layout'),
 225                     width: 'auto',
 226                     name: 'reset'
 227                 }
 228             ]
 229     },{
 230         xtype: 'fieldset',
 231         itemId: 'xtermjs',
 232         width: '50%',
 233         margin: '5',
 234             title: gettext('xterm.js Settings'),
 235         layout: {
 236             type: 'vbox',
 237             algin: 'left'
 238         },
 239         defaults: {
 240             width: '100%',
 241             margin: '0 0 10 0'
 242         },
 243         items: [
 244             {
 245                 xtype: 'textfield',
 246                 name: 'fontFamily',
 247                 reference: 'fontFamily',
 248                 emptyText: Proxmox.Utils.defaultText,
 249                 fieldLabel: gettext('Font-Family')
 250             },
 251             {
 252                 xtype: 'proxmoxintegerfield',
 253                 emptyText: Proxmox.Utils.defaultText,
 254                 name: 'fontSize',
 255                 reference: 'fontSize',
 256                 minValue: 1,
 257                 fieldLabel: gettext('Font-Size')
 258             },
 259             {
 260                 xtype: 'numberfield',
 261                 name: 'letterSpacing',
 262                 reference: 'letterSpacing',
 263                 emptyText: Proxmox.Utils.defaultText,
 264                 fieldLabel: gettext('Letter Spacing')
 265             },
 266             {
 267                 xtype: 'numberfield',
 268                 name: 'lineHeight',
 269                 minValue: 0.1,
 270                 reference: 'lineHeight',
 271                 emptyText: Proxmox.Utils.defaultText,
 272                 fieldLabel: gettext('Line Height')
 273             },
 274             {
 275                 xtype: 'container',
 276                 layout: {
 277                     type: 'hbox',
 278                     pack: 'end'
 279                 },
 280                 items: [
 281                     {
 282                         xtype: 'button',
 283                         reference: 'xtermreset',
 284                         disabled: true,
 285                         text: gettext('Reset')
 286                     },
 287                     {
 288                         xtype: 'button',
 289                         reference: 'xtermsave',
 290                         disabled: true,
 291                         text: gettext('Save')
 292                     }
 293                 ]
 294             }
 295         ]
 296     }],
 297
 298     onShow: function() {
 299         var me = this;
 300         me.callParent();
 301
 302     }
 303 });