views:

221

answers:

0

Hi,

I need help to better simplify this process. In order to fully comprehend how everything fits together please refer to my previous post - My Web based system Basically, I want to send more commands to this procedure that I have written. Write now there is only one function I have implemented, detect, but I want to add more in the future ie.ResetDevice,BlockDevice,Encrypt etc. ie.

MyApp.Request = {
    detect:function(request_id,callback){
    ...}
    reset:function(request_id,callback){
    ...}
    encrypt:function(request_id,callback){
    ...}

However, I find it somewhat repetitive to create a Ext.Ajax.request for each new function (var task = function() in this case)

Also on calling one of these functions, I need to copy/paste the same method to show progress bar and hide it on completion every time. This increases the lines of code significantly

Herewith my code:

1.Request.js

Ext.ns('MyApp')
 MyApp.Request = {
    detect:function(request_id,callback){
        var task = function(){
        Ext.Ajax.request({
            url: 'requests.php',
            params:{
                action:'detect',
                'request_id':request_id 
                },
            timeout:30000, //30 seconds
            success:function(response){//serverside response
                var result = Ext.decode(response.responseText); //convert to js objects
                if(result.success == true){//device was detected
                    cons.log('success, device was detected');
                    cons.log(result);
                    Ext.TaskMgr.stop(runTask);
                    callback(result);
                }else{
                    if(result.done == true){
                        Ext.TaskMgr.stop(runTask);
                        Ext.MessageBox.hide();
                        Ext.Msg.show({
                            title:'Error',
                            msg:result.attrs.msg,
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                            });
                            Ext.MessageBox.getDialog().getEl().setStyle('z-index','80000');                        
                    }else{
                        if(runTask.taskRunCount >=10){
                            //retry limit exceeeded
                            cons.log('request timed out');
                            Ext.Msg.show({
                            title:'Error',
                            msg:"The request timed out on waiting for response from server",
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                            });
                            Ext.MessageBox.getDialog().getEl().setStyle('z-index','80000');
                        }
                    }
                }
            },
            failure:function(response){//server side response
                var result = Ext.decode(response.responseText); //convert to js objects
                cons.log('server error');
                cons.log(result);
                Ext.TaskMgr.stop(runTask);
                //hide progress
                Ext.MessageBox.hide();
                //show error
                alert('Server Failure');
            }
        })
        }
        var runTask = {
            run: task,
            interval:2000,
            repeat:10
            };
        Ext.TaskMgr.start(runTask);
    }
}    

2.Caller.js
This is how the function is called in js

onDetectClick:function(){    
var device_params = {
  form:Ext.ux.FormHelper.getValues(this)//port,baud etc
};
MyApp.request(this.module,'detect',{
  params: Ext.encode(device_params)
},MyApp.callback({
  customBehavior:this.parseDeviceIdData.createDelegate(this)
})
);  
 },
parseDeviceIdData:function(result){ //the result from the inserted request record
  _this = this;
  cons.log('parsing data');
  Ext.MessageBox.wait("Processing", 'Please wait...');
  Ext.MessageBox.getDialog().getEl().setStyle('z-index','70000');      
  if(result.success == true){
      console.log('request record exists');
      MyApp.Request.detect(result.request_id,function(response){    
    var record = response.attrs;    
    _this.find('name','device_id')[0].setValue(record.device_id);   
    Ext.MessageBox.hide();
      });
    }else{
      //record was never inserted in requests
      Ext.MessageBox.hide();
      Ext.Msg.show({
    title:'Request Failed',
        msg:"Error, The request was not found in the database",
        icon: Ext.MessageBox.ERROR,
        buttons: Ext.Msg.OK
        });
        Ext.MessageBox.getDialog().getEl().setStyle('z-index','80000'); 
    }      
  }  

Any suggestions are more than welcome! I can see the pattern in the logic but lack some expertise on how to better the code for frequent re-use.

Thanks