Ext.indyCalendar = function(mainPanel){ var tab = mainPanel.getComponent('docs-Individual\'s Calendar'); if(tab){ mainPanel.setActiveTab(tab); } else{ /************* User list store *************/ var storeUser = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: Ext.urlScriptDir + '/application/users.php'}), baseParams: { method: 'list', user_id: Ext.userId, user_level: Ext.userLevel }, reader: new Ext.data.JsonReader({ root: 'data', totalProperty: 'totalCount', id: 'user_id' }, [ {name: 'id', mapping: 'user_id'}, {name: 'user_name', mapping: 'user_name'}, {name: 'user_email', mapping: 'user_email'}, {name: 'user_phone_mobile', mapping: 'user_phone_mobile'}, {name: 'user_phone_work', mapping: 'user_phone_work'}, {name: 'team_id', mapping: 'team_id'}, {name: 'customer_association', mapping: 'customer_association'}, {name: 'user_cust_assoc', mapping: 'user_cust_assoc'} ]) }); // Custom rendering Template using the 'name' field from above var userTpl = new Ext.XTemplate( '
', '{user_name}
', 'Email: {user_email}
', 'Phone: {user_phone_mobile}', '
' ); /************* Show list store *************/ var storeShows = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: Ext.urlScriptDir + '/application/shows.php'}), baseParams: { method: 'list', user_id: Ext.userId, user_level: Ext.userLevel }, reader: new Ext.data.JsonReader({ root: 'data', totalProperty: 'totalCount', id: 'show_id' }, [ {name: 'id', mapping: 'show_id'}, {name: 'show_nm', mapping: 'show_nm'}, {name: 'show_date', mapping: 'show_date'}, {name: 'show_year', mapping: 'show_year'}, {name: 'full_date', mapping: 'full_date'} ]) }); storeShows.load({params:{query:'', user_id: Ext.userId, user_level: Ext.userLevel }}); // Custom rendering Template using the 'name' field from above var showTpl = new Ext.XTemplate( '
', '{show_nm}
', '{show_date}, {show_year}', '
' ); var indyForm = new Ext.form.FormPanel({ baseCls: 'x-plain', labelWidth: 130, id: 'indyFormItems', defaultType: 'textfield', items: [ new Ext.form.IndyUserComboBox({ fieldLabel: 'Select a User', store: storeUser, width: 400, tpl: userTpl, itemSelector: 'div.search-item' }), new Ext.form.IndyShowComboBox({ fieldLabel: 'Select a Show', store: storeShows, id: 'storeShowsIndy', width: 400, tpl: showTpl, itemSelector: 'div.search-item' }), { xtype: 'hidden', name:'my_grid_view_user_id', id:'my_grid_view_user_id', value: 0 }, { xtype: 'hidden', name:'my_grid_view_show_id', id:'my_grid_view_show_id', value: 0 }, { xtype: 'hidden', name:'my_grid_view_show_date', id:'my_grid_view_show_date', value: 0, listeners: { render: function(){ /* wait for the show store to finish loading */ storeShows.on('load', function(p){ /* select the show */ if(Ext.default_show){ Ext.selectStore('storeShowsIndy', 'show_nm', Ext.default_show, Ext.default_show); } }); } } } ] }); // ***** NORTH ***** // Using the generic AdminPanel ux (in rpmPanel), we will create a panel to hold our data var indyNorth = new Ext.ux.AdminPanel({ region:'north', id:'indyNorth', height: 80, minSize: 80, maxSize: 120, split: true, collapsible: true, collapseMode: 'mini', items: [ indyForm ] }); // ***** CENTER ***** // The data store for the CENTER region var store = new Ext.data.JsonStore({ root: 'data', totalProperty: 'totalCount', idProperty: 'id', remoteSort: true, fields: [ 'id', 'show_id', 'show_nm', 'show_date', 'demo_location', 'user_name', '0800', '0830', '0900', '0930', '1000', '1030', '1100', '1130', '1200', '1230', '1300', '1330', '1400', '1430', '1500', '1530', '1600', '1630', '1700', '1730', '1800', '1830', '1900', '1930', '2000', '2030', '2100', '2130', '2200', '2230', '2300', '2330' ], // load using script tags for cross domain, if the data in on the same domain as // this page, an HttpProxy would be better proxy: new Ext.data.HttpProxy({ url: Ext.urlScriptDir + '/application/tours.php' }), baseParams: { method: 'my_grid_view', user_id: Ext.userId, user_level: Ext.userLevel } }); store.setDefaultSort('show_date', 'asc'); // ***** CENTER ***** // Create the Grid var indyCenter = new Ext.grid.GridPanel({ title: 'Individual\'s Calendar', id: 'indyCenter', region:'center', store: store, // Grid columns columns:[{ header: "Name", dataIndex: 'user_name', width: 100, sortable: false }, { header: "Date", dataIndex: 'show_date', width: 100, sortable: true }, { header: "8:00", dataIndex: '0800', width: 40, renderer: indyRender, sortable: false }, { header: "8:30", dataIndex: '0830', width: 40, renderer: indyRender, sortable: false }, { header: "9:00", dataIndex: '0900', width: 40, renderer: indyRender, sortable: false }, { header: "9:30", dataIndex: '0930', width: 40, renderer: indyRender, sortable: false }, { header: "10:00", dataIndex: '1000', width: 40, renderer: indyRender, sortable: false }, { header: "10:30", dataIndex: '1030', width: 40, renderer: indyRender, sortable: false }, { header: "11:00", dataIndex: '1100', width: 40, renderer: indyRender, sortable: false }, { header: "11:30", dataIndex: '1130', width: 40, renderer: indyRender, sortable: false }, { header: "12:00", dataIndex: '1200', width: 40, renderer: indyRender, sortable: false }, { header: "12:30", dataIndex: '1230', width: 40, renderer: indyRender, sortable: false }, { header: "13:00", dataIndex: '1300', width: 40, renderer: indyRender, sortable: false }, { header: "13:30", dataIndex: '1330', width: 40, renderer: indyRender, sortable: false }, { header: "14:00", dataIndex: '1400', width: 40, renderer: indyRender, sortable: false }, { header: "14:30", dataIndex: '1430', width: 40, renderer: indyRender, sortable: false }, { header: "15:00", dataIndex: '1500', width: 40, renderer: indyRender, sortable: false }, { header: "15:30", dataIndex: '1530', width: 40, renderer: indyRender, sortable: false }, { header: "16:00", dataIndex: '1600', width: 40, renderer: indyRender, sortable: false }, { header: "16:30", dataIndex: '1630', width: 40, renderer: indyRender, sortable: false }, { header: "17:00", dataIndex: '1700', width: 40, renderer: indyRender, sortable: false }, { header: "17:30", dataIndex: '1730', width: 40, renderer: indyRender, sortable: false }, { header: "18:00", dataIndex: '1800', width: 40, renderer: indyRender, sortable: false }, { header: "18:30", dataIndex: '1830', width: 40, renderer: indyRender, sortable: false }, { header: "19:00", dataIndex: '1900', width: 40, renderer: indyRender, sortable: false }, { header: "19:30", dataIndex: '1930', width: 40, renderer: indyRender, sortable: false }, { header: "20:00", dataIndex: '2000', width: 40, renderer: indyRender, sortable: false }, { header: "20:30", dataIndex: '2030', width: 40, renderer: indyRender, sortable: false }, { header: "21:00", dataIndex: '2100', width: 40, renderer: indyRender, sortable: false }, { header: "21:30", dataIndex: '2130', width: 40, renderer: indyRender, sortable: false }, { header: "22:00", dataIndex: '2200', width: 40, renderer: indyRender, sortable: false }, { header: "22:30", dataIndex: '2230', width: 40, renderer: indyRender, sortable: false }, { header: "23:00", dataIndex: '2300', width: 40, renderer: indyRender, sortable: false }, { header: "23:30", dataIndex: '2330', width: 40, renderer: indyRender, sortable: false } ], stripeRows: true, autoscroll: true, trackMouseOver:false, disableSelection:true, loadMask: false, tools:[{ id:'print', qtip: 'Print this Calendar', handler: function(event, toolEl, panel){ Ext.printScreen('indyCenter'); } }], tbar: new Ext.Toolbar({ buttons: [ { id: 'their-pdf-button', iconCls:'icon-pdf', disabled: true, text: 'Download PDF', handler: function(){ /* define variables */ var show_id, user_id; /* assign variables */ show_id = Ext.getCmp('my_grid_view_show_id').value; user_id = Ext.getCmp('my_grid_view_user_id').value; /* write variables */ Ext.get('show_id_pdf').dom.value = show_id; Ext.get('user_id_pdf').dom.value = user_id; Ext.get('pdf_pdf').dom.value = '1'; Ext.get('email_pdf').dom.value = '0'; Ext.get('method_pdf').dom.value = 'generate'; /* submit form located on index.html */ Ext.getDom('generate-pdf').submit(); } }, { id: 'their-email-button', iconCls:'icon-email-go', disabled: true, text: 'Email to Me', handler: function(){ /* define variables */ var show_id, user_id; /* assign variables */ show_id = Ext.getCmp('my_grid_view_show_id').value; user_id = Ext.getCmp('my_grid_view_user_id').value; Ext.ux.Toast.msg('Please wait...', 'Emailing calendar to selected user.'); Ext.Ajax.request({ url: Ext.urlScriptDir + '/application/print.php', params: { method: 'generate', show_id: String(show_id), user_id: String(user_id), pdf: String(0), email: String(1) }, success:function(form, action){ obj = Ext.util.JSON.decode(form.responseText); if(obj.success === false){ Ext.Msg.alert('Error!', obj.errors.reason); } else{ obj = Ext.util.JSON.decode(form.responseText); Ext.Msg.alert('Success', 'The calendar has been emailed to '+ obj.data.email +'.'); } }, failure:function(form, action){ if(action.failureType == 'server'){ obj = Ext.util.JSON.decode(form.responseText); Ext.Msg.alert('Request Failed!', obj.errors.reason); } else{ Ext.Msg.alert('Warning!', 'Server is unreachable : ' + form.responseText); } } }); } }, { id: 'their-print-button', iconCls:'icon-print', disabled: true, text: 'Printable View', handler: function(){ /* define variables */ var show_id, user_id; /* assign variables */ show_id = Ext.getCmp('my_grid_view_show_id').value; user_id = Ext.getCmp('my_grid_view_user_id').value; /* write variables */ Ext.get('show_id_pdf').dom.value = show_id; Ext.get('user_id_pdf').dom.value = user_id; Ext.get('pdf_pdf').dom.value = '0'; Ext.get('email_pdf').dom.value = '0'; Ext.get('method_pdf').dom.value = 'generate'; /* submit form located on index.html */ Ext.getDom('generate-pdf').submit(); } } ] }) }); var border = { layout:'border', bodyBorder: true, iconCls: 'icon-tour-calendar', animFloat: false, items: [ indyCenter, indyNorth ] }; // Now that we've created the Panel properly, load the component rpmCom.loadComp(border, 'Individual\'s Calendar', mainPanel, 1, 'icon-tour-calendar'); if(Ext.isIE){ Ext.resizePanelIE(); } } }; function indyRender(data, cell, record, rowIndex, columnIndex, store){ var temp = data.split('|'); var show_id = record.data.show_id; var show_nm = record.data.show_nm; var demo_location = record.data.demo_location; var cust_name = temp[1]; var id = temp[2]; var avail = temp[3]; var avail_user_id = temp[4]; var user_name = temp[5]; switch(temp[0]) { case "Red": cell.css = "literedcell"; return "
TOUR GUIDE

