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
  94
  95     //-------------------------------
  96     // East Region Setup
  97     //-------------------------------
  98     var get_east_panel_content = function(){
  99       // East panel contentEl id is supplied in html div id of east_region_config.
 100       var east_id = Ext.fly('east_region_config').dom.textContent;
 101
 102       // Length of zero is a valid response... also happens to return null in next
 103       //   if statement if not handled before hand.
 104       if (east_id.length == 0){
 105         return east_id;
 106       }
 107
 108       // If no element exists with the supplied content id, report and error.
 109       if (Ext.fly(east_id) == null){
 110         return 'east_region_config_error';
 111       }
 112
 113       return east_id;
 114     }
 115
 116     var east_panel_content_id = get_east_panel_content();
 117     if (east_panel_content_id.length > 0){
 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           collapseMode: 'mini',
 126           autoScroll: true,
 127           contentEl: east_panel_content_id
 128       });
 129     } else {
 130       var eastPanel = new Ext.Panel({
 131           region: 'east',
 132           layout: 'auto',
 133           //margins: '0 2 0 2',
 134           width: 180,
 135           collapsible: true,
 136           split: true,
 137           hidden: true,
 138           collapseMode: 'mini',
 139           autoScroll: true
 140           //contentEl: ''
 141       });
 142     }
 143
 144
 145     //-------------------------------
 146     // Main Viewport Setup
 147     //-------------------------------
 148     var mainBorderPanel = new Ext.Viewport({
 149        layout: 'border',
 150        items: [{
 151             region: 'north',
 152             layout: 'vBox',
 153             layoutConfig: {
 154                 align: 'stretch',
 155                 pack: 'start'
 156             },
 157             items: [{
 158                     xtype: 'box',
 159                     applyTo: 'header',
 160                     id: 'header-panel',
 161                     height: 30
 162                 },{
 163                     id: 'main_toolbar',
 164                     xtype: 'toolbar',
 165                     height: 30,
 166                     //height: 100,
 167                     /*items: [{
 168                         text: "Demo Button",
 169                         handler: function() { quick_msg('Messages can be fun!'); }
 170                     }],*/
 171                     margins: '2 0 0 0'
 172                 },{
 173                     id: 'app_toolbar',
 174                     xtype: 'toolbar',
 175                     height: 30
 176                     //margins: '2 0 0 0'
 177                 }],
 178             height: 90,
 179             collapsible: true,
 180             collapseMode: 'mini',
 181             split: true
 182        },menuPanel,{
 183             //title: 'Body',
 184             region: 'center',
 185             xtype: 'panel',
 186             //autoScroll: true,
 187             layout: 'fit',
 188             margins: '2 0 2 0',
 189             items: [{
 190                 //title: 'Inner Panel',
 191                 contentEl: 'body_content',
 192                 border: true,
 193                 autoScroll: true
 194             }]
 195             },eastPanel]
 196     });
 197
 198     //-------------------------------
 199     // Menu Bar Setup
 200     //-------------------------------
 201     var main_tb = Ext.getCmp('main_toolbar');
 202
 203     var add_buttons_from_html = function(tb, bar_id){
 204         var tbar_data = Ext.fly(bar_id);
 205         var div_array = tbar_data.query('div');
 206         var div_id = null;
 207         // Loop through each div since it defines a button and link or a spacer and add it to the right side of the toolbar
 208         Ext.each(div_array, function(divobj) {
 209             div_id = divobj.id;
 210             if (div_id == 'spacer'){
 211                 tb.add('-');
 212             } else {
 213                 tb.add({
 214                     text: div_id,
 215                     handler: function() { goto_url(divobj.getAttribute('href')); }
 216                 });
 217             }
 218         });
 219     }
 220
 221     // Fill in left side of main toolbar
 222     add_buttons_from_html(main_tb, 'left_tbar_data');
 223
 224     // Shifts the remaining toolbar options to the right side.
 225     main_tb.add({ xtype: 'tbfill' });
 226
 227     //----------------------------------------
 228     // ExtJS Barcode Magic Implementation
 229     var bcmagic_ext_keyhandler = function(sObj, e){
 230       //Process upon enter key as input.
 231       if (e.getKey() == e.ENTER)
 232         bcmagic_process();
 233     }
 234
 235     var bcmagic_input = new Ext.form.TextField({
 236       id: 'bcmagic_input_field',
 237       emptyText: 'barcode magic'
 238     });
 239     bcmagic_input.on('specialkey', bcmagic_ext_keyhandler);
 240
 241     main_tb.add(bcmagic_input);
 242     //--------------------------------------
 243
 244     var user_info = Ext.fly('login_info');
 245     var logout_url = user_info.getAttribute('logouturl');
 246     var login_url = user_info.getAttribute('loginurl');
 247
 248     if (user_info.getAttribute('authenticated') == 'true') {
 249         main_tb.add({
 250                         xtype: 'tbtext',
 251                         text: 'User: ' + user_info.getAttribute('user')
 252                     });
 253         main_tb.add('-');
 254         add_buttons_from_html(main_tb, 'right_tbar_data');
 255         main_tb.add('-');
 256         main_tb.add({
 257                         text: 'Logout',
 258                         handler: function() { goto_url(logout_url); }
 259                     });
 260
 261     } else {
 262         main_tb.add({
 263                         text: 'Login',
 264                         handler: function() { goto_url(login_url) }
 265                     });
 266     }
 267
 268     main_tb.doLayout();
 269
 270     //-------------------------------
 271     // App Toolbar Setup
 272     //-------------------------------
 273     var app_tb = Ext.getCmp('app_toolbar');
 274     add_buttons_from_html(app_tb, 'app_toolbar_west');
 275     app_tb.add({ xtype: 'tbfill' });
 276     add_buttons_from_html(app_tb, 'app_toolbar_east');
 277     app_tb.doLayout();
 278
 279     // Focus on barcode magic, because it's awesome and needs attention! ;-)
 280     bcmagic_input.focus();
 281
 282     // FIXME: grid target temp code.
 283     var grid_target = Ext.fly('grid_target');
 284     if (grid_target != null){
 285       var grid = getInventoryDataGrid();
 286       grid.render(grid_target);
 287     }
 288 });