js/MainView.js

   1 Ext.define('PMG.MainView', {
   2     extend: 'Ext.container.Container',
   3     xtype: 'mainview',
   4
   5     title: 'Proxmox Mail Gateway',
   6
   7     controller: {
   8         xclass: 'Ext.app.ViewController',
   9         routes: {
  10             ':path:subpath': {
  11                 action: 'changePath',
  12                 before: 'beforeChangePath',
  13                 conditions: {
  14                     ':path': '(?:([%a-zA-Z0-9\\-\\_\\s,]+))',
  15                     ':subpath': '(?:(?::)([%a-zA-Z0-9\\-\\_\\s,]+))?',
  16                 },
  17             },
  18         },
  19
  20         beforeChangePath: function(path, subpathOrAction, action) {
  21             let me = this;
  22
  23             let subpath = subpathOrAction;
  24             if (!action) {
  25                 action = subpathOrAction;
  26                 subpath = undefined;
  27             }
  28
  29             if (!Ext.ClassManager.getByAlias('widget.'+ path)) {
  30                 console.warn('xtype "'+path+'" not found');
  31                 action.stop();
  32                 return;
  33             }
  34
  35             let lastpanel = me.lookupReference('contentpanel').getLayout().getActiveItem();
  36             if (lastpanel && lastpanel.xtype === path) {
  37                 // we have the right component already,
  38                 // we just need to select the correct tab
  39                 // default to the first
  40                 subpath = subpath || 0;
  41                 if (lastpanel.getActiveTab) {
  42                     // we assume lastpanel is a tabpanel
  43                     if (lastpanel.getActiveTab().getItemId() !== subpath) {
  44                         // set the active tab
  45                         lastpanel.setActiveTab(subpath);
  46                     }
  47                     // else we are already there
  48                 }
  49                 action.stop();
  50                 return;
  51             }
  52
  53             action.resume();
  54         },
  55
  56         changePath: function(path, subpath) {
  57             let me = this;
  58             let contentpanel = me.lookupReference('contentpanel');
  59             let lastpanel = contentpanel.getLayout().getActiveItem();
  60
  61             let obj = contentpanel.add({ xtype: path });
  62             let treelist = me.lookupReference('navtree');
  63
  64             treelist.suspendEvents();
  65             treelist.select(path);
  66             treelist.resumeEvents();
  67
  68             if (Ext.isFunction(obj.setActiveTab)) {
  69                 obj.setActiveTab(subpath || 0);
  70                 obj.addListener('tabchange', function(tabpanel, newc, oldc) {
  71                     let newpath = path;
  72
  73                     // only add the subpath part for the
  74                     // non-default tabs
  75                     if (tabpanel.items.findIndex('id', newc.id) !== 0) {
  76                         newpath += ":" + newc.getItemId();
  77                     }
  78
  79                     me.redirectTo(newpath);
  80                 });
  81             }
  82
  83             contentpanel.setActiveItem(obj);
  84
  85             if (lastpanel) {
  86                 contentpanel.remove(lastpanel, { destroy: true });
  87             }
  88         },
  89
  90         logout: function() {
  91             PMG.app.logout();
  92         },
  93
  94         navigate: function(treelist, item) {
  95             this.redirectTo(item.get('path'));
  96         },
  97
  98         changeLanguage: function() {
  99             Ext.create('Proxmox.window.LanguageEditWindow', {
 100                 cookieName: 'PMGLangCookie',
 101             }).show();
 102         },
 103
 104         control: {
 105             '[reference=logoutButton]': {
 106                 click: 'logout',
 107             },
 108             '[reference=languageButton]': {
 109                 click: 'changeLanguage',
 110             },
 111         },
 112
 113         init: function(view) {
 114             let me = this;
 115
 116             // load username
 117             me.lookupReference('usernameinfo').setText(Proxmox.UserName);
 118
 119             // show login on requestexception
 120             // fixme: what about other errors
 121             Ext.Ajax.on('requestexception', function(conn, response, options) {
 122                 if (response.status === 401) { // auth failure
 123                     me.logout();
 124                 }
 125             });
 126
 127             // get ticket periodically
 128             Ext.TaskManager.start({
 129                 run: function() {
 130                     let ticket = Proxmox.Utils.authOK();
 131                     if (!ticket || !Proxmox.UserName) {
 132                         return;
 133                     }
 134
 135                     Ext.Ajax.request({
 136                         params: {
 137                             username: Proxmox.UserName,
 138                             password: ticket,
 139                         },
 140                         url: '/api2/json/access/ticket',
 141                         method: 'POST',
 142                         failure: function() {
 143                             me.logout();
 144                         },
 145                         success: function(response, opts) {
 146                             let obj = Ext.decode(response.responseText);
 147                             PMG.Utils.updateLoginData(obj.data);
 148                         },
 149                     });
 150                 },
 151                 interval: 15*60*1000,
 152             });
 153
 154             // select treeitem and load page from url fragment
 155             let token = Ext.util.History.getToken() || 'pmgDashboard';
 156             this.redirectTo(token, { force: true });
 157         },
 158     },
 159
 160     plugins: 'viewport',
 161
 162     layout: { type: 'border' },
 163
 164     items: [
 165         {
 166             region: 'north',
 167             xtype: 'container',
 168             layout: {
 169                 type: 'hbox',
 170                 align: 'middle',
 171             },
 172             margin: '2 0 2 5',
 173             height: 38,
 174             items: [
 175                 {
 176                     xtype: 'proxmoxlogo',
 177                 },
 178                 {
 179                     padding: '0 0 0 5',
 180                     xtype: 'versioninfo',
 181                 },
 182                 {
 183                     flex: 1,
 184                 },
 185                 {
 186                     xtype: 'proxmoxHelpButton',
 187                     text: gettext('Documentation'),
 188                     hidden: false,
 189                     baseCls: 'x-btn',
 190                     iconCls: 'fa fa-info-circle x-btn-icon-el-default-toolbar-small ',
 191                     margin: '0 5 0 0',
 192                     listenToGlobalEvent: false,
 193                     onlineHelp: 'pmg_documentation_index',
 194                 },
 195                 {
 196                     xtype: 'button',
 197                     reference: 'usernameinfo',
 198                     style: {
 199                         // proxmox dark grey p light grey as border
 200                         backgroundColor: '#464d4d',
 201                         borderColor: '#ABBABA',
 202                     },
 203                     margin: '0 5 0 0',
 204                     iconCls: 'fa fa-user',
 205                     menu: [
 206                         {
 207                             iconCls: 'fa fa-gear',
 208                             text: gettext('My Settings'),
 209                             handler: () => Ext.create('PMG.window.Settings').show(),
 210                         },
 211                         {
 212                             iconCls: 'fa fa-paint-brush',
 213                             text: gettext('Color Theme'),
 214                             handler: () => Ext.create('Proxmox.window.ThemeEditWindow', {
 215                                 cookieName: 'PMGThemeCookie',
 216                                 autoShow: true,
 217                             }),
 218                         },
 219                         {
 220                             iconCls: 'fa fa-language',
 221                             text: gettext('Language'),
 222                             reference: 'languageButton',
 223                         },
 224                         '-',
 225                         {
 226                             reference: 'logoutButton',
 227                             iconCls: 'fa fa-sign-out',
 228                             text: gettext('Logout'),
 229                         },
 230                     ],
 231                 },
 232             ],
 233         },
 234         {
 235             xtype: 'panel',
 236             scrollable: 'y',
 237             border: false,
 238             region: 'west',
 239             layout: {
 240                 type: 'vbox',
 241                 align: 'stretch',
 242             },
 243             items: [
 244                 {
 245                     xtype: 'navigationtree',
 246                     minWidth: 180,
 247                     reference: 'navtree',
 248                     // we have to define it here until extjs 6.2 because of a bug where a
 249                     // viewcontroller does not detect the selectionchange event of a treelist
 250                     listeners: {
 251                         selectionchange: 'navigate',
 252                     },
 253                 },
 254                 {
 255                     xtype: 'box',
 256                     cls: 'x-treelist-pve-nav',
 257                     flex: 1,
 258                 },
 259             ],
 260         },
 261         {
 262             xtype: 'panel',
 263             layout: { type: 'card' },
 264             region: 'center',
 265             border: false,
 266             reference: 'contentpanel',
 267         },
 268     ],
 269 });