Location: "+avail+"
Customer: "+cust_name+"\">"+cust_name+"
"; break; case "RedDemo": cell.css = "literedcell"; return "
DEMONSTRATOR

Location: "+demo_location+"
Demo Name: "+cust_name+"\">"+cust_name+"
"; break; case "Black": cell.css = "blackcell"; return "
Not Available: "+cust_name+"\">"+cust_name+"
"; break; } }; Ext.form.IndyUserComboBox = Ext.extend(Ext.form.ComboBox, { typeAhead: false, displayField: 'user_name', mode: 'local', triggerAction: 'all', loadOnTrigger: true, emptyText: 'Select a user...', selectOnFocus: true, minChars: 2, // private initEvents : function(){ // Call the parent (make sure this matches the object above!) Ext.form.IndyUserComboBox.superclass.initEvents.call(this); // Select fires AFTER you click on a comboBox item (the list is collaspsed) this.on('select', this.onThisSelect, this); }, onTriggerClick : function(){ if(this.disabled){ return; } if(this.isExpanded()){ this.collapse(); this.el.focus(); }else { this.onFocus({}); if(this.triggerAction == 'all') { this.doQuery(this.allQuery, true); } else { this.doQuery(this.getRawValue()); } this.el.focus(); if(this.loadOnTrigger){ this.store.load({params:{query:this.getRawValue(), user_id: Ext.userId, limit: '1'}}); } } }, onThisSelect: function(record){ var rowIndex = record.selectedIndex; var rowData = record.store.getAt(rowIndex).data; // Enable the Export buttons Ext.getCmp('their-pdf-button').enable(); Ext.getCmp('their-email-button').enable(); Ext.getCmp('their-print-button').enable(); Ext.getCmp('my_grid_view_user_id').setValue(rowData.id); var show_id = Ext.getCmp('my_grid_view_show_id').value; var show_date = Ext.getCmp('my_grid_view_show_date').value; var their_id = Ext.getCmp('my_grid_view_user_id').value; // Load the grid Ext.getCmp('indyCenter').store.load({params:{method:'my_grid_view', show_date:String(show_date), show_id:String(show_id), their_id:String(their_id)}}); } }); Ext.form.IndyShowComboBox = Ext.extend(Ext.form.ComboBox, { typeAhead: false, displayField: 'show_nm', mode: 'remote', triggerAction: 'all', loadOnTrigger: true, emptyText: 'Select a show from the dropdown or search by typing...', selectOnFocus: true, minChars: 2, // private initEvents : function(){ // Call the parent (make sure this matches the object above!) Ext.form.IndyShowComboBox.superclass.initEvents.call(this); // Select fires AFTER you click on a comboBox item (the list is collaspsed) this.on('select', this.onThisSelect, this); }, onTriggerClick : function(){ if(this.disabled){ return; } if(this.isExpanded()){ this.collapse(); this.el.focus(); }else { this.onFocus({}); if(this.triggerAction == 'all') { this.doQuery(this.allQuery, true); } else { this.doQuery(this.getRawValue()); } this.el.focus(); if(this.loadOnTrigger){ this.store.load({params:{query:this.getRawValue(), user_id: Ext.userId, limit: '1'}}); } } }, onThisSelect: function(record){ var rowIndex = record.selectedIndex; var rowData = record.store.getAt(rowIndex).data; Ext.getCmp('my_grid_view_show_id').setValue(rowData.id); Ext.getCmp('my_grid_view_show_date').setValue(rowData.full_date); var show_id = Ext.getCmp('my_grid_view_show_id').value; var show_date = Ext.getCmp('my_grid_view_show_date').value; var their_id = Ext.getCmp('my_grid_view_user_id').value; // Load the grid Ext.getCmp('indyCenter').store.load({params:{method:'my_grid_view', show_date:String(show_date), show_id:String(show_id), their_id:String(their_id)}}); } });