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 var RESIZEME_ARRAY = new Array();
  25
  26 var resize_registered_panel = function(pnl){
  27   Ext.each(RESIZEME_ARRAY, function(fnc){
  28     fnc();
  29   });
  30 }
  31
  32 var resize_registered = function(cmp, adj_w, adj_h, raw_w, raw_h){
  33   Ext.each(RESIZEME_ARRAY, function(fnc){
  34     fnc();
  35   });
  36 }
  37
  38 $(document).ready(function(){
  39     //----------------------------------------
  40     // Django Library Page CSS Fix
  41     var fix_library_css = function() {
  42       var tofix = Ext.fly('library-index-div');
  43       if (tofix != null)
  44       {
  45         tofix.select('*').addClass('djangocss');
  46       }
  47     }
  48     fix_library_css();
  49
  50
  51     //----------------------------------------
  52     // Dynamically Generate Panels from HTML!
  53     var create_dynamic_panels = function(){
  54         var wp_items = Ext.fly('west_panel_items');
  55         var ul_items = wp_items.query('ul');
  56
  57         var dynamic_panels = new Array();
  58         Ext.each(ul_items, function(ul) {
  59             var panel_obj = new Ext.Panel({
  60                 frame: true,
  61                 title: ul.id,
  62                 //collapsible: true,
  63                 //titleCollapse: true,
  64                 //collapsed: true,
  65                 //stateful: true,
  66                 //stateId: 'freezer_panel_state',
  67                 margins: '0 0 0 0',
  68                 //width: 200,
  69                 contentEl: ul
  70                 //stateEvents: ['collapse', 'expand']
  71             });
  72             dynamic_panels.push(panel_obj);
  73         });
  74         return dynamic_panels;
  75     }
  76
  77     var panel_bcmagic = new Ext.Panel({
  78         //title: 'BC Magic',
  79         unstyled: true,
  80         contentEl: 'bcmagic_div',
  81         height: 180
  82     });
  83
  84     var menuPanel = new Ext.Panel({
  85         id: 'menu_panel',
  86         region: 'west',
  87         hidden: true,
  88         collapsible: true,
  89         split: true,
  90         collapseMode: 'mini',
  91         margins: '4 0 0 0',
  92         //cmargins: '2 2 0 2',
  93         width: 200,
  94         minWidth: 150,
  95         border: false,
  96         //baseCls: 'x-plain',
  97         unstyled: true,
  98         layout: 'vbox',
  99         layoutConfig: {
 100             align: 'stretch',
 101             pack: 'start'
 102         },
 103         // Add dynamically generated panels from html and include barcode magic
 104        items: create_dynamic_panels().concat([panel_bcmagic])
 105     });
 106
 107
 108
 109     //-------------------------------
 110     // East Region Setup
 111     //-------------------------------
 112     var get_east_panel_content = function(){
 113       // East panel contentEl id is supplied in html div id of east_region_config.
 114       var east_id = Ext.fly('east_region_config').dom.textContent;
 115
 116       // Length of zero is a valid response... also happens to return null in next
 117       //   if statement if not handled before hand.
 118       if (east_id.length == 0){
 119         return east_id;
 120       }
 121
 122       // If no element exists with the supplied content id, report and error.
 123       if (Ext.fly(east_id) == null){
 124         return 'east_region_config_error';
 125       }
 126
 127       return east_id;
 128     }
 129
 130     var east_panel_content_id = get_east_panel_content();
 131     if (east_panel_content_id.length > 0){
 132       var eastPanel = new Ext.Panel({
 133           region: 'east',
 134           layout: 'auto',
 135           //margins: '0 2 0 2',
 136           width: 180,
 137           collapsible: true,
 138           split: true,
 139           collapseMode: 'mini',
 140           autoScroll: true,
 141           contentEl: east_panel_content_id
 142       });
 143     } else {
 144       var eastPanel = new Ext.Panel({
 145           region: 'east',
 146           layout: 'auto',
 147           //margins: '0 2 0 2',
 148           width: 180,
 149           collapsible: true,
 150           split: true,
 151           hidden: true,
 152           collapseMode: 'mini',
 153           autoScroll: true
 154           //contentEl: ''
 155       });
 156     }
 157
 158
 159     //-------------------------------
 160     // Main Viewport Setup
 161     //-------------------------------
 162     var mainBorderPanel = new Ext.Viewport({
 163        //id: 'main_viewport',
 164        layout: 'border',
 165        items: [{
 166             id: 'north_border_panel',
 167             region: 'north',
 168             layout: 'vBox',
 169             layoutConfig: {
 170                 align: 'stretch',
 171                 pack: 'start'
 172             },
 173             items: [{
 174                     xtype: 'box',
 175                     applyTo: 'header',
 176                     id: 'header-panel',
 177                     height: 30
 178                 },{
 179                     id: 'main_toolbar',
 180                     xtype: 'toolbar',
 181                     height: 30,
 182                     //height: 100,
 183                     /*items: [{
 184                         text: "Demo Button",
 185                         handler: function() { quick_msg('Messages can be fun!'); }
 186                     }],*/
 187                     margins: '2 0 0 0'
 188                 },{
 189                     id: 'app_toolbar',
 190                     xtype: 'toolbar',
 191                     height: 30
 192                     //margins: '2 0 0 0'
 193                 }],
 194             height: 90,
 195             collapsible: true,
 196             collapseMode: 'mini',
 197             split: true
 198        },menuPanel,{
 199             //title: 'Body',
 200             id: 'body_content_panel',
 201             region: 'center',
 202             xtype: 'panel',
 203             //autoScroll: true,
 204             layout: 'fit',
 205             margins: '2 0 2 0',
 206             monitorResize: true,
 207             items: [{
 208                 //title: 'Inner Panel',
 209                 contentEl: 'body_content',
 210                 border: true,
 211                 autoScroll: true
 212             }]
 213             },eastPanel]
 214     });
 215
 216     // Using a little trick to resize registered components:
 217     // i.e. just use RESIZEME_ARRAY.push(function() { <code> }); to register a function
 218     // to be called during these events.
 219     mainBorderPanel.on('resize', resize_registered);
 220     var northBorderPanel = Ext.getCmp('north_border_panel');
 221     northBorderPanel.on('collapse', resize_registered_panel);
 222     northBorderPanel.on('expand', resize_registered_panel);
 223
 224
 225     //-------------------------------
 226     // Menu Bar Setup
 227     //-------------------------------
 228     var main_tb = Ext.getCmp('main_toolbar');
 229
 230     var add_buttons_from_html = function(tb, bar_id){
 231         var tbar_data = Ext.fly(bar_id);
 232         var div_array = tbar_data.query('div');
 233         var div_id = null;
 234         // Loop through each div since it defines a button and link or a spacer and add it to the right side of the toolbar
 235         Ext.each(div_array, function(divobj) {
 236             div_id = divobj.id;
 237             if (div_id == 'spacer'){
 238                 tb.add('-');
 239             } else {
 240                 tb.add({
 241                     text: div_id,
 242                     handler: function() { goto_url(divobj.getAttribute('href')); },
 243                     disabled: (divobj.textContent == 'disabled') ? true : false
 244                 });
 245             }
 246         });
 247     }
 248
 249     // Fill in left side of main toolbar
 250     add_buttons_from_html(main_tb, 'left_tbar_data');
 251
 252     // Shifts the remaining toolbar options to the right side.
 253     main_tb.add({ xtype: 'tbfill' });
 254
 255     //----------------------------------------
 256     // ExtJS Barcode Magic Implementation
 257     var bcmagic_ext_keyhandler = function(sObj, e){
 258       //Process upon enter key as input.
 259       if (e.getKey() == e.ENTER)
 260         bcmagic_process();
 261     }
 262
 263     var bcmagic_input = new Ext.form.TextField({
 264       id: 'bcmagic_input_field',
 265       emptyText: 'barcode magic'
 266     });
 267     bcmagic_input.on('specialkey', bcmagic_ext_keyhandler);
 268
 269     main_tb.add(bcmagic_input);
 270     //--------------------------------------
 271
 272     var user_info = Ext.fly('login_info');
 273     var logout_url = user_info.getAttribute('logouturl');
 274     var login_url = user_info.getAttribute('loginurl');
 275
 276     if (user_info.getAttribute('authenticated') == 'true') {
 277         main_tb.add({
 278                         xtype: 'tbtext',
 279                         text: 'User: ' + user_info.getAttribute('user')
 280                     });
 281         main_tb.add('-');
 282         add_buttons_from_html(main_tb, 'right_tbar_data');
 283         main_tb.add('-');
 284         main_tb.add({
 285                         text: 'Logout',
 286                         handler: function() { goto_url(logout_url); }
 287                     });
 288
 289     } else {
 290         main_tb.add({
 291                         text: 'Login',
 292                         handler: function() { goto_url(login_url) }
 293                     });
 294     }
 295
 296     main_tb.doLayout();
 297
 298     //-------------------------------
 299     // App Toolbar Setup
 300     //-------------------------------
 301     var app_tb = Ext.getCmp('app_toolbar');
 302     add_buttons_from_html(app_tb, 'app_toolbar_west');
 303     app_tb.add({ xtype: 'tbfill' });
 304     add_buttons_from_html(app_tb, 'app_toolbar_east');
 305     app_tb.doLayout();
 306
 307     // Focus on barcode magic, because it's awesome and needs attention! ;-)
 308     bcmagic_input.focus();
 309
 310     // FIXME: grid target temp code.
 311     var grid_target = Ext.fly('grid_target');
 312     if (grid_target != null){
 313       var grid = getInventoryDataGrid();
 314       grid.render(grid_target);
 315       RESIZEME_ARRAY.push(function() {
 316         Ext.getCmp('inventory_item_panel').setHeight(Ext.getCmp('body_content_panel').getHeight()-4);
 317       });
 318       grid.setHeight(Ext.get('body_content_panel').getHeight()-4);
 319     }
 320
 321
 322 });