]> git.proxmox.com Git - pmg-gui.git/blobdiff - js/QuarantineView.js
spam info grid: use monospace font for score and level names
[pmg-gui.git] / js / QuarantineView.js
index 3d69d1274758ffc3c68131d0ebbf3c8741f88ef0..149f5810d8f2acc24e65ff4ff6aecb2ca812d8f5 100644 (file)
@@ -1,11 +1,10 @@
-/*global Proxmox*/
 Ext.define('PMG.QuarantineNavigationTree', {
     extend: 'Ext.list.Tree',
     xtype: 'quarantinenavigationtree',
 
     select: function(path) {
-       var me = this;
-       var item = me.getStore().findRecord('path', path, 0, false, true, true);
+       let me = this;
+       let item = me.getStore().findRecord('path', path, 0, false, true, true);
        me.setSelection(item);
     },
 
@@ -21,26 +20,26 @@ Ext.define('PMG.QuarantineNavigationTree', {
                    children: [
                        {
                            text: gettext('Whitelist'),
-                           //iconCls: 'fa fa-cubes',
+                           iconCls: 'fa fa-file-o',
                            path: 'pmgUserWhitelist',
-                           leaf: true
+                           leaf: true,
                        },
                        {
                            text: gettext('Blacklist'),
-                           //iconCls: 'fa fa-cubes',
+                           iconCls: 'fa fa-file',
                            path: 'pmgUserBlacklist',
-                           leaf: true
-                       }
-                   ]
-               }
-           ]
-       }
+                           leaf: true,
+                       },
+                   ],
+               },
+           ],
+       },
     },
 
     animation: false,
     expanderOnly: true,
     expanderFirst: false,
