Sample Tracker EXTJS frontend merge part 1
[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     //----------------------------------------
27     // Dynamically Generate Panels from HTML!
28     var create_dynamic_panels = function(){
29         var wp_items = Ext.fly('west_panel_items');
30         var ul_items = wp_items.query('ul');
31         
32         var dynamic_panels = new Array();
33         Ext.each(ul_items, function(ul) {
34             var panel_obj = new Ext.Panel({
35                 frame: true,
36                 title: ul.id,
37                 //collapsible: true,
38                 //titleCollapse: true,
39                 //collapsed: true,
40                 //stateful: true,
41                 //stateId: 'freezer_panel_state',
42                 margins: '0 0 0 0',
43                 //width: 200,
44                 contentEl: ul
45                 //stateEvents: ['collapse', 'expand']
46             });
47             dynamic_panels.push(panel_obj);
48         });
49         return dynamic_panels;
50     }
51     
52     var panel_bcmagic = new Ext.Panel({
53         //title: 'BC Magic',
54         unstyled: true,
55         contentEl: 'bcmagic_div',
56         height: 180
57     });
58     
59     var menuPanel = new Ext.Panel({
60         id: 'menu_panel',
61         region: 'west',
62         collapsible: true,
63         split: true,
64         margins: '4 0 0 0',
65         //cmargins: '2 2 0 2',
66         collapseMode: 'mini',
67         width: 200,
68         minWidth: 150,
69         border: false,
70         //baseCls: 'x-plain',
71         unstyled: true,
72         layout: 'vbox',
73         layoutConfig: {
74             align: 'stretch',
75             pack: 'start'
76         },
77         // Add dynamically generated panels from html and include barcode magic
78        items: create_dynamic_panels().concat([panel_bcmagic])
79     });
80     
81     //-------------------------------
82     // Main Viewport Setup
83     //-------------------------------
84     var mainBorderPanel = new Ext.Viewport({
85        layout: 'border',
86        items: [{
87             region: 'north',
88             layout: 'vBox',
89             layoutConfig: {
90                 align: 'stretch',
91                 pack: 'start'
92             },
93             items: [{
94                     xtype: 'box',
95                     applyTo: 'header',
96                     id: 'header-panel',
97                     height: 30
98                 },{
99                     id: 'main_toolbar',
100                     xtype: 'toolbar',
101                     //height: 100,
102                     /*items: [{
103                         text: "Demo Button",
104                         handler: function() { quick_msg('Messages can be fun!'); }
105                     }],*/
106                     margins: '2 0 0 0'
107             }],
108             height: 60 
109        },menuPanel,{
110             //title: 'Body',
111             region: 'center',
112             xtype: 'panel',
113             //autoScroll: true,
114             layout: 'fit',
115             margins: '2 2 2 2',
116             items: {
117                 //title: 'Inner Panel',
118                 contentEl: 'body_content',
119                 border: true,
120                 autoScroll: true
121             }
122        }]
123     });
124     
125     //-------------------------------
126     // Menu Bar Setup
127     //-------------------------------
128     var main_tb = Ext.getCmp('main_toolbar');
129     
130     var add_buttons_from_html_left = function(main_tb){
131         var left_tbar_data = Ext.fly('left_tbar_data');
132         var div_array = left_tbar_data.query('div');
133         var div_id = null;
134         // Loop through each div since it defines a button and link or a spacer and add it to the right side of the toolbar
135         Ext.each(div_array, function(divobj) {
136             div_id = divobj.id;
137             if (div_id == 'spacer'){
138                 main_tb.add('-');
139             } else {
140                 main_tb.add({
141                     text: div_id,
142                     handler: function() { goto_url(divobj.getAttribute('href')); }
143                 });
144             }
145         });
146         //return right_tbar_data;
147     }
148     
149     var add_buttons_from_html_right = function(main_tb){
150         var right_tbar_data = Ext.fly('right_tbar_data');
151         var div_array = right_tbar_data.query('div');
152         var div_id = null;
153         // Loop through each div since it defines a button and link or a spacer and add it to the right side of the toolbar
154         Ext.each(div_array, function(divobj) {
155             div_id = divobj.id;
156             if (div_id == 'spacer'){
157                 main_tb.add('-');
158             } else {
159                 main_tb.add({
160                     text: div_id,
161                     handler: function() { goto_url(divobj.getAttribute('href')); }
162                 });
163             }
164         });
165         //return right_tbar_data;
166     }
167     
168     add_buttons_from_html_left(main_tb);
169     
170     // Shifts the remaining toolbar options to the right side.
171     main_tb.add({ xtype: 'tbfill' });
172     var user_info = Ext.fly('login_info');
173     var logout_url = user_info.getAttribute('logouturl');
174     var login_url = user_info.getAttribute('loginurl');
175     
176     if (user_info.getAttribute('authenticated') == 'true') {
177         main_tb.add({
178                         xtype: 'tbtext',
179                         text: 'User: ' + user_info.getAttribute('user')
180                     });
181         main_tb.add('-');
182         add_buttons_from_html_right(main_tb);
183         main_tb.add('-');
184         main_tb.add({
185                         text: 'Logout',
186                         handler: function() { goto_url(logout_url); }
187                     });
188         
189     } else {
190         main_tb.add({
191                         text: 'Login',
192                         handler: function() { goto_url(login_url) }
193                     });
194     }
195     
196     main_tb.doLayout();
197     
198 });