-/*global Proxmox*/
Ext.define('PMG.MainView', {
extend: 'Ext.container.Container',
xtype: 'mainview',
':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');
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
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;
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 });
- var treelist = me.lookupReference('navtree');
+ let obj = contentpanel.add({ xtype: path });
+ let treelist = me.lookupReference('navtree');
treelist.suspendEvents();
treelist.select(path);
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
if (lastpanel) {
contentpanel.remove(lastpanel, { destroy: true });
}
-
},
logout: function() {
- var me = this;
- Proxmox.Utils.authClear();
- me.getView().destroy();
- Ext.create({ xtype: 'loginview'});
+ PMG.app.logout();
},
navigate: function(treelist, item) {
this.redirectTo(item.get('path'));
},
+ changeLanguage: function() {
+ Ext.create('Proxmox.window.LanguageEditWindow', {
+ cookieName: 'PMGLangCookie',
+ }).show();
+ },
+
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
- me.lookupReference('usernameinfo').update({username:Proxmox.UserName});
+ me.lookupReference('usernameinfo').setText(Proxmox.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();
}
});
// get ticket periodically
Ext.TaskManager.start({
run: function() {
- var ticket = Proxmox.Utils.authOK();
+ let ticket = Proxmox.Utils.authOK();
if (!ticket || !Proxmox.UserName) {
return;
}
Ext.Ajax.request({
params: {
username: Proxmox.UserName,
- password: ticket
+ password: ticket,
},
url: '/api2/json/access/ticket',
method: 'POST',
me.logout();
},
success: function(response, opts) {
- var obj = Ext.decode(response.responseText);
+ let obj = Ext.decode(response.responseText);
PMG.Utils.updateLoginData(obj.data);
- }
+ },
});
},
- interval: 15*60*1000
+ interval: 15*60*1000,
});
- var provider = new Ext.state.LocalStorageProvider({
- prefix: 'ext-pmg-' });
- Ext.state.Manager.setProvider(provider);
-
// select treeitem and load page from url fragment
- var token = Ext.util.History.getToken() || 'pmgDashboard';
- this.redirectTo(token, true);
-
- }
+ let token = Ext.util.History.getToken() || 'pmgDashboard';
+ this.redirectTo(token, { force: true });
+ },
},
plugins: 'viewport',
- layout: 'border',
+ layout: { type: 'border' },
items: [
{
xtype: 'container',
layout: {
type: 'hbox',
- align: 'middle'
+ align: 'middle',
},
- margin: '4 5 4 5',
+ margin: '2 0 2 5',
+ height: 38,
items: [
{
- xtype: 'proxmoxlogo'
+ xtype: 'proxmoxlogo',
},
{
- xtype: 'versioninfo'
+ padding: '0 0 0 5',
+ xtype: 'versioninfo',
},
{
- flex: 1
- },
- {
- baseCls: 'x-plain',
- reference: 'usernameinfo',
- padding: '0 5',
- tpl: Ext.String.format(gettext("You are logged in as '{0}'"), '{username}')
+ flex: 1,
},
{
xtype: 'proxmoxHelpButton',
+ text: gettext('Documentation'),
hidden: false,
baseCls: 'x-btn',
iconCls: 'fa fa-info-circle x-btn-icon-el-default-toolbar-small ',
+ margin: '0 5 0 0',
listenToGlobalEvent: false,
- onlineHelp: 'pmg_documentation_index'
+ onlineHelp: 'pmg_documentation_index',
},
{
- reference: 'logoutButton',
xtype: 'button',
- iconCls: 'fa fa-sign-out',
- text: gettext('Logout')
- }
- ]
+ reference: 'usernameinfo',
+ 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-gear',
+ text: gettext('My Settings'),
+ handler: () => Ext.create('PMG.window.Settings').show(),
+ },
+ {
+ iconCls: 'fa fa-paint-brush',
+ text: gettext('Color Theme'),
+ handler: () => Ext.create('Proxmox.window.ThemeEditWindow', {
+ cookieName: 'PMGThemeCookie',
+ autoShow: true,
+ }),
+ },
+ {
+ iconCls: 'fa fa-language',
+ text: gettext('Language'),
+ reference: 'languageButton',
+ },
+ '-',
+ {
+ reference: 'logoutButton',
+ iconCls: 'fa fa-sign-out',
+ text: gettext('Logout'),
+ },
+ ],
+ },
+ ],
},
{
xtype: 'panel',
region: 'west',
layout: {
type: 'vbox',
- align: 'stretch'
+ align: 'stretch',
},
- items: [{
- xtype: 'navigationtree',
- minWidth: 180,
- reference: 'navtree',
- // 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-nav',
- flex: 1
- }]
+ items: [
+ {
+ xtype: 'navigationtree',
+ minWidth: 180,
+ reference: 'navtree',
+ // 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: 'card',
+ layout: { type: 'card' },
region: 'center',
border: false,
- reference: 'contentpanel'
- }
- ]
+ reference: 'contentpanel',
+ },
+ ],
});
projects / pmg-gui.git / blobdiff