]>
Commit | Line | Data |
---|---|---|
2c1d504e | 1 | /*global Proxmox*/ |
9d91eeb0 DC |
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 : { | |
6355fc2c DC |
15 | ':path' : '(?:([%a-zA-Z0-9\\-\\_\\s,]+))', |
16 | ':subpath' : '(?:(?::)([%a-zA-Z0-9\\-\\_\\s,]+))?' | |
9d91eeb0 DC |
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 | // we are already there | |
40 | } else { | |
41 | // set the active tab | |
42 | lastpanel.setActiveTab(subpath); | |
43 | } | |
44 | } | |
45 | action.stop(); | |
46 | return; | |
47 | } | |
48 | ||
49 | action.resume(); | |
50 | }, | |
51 | ||
52 | changePath: function(path,subpath) { | |
53 | var me = this; | |
54 | var contentpanel = me.lookupReference('contentpanel'); | |
55 | var lastpanel = contentpanel.getLayout().getActiveItem(); | |
56 | ||
57 | var obj = contentpanel.add({ xtype: path }); | |
58 | var treelist = me.lookupReference('navtree'); | |
59 | ||
60 | treelist.suspendEvents(); | |
61 | treelist.select(path); | |
62 | treelist.resumeEvents(); | |
63 | ||
64 | if (Ext.isFunction(obj.setActiveTab)) { | |
65 | obj.setActiveTab(subpath || 0); | |
66 | obj.addListener('tabchange', function(tabpanel, newc, oldc) { | |
67 | var newpath = path; | |
68 | ||
69 | // only add the subpath part for the | |
70 | // non-default tabs | |
71 | if (tabpanel.items.findIndex('id', newc.id) !== 0) { | |
72 | newpath += ":" + newc.getItemId(); | |
73 | } | |
74 | ||
75 | me.redirectTo(newpath); | |
76 | }); | |
77 | } | |
78 | ||
79 | contentpanel.setActiveItem(obj); | |
80 | ||
81 | if (lastpanel) { | |
82 | contentpanel.remove(lastpanel, { destroy: true }); | |
83 | } | |
84 | ||
85 | }, | |
86 | ||
87 | logout: function() { | |
88 | var me = this; | |
89 | Proxmox.Utils.authClear(); | |
ea07c9aa DC |
90 | /*jslint confusion: true*/ |
91 | /*destroy is a function below and boolean above */ | |
9d91eeb0 | 92 | me.getView().destroy(); |
ea07c9aa | 93 | /*jslint confusion: false*/ |
9d91eeb0 DC |
94 | Ext.create({ xtype: 'loginview'}); |
95 | }, | |
96 | ||
97 | navigate: function(treelist, item) { | |
98 | this.redirectTo(item.get('path')); | |
99 | }, | |
100 | ||
101 | control: { | |
102 | 'button[reference=logoutButton]': { | |
103 | click: 'logout' | |
104 | } | |
105 | }, | |
106 | ||
107 | init: function(view) { | |
108 | var me = this; | |
109 | ||
110 | // load username | |
111 | me.lookupReference('usernameinfo').update({username:Proxmox.UserName}); | |
112 | ||
113 | // show login on requestexception | |
114 | // fixme: what about other errors | |
115 | Ext.Ajax.on('requestexception', function(conn, response, options) { | |
116 | if (response.status == 401) { // auth failure | |
117 | me.logout(); | |
118 | } | |
119 | }); | |
120 | ||
121 | // get ticket periodically | |
122 | Ext.TaskManager.start({ | |
123 | run: function() { | |
124 | var ticket = Proxmox.Utils.authOK(); | |
125 | if (!ticket || !Proxmox.UserName) { | |
126 | return; | |
127 | } | |
128 | ||
129 | Ext.Ajax.request({ | |
130 | params: { | |
131 | username: Proxmox.UserName, | |
132 | password: ticket | |
133 | }, | |
134 | url: '/api2/json/access/ticket', | |
135 | method: 'POST', | |
136 | failure: function() { | |
137 | me.logout(); | |
138 | }, | |
139 | success: function(response, opts) { | |
140 | var obj = Ext.decode(response.responseText); | |
141 | PMG.Utils.updateLoginData(obj.data); | |
142 | } | |
143 | }); | |
144 | }, | |
145 | interval: 15*60*1000 | |
146 | }); | |
147 | ||
a27e6c36 DM |
148 | var provider = new Ext.state.LocalStorageProvider({ |
149 | prefix: 'ext-pmg-' }); | |
150 | Ext.state.Manager.setProvider(provider); | |
151 | ||
9d91eeb0 | 152 | // select treeitem and load page from url fragment |
033228c0 | 153 | var token = Ext.util.History.getToken() || 'pmgDashboard'; |
9d91eeb0 DC |
154 | this.redirectTo(token, true); |
155 | ||
156 | } | |
157 | }, | |
158 | ||
159 | plugins: 'viewport', | |
160 | ||
ea07c9aa | 161 | layout: { type: 'border' }, |
9d91eeb0 DC |
162 | |
163 | items: [ | |
164 | { | |
165 | region: 'north', | |
166 | xtype: 'container', | |
167 | layout: { | |
168 | type: 'hbox', | |
169 | align: 'middle' | |
170 | }, | |
171 | margin: '4 5 4 5', | |
172 | items: [ | |
173 | { | |
174 | xtype: 'proxmoxlogo' | |
175 | }, | |
176 | { | |
177 | xtype: 'versioninfo' | |
178 | }, | |
179 | { | |
180 | flex: 1 | |
181 | }, | |
182 | { | |
183 | baseCls: 'x-plain', | |
184 | reference: 'usernameinfo', | |
185 | padding: '0 5', | |
186 | tpl: Ext.String.format(gettext("You are logged in as '{0}'"), '{username}') | |
187 | }, | |
6a3d1c51 DM |
188 | { |
189 | xtype: 'proxmoxHelpButton', | |
190 | hidden: false, | |
191 | baseCls: 'x-btn', | |
192 | iconCls: 'fa fa-info-circle x-btn-icon-el-default-toolbar-small ', | |
193 | listenToGlobalEvent: false, | |
194 | onlineHelp: 'pmg_documentation_index' | |
195 | }, | |
9d91eeb0 DC |
196 | { |
197 | reference: 'logoutButton', | |
198 | xtype: 'button', | |
199 | iconCls: 'fa fa-sign-out', | |
749af060 | 200 | text: gettext('Logout') |
9d91eeb0 DC |
201 | } |
202 | ] | |
203 | }, | |
204 | { | |
2c866ec9 DC |
205 | xtype: 'panel', |
206 | scrollable: 'y', | |
9d91eeb0 DC |
207 | border: false, |
208 | region: 'west', | |
2c866ec9 DC |
209 | layout: { |
210 | type: 'vbox', | |
211 | align: 'stretch' | |
212 | }, | |
213 | items: [{ | |
214 | xtype: 'navigationtree', | |
215 | minWidth: 180, | |
216 | reference: 'navtree', | |
217 | // we have to define it here until extjs 6.2 | |
218 | // because of a bug where a viewcontroller does not detect | |
219 | // the selectionchange event of a treelist | |
220 | listeners: { | |
221 | selectionchange: 'navigate' | |
222 | } | |
223 | }, { | |
224 | xtype: 'box', | |
225 | cls: 'x-treelist-nav', | |
226 | flex: 1 | |
227 | }] | |
9d91eeb0 DC |
228 | }, |
229 | { | |
230 | xtype: 'panel', | |
ea07c9aa | 231 | layout: { type: 'card' }, |
9d91eeb0 DC |
232 | region: 'center', |
233 | border: false, | |
749af060 | 234 | reference: 'contentpanel' |
9d91eeb0 DC |
235 | } |
236 | ] | |
237 | }); |