function AppViewer (targetId, widgetId, args){
var _this = this;
this.targetId = targetId;
this.id=widgetId;
this.title = "App Name";
this.description = "description";
/** Flag que indica si quieo mostrar el headerapp (posibilidad de login) **/
this.header = true;
// this.east = false;
if (args != null){
if (args.title!= null){
this.title = args.title;
}
if (args.description!= null){
this.description = args.description;
}
if (args.header!= null){
this.header = args.header;
}
// if (args.east!= null){
// this.east = args.east;
// }
}
/** ID **/
this.portId = this.id + "_portID";
if (this.header){
this.myheaderapp = new HeaderAppWidget('', this.id+'_Header',{
appname: this.title,
description: this.description
});
/**Atach events i listen**/
this.myheaderapp.onLogin.attach(function (sender){
Ext.example.msg('Welcome', 'You logged in');
});
this.myheaderapp.onLogout.attach(function (sender){
Ext.example.msg('Good bye', 'You logged out');
});
}
};
/** appInterface **/
AppViewer.prototype.getAppMenu = function(){
console.info("abstract method must be implemented in child classes");
return(Ext.create('Ext.toolbar.Toolbar'));
};
AppViewer.prototype.getAppPanel = function(){
console.info("abstract method must be implemented in child classes");
return({xtype:'panel',region: 'center'});
};
AppViewer.prototype.drawApplication = function(){
console.info("abstract method must be implemented in child classes");
};
AppViewer.prototype._getHeaderPanel = function(menu){
if (this.header){
return this.myheaderapp.getPanel(menu);
}
menu.height=27;
menu.padding= '0 0 0 10';
return {xtype:'panel',region:'north',height:27,tbar:menu};
};
AppViewer.prototype.getAppEastPanel = function(){
return null;
};
AppViewer.prototype.drawFramework = function(menu){
var _this= this;
var items = [this._getHeaderPanel(menu),
this.getAppPanel()];
if (this.getAppEastPanel() != null){
items.push(this.getAppEastPanel())
}
this.port = Ext.create('Ext.container.Viewport', {
id: this.portId,
layout: 'border',
items: items
});
};
AppViewer.prototype.draw = function(){
this.drawFramework(this.getAppMenu());
this.drawApplication();
};function BrowserDataWidget(targetId, widgetId, tags, args){
var _this=this;
this.targetId = targetId;
this.id=widgetId;
this.tags = tags;
this.args = new Object();
this.args.AAAA="AAAA";
if (args != null){
if (args.AAAA!= null){
this.args.AAAA = args.AAAA;
}
}
this.adapter = new WumAdapter();
this.adapter.onGetData.attach(function (sender, data){
_this.data=data;
_this.adapter.getSuiteList();
});
this.adapter.onSuiteList.attach(function (sender, data){
_this.suiteList = data;
// console.log(data);
_this.render();
});
/**ID**/
this.searchFieldId = this.id + "_searchField";
};
BrowserDataWidget.prototype.draw = function (sessionID){
this.adapter.getData(sessionID, -1);
};
BrowserDataWidget.prototype.render = function (){
var _this=this;
if (this.panel == null){
var data = JSON.parse(this.data);
for(var i =0; i< data.length;i++){
var splitdate = data[i].date.split(" ");
var monthNum = data[i].creationTime.substring(5,7);
data[i].month=splitdate[5]+"-"+monthNum+" ("+splitdate[1]+")";
data[i].tagsMatch = this.checkTags(data[i]);
}
// console.log(data);
/**GRID**/
this.gridStore = Ext.create('Ext.data.Store', {
fields: ["dataId", "ownerId", "jobId", "suiteId", "name", "multiple", "diskUsage", "creationTime", "responsible", "organization", "date", "description", "status", "statusMessage", "write", "enabled", "tags", "dataFiles", "month", "tagsMatch"],
groupField: 'month',
sorters: [{ property : 'month',direction: 'DESC'}],
data: data
});
this.selectedLabel = Ext.create('Ext.toolbar.TextItem', {
padding:3,
flex:1,
html:' Please select a file.'
});
var tagsLabel = Ext.create('Ext.toolbar.TextItem', {
padding:3,
html:'Suported tags: '+this.tags.toString().replace('|',' or ').replace(',',', ')+''
});
var tpl = ['{name}',
'{name}'];
var grid = Ext.create('Ext.grid.Panel', {
title: 'Data Files',
store: this.gridStore,
columns: [{"header":"Name",flex:1, xtype:'templatecolumn', tpl:tpl },
{"header":"Disk usage (KB)","dataIndex":"diskUsage"},{"header":"Date","dataIndex":"date",flex:2},{"header":"Tags","dataIndex":"tags",flex:1}],
features: [{ftype:'grouping'}],
selModel: {
mode: 'SINGLE',
// allowDeselect:true,
listeners: {
scope:this,
selectionchange: function (este,item){
if(item[0].data.tagsMatch){
this.okButton.enable();
this.selectedLabel.setText('
The selected file '+item[0].data.name+' is allowed.
',false);
}else{
this.okButton.disable();
this.selectedLabel.setText('The selected file '+item[0].data.name+' is not allowed.
',false);
}
}
}
},
width: 600,
height: 370,
bbar:{items:[tagsLabel,'-',this.selectedLabel]}
});
/**ORIGIN FILTER**/
var origins = [{ suiteId: "all",name:"all"},{ suiteId: "Uploaded Data",name:"Uploaded Data"},{ suiteId: "Job Generated",name:"Job Generated"}];
var stOrigin = Ext.create('Ext.data.Store', {
fields: ["suiteId","name"],
data : origins
});
this.viewOrigin = Ext.create('Ext.view.View', {
store : stOrigin,
selModel: {
mode: 'SINGLE',
// allowDeselect:true,
listeners: {
scope:this,
selectionchange:this.setFilter
}
},
cls: 'list',
trackOver: true,
overItemCls: 'list-item-hover',
itemSelector: '.list-item',
tpl: '{name}
'
});
var panOrigin = Ext.create('Ext.panel.Panel', {
title:'Search by origin',
border:0,
bodyPadding:5,
style: 'border-bottom:1px solid #99bce8;',
items : [this.viewOrigin]
});
/**SUITE FILTER**/
var suites = JSON.parse(this.suiteList);
var stSuite = Ext.create('Ext.data.Store', {
fields: ["suiteId","name","description"],
data : suites
});
this.viewSuite = Ext.create('Ext.view.View', {
store : stSuite,
selModel: {
mode: 'SINGLE',
// allowDeselect:true,
listeners: {
scope:this,
selectionchange:this.setFilter
}
},
cls: 'list',
trackOver: true,
overItemCls: 'list-item-hover',
itemSelector: '.list-item',
tpl: '{name}
'
});
var panSuite = Ext.create('Ext.panel.Panel', {
title:'Search by suite',
border:0,
bodyPadding:5,
items : [this.viewSuite]
});
/**TEXT SEARCH FILTER**/
this.searchField = Ext.create('Ext.form.field.Text',{
id:this.searchFieldId,
width:164,
emptyText: 'enter search term',
enableKeyEvents:true,
listeners:{
scope:this,
keyup:this.setFilter
}
});
/**FILTER PANEL**/
var panFilter = Ext.create('Ext.panel.Panel', {
width: 170,
height : 370,
items : [panOrigin,panSuite],
tbar : {items:this.searchField}
});
this.okButton = Ext.create('Ext.button.Button', {
text: 'Select file',
disabled:true,
listeners: {
scope: this,
click: function(){
console.log('clicked');
this.panel.destroy();
}
}
});
/**MAIN PANEL**/
this.panel = Ext.create('Ext.window.Window', {
title: 'Browse Data',
resizable: false,
minimizable :true,
constrain:true,
closable:true,
modal:true,
layout: {type: 'table',columns: 2},
items: [panFilter,grid],
buttonAlign:'right',
buttons:[this.okButton],
listeners: {
scope: this,
minimize:function(){
this.panel.hide();
},
destroy: function(){
delete this.panel;
}
}
});
}//if null
this.panel.show();
this.viewOrigin.getSelectionModel().select(this.viewOrigin.store.first());
this.viewSuite.getSelectionModel().select(this.viewSuite.store.first());
};
BrowserDataWidget.prototype.setFilter = function (){
var _this=this;
var recordOrigin = this.viewOrigin.getSelectionModel().getSelection()[0];
var recordSuite = this.viewSuite.getSelectionModel().getSelection()[0];
this.gridStore.clearFilter();
if(recordOrigin!=null){
switch(recordOrigin.data.suiteId){
case "all": break;
case "Uploaded Data": this.gridStore.filter(function(item){return item.data.jobId < 0;}); break;
case "Job Generated": this.gridStore.filter(function(item){return item.data.jobId > 0;}); break;
}
}
if(recordSuite!=null){
switch(recordSuite.data.suiteId){
case 1: break;
default : this.gridStore.filter(function(item){return item.data.suiteId == recordSuite.data.suiteId;});
}
}
this.gridStore.filter(function(item){
var str = Ext.getCmp(_this.searchFieldId).getValue().toLowerCase();
if(item.data.name.toLowerCase().indexOf(str)<0){
return false;
}else{
return true;
}
});
}
BrowserDataWidget.prototype.checkTags = function(item){
for(var i = 0; i < this.tags.length ; i++){
if (this.tags[i].indexOf('|')>-1){
var orTags = this.tags[i].split('|');
var orMatch = false;
for(var j = 0; j < orTags.length ; j++){
if (item.tags.indexOf(orTags[j]) >-1){
orMatch=true;
}
}
if(!orMatch){
return false;
}
}else{
if (item.tags.indexOf(this.tags[i])==-1){
return false;
}
}
}
return true;
}
DataListWidget.prototype.draw = ListWidget.prototype.draw;
DataListWidget.prototype.getData = ListWidget.prototype.getData;
DataListWidget.prototype.getCount = ListWidget.prototype.getCount;
function DataListWidget (targetId, widgetId, args){
ListWidget.prototype.constructor.call(this, targetId, widgetId, args);
var _this = this;
var datatpl = [
'',
'',
'
{name} ({status})
',
'
', // interrogate the kids property within the data
'{filename} {diskUsage}kB
',
'',
'
', // interrogate the kids property within the data
' {.},',
'',
'
{creationTime}
',
'
',
''
];
var datafields = ['commandLine','creationTime','dataFiles','dataId','date','description','diskUsage','enabled','finishTime','jobId','message','multiple','name','organization','ownerId','percentage','projectId','responsible','status','statusMessage','suiteId','tags','toolName','visites','write'];
this.args.pagedViewList.storeFields = datafields;
this.args.pagedViewList.template = datatpl;
this.args.suiteID = -1;
if (args.pagedViewList != null){
if (args.pagedViewList.storeFields != null){
this.args.pagedViewList.storeFields = args.pagedViewList.storeFields;
}
if (args.pagedViewList.template != null){
this.args.pagedViewList.template = args.pagedViewList.template;
}
if (args.suiteID != null){
this.args.suiteID = args.suiteID;
}
}
this.mydataPagedListViewWidget = new PagedViewListWidget("", this.id +"_DataPagedViewList", this.args.pagedViewList);
this.adapter = new WumAdapter();
this.adapter.onGetData.attach(function (sender, data){
_this.render(data);
});
};
DataListWidget.prototype.clean = function (){
clearInterval(this.interval);
console.log(this.id+' TIMEOUT INTERVAL CLEARED');
this.mydataPagedListViewWidget.clean();
};
DataListWidget.prototype.getResponse = function (sessionID){
this.adapter.getData(sessionID, this.args.suiteID);
console.log(this.id+' REST CALL FOR NEW DATA');
};
DataListWidget.prototype.render = function (data){
this._data = data;
this.mydataPagedListViewWidget.draw(this.getData());
};
function EditUserWidget(targetId, widgetId, args){
var _this=this;
this.targetId = targetId;
this.id=widgetId;
this.args = new Object();
this.args.AAAA="AAAA";
if (args != null){
if (args.AAAA!= null){
this.args.AAAA = args.AAAA;
}
}
this.adapter = new WumAdapter();
this.adapter.onEditPassword.attach(function (sender, data){
console.log(_this.id+' EDIT PASS RESPONSE -> '+data);
Ext.getCmp(_this.labelPassId).setText(''+data+'
', false);
// _this.??.notify();
});
this.fldOldId = this.id+"fldOld";
this.fldNew1Id = this.id+"fldNew1";
this.fldNew2Id = this.id+"fldNew2";
this.btnChangeId = this.id+"btnChange";
this.labelPassId = this.id+"labelPass";
};
EditUserWidget.prototype.getOldPassword = function (){
return $.sha1(Ext.getCmp(this.fldOldId).getValue());
};
EditUserWidget.prototype.getNewPassword = function (){
console.log($.sha1(Ext.getCmp(this.fldNew1Id).getValue()));
return $.sha1(Ext.getCmp(this.fldNew1Id).getValue());
};
EditUserWidget.prototype.change = function (){
if(this.checkpass()){
this.adapter.editPassword(this.getOldPassword(),this.getNewPassword(), $.cookie("sid"));
}
}
EditUserWidget.prototype.draw = function (){
this.render();
};
EditUserWidget.prototype.clean = function (){
if (this.panel != null){
this.panel.destroy();
delete this.panel;
console.log(this.id+' PANEL DELETED');
}
};
EditUserWidget.prototype.render = function (){
var _this=this;
if (this.panel == null){
console.log(this.id+' CREATING PANEL');
var labelPass = Ext.create('Ext.toolbar.TextItem', {
id : this.labelPassId,
padding:3,
html:'Type the old and the new password'
});
this.pan = Ext.create('Ext.panel.Panel', {
bodyPadding:20,
width: 350,
height:135,
bbar:{items:[labelPass]},
items: [{
id: this.fldOldId,
xtype:'textfield',
fieldLabel: 'Old password',
inputType: 'password'
},{
id: this.fldNew1Id,
xtype:'textfield',
fieldLabel: 'New password',
inputType: 'password' ,
// enableKeyEvents: true,
listeners: {
scope: this,
change: this.checkpass
}
},{
id: this.fldNew2Id,
xtype:'textfield',
fieldLabel: 'Confirm new',
inputType: 'password' ,
// enableKeyEvents: true,
listeners: {
scope: this,
change: this.checkpass
}
}
]
});
this.panel = Ext.create('Ext.window.Window', {
title: 'Change your password',
resizable: false,
minimizable :true,
constrain:true,
closable:true,
modal:true,
items:[this.pan],
buttonAlign:'center',
buttons:[{
id: this.btnChangeId,
text:'Change'
}
],
listeners: {
scope: this,
minimize:function(){
this.panel.hide();
},
destroy: function(){
delete this.panel;
}
}
});
Ext.getCmp(this.btnChangeId).on('click', this.change, this);
}
this.panel.show();
};
EditUserWidget.prototype.checkpass = function (){
var passwd1 = Ext.getCmp(this.fldNew1Id).getValue();
var passwd2 = Ext.getCmp(this.fldNew2Id).getValue();
var patt = new RegExp("[ *]");
if(!patt.test(passwd1) && passwd1.length > 3){
if (passwd1 == passwd2){
// Ext.getCmp(this.fldNew1Id).clearInvalid();
Ext.getCmp(this.labelPassId).setText('Passwords match
', false);
return true;
}else{
// Ext.getCmp(this.fldNew1Id).markInvalid('Password does not match');
Ext.getCmp(this.labelPassId).setText('Passwords does not match
', false);
return false;
}
}else{
// Ext.getCmp(this.fldNew1Id).markInvalid('password must be at least 4 characters');
Ext.getCmp(this.labelPassId).setText('Password must be at least 4 characters
', false);
return false;
}
};function HeaderAppWidget(targetId, widgetId, args){
var _this=this;
this.targetId = targetId;
this.id=widgetId;
this.height = 94;
this.menubar=null;
this.args = new Object();
this.args.appname="My new App";
this.args.description="My app description";
if (args != null){
if (args.appname != null){
this.args.appname = args.appname;
}
if (args.description != null){
this.args.description = args.description;
}
}
this.adapter = new WumAdapter();
/** Events **/
this.onLogin = new Event();
this.onLogout = new Event();
/** create widgets **/
this.mylogin = new LoginWidget('login', this.id+'_LoginW', 3);
this.myuserbar = new UserBarWidget('', this.id+'_UserBarW');
this.myeditUser = new EditUserWidget('', this.id+'_EditUserW');
this.myBrowserData = new BrowserDataWidget('',this.id+'_BrowseDataW', ['gene','idlist|exp']);
this.myUploadFile = new uploadWidget (this.centerPanelId , this.id+'_UploadW');
/**Atach events i listen**/
this.mylogin.onSessionInitiated.attach(function (sender){
_this.btnLogout.disable();
_this.sessionInitiated();
_this.onLogin.notify();
});
this.myuserbar.onItemsReady.attach(function(sender){
_this.responseItemsReady();
});
this.adapter.onLogout.attach(function (sender, data){
console.log(data);
$.cookie('sid', null);
_this.sessionFinished();
_this.onLogout.notify();
});
};
HeaderAppWidget.prototype.responseItemsReady = function(){
this.userbar.add(this.myuserbar.items);
this.btnLogout.enable();
};
HeaderAppWidget.prototype.sessionInitiated = function(){
/**HIDE**/
this.mylogin.clean();
this.btnSignin.hide();
/**SHOW**/
this._enableMenubarItems();
this.myuserbar.draw();
this.btnLogout.show();
this.btnEdit.show();
};
HeaderAppWidget.prototype.sessionFinished = function(){
/**HIDE**/
this._disableMenubarItems();
this.myuserbar.clean(this.userbar);
this.btnLogout.hide();
this.btnEdit.hide();
/**SHOW**/
this.btnSignin.show();
};
HeaderAppWidget.prototype.draw = function(menu){
this.menubar = menu;
this.render();
console.log($.cookie('sid'));
if($.cookie('sid') != null){
this.sessionInitiated();
}else{
this.sessionFinished();
}
}
HeaderAppWidget.prototype.render = function (){
var _this=this;
if (this.panel==null){
this.linkbar = new Ext.create('Ext.toolbar.Toolbar', {
dock: 'top',
cls:'x-toolbar-default-white2',
height:60,
minHeight:40,
maxHeight:40,
items: [
{
xtype:'tbtext',
html: ''+this.args.appname +' '+this.args.description+'',
padding: '0 0 0 10'
},
'->',
{
text: 'home',
handler:function(){window.location.href='./';}
},
{
text: 'help',
handler:function(){window.open('http://docs.bioinfo.cipf.es/wiki/pupasuite');}
},
{
text: 'tutorial',
handler:function(){window.open("http://bioinfo.cipf.es/pupaswiki");}
},
{
text: 'contact',
handler:function(){window.open('./');}
}
]
});
this.userbar = new Ext.create('Ext.toolbar.Toolbar', {
id : this.userBarId,
dock: 'top',
cls:'x-toolbar-default-gray',
height:27,
minHeight:27,
maxHeight:27,
items:[
{
text: 'Genome Maps',
handler:function(){window.location.href='../genomemap';}
},
{
text: 'Network',
handler:function(){window.location.href='../network';}
},
{
text: 'Pupasuite 4',
handler:function(){window.location.href='../pupasuite4';}
}
]
});
var userbarItems=this.userbar.items.items;
for(var i=0;i'+this.args.appname+'');
}
}
this.btnSignin = Ext.create('Ext.Button', {
text: 'sign in',
scope:this,
listeners: {
scope: this,
click: function (){
this.mylogin.draw();
}
}
});
this.btnEdit = Ext.create('Ext.Button', {
text: 'edit',
scope:this,
listeners: {
scope: this,
click: function (){
this.myeditUser.draw();
}
}
});
this.btnLogout = Ext.create('Ext.Button', {
text: 'logout',
scope:this,
listeners: {
scope: this,
click: function (){
this.adapter.logout($.cookie('sid'));
}
}
});
this.linkbar.add(this.btnEdit);
this.linkbar.add(this.btnLogout);
this.linkbar.add(this.btnSignin);
this.panel = Ext.create('Ext.panel.Panel', {
region: 'north',
renderTo:this.targetId,
height : this.height,
minHeight: this.height,
maxHeigth: this.height
});
this.panel.addDocked(this.userbar);
this.panel.addDocked(this.linkbar);
this.setMenubar();
}
};
HeaderAppWidget.prototype.getPanel = function (menu){
this.draw(menu);
return this.panel;
};
HeaderAppWidget.prototype._getMenubarItems = function (){
this.btnBrowse = Ext.create('Ext.Button', {
text: 'Browse data',
disabled:true,
listeners: {
scope: this,
click: function (){
this.myBrowserData.draw($.cookie('sid'));
}
}
});
this.btnUpload = Ext.create('Ext.Button', {
text: 'Upload data',
disabled:true,
listeners: {
scope: this,
click: function (){
this.myUploadFile.draw();
}
}
});
this.btnBrowse.enable();
return ['->',this.btnBrowse,this.btnUpload];
};
HeaderAppWidget.prototype._enableMenubarItems = function (){
this.btnBrowse.enable();
this.btnUpload.enable();
};
HeaderAppWidget.prototype._disableMenubarItems = function (){
this.btnBrowse.disable();
this.btnUpload.disable();
};
HeaderAppWidget.prototype.setMenubar = function (){
this.menubar.add(this._getMenubarItems());
this.menubar.xtype='toolbar';
this.menubar.dock= 'top';
this.menubar.height=27;
this.menubar.padding= '0 0 0 10';
this.menubar.cls='x-toolbar-default-white2',
this.menubar.minHeight=27;
this.menubar.maxHeight=27;
this.panel.addDocked(this.menubar);
};function JobListWidget (targetId, widgetId, args){
ListWidget.prototype.constructor.call(this, targetId, widgetId, args);
this.counter = null;
var _this = this;
var jobstpl = [
'',
'',
'
green'+
'blue'+
'red'+
'Darkorange'+
'">{name}
',
'
{creationTime}
',
'
- {toolName} -
',
'
',
'finished and unvisited',
'{visites} visites',
'',
'',
'
{percentage}%',
'',
'waiting in the queue...',
'
',
'
',
''
];
var jobsfields = ['commandLine','creationTime','description','diskUsage','finishTime','inputData','jobId','message','name','outputData','ownerId','percentage','projectId','toolName','visites'];
this.args.pagedViewList.storeFields = jobsfields;
this.args.pagedViewList.template = jobstpl;
if (args.pagedViewList != null){
if (args.pagedViewList.storeFields != null){
this.args.pagedViewList.storeFields = args.pagedViewList.storeFields;
}
if (args.pagedViewList.template != null){
this.args.pagedViewList.template = args.pagedViewList.template;
}
}
this.myjobsPagedListViewWidget = new PagedViewListWidget( "", this.id +"_JobsPagedViewList", this.args.pagedViewList);
this.btnAllId = this.id + "_btnAll";
this.btnFinishedId =this.id + "_btnFinished";
this.btnVisitedId = this.id + "_btnVisited";
this.btnRunningId = this.id + "_btnRunning";
this.btnQueuedId = this.id + "_btnQueued";
this.adapter = new WumAdapter();
this.adapter.onGetJobs.attach(function (sender, data){
_this.render(data);
});
};
JobListWidget.prototype.draw = ListWidget.prototype.draw;
JobListWidget.prototype.getData = ListWidget.prototype.getData;
JobListWidget.prototype.getCount = ListWidget.prototype.getCount;
JobListWidget.prototype.clean = function (){
if (this.bar != null){
this.bar.destroy();
delete this.bar;
console.log(this.id+' FILTER BAR DELETED');
}
clearInterval(this.interval);
console.log(this.id+' TIMEOUT INTERVAL CLEARED');
this.myjobsPagedListViewWidget.clean();
};
JobListWidget.prototype.getResponse = function (sessionID){
this.adapter.getJobs(sessionID);
console.log(this.id+' REST CALL FOR NEW JOBS');
};
JobListWidget.prototype.render = function (data){
this._data = data;
if (this.bar == null){
console.log(this.id+' FILTER BAR CREATED');
this.bar = new Ext.create('Ext.toolbar.Toolbar', {
// vertical : true,
style : 'border : 0',
dock : 'top',
items: [
{
id : this.btnAllId,
text: 'All',
tooltip:'All Jobs'
// handler: this.filterAll,
},
{
id : this.btnFinishedId,
text: ' ',
tooltip:'Finished Jobs'
},
{
id : this.btnVisitedId,
text: ' ',
tooltip:'Visited Jobs'
},
{
id : this.btnRunningId,
text: ' ',
tooltip:'Running Jobs'
},
{
id : this.btnQueuedId,
tooltip:'Queued Jobs',
text: ' '
}
]
});
Ext.getCmp(this.btnAllId).on('click', this.filter, this);
Ext.getCmp(this.btnFinishedId).on('click', this.filter, this);
Ext.getCmp(this.btnVisitedId).on('click', this.filter, this);
Ext.getCmp(this.btnRunningId).on('click', this.filter, this);
Ext.getCmp(this.btnQueuedId).on('click', this.filter, this);
} // end of 'if'
var jobcount = this.getJobCounter();
if (jobcount.finished == 0) {
Ext.getCmp(this.btnFinishedId).hide();
} else {
Ext.getCmp(this.btnFinishedId).show();
}
if (jobcount.visited == 0) {
Ext.getCmp(this.btnVisitedId).hide();
} else {
Ext.getCmp(this.btnVisitedId).show();
}
if (jobcount.running == 0) {
Ext.getCmp(this.btnRunningId).hide();
} else {
Ext.getCmp(this.btnRunningId).show();
}
if (jobcount.queued == 0) {
Ext.getCmp(this.btnQueuedId).hide();
} else {
Ext.getCmp(this.btnQueuedId).show();
}
Ext.getCmp(this.btnFinishedId).setText(''+jobcount.finished+'');
Ext.getCmp(this.btnVisitedId).setText(''+jobcount.visited+'');
Ext.getCmp(this.btnRunningId).setText(''+jobcount.running+'');
Ext.getCmp(this.btnQueuedId).setText(''+jobcount.queued+'');
this.myjobsPagedListViewWidget.draw(this.getData());
Ext.getCmp(this.myjobsPagedListViewWidget.panelId).addDocked(this.bar);
};
JobListWidget.prototype.getJobCounter = function() {
var finished = 0;
var visited = 0;
var running = 0;
var queued = 0;
for (var i =0 ; i < this.getData().length; i++) {
if (this.getData()[i].visites > 0){
visited++;
}else {
if (this.getData()[i].visites == 0){
finished++;
}
if (this.getData()[i].visites == -1){
running++;
}
if (this.getData()[i].visites == -2){
queued++;
}
}
}
return {"visited": visited, "finished": finished, "running": running, "queued": queued};
};
/**Filters**/
//var functionAssertion = function(item){return item.data.visites > 2;};
JobListWidget.prototype.filter = function (button){
switch (button.id) {
case this.btnFinishedId:
this.myjobsPagedListViewWidget.setFilter(function(item){return item.data.visites == 0;});
break;
case this.btnVisitedId:
this.myjobsPagedListViewWidget.setFilter(function(item){return item.data.visites > 0;});
break;
case this.btnRunningId:
this.myjobsPagedListViewWidget.setFilter(function(item){return item.data.visites == -1;});
break;
case this.btnQueuedId:
this.myjobsPagedListViewWidget.setFilter(function(item){return item.data.visites == -2;});
break;
default:
this.myjobsPagedListViewWidget.setFilter(function(item){return true;});
break;
}
this.myjobsPagedListViewWidget.draw(this.getData());
};
function ListWidget (targetId, widgetId, args){
var _this = this;
this.id = widgetId;
this.sessionID = null;
this._data = null;
this.args = new Object();
this.args.timeout = 4000;
this.args.pagedViewList = args.pagedViewList;
if (args != null){
if (args.timeout != null && args.timeout > 4000){
this.args.timeout = args.timeout;
}
}
console.warn(this.id+' Minimum period is 4000 milliseconds, smaller values will be ignored');
};
ListWidget.prototype.draw = function (sessionID){
var _this = this;
this.sessionID = sessionID;
this.getResponse(sessionID);
this.interval = setInterval(function () {_this.getResponse(sessionID); }, this.args.timeout);
};
ListWidget.prototype.getData = function (){
try{
return JSON.parse(this._data);
}catch(e){
return JSON.parse("[]");
}
};
ListWidget.prototype.getCount = function() {
if (this._data != null){
return JSON.parse(this._data).length;
}
else{
return 0;
}
};
ListWidget.prototype.getResponse = function(){
/**Que cada clase hija llame a la funcion de WumDataAdapter que necesite**/
throw "abstract method must be implemented in child classes";
};
ListWidget.prototype.render = function (data){
/**Que cada clase hija renderize como quiera los datos, ya sea con sencha o con sencho**/
throw "abstract method must be implemented in child classes";
};
function LoginWidget (targetId , widgetId, suiteId, args){
var _this=this;
this.targetId = targetId;
this.id=widgetId;
this.suiteId = suiteId;
this.args = new Object();
this.args.x="x";
if (args != null){
if (args.x != null){
this.args.x = args.x;
}
}
/**Events i send**/
this.onSessionInitiated = new Event(this);
this.adapter = new WumAdapter();
/**Atach events i listen**/
this.adapter.onLogin.attach(function (sender, data){
console.log(data.length);
data = data.replace(/^\s+|\s+$/g, '') ;
if(data.length == 64){
console.log(_this.id+' LOGIN RESPONSE -> '+data);
$.cookie('sid', data);
_this.onSessionInitiated.notify();
}else{
console.log(_this.id+' SESSION ID FORMAT INVALID -> '+data);
Ext.getCmp(_this.labelPassId).setText(''+data+'', false);
}
});
this.adapter.onRegister.attach(function (sender, data){
if(data.length == 64){
console.log(_this.id+' REGISTER RESPONSE -> '+data);
$.cookie('sid', data);
_this.onSessionInitiated.notify();
}else{
console.log(_this.id+' SESSION ID FORMAT INVALID -> '+data);
}
});
this.adapter.onReset.attach(function (sender, data){
console.log(_this.id+' RESETRESPONSE -> '+data);
});
/**ID**/
this.labelEmailId = this.id+"labelEmail";
this.labelPassId = this.id+"labelPass";
this.fldEmailId = this.id+"fldEmail";
this.fldPasswordId = this.id+"fldPassword";
this.fldNpass1Id = this.id+"fldNpass1";
this.fldNpass2Id = this.id+"fldNpass2";
this.btnSignId = this.id+"fldSign";
this.btnForgotId = this.id+"btnForgot";
this.btnNewaccId = this.id+"btnNewacc";
this.btnSendId = this.id+"btnSend";
this.btnBackId = this.id+"btnBack";
this.btnRegisterId = this.id+"btnRegister";
}
LoginWidget.prototype.sign = function (){
if(this.checkemail()){
this.adapter.login(this.getLogin(), this.getPassword(), this.suiteId );
}
};
LoginWidget.prototype.register = function (){
if(this.checkemail() && this.checkpass() ){
this.adapter.register(this.getLogin(), this.getPasswordReg(), this.suiteId );
}
};
LoginWidget.prototype.sendRecover = function (){
if(this.checkemail()){
// this.adapter.reset(this.getLogin());
}
};
LoginWidget.prototype.getLogin = function (){
return Ext.getCmp(this.fldEmailId).getValue();
};
LoginWidget.prototype.getPassword = function (){
return $.sha1(Ext.getCmp(this.fldPasswordId).getValue());
};
LoginWidget.prototype.getPasswordReg = function (){
return $.sha1(Ext.getCmp(this.fldNpass1Id).getValue());
};
LoginWidget.prototype.draw = function (){
this.render();
};
LoginWidget.prototype.clean = function (){
if (this.panel != null){
this.panel.destroy();
console.log(this.id+' PANEL DELETED');
}
};
LoginWidget.prototype.render = function (){
var _this=this;
if (this.panel == null){
console.log(this.id+' CREATING PANEL');
var labelEmail = Ext.create('Ext.toolbar.TextItem', {
id : this.labelEmailId,
padding:3,
html: 'Type the email'
});
var labelPass = Ext.create('Ext.toolbar.TextItem', {
id : this.labelPassId,
padding:3,
html:'Type the password'
});
this.pan = Ext.create('Ext.panel.Panel', {
bodyPadding:20,
width: 350,
height: 135,
bbar:{items:[labelEmail,'-', labelPass]},
items: [{
id: this.fldEmailId,
xtype:'textfield',
fieldLabel: 'e-mail',
// enableKeyEvents: true,
value:'fsalavert@cipf.es',
listeners: {
scope: this,
change: this.checkemail
}
},{
id: this.fldPasswordId,
xtype:'textfield',
fieldLabel: 'password',
inputType: 'password' ,
value:'pepe'
// enableKeyEvents: true
},{
id: this.fldNpass1Id,
xtype:'textfield',
fieldLabel: 'password',
inputType: 'password' ,
hidden: true,
// enableKeyEvents: true,
listeners: {
scope: this,
change: this.checkpass
}
},{
id: this.fldNpass2Id,
xtype:'textfield',
fieldLabel: 're-password',
inputType: 'password' ,
hidden: true,
// enableKeyEvents: true,
listeners: {
scope: this,
change: this.checkpass
}
}
]
});
this.panel = Ext.create('Ext.window.Window', {
id:"asdf",
title: 'Sign in',
resizable: false,
minimizable :true,
constrain:true,
closable:true,
modal:true,
items:[this.pan],
buttonAlign:'center',
buttons:[{
id: this.btnSignId,
text:'Sign in'
},{
id: this.btnForgotId,
text:'Forgot yout password?',
width:130,
minWidth:130
},{
id: this.btnNewaccId,
text:'New account',
width:100,
minWidth:100
},{
id : this.btnSendId,
text:'Send',
hidden: true
},{
id : this.btnRegisterId,
text:'Register',
hidden: true
},{
id : this.btnBackId,
text:'Back',
hidden: true
}
],
listeners: {
scope: this,
minimize:function(){
this.panel.hide();
},
destroy: function(){
console.log("destroyed");
delete this.panel;
}
}
});
Ext.getCmp(this.btnForgotId).on('click', this.ShowForgot, this);
Ext.getCmp(this.btnBackId).on('click', this.ShowBack, this);
Ext.getCmp(this.btnNewaccId).on('click', this.ShowNewacc, this);
Ext.getCmp(this.btnSignId).on('click', this.sign, this);
Ext.getCmp(this.btnSendId).on('click', this.sendRecover, this);
Ext.getCmp(this.btnRegisterId).on('click', this.register, this);
}
this.panel.show();
};
LoginWidget.prototype.ShowForgot = function (){
Ext.getCmp(this.fldEmailId).reset();
Ext.getCmp(this.fldPasswordId).reset();
Ext.getCmp(this.fldNpass1Id).reset();
Ext.getCmp(this.fldNpass2Id).reset();
Ext.getCmp(this.fldPasswordId).hide();
Ext.getCmp(this.fldNpass1Id).hide();
Ext.getCmp(this.fldNpass2Id).hide();
Ext.getCmp(this.btnSignId).hide();
Ext.getCmp(this.btnForgotId).hide();
Ext.getCmp(this.btnNewaccId).hide();
Ext.getCmp(this.btnSendId).show();
Ext.getCmp(this.btnBackId).show();
Ext.getCmp(this.btnRegisterId).hide();
Ext.getCmp(this.labelEmailId).setText('Type your email to send a new password', false);
Ext.getCmp(this.labelPassId).setText(' ', false);
};
LoginWidget.prototype.ShowBack = function (){
Ext.getCmp(this.fldEmailId).reset();
Ext.getCmp(this.fldPasswordId).reset();
Ext.getCmp(this.fldNpass1Id).reset();
Ext.getCmp(this.fldNpass2Id).reset();
Ext.getCmp(this.fldPasswordId).show();
Ext.getCmp(this.fldNpass1Id).hide();
Ext.getCmp(this.fldNpass2Id).hide();
Ext.getCmp(this.btnSignId).show();
Ext.getCmp(this.btnForgotId).show();
Ext.getCmp(this.btnNewaccId).show();
Ext.getCmp(this.btnSendId).hide();
Ext.getCmp(this.btnBackId).hide();
Ext.getCmp(this.btnRegisterId).hide();
Ext.getCmp(this.labelEmailId).setText('Type the email', false);
Ext.getCmp(this.labelPassId).setText('Type the password', false);
};
LoginWidget.prototype.ShowNewacc = function (){
Ext.getCmp(this.fldEmailId).reset();
Ext.getCmp(this.fldPasswordId).reset();
Ext.getCmp(this.fldNpass1Id).reset();
Ext.getCmp(this.fldNpass2Id).reset();
Ext.getCmp(this.fldPasswordId).hide();
Ext.getCmp(this.fldNpass1Id).show();
Ext.getCmp(this.fldNpass2Id).show();
Ext.getCmp(this.btnSignId).hide();
Ext.getCmp(this.btnForgotId).hide();
Ext.getCmp(this.btnNewaccId).hide();
Ext.getCmp(this.btnSendId).hide();
Ext.getCmp(this.btnBackId).show();
Ext.getCmp(this.btnRegisterId).show();
Ext.getCmp(this.labelEmailId).setText('Type your email', false);
Ext.getCmp(this.labelPassId).setText('Type your password', false);
};
LoginWidget.prototype.checkpass = function (){
var passwd1 = Ext.getCmp(this.fldNpass1Id).getValue();
var passwd2 = Ext.getCmp(this.fldNpass2Id).getValue();
var patt = new RegExp("[ *]");
if(!patt.test(passwd1) && passwd1.length > 3){
if (passwd1 == passwd2){
// Ext.getCmp(this.fldNpass1Id).clearInvalid();
Ext.getCmp(this.labelPassId).setText('passwords match', false);
return true;
}else{
Ext.getCmp(this.labelPassId).setText('Password does not match', false);
// Ext.getCmp(this.fldNpass1Id).markInvalid('Password does not match');
return false;
}
}else{
Ext.getCmp(this.labelPassId).setText('password must be at least 4 characters', false);
// Ext.getCmp(this.fldNpass1Id).markInvalid('password must be at least 4 characters');
return false;
}
};
LoginWidget.prototype.checkemail = function (a,b,c){
var email = Ext.getCmp(this.fldEmailId).getValue();
var patt = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (patt.test(email)){
// Ext.getCmp(this.fldEmailId).clearInvalid();
Ext.getCmp(this.labelEmailId).setText('email format valid', false);
return true;
}else{
// Ext.getCmp(this.fldEmailId).markInvalid('email format not valid');
Ext.getCmp(this.labelEmailId).setText('email format not valid', false);
return false;
}
};
function PagedViewListWidget(targetId, widgetId, args){
this._data = null;
this.id = widgetId;
this.args = new Object();
this.args.renderTo = '';
this.args.pageSize = 6;
this.args.storeFields = new Object();
this.args.template = new Object();
this.args.width = 280;
this.args.height = 550;
this.args.title = "";
this.args.order = 0;
this.args.border = 0;
this.args.mode = "view";
if (args != null){
if (args.pageSize != null){
this.args.pageSize = args.pageSize;
}
if (args.storeFields != null){
this.args.storeFields = args.storeFields;
}
if (args.template != null){
this.args.template = args.template;
}
if (args.renderTo != null){
this.args.renderTo = args.renderTo;
}
if (args.width != null){
this.args.width = args.width;
}
if (args.height != null){
this.args.height = args.height;
}
if (args.title != null){
this.args.title = args.title;
}
if (args.order != null){
this.args.order = args.order;
}
if (args.border != null){
this.args.border = args.border;
}
if (args.mode != null){
this.args.mode = args.mode;
}
}
this.currentPage = 1;
this.pageFieldId = this.id + '_pageField';
this.pageLabelId = this.id + '_pageLabel';
this.pagbarId = this.id + '_pagbar';
this.panelId = this.id + '_panel';
// this.a=0;
// this.adapter = new WumAdapter();
/**Events i send**/
this.onItemClick = new Event(this);
};
PagedViewListWidget.prototype.getData = function (){
return this._data;
};
PagedViewListWidget.prototype._setData = function (data){
this._data = data;
};
PagedViewListWidget.prototype.getPageSize = function (){
return this.args.pageSize;
};
PagedViewListWidget.prototype.getItemsCount = function (){
return this.getData().length;
};
PagedViewListWidget.prototype.getPageCount = function (){
return Math.ceil(this.getItemsCount() / this.getPageSize());
};
/**FILTER **/
PagedViewListWidget.prototype.setFilter = function(filterFunction) {
this.store.clearFilter();
this.store.filterBy(filterFunction);
this.filterFunction = filterFunction;
this.currentPage = 1;
};
/** DRAW **/
PagedViewListWidget.prototype.draw = function(data) {
this._setData(data);
this.render();
if (this.filterFunction != null ){
this.store.loadData(data);
this.store.filterBy(this.filterFunction);
this._setData(this.store.data.items);
}
this.changePage(this.currentPage, this.getData(), true);
};
/** CLEAN **/
PagedViewListWidget.prototype.clean = function (){
if (this.panel != null){
this.panel.destroy();
delete this.panel;
console.log(this.id+' PANEL DELETED');
}
};
PagedViewListWidget.prototype.changePage = function (numberPage, data, restUpdated){
if((data != null) && (data.length > 0)){
if ((numberPage > 0) && (numberPage <= this.getPageCount())){
this.currentPage = numberPage;
Ext.getCmp(this.pageLabelId).setText(numberPage+' of '+ this.getPageCount());
if (restUpdated != true){
Ext.getCmp(this.pageFieldId).setValue(numberPage);
}
var dataPage = new Array();
for ( var i = (this.getPageSize() * numberPage)- this.getPageSize(); i < this.getPageSize() * numberPage; i++) {
if (data[i] != null){
dataPage.push(data[i]);
}
}
this.store.loadData(dataPage, false);
// this.a +=1
// console.log('[Info][WidgetPager] '+this.id +' Page Refreshed! ' + this.a);
}
}
else{
this.store.removeAll();
this.currentPage=1;
Ext.getCmp(this.pageFieldId).setValue(this.currentPage);
Ext.getCmp(this.pageLabelId).setText('No data found');
}
};
PagedViewListWidget.prototype.render = function() {
if (this.panel == null){
console.log(this.id+' PANEL CREATED');
this.tpl = new Ext.XTemplate(this.args.template);
this.store = Ext.create('Ext.data.Store', {
fields: this.args.storeFields,
autoLoad: false
});
if(this.args.mode == "view"){
this.view = Ext.create('Ext.view.View', {
padding:15,
store: this.store,
tpl: this.tpl,
trackOver: true,
overItemCls: 'list-item-hover',
itemSelector: '.joblist-item',
listeners : {
scope: this,
itemclick : function (este,record){
console.log(record);
this.onItemClick.notify(record);
}
// itemmouseenter : function (este, record, item){
// item.style.cursor="pointer";
// item.firstChild.style.cursor="pointer";
// item.style.border = "1px solid deepSkyBlue";
// item.style.background = "honeydew";
// },
// itemmouseleave : function (este, record, item){
// item.style.background = "white";
// item.style.border = "1px solid #ffffff";
// }
}
});
var pan = this.view;
}
if(this.args.mode == "grid"){
var columns = [];
for (var j=0;j',
'',
'',
''+this.record.data.toolName+'
',
'The job named '+this.record.data.name+' ',
'was launched on '+this.record.data.creationTime+' ',
'and has been visited '+this.record.data.visites+' times.',
'
',
'
',
'',
'{[ this.printGroups() ]}',
'
',
'
',
'',
'{[ this.checkGroup(values) ]}',
'',
'
',
// '
context: {context}
',
// '
group: {group}
',
// '
name: {name}
',
// '
title: {title}
',
// '
type: {type}
',
// '
value: {value}
',
// '
tags: ',
'',
' {.} | ',
'',
// '
',
'
{type} ',
'
{title} ',
'
{value} ',
'{[ this.checkType(values) ]}',
'
',
'
',
'{[ this.checkTag(values) ]}',
'',
'
',
''
,
{
// XTemplate configuration:
disableFormats: true,
// member functions:
printGroups: function(){
var g = "";
var str = "";
var arr = _this.data.outputItems;
for(var i = 0; i < arr.length; i++){
if (g != arr[i].group){
g=arr[i].group;
str+= ''+arr[i].group+'
';
}
}
return str;
},
checkGroup: function(values){
if(values.group!= this.currentGroup){
this.currentGroup=values.group;
return '
' +
''+values.group+'
';
}
},
setCSS: function(item){
switch(item.type){
case 'FILE':
return 'file';
break;
case 'MESSAGE':
return 'message';
break;
}
},
checkType: function(item){
switch(item.type){
case 'IMAGE':
return '';
break;
}
},
checkTag: function(item){
// console.log(jobId);
for(var i = 0; i < item.tags.length ; i++){
// console.log(item.tags[i]);
switch(item.tags[i]){
case 'TABLE':
console.log("checktag del template");
var id = _this.jobId+item.value+item.tags;
_this.resultTables[id] = new ResultTable (id, "resultTable_"+id, _this.jobId, item.value, item.tags[1]);
return '';
break;
}
}
}
}
);
this.store = Ext.create('Ext.data.Store', {
fields: ['context','group','name','style','tags','title','type','value'],
data : this.data.outputItems
});
this.view = Ext.create('Ext.view.View', {
padding : 30,
store: this.store,
tpl: this.tpl,
itemSelector: 'div.outputItem',
listeners : {
scope: this,
itemclick : function (este,record){
console.log(record);
if(record.data.type == 'FILE'){
this.adapter.poll(this.jobId, record.data.value, true, $.cookie('sid'));
}
},
itemmouseenter : function (este, record, item){
if(record.data.type == 'FILE'){
item.style.cursor="pointer";
item.firstChild.style.cursor="pointer";
item.style.border = "1px solid deepSkyBlue";
item.style.background = "honeydew";
}
},
itemmouseleave : function (este, record, item){
if(record.data.type == 'FILE'){
item.style.background = "white";
item.style.border = "1px solid #ffffff";
}
}
}
});
this.panel.add(this.view);
var downloadButton = Ext.create('Ext.button.Button', {
text: 'Download',
renderTo:this.id+"_"+this.jobId+'button',
listeners: {
scope: this,
click: function (){
this.adapter.download(this.jobId, $.cookie('sid'));
}
}
});
//se dibujan todas las tablas
for(id in this.resultTables){
this.resultTables[id].draw();
}
}//else
};function uploadWidget (targetId, widgetId, args){
var _this=this;
this.id=widgetId;
this.targetId=targetId;
this.args = new Object();
this.args.renderTo = "";
if (args != null){
if (args.renderTo != null){
this.args.renderTo = args.renderTo;
}
}
this.adapter = new WumAdapter();
this.uploadButtonId = this.id+'_uploadButton';
this.uploadFieldId = this.id+'_uploadField';
this.dataNameFieldId = this.id+'_dataNameField';
this.selectedDataType = null;
}
uploadWidget.prototype.getsdf = function(){
return this.id+'_uploadButton';
};
uploadWidget.prototype.draw = function(){
//ESTE ARRAY HA DE SER DADO SEGUN LA APLICACION
var dataTypes=[
{ text: "ID List", children: [
{ text: "SNP", tag:"snp"},
{ text: "Gene/Transcript"}
] },
{ text: "Genomic", children: [
{ text: "Chromosome region"},
{ text: "Cytoband"}
] },
{ text: "Genotype pedigree", children: [
{ text: "Haploview PED format"}
] }
];
this.checkDataTypes(dataTypes)
this.render(dataTypes);
};
uploadWidget.prototype.clean = function (){
if (this.panel != null){
this.panel.destroy();
delete this.panel;
console.log(this.id+' PANEL DELETED');
}
};
uploadWidget.prototype.checkDataTypes = function (dataTypes){
for (var i = 0; iType: OK ',false);
}else{
this.selectedDataType = null;
this.dataTypeLabel.setText('Select a data type !!!',false);
}
this.validate();
}
}
});
var pan2 = Ext.create('Ext.panel.Panel', {
title: 'Some aditional data',
width: 350,
height : height,
bodyPadding: 15,
items: [{
id:this.dataNameFieldId,
xtype:'textfield',
name: 'datalabel',
fieldLabel: 'Data name',
labelWidth: 110,
msgTarget: 'side',
allowBlank: false,
enableKeyEvents: true,
listeners: {
scope: this,
keyup: function(el) {
if(el.getValue()!=""){
this.dataNameLabel.setText('Name: OK ',false);
}else{
this.dataNameLabel.setText('Enter the data name !!!',false);
}
this.validate();
}
}
},{
xtype: 'textarea',
name: 'datadescription',
fieldLabel: 'Data description',
labelWidth: 110,
msgTarget: 'side'
},{
xtype:'textfield',
name: 'organization',
fieldLabel: 'Organization',
labelWidth: 110,
msgTarget: 'side'
},{
xtype:'textfield',
name: 'responsable',
fieldLabel: 'Responsible',
labelWidth: 110,
msgTarget: 'side'
},{
xtype:'textfield',
name: 'acquisitiondate',
fieldLabel: 'Acquisition date',
labelWidth: 110,
msgTarget: 'side'
}
]
});
this.dataTypeLabel = Ext.create('Ext.toolbar.TextItem', {
html:'Select a data type'
});
this.dataNameLabel = Ext.create('Ext.toolbar.TextItem', {
html:'Enter the data name'
});
this.dataFieldLabel = Ext.create('Ext.toolbar.TextItem', {
html:'Select a data file'
});
this.originCheck = Ext.create('Ext.form.field.Checkbox', {
xtype:'checkboxfield',
padding:'0 0 5 5',
boxLabel : 'Text mode',
listeners: {
scope: this,
change: function(){
if(this.originCheck.getValue()){
this.dataFieldLabel.setText(''+this.editor.getValue().length+' chars',false);
this.uploadBar.hide();
this.editor.show();
this.uploadField.destroy();
this.uploadField.setRawValue(null);
}else{
this.dataFieldLabel.setText('Select a data file',false);
this.editor.hide();
this.uploadBar.show();
this.editor.setRawValue(null);
this.createUploadField();
}
this.validate();
}
}
});
var uploadButton = Ext.create('Ext.button.Button', {
id:this.uploadButtonId,
text: 'Upload',
disabled:true,
listeners: {
scope: this,
click: this.uploadFile
}
});
this.editor = Ext.create('Ext.form.field.TextArea', {
xtype: 'textarea',
width: 594,
flex:1,
hidden:true,
name: 'file',
padding:2,
enableKeyEvents:true,
height: 100,
listeners: {
scope: this,
change: function(){
this.dataFieldLabel.setText(''+this.editor.getValue().length+' chars',false);
this.validate();
}
}
});
this.uploadBar = Ext.create('Ext.toolbar.Toolbar');
this.createUploadField();
var pan3 = Ext.create('Ext.panel.Panel', {
title: 'File origin',
colspan:2,
// bodyStyle:{"background-color":"#d3e1f1"},
cls:'x-border-layout-ct',
items:this.editor,
bbar:this.uploadBar,
tbar:{items:[this.originCheck,'->',this.dataTypeLabel,'-',this.dataNameLabel,'-',this.dataFieldLabel]}
});
this.panel = Ext.create('Ext.window.Window', {
title: 'Upload a data file',
resizable: false,
minimizable :true,
constrain:true,
closable:true,
modal:true,
layout: {
type: 'table',
columns: 2,
rows:2
},
items: [pan1,pan2,pan3],
buttonAlign:'right',
buttons : [uploadButton],
listeners: {
scope: this,
minimize:function(){
this.panel.hide();
},
destroy: function(){
delete this.panel;
}
}
});
}
this.panel.show();
};
uploadWidget.prototype.createUploadField = function() {
this.uploadField = Ext.create('Ext.form.field.File', {
id:this.uploadFieldId,
xtype: 'filefield',
name: 'file',
flex:1,
padding:1,
msgTarget: 'side',
emptyText: 'Choose a file',
allowBlank: false,
anchor: '100%',
buttonText: 'Open file...',
listeners: {
scope: this,
change: function() {
this.fileSelected();
this.validate();
}
}
});
this.uploadBar.add(this.uploadField);
}
uploadWidget.prototype.validate = function (){
// console.log(this.selectedDataType != null);
// console.log(Ext.getCmp(this.dataNameFieldId).getValue() !="");
// console.log((this.uploadField.getRawValue()!="" || this.editor.getValue()!=""));
if (this.selectedDataType != null && Ext.getCmp(this.dataNameFieldId).getValue() !="" && (this.uploadField.getRawValue()!="" || this.editor.getValue()!="") ){
Ext.getCmp(this.uploadButtonId).enable();
}else{
Ext.getCmp(this.uploadButtonId).disable();
}
}
uploadWidget.prototype.fileSelected = function (){
var inputId=this.uploadField.fileInputEl.id;
var file = document.getElementById(inputId).files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
this.dataFieldLabel.setText('Size: '+fileSize+'',false);
// document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
// document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
// document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
uploadWidget.prototype.uploadFile = function() {
var fd = new FormData();
if(this.originCheck.getValue()){
console.log(this.editor);
fd.append("file", this.editor.getValue());
}else{
console.log(Ext.getCmp(this.uploadFieldId));
fd.append("file", document.getElementById(Ext.getCmp(this.uploadFieldId).fileInputEl.id).files[0]);
}
fd.append("name", Ext.getCmp(this.dataNameFieldId).getValue());
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", this.uploadProgress, false);
xhr.addEventListener("load", this.uploadComplete, false);
xhr.addEventListener("error", this.uploadFailed, false);
xhr.addEventListener("abort", this.uploadCanceled, false);
xhr.open("POST", this.adapter.getHost()+"/rest/data/up", false);
xhr.send(fd);
}
uploadWidget.prototype.uploadProgress = function(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
uploadWidget.prototype.uploadComplete = function(evt) {
/* This event is raised when the server send back a response */
_this.dataFieldLabel.setText('Upload finished successfully '+evt.target.responseText+'',false);
// document.getElementById('progressNumber').innerHTML = 'Upload finished successfully
Response: '+evt.target.responseText;
// alert(evt.target.responseText);
}
uploadWidget.prototype.uploadFailed = function(evt) {
alert("There was an error attempting to upload the file.");
}
uploadWidget.prototype.uploadCanceled = function(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
function UserBarWidget(targetId, widgetId, args){
var _this=this;
this.targetId = targetId;
this.id=widgetId;
this.args = new Object();
this.args.x="x";
if (args != null){
if (args.x != null){
this.args.x = args.x;
}
}
/**ID**/
this.spltbtnActiveProjectId = this.id + "_spltbtnActiveProjectID";
this.adapter = new WumAdapter();
/**Events i send**/
this.onItemsReady = new Event(this);
/**Atach events i listen**/
this.adapter.onGetUserInfo.attach(function (sender, data){
_this.responseGetUserInfo(data);
});
this.adapter.onActiveProject.attach(function (sender, data){
console.log(data);
_this.responseActiveProject();
});
};
UserBarWidget.prototype.responseActiveProject = function(data){
Ext.getCmp(this.spltbtnActiveProjectId).setText(''+this.workingProject+'');
};
UserBarWidget.prototype.responseGetUserInfo = function(data){
// console.log(data);
this.pdata = JSON.parse(data);
// console.log(this.pdata);
var a=(this.pdata.diskUsage/1024).toFixed(2);
var b=(this.pdata.diskQuota/1024)/1024;
var p=(this.pdata.diskUsage/this.pdata.diskQuota*100).toFixed(2);
this.projects = new Array();
this.workingProject = ''+this.pdata.activeProjectName+'';
for (var i = 0; i < this.pdata.ownedProjects.length; i++){
this.projects[i] = { text : this.pdata.ownedProjects[i].name,
index : i,
iconCls: 'icon-change-project',
listeners: {
scope: this,
click: function(button){
console.log('cliked on project id -> '+this.pdata.ownedProjects[button.index].projectId);
this.workingProject = this.pdata.ownedProjects[button.index].name;
this.workingProjectId = this.pdata.ownedProjects[button.index].projectId;
this.adapter.activeProject(this.pdata.ownedProjects[button.index].projectId, $.cookie("sid"));
}
}
};
}
this.userInfo = ''+this.pdata.email+' working on project';
this.userInfo2 = ' using '+a+' MB of '+b+' GB ('+p+'%) ';
this.render();
this.onItemsReady.notify();
};
UserBarWidget.prototype.draw = function (){
this.adapter.getUserInfo($.cookie('sid'));
};
UserBarWidget.prototype.clean = function (bar){
if (this.items != null){
for(var i=0;i',infoLabel, splitButton, infoLabel2];
}
};