]>
Commit | Line | Data |
---|---|---|
5c7a1b15 DM |
1 | Ext.define('PBS.MainView', { |
2 | extend: 'Ext.container.Container', | |
3 | xtype: 'mainview', | |
4 | ||
5 | title: 'Proxmox Backup Server', | |
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, subpath, action) { | |
21 | var me = this; | |
22 | ||
b0ee976f DM |
23 | if (!Ext.ClassManager.getByAlias('widget.'+ path)) { |
24 | console.warn('xtype "'+path+'" not found'); | |
25 | action.stop(); | |
26 | return; | |
27 | } | |
28 | ||
29 | var lastpanel = me.lookupReference('contentpanel').getLayout().getActiveItem(); | |
30 | if (lastpanel && lastpanel.xtype === path) { | |
31 | // we have the right component already, | |
32 | // we just need to select the correct tab | |
33 | // default to the first | |
34 | subpath = subpath || 0; | |
35 | if (lastpanel.getActiveTab) { | |
36 | // we assume lastpanel is a tabpanel | |
37 | if (lastpanel.getActiveTab().getItemId() !== subpath) { | |
38 | // set the active tab | |
39 | lastpanel.setActiveTab(subpath); | |
40 | } | |
41 | // else we are already there | |
42 | } | |
43 | action.stop(); | |
44 | return; | |
45 | } | |
46 | ||
5c7a1b15 DM |
47 | action.resume(); |
48 | }, | |
49 | ||
b0ee976f | 50 | changePath: function(path,subpath) { |
5c7a1b15 DM |
51 | var me = this; |
52 | var contentpanel = me.lookupReference('contentpanel'); | |
53 | var lastpanel = contentpanel.getLayout().getActiveItem(); | |
54 | ||
b0ee976f DM |
55 | var obj = contentpanel.add({ xtype: path }); |
56 | var treelist = me.lookupReference('navtree'); | |
57 | ||
58 | treelist.suspendEvents(); | |
59 | treelist.select(path); | |
60 | treelist.resumeEvents(); | |
61 | ||
62 | if (Ext.isFunction(obj.setActiveTab)) { | |
63 | obj.setActiveTab(subpath || 0); | |
64 | obj.addListener('tabchange', function(tabpanel, newc, oldc) { | |
65 | var newpath = path; | |
66 | ||
67 | // only add the subpath part for the | |
68 | // non-default tabs | |
69 | if (tabpanel.items.findIndex('id', newc.id) !== 0) { | |
70 | newpath += ":" + newc.getItemId(); | |
71 | } | |
72 | ||
73 | me.redirectTo(newpath); | |
74 | }); | |
75 | } | |
76 | ||
77 | contentpanel.setActiveItem(obj); | |
78 | ||
79 | if (lastpanel) { | |
80 | contentpanel.remove(lastpanel, { destroy: true }); | |
81 | } | |
82 | ||
83 | }, | |
84 | ||
34f956bc DM |
85 | logout: function() { |
86 | PBS.app.logout(); | |
87 | }, | |
88 | ||
b0ee976f DM |
89 | navigate: function(treelist, item) { |
90 | this.redirectTo(item.get('path')); | |
5c7a1b15 DM |
91 | }, |
92 | ||
34f956bc DM |
93 | control: { |
94 | 'button[reference=logoutButton]': { | |
95 | click: 'logout' | |
96 | } | |
97 | }, | |
98 | ||
5c7a1b15 DM |
99 | init: function(view) { |
100 | var me = this; | |
5c7a1b15 | 101 | |
87b4d953 | 102 | me.lookupReference('usernameinfo').update({username:Proxmox.UserName}); |
5c7a1b15 DM |
103 | } |
104 | }, | |
105 | ||
106 | plugins: 'viewport', | |
107 | ||
108 | layout: { type: 'border' }, | |
109 | ||
110 | items: [ | |
111 | { | |
112 | region: 'north', | |
113 | xtype: 'container', | |
114 | layout: { | |
115 | type: 'hbox', | |
116 | align: 'middle' | |
117 | }, | |
118 | margin: '2 5 2 5', | |
119 | height: 38, | |
120 | items: [ | |
121 | { | |
122 | xtype: 'proxmoxlogo' | |
123 | }, | |
124 | { | |
e4dc0a14 | 125 | xtype: 'versioninfo' |
5c7a1b15 DM |
126 | }, |
127 | { | |
128 | flex: 1 | |
129 | }, | |
130 | { | |
131 | baseCls: 'x-plain', | |
132 | reference: 'usernameinfo', | |
133 | padding: '0 5', | |
134 | tpl: Ext.String.format(gettext("You are logged in as {0}"), "'{username}'") | |
135 | }, | |
9c01e73c TL |
136 | { |
137 | xtype: 'button', | |
138 | baseCls: 'x-btn', | |
139 | cls: 'x-btn-default-toolbar-small proxmox-inline-button', | |
140 | iconCls: 'fa fa-book x-btn-icon-el-default-toolbar-small ', | |
141 | text: gettext('Documentation'), | |
142 | href: '/docs/index.html', | |
143 | margin: '0 5 0 0', | |
144 | }, | |
5c7a1b15 DM |
145 | { |
146 | reference: 'logoutButton', | |
147 | xtype: 'button', | |
148 | iconCls: 'fa fa-sign-out', | |
149 | text: gettext('Logout') | |
150 | } | |
151 | ] | |
152 | }, | |
153 | { | |
154 | xtype: 'panel', | |
155 | scrollable: 'y', | |
156 | border: false, | |
157 | region: 'west', | |
158 | layout: { | |
159 | type: 'vbox', | |
160 | align: 'stretch' | |
161 | }, | |
b0ee976f DM |
162 | items: [{ |
163 | xtype: 'navigationtree', | |
164 | minWidth: 180, | |
165 | reference: 'navtree', | |
166 | // we have to define it here until extjs 6.2 | |
167 | // because of a bug where a viewcontroller does not detect | |
168 | // the selectionchange event of a treelist | |
169 | listeners: { | |
170 | selectionchange: 'navigate' | |
171 | } | |
172 | }, { | |
173 | xtype: 'box', | |
174 | cls: 'x-treelist-nav', | |
175 | flex: 1 | |
176 | }] | |
5c7a1b15 DM |
177 | }, |
178 | { | |
179 | xtype: 'panel', | |
180 | layout: { type: 'card' }, | |
181 | region: 'center', | |
182 | border: false, | |
183 | reference: 'contentpanel' | |
184 | } | |
185 | ] | |
186 | }); | |
187 | ||
188 |