-    ui: 'nav'
+    ui: 'pve-nav',
 });
 
 Ext.define('PMG.QuarantineView', {
@@ -55,15 +54,21 @@ Ext.define('PMG.QuarantineView', {
            ':path:subpath': {
                action: 'changePath',
                before: 'beforeChangePath',
-                conditions : {
-                   ':path'    : '(?:([%a-zA-Z0-9\-\_\s,]+))',
-                   ':subpath' : '(?:(?::)([%a-zA-Z0-9\-\_\s,]+))?'
-               }
-           }
+                conditions: {
+                   ':path': '(?:([%a-zA-Z0-9\\-\\_\\s,]+))',
+                   ':subpath': '(?:(?::)([%a-zA-Z0-9\\-\\_\\s,]+))?',
+               },
+           },
        },
 
-       beforeChangePath: function(path, subpath, action) {
-           var me = this;
+       beforeChangePath: function(path, subpathOrAction, action) {
+           let me = this;
+
+           let subpath = subpathOrAction;
+           if (!action) {
+               action = subpathOrAction;
+               subpath = undefined;
+           }
 
            if (!Ext.ClassManager.getByAlias('widget.'+ path)) {
                console.warn('xtype "'+path+'" not found');
@@ -71,7 +76,7 @@ Ext.define('PMG.QuarantineView', {
                return;
            }
 
-           var lastpanel = me.lookupReference('contentpanel').getLayout().getActiveItem();
+           let lastpanel = me.lookupReference('contentpanel').getLayout().getActiveItem();
            if (lastpanel && lastpanel.xtype === path) {
                // we have the right component already,
                // we just need to select the correct tab
@@ -79,12 +84,11 @@ Ext.define('PMG.QuarantineView', {
                subpath = subpath || 0;
                if (lastpanel.getActiveTab) {
                    // we assume lastpanel is a tabpanel
-                   if (lastpanel.getActiveTab().getItemId() === subpath) {
-                       // we are already there
-                   } else {
+                   if (lastpanel.getActiveTab().getItemId() !== subpath) {
                        // set the active tab
                        lastpanel.setActiveTab(subpath);
                    }
+                   // else we are already there
                }
                action.stop();
                return;
@@ -93,13 +97,13 @@ Ext.define('PMG.QuarantineView', {
            action.resume();
        },
 
-       changePath: function(path,subpath) {
-           var me = this;
-           var contentpanel = me.lookupReference('contentpanel');
-           var lastpanel = contentpanel.getLayout().getActiveItem();
+       changePath: function(path, subpath) {
+           let me = this;
+           let contentpanel = me.lookupReference('contentpanel');
+           let lastpanel = contentpanel.getLayout().getActiveItem();
 
-           var obj = contentpanel.add({ xtype: path, cselect: subpath });
-           var treelist = me.lookupReference('navtree');
+           let obj = contentpanel.add({ xtype: path, cselect: subpath });
+           let treelist = me.lookupReference('navtree');
 
            treelist.suspendEvents();
            treelist.select(path);
@@ -108,7 +112,7 @@ Ext.define('PMG.QuarantineView', {
            if (Ext.isFunction(obj.setActiveTab)) {
                obj.setActiveTab(subpath || 0);
                obj.addListener('tabchange', function(tabpanel, newc, oldc) {
-                   var newpath = path;
+                   let newpath = path;
 
                    // only add the subpath part for the
                    // non-default tabs
@@ -131,6 +135,12 @@ Ext.define('PMG.QuarantineView', {
            PMG.app.logout();
        },
 
+       changeLanguage: function() {
+           Ext.create('Proxmox.window.LanguageEditWindow', {
+               cookieName: 'PMGLangCookie',
+           }).show();
+       },
+
        navigate: function(treelist, item) {
            this.redirectTo(item.get('path'));
        },
@@ -140,29 +150,33 @@ Ext.define('PMG.QuarantineView', {
        },
 
        control: {
-           'button[reference=logoutButton]': {
-               click: 'logout'
-           }
+           '[reference=logoutButton]': {
+               click: 'logout',
+           },
+           '[reference=languageButton]': {
+               click: 'changeLanguage',
+           },
        },
 
        init: function(view) {
-           var me = this;
+           let me = this;
 
            // load username
-           var username = Proxmox.UserName.replace(/\@quarantine$/, '');
-           me.lookupReference('usernameinfo').update({username: username});
+           let username = Proxmox.UserName.replace(/@quarantine$/, '');
+           me.lookupReference('usernameinfo').setText(username);
 
            // show login on requestexception
            // fixme: what about other errors
            Ext.Ajax.on('requestexception', function(conn, response, options) {
-               if (response.status == 401) { // auth failure
+               if (response.status === 401) { // auth failure
                    me.logout();
                }
            });
 
-           var qa = PMG.Utils.extractQuarantineAction();
+           let qa = PMG.Utils.extractQuarantineAction();
+           let token;
            if (qa) {
-               var token = 'pmgSpamQuarantine';
+               token = 'pmgSpamQuarantine';
                if (qa.action === 'blacklist') { token = 'pmgUserBlacklist'; }
                if (qa.action === 'whitelist') { token = 'pmgUserWhitelist'; }
                if (qa.cselect) {
@@ -174,17 +188,17 @@ Ext.define('PMG.QuarantineView', {
                }
            } else {
                // select treeitem and load page from url fragment
-               
-               var token = Ext.util.History.getToken() || 'pmgSpamQuarantine';
+
+               token = Ext.util.History.getToken() || 'pmgSpamQuarantine';
                this.redirectTo(token, true);
            }
-       }
+       },
     },
 
     plugins: 'viewport',
 
     layout: {
-       type: 'border'
+       type: 'border',
     },
 
     items: [
@@ -193,55 +207,82 @@ Ext.define('PMG.QuarantineView', {
            xtype: 'container',
            layout: {
                type: 'hbox',
-               align: 'middle'
+               align: 'middle',
            },
-           margin: '2 5 2 5',
+           margin: '2 0 2 5',
            height: 38,
            items: [
                {
-                   xtype: 'proxmoxlogo'
+                   xtype: 'proxmoxlogo',
                },
                {
-                   xtype: 'versioninfo'
+                   padding: '0 0 0 5',
+                   xtype: 'versioninfo',
                },
                {
-                   flex: 1
+                   flex: 1,
                },
                {
-                   baseCls: 'x-plain',
+                   xtype: 'button',
                    reference: 'usernameinfo',
-                   padding: '0 5',
-                   tpl: Ext.String.format(gettext("You are logged in as '{0}'"), '{username}')
+                   style: {
+                       // proxmox dark grey p light grey as border
+                       backgroundColor: '#464d4d',
+                       borderColor: '#ABBABA',
+                   },
+                   margin: '0 5 0 0',
+                   iconCls: 'fa fa-user',
+                   menu: [
+                       {
+                           iconCls: 'fa fa-language',
+                           text: gettext('Language'),
+                           reference: 'languageButton',
+                       },
+                       '-',
+                       {
+                           reference: 'logoutButton',
+                           iconCls: 'fa fa-sign-out',
+                           text: gettext('Logout'),
+                       },
+                   ],
                },
-               {
-                   reference: 'logoutButton',
-                   xtype: 'button',
-                   iconCls: 'fa fa-sign-out',
-                   text: gettext('Logout')
-               }
-           ]
+           ],
        },
        {
-           xtype: 'quarantinenavigationtree',
-           reference: 'navtree',
-           minWidth: 177,
+           xtype: 'panel',
+           scrollable: 'y',
            border: false,
            region: 'west',
-           // we have to define it here until extjs 6.2
-           // because of a bug where a viewcontroller does not detect
-           // the selectionchange event of a treelist
-           listeners: {
-               selectionchange: 'navigate'
-           }
+           layout: {
+               type: 'vbox',
+               align: 'stretch',
+           },
+           items: [
+               {
+                   xtype: 'quarantinenavigationtree',
+                   reference: 'navtree',
+                   minWidth: 180,
+                   // we have to define it here until extjs 6.2 because of a bug where a
+                   // viewcontroller does not detect the selectionchange event of a treelist
+                   listeners: {
+                       selectionchange: 'navigate',
+                   },
+               },
+               {
+                   xtype: 'box',
+                   cls: 'x-treelist-pve-nav',
+                   flex: 1,
+               },
+           ],
        },
        {
            xtype: 'panel',
            layout: {
-               type: 'card'
+               type: 'card',
            },
            region: 'center',
            border: false,
-           reference: 'contentpanel'
-       }
-    ]
+           reference: 'contentpanel',
+       },
+    ],
 });