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