ui: restore: group override settings in a fieldset

[pve-manager.git] / www / manager6 / window / Settings.js

diff --git a/www/manager6/window/Settings.js b/www/manager6/window/Settings.js
index c92d2a25fc685e252a878534a89c26f3586b08f7..5cf7a70f8aa63387cff9ca56639099e266131253 100644 (file)
--- a/www/manager6/window/Settings.js
+++ b/www/manager6/window/Settings.js
@@ -34,10 +34,8 @@ Ext.define('PVE.window.Settings', {
 
            var username = sp.get('login-username') || Proxmox.Utils.noneText;
            me.lookupReference('savedUserName').setValue(Ext.String.htmlEncode(username));
-           var vncMode = sp.get('novnc-scaling');
-           if (vncMode !== undefined) {
-               me.lookupReference('noVNCScalingGroup').setValue({ noVNCScalingField: vncMode });
-           }
+           var vncMode = sp.get('novnc-scaling') || 'auto';
+           me.lookupReference('noVNCScalingGroup').setValue({ noVNCScalingField: vncMode });
 
            let summarycolumns = sp.get('summarycolumns', 'auto');
            me.lookup('summarycolumns').setValue(summarycolumns);
@@ -56,23 +54,14 @@ Ext.define('PVE.window.Settings', {
        },
 
        set_button_status: function() {
-           var me = this;
-
-           var form = me.lookup('xtermform');
-           var valid = form.isValid();
-           var dirty = form.isDirty();
+           let me = this;
+           let form = me.lookup('xtermform');
 
-           var hasvalues = false;
-           var values = form.getValues();
-           Ext.Object.eachValue(values, function(value) {
-               if (value) {
-                   hasvalues = true;
-                   return false;
-               }
-           });
+           let valid = form.isValid(), dirty = form.isDirty();
+           let hasValues = Object.values(form.getValues()).some(v => !!v);
 
            me.lookup('xtermsave').setDisabled(!dirty || !valid);
-           me.lookup('xtermreset').setDisabled(!hasvalues);
+           me.lookup('xtermreset').setDisabled(!hasValues);
        },
 
        control: {
@@ -104,30 +93,21 @@ Ext.define('PVE.window.Settings', {
            },
            'button[name=reset]': {
                click: function() {
-                   var blacklist = ['GuiCap', 'login-username', 'dash-storages'];
-                   var sp = Ext.state.Manager.getProvider();
-                   var state;
-                   for (state in sp.state) {
-                       if (sp.state.hasOwnProperty(state)) {
-                           if (blacklist.indexOf(state) !== -1) {
-                               continue;
-                           }
-
+                   let blacklist = ['GuiCap', 'login-username', 'dash-storages'];
+                   let sp = Ext.state.Manager.getProvider();
+                   for (const state of Object.keys(sp.state)) {
+                       if (!blacklist.includes(state)) {
                            sp.clear(state);
                        }
                    }
-
                    window.location.reload();
                },
            },
            'button[name=clear-username]': {
                click: function() {
-                   var me = this;
-                   var usernamefield = me.lookupReference('savedUserName');
-                   var sp = Ext.state.Manager.getProvider();
-
-                   usernamefield.setValue(Proxmox.Utils.noneText);
-                   sp.clear('login-username');
+                   let me = this;
+                   me.lookupReference('savedUserName').setValue(Proxmox.Utils.noneText);
+                   Ext.state.Manager.getProvider().clear('login-username');
                },
            },
            'grid[reference=dashboard-storages]': {
@@ -135,47 +115,36 @@ Ext.define('PVE.window.Settings', {
                    var me = this;
                    var sp = Ext.state.Manager.getProvider();
 
-                   // saves the selected storageids as
-                   // "id1,id2,id3,..."
-                   // or clears the variable
+                   // saves the selected storageids as "id1,id2,id3,..." or clears the variable
                    if (selected.length > 0) {
-                       sp.set('dash-storages',
-                           Ext.Array.pluck(selected, 'id').join(','));
+                       sp.set('dash-storages', Ext.Array.pluck(selected, 'id').join(','));
                    } else {
                        sp.clear('dash-storages');
                    }
                },
                afterrender: function(grid) {
-                   var me = grid;
-                   var sp = Ext.state.Manager.getProvider();
-                   var store = me.getStore();
-                   var items = [];
-                   me.suspendEvent('selectionchange');
-                   var storages = sp.get('dash-storages') || '';
-                   storages.split(',').forEach(function(storage) {
-                       // we have to get the records
-                       // to be able to select them
-                       if (storage !== '') {
-                           var item = store.getById(storage);
+                   let store = grid.getStore();
+                   let storages = Ext.state.Manager.getProvider().get('dash-storages') || '';
+
+                   let items = [];
+                   storages.split(',').forEach(storage => {
+                       if (storage !== '') { // we have to get the records to be able to select them
+                           let item = store.getById(storage);
                            if (item) {
                                items.push(item);
                            }
                        }
                    });
-                   me.getSelectionModel().select(items);
-                   me.resumeEvent('selectionchange');
+                   grid.suspendEvent('selectionchange');
+                   grid.getSelectionModel().select(items);
+                   grid.resumeEvent('selectionchange');
                },
            },
            'field[reference=summarycolumns]': {
-               change: function(el, newValue) {
-                   var sp = Ext.state.Manager.getProvider();
-                   sp.set('summarycolumns', newValue);
-               },
+               change: (el, newValue) => Ext.state.Manager.getProvider().set('summarycolumns', newValue),
            },
            'field[reference=guestNotesCollapse]': {
-               change: function(e, v) {
-                   Ext.state.Manager.getProvider().set('guest-notes-collapse', v);
-               },
+               change: (e, v) => Ext.state.Manager.getProvider().set('guest-notes-collapse', v),
            },
        },
     },
@@ -238,7 +207,7 @@ Ext.define('PVE.window.Settings', {
                    {
                        xtype: 'displayfield',
                        fieldLabel: gettext('Saved User Name') + ':',
-                       labelWidth: '150',
+                       labelWidth: 150,
                        stateId: 'login-username',
                        reference: 'savedUserName',
                        flex: 1,
@@ -403,12 +372,18 @@ Ext.define('PVE.window.Settings', {
                            type: 'hbox',
                        },
                        items: [
+                           {
+                               xtype: 'radiofield',
+                               name: 'noVNCScalingField',
+                               inputValue: 'auto',
+                               boxLabel: 'Auto',
+                           },
                            {
                                xtype: 'radiofield',
                                name: 'noVNCScalingField',
                                inputValue: 'scale',
                                boxLabel: 'Local Scaling',
-                               checked: true,
+                               margin: '0 0 0 10',
                            }, {
                                xtype: 'radiofield',
                                name: 'noVNCScalingField',
@@ -418,9 +393,13 @@ Ext.define('PVE.window.Settings', {
                            },
                        ],
                        listeners: {
-                           change: function(el, newValue, undefined) {
-                               var sp = Ext.state.Manager.getProvider();
-                               sp.set('novnc-scaling', newValue.noVNCScalingField);
+                           change: function(el, { noVNCScalingField }) {
+                               let provider = Ext.state.Manager.getProvider();
+                               if (noVNCScalingField === 'auto') {
+                                   provider.clear('novnc-scaling');
+                               } else {
+                                   provider.set('novnc-scaling', noVNCScalingField);
+                               }
                            },
                        },
                    },