js/MainView.js

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