js/Settings.js

   1 Ext.define('PMG.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         {
  14             text: gettext('Close'),
  15             handler: function() {
  16                 this.up('window').close();
  17             },
  18         },
  19     ],
  20
  21     layout: 'hbox',
  22
  23     controller: {
  24         xclass: 'Ext.app.ViewController',
  25
  26         init: function(view) {
  27             let me = this;
  28             let sp = Ext.state.Manager.getProvider();
  29
  30             let username = sp.get('login-username') || Proxmox.Utils.noneText;
  31             me.lookupReference('savedUserName').setValue(Ext.String.htmlEncode(username));
  32
  33             let summarycolumns = sp.get('summarycolumns', 'auto');
  34             me.lookup('summarycolumns').setValue(summarycolumns);
  35
  36             let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
  37             settings.forEach(function(setting) {
  38                 let val = localStorage.getItem('pve-xterm-' + setting);
  39                 if (val !== undefined && val !== null) {
  40                     let field = me.lookup(setting);
  41                     field.setValue(val);
  42                     field.resetOriginalValue();
  43                 }
  44             });
  45         },
  46
  47         set_button_status: function() {
  48             let me = this;
  49
  50             let form = me.lookup('xtermform');
  51             let valid = form.isValid();
  52             let dirty = form.isDirty();
  53
  54             let hasvalues = false;
  55             let values = form.getValues();
  56             Ext.Object.eachValue(values, function(value) {
  57                 if (value) {
  58                     hasvalues = true;
  59                     return false;
  60                 }
  61                 return true;
  62             });
  63
  64             me.lookup('xtermsave').setDisabled(!dirty || !valid);
  65             me.lookup('xtermreset').setDisabled(!hasvalues);
  66         },
  67
  68         control: {
  69             '#xtermjs form': {
  70                 dirtychange: 'set_button_status',
  71                 validitychange: 'set_button_status',
  72             },
  73             '#xtermjs button': {
  74                 click: function(button) {
  75                     let me = this;
  76                     let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
  77                     settings.forEach(function(setting) {
  78                         let field = me.lookup(setting);
  79                         if (button.reference === 'xtermsave') {
  80                             let value = field.getValue();
  81                             if (value) {
  82                                 localStorage.setItem('pve-xterm-' + setting, value);
  83                             } else {
  84                                 localStorage.removeItem('pve-xterm-' + setting);
  85                             }
  86                         } else if (button.reference === 'xtermreset') {
  87                             field.setValue(undefined);
  88                             localStorage.removeItem('pve-xterm-' + setting);
  89                         }
  90                         field.resetOriginalValue();
  91                     });
  92                     me.set_button_status();
  93                 },
  94             },
  95             'button[name=reset]': {
  96                 click: function() {
  97                     let blacklist = ['login-username'];
  98                     let sp = Ext.state.Manager.getProvider();
  99                     for (const state of Object.values(sp.state)) {
 100                         if (blacklist.indexOf(state) !== -1) {
 101                             continue;
 102                         }
 103
 104                         sp.clear(state);
 105                     }
 106
 107                     window.location.reload();
 108                 },
 109             },
 110             'button[name=clear-username]': {
 111                 click: function() {
 112                     let me = this;
 113                     let usernamefield = me.lookupReference('savedUserName');
 114                     let sp = Ext.state.Manager.getProvider();
 115
 116                     usernamefield.setValue(Proxmox.Utils.noneText);
 117                     sp.clear('login-username');
 118                 },
 119             },
 120             'field[reference=summarycolumns]': {
 121                 change: function(el, newValue) {
 122                     var sp = Ext.state.Manager.getProvider();
 123                     sp.set('summarycolumns', newValue);
 124                 },
 125             },
 126         },
 127     },
 128
 129     items: [{
 130         xtype: 'fieldset',
 131         flex: 1,
 132         title: gettext('Webinterface Settings'),
 133         margin: '5',
 134         layout: {
 135             type: 'vbox',
 136             align: 'left',
 137         },
 138         defaults: {
 139             width: '100%',
 140             margin: '0 0 10 0',
 141         },
 142         items: [
 143             {
 144                 xtype: 'container',
 145                 layout: 'hbox',
 146                 items: [
 147                     {
 148                         xtype: 'displayfield',
 149                         fieldLabel: gettext('Saved User Name') + ':',
 150                         labelWidth: 150,
 151                         stateId: 'login-username',
 152                         reference: 'savedUserName',
 153                         flex: 1,
 154                         value: '',
 155                     },
 156                     {
 157                         xtype: 'button',
 158                         cls: 'x-btn-default-toolbar-small proxmox-inline-button',
 159                         text: gettext('Reset'),
 160                         name: 'clear-username',
 161                     },
 162                 ],
 163             },
 164             {
 165                 xtype: 'box',
 166                 autoEl: { tag: 'hr' },
 167             },
 168             {
 169                 xtype: 'container',
 170                 layout: 'hbox',
 171                 items: [
 172                     {
 173                         xtype: 'displayfield',
 174                         fieldLabel: gettext('Layout') + ':',
 175                         flex: 1,
 176                     },
 177                     {
 178                         xtype: 'button',
 179                         cls: 'x-btn-default-toolbar-small proxmox-inline-button',
 180                         text: gettext('Reset'),
 181                         tooltip: gettext('Reset all layout changes (for example, column widths)'),
 182                         name: 'reset',
 183                     },
 184                 ],
 185             },
 186             {
 187                 xtype: 'box',
 188                 autoEl: { tag: 'hr' },
 189             },
 190             {
 191                 xtype: 'proxmoxKVComboBox',
 192                 fieldLabel: gettext('Summary/Dashboard columns') + ':',
 193                 labelWidth: 150,
 194                 stateId: 'summarycolumns',
 195                 reference: 'summarycolumns',
 196                 comboItems: [
 197                     ['auto', 'auto'],
 198                     ['1', '1'],
 199                     ['2', '2'],
 200                     ['3', '3'],
 201                 ],
 202             },
 203         ],
 204     },
 205     {
 206         xtype: 'container',
 207         layout: 'vbox',
 208         flex: 1,
 209         margin: '5',
 210         defaults: {
 211             width: '100%',
 212             // right margin ensures that the right border of the fieldsets
 213             // is shown
 214             margin: '0 2 10 0',
 215         },
 216         items: [
 217             {
 218                 xtype: 'fieldset',
 219                 itemId: 'xtermjs',
 220                 title: gettext('xterm.js Settings'),
 221                 items: [{
 222                     xtype: 'form',
 223                     reference: 'xtermform',
 224                     border: false,
 225                     layout: {
 226                         type: 'vbox',
 227                         algin: 'left',
 228                     },
 229                     defaults: {
 230                         width: '100%',
 231                         margin: '0 0 10 0',
 232                     },
 233                     items: [
 234                         {
 235                             xtype: 'textfield',
 236                             name: 'fontFamily',
 237                             reference: 'fontFamily',
 238                             emptyText: Proxmox.Utils.defaultText,
 239                             fieldLabel: gettext('Font-Family'),
 240                         },
 241                         {
 242                             xtype: 'proxmoxintegerfield',
 243                             emptyText: Proxmox.Utils.defaultText,
 244                             name: 'fontSize',
 245                             reference: 'fontSize',
 246                             minValue: 1,
 247                             fieldLabel: gettext('Font-Size'),
 248                         },
 249                         {
 250                             xtype: 'numberfield',
 251                             name: 'letterSpacing',
 252                             reference: 'letterSpacing',
 253                             emptyText: Proxmox.Utils.defaultText,
 254                             fieldLabel: gettext('Letter Spacing'),
 255                         },
 256                         {
 257                             xtype: 'numberfield',
 258                             name: 'lineHeight',
 259                             minValue: 0.1,
 260                             reference: 'lineHeight',
 261                             emptyText: Proxmox.Utils.defaultText,
 262                             fieldLabel: gettext('Line Height'),
 263                         },
 264                         {
 265                             xtype: 'container',
 266                             layout: {
 267                                 type: 'hbox',
 268                                 pack: 'end',
 269                             },
 270                             defaults: {
 271                                 margin: '0 0 0 5',
 272                             },
 273                             items: [
 274                                 {
 275                                     xtype: 'button',
 276                                     reference: 'xtermreset',
 277                                     disabled: true,
 278                                     text: gettext('Reset'),
 279                                 },
 280                                 {
 281                                     xtype: 'button',
 282                                     reference: 'xtermsave',
 283                                     disabled: true,
 284                                     text: gettext('Save'),
 285                                 },
 286                             ],
 287                         },
 288                     ],
 289                 }],
 290             },
 291         ],
 292     }],
 293 });