d5829b3a0a59befa9b28554e1aa07e3c41dcfbac
[htsworkflow.git] / htsworkflow / frontend / static / js / htsw.js
1 Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
2
3 Ext.override(Ext.Panel,{
4   getState: function() {
5     return { collapsed: this.collapsed };
6     }
7 });
8
9 var quick_msg = function(msg)
10 {
11     Ext.MessageBox.show({
12         title: 'Info',
13         msg: msg,
14         buttons: Ext.MessageBox.OK,
15         icon: Ext.MessageBox.INFO
16     });
17 }
18
19 var goto_url = function(www_url)
20 {
21     window.location = www_url; 
22 }
23
24 $(document).ready(function(){
25     //----------------------------------------
26     // Django Library Page CSS Fix
27     var fix_library_css = function() {
28       var tofix = Ext.fly('library-index-div');
29       if (tofix != null)
30       {
31         tofix.select('*').addClass('djangocss');
32       }
33     }
34     fix_library_css();
35     
36     
37     //----------------------------------------
38     // Dynamically Generate Panels from HTML!
39     var create_dynamic_panels = function(){
40         var wp_items = Ext.fly('west_panel_items');
41         var ul_items = wp_items.query('ul');
42         
43         var dynamic_panels = new Array();
44         Ext.each(ul_items, function(ul) {
45             var panel_obj = new Ext.Panel({
46                 frame: true,
47                 title: ul.id,
48                 //collapsible: true,
49                 //titleCollapse: true,
50                 //collapsed: true,
51                 //stateful: true,
52                 //stateId: 'freezer_panel_state',
53                 margins: '0 0 0 0',
54                 //width: 200,
55                 contentEl: ul
56                 //stateEvents: ['collapse', 'expand']
57             });
58             dynamic_panels.push(panel_obj);
59         });
60         return dynamic_panels;
61     }
62     
63     var panel_bcmagic = new Ext.Panel({
64         //title: 'BC Magic',
65         unstyled: true,
66         contentEl: 'bcmagic_div',
67         height: 180
68     });
69     
70     var menuPanel = new Ext.Panel({
71         id: 'menu_panel',
72         region: 'west',
73         hidden: true,
74         collapsible: true,
75         split: true,
76         collapseMode: 'mini',
77         margins: '4 0 0 0',
78         //cmargins: '2 2 0 2',
79         width: 200,
80         minWidth: 150,
81         border: false,
82         //baseCls: 'x-plain',
83         unstyled: true,
84         layout: 'vbox',
85         layoutConfig: {
86             align: 'stretch',
87             pack: 'start'
88         },
89         // Add dynamically generated panels from html and include barcode magic
90        items: create_dynamic_panels().concat([panel_bcmagic])
91     });
92     
93     var get_east_panel_content = function(){
94       // East panel contentEl id is supplied in html div id of east_region_config.
95       var east_id = Ext.fly('east_region_config').dom.textContent;
96       
97       // If no element exists with the supplied content id, report and error.
98       if (Ext.fly(east_id) == null){
99         return 'east_region_config_error';
100       }
101       return east_id;
102     }
103     
104     var east_panel_content_id = get_east_panel_content();
105     if (east_panel_content_id.length > 0){
106       var eastPanel = new Ext.Panel({
107           region: 'east',
108           layout: 'auto',
109           //margins: '0 2 0 2',
110           width: 180,
111           collapsible: true,
112           split: true,
113           collapseMode: 'mini',
114           autoScroll: true,
115           contentEl: east_panel_content_id
116       });
117     } else {
118       var eastPanel = new Ext.Panel({
119           region: 'east',
120           layout: 'auto',
121           //margins: '0 2 0 2',
122           width: 180,
123           collapsible: true,
124           split: true,
125           hidden: true,
126           collapseMode: 'mini',
127           autoScroll: true
128           //contentEl: ''
129       });
130     }
131     
132
133     //-------------------------------
134     // Main Viewport Setup
135     //-------------------------------
136     var mainBorderPanel = new Ext.Viewport({
137        layout: 'border',
138        items: [{
139             region: 'north',
140             layout: 'vBox',
141             layoutConfig: {
142                 align: 'stretch',
143                 pack: 'start'
144             },
145             items: [{
146                     xtype: 'box',
147                     applyTo: 'header',
148                     id: 'header-panel',
149                     height: 30
150                 },{
151                     id: 'main_toolbar',
152                     xtype: 'toolbar',
153                     height: 30,
154                     //height: 100,
155                     /*items: [{
156                         text: "Demo Button",
157                         handler: function() { quick_msg('Messages can be fun!'); }
158                     }],*/
159                     margins: '2 0 0 0'
160                 },{
161                     id: 'app_toolbar',
162                     xtype: 'toolbar',
163                     height: 30
164                     //margins: '2 0 0 0'
165                 }],
166             height: 90
167        },menuPanel,{
168             //title: 'Body',
169             region: 'center',
170             xtype: 'panel',
171             //autoScroll: true,
172             layout: 'fit',
173             margins: '2 2 2 0',
174             items: [{
175                 //title: 'Inner Panel',
176                 contentEl: 'body_content',
177                 border: true,
178                 autoScroll: true
179             }]
180             },eastPanel]
181     });
182     
183     //-------------------------------
184     // Menu Bar Setup
185     //-------------------------------
186     var main_tb = Ext.getCmp('main_toolbar');
187     
188     var add_buttons_from_html = function(tb, bar_id){
189         var tbar_data = Ext.fly(bar_id);
190         var div_array = tbar_data.query('div');
191         var div_id = null;
192         // Loop through each div since it defines a button and link or a spacer and add it to the right side of the toolbar
193         Ext.each(div_array, function(divobj) {
194             div_id = divobj.id;
195             if (div_id == 'spacer'){
196                 tb.add('-');
197             } else {
198                 tb.add({
199                     text: div_id,
200                     handler: function() { goto_url(divobj.getAttribute('href')); }
201                 });
202             }
203         });
204     }
205     
206     // Fill in left side of main toolbar
207     add_buttons_from_html(main_tb, 'left_tbar_data');
208     
209     // Shifts the remaining toolbar options to the right side.
210     main_tb.add({ xtype: 'tbfill' });
211     var user_info = Ext.fly('login_info');
212     var logout_url = user_info.getAttribute('logouturl');
213     var login_url = user_info.getAttribute('loginurl');
214     
215     if (user_info.getAttribute('authenticated') == 'true') {
216         main_tb.add({
217                         xtype: 'tbtext',
218                         text: 'User: ' + user_info.getAttribute('user')
219                     });
220         main_tb.add('-');
221         add_buttons_from_html(main_tb, 'right_tbar_data');
222         main_tb.add('-');
223         main_tb.add({
224                         text: 'Logout',
225                         handler: function() { goto_url(logout_url); }
226                     });
227         
228     } else {
229         main_tb.add({
230                         text: 'Login',
231                         handler: function() { goto_url(login_url) }
232                     });
233     }
234     
235     main_tb.doLayout();
236     
237     //-------------------------------
238     // App Toolbar Setup
239     //-------------------------------
240     var app_tb = Ext.getCmp('app_toolbar');
241     add_buttons_from_html(app_tb, 'app_toolbar_west');
242     app_tb.add({ xtype: 'tbfill' });
243     add_buttons_from_html(app_tb, 'app_toolbar_east');
244     app_tb.doLayout();
245     
246     
247 });