Use IntervalUI module, code refactoring, add comments on .js files.

Nathanael Jourdane
1 parent 9cd58692
Showing 5 changed files with 986 additions and 691 deletions Show diff stats
js/app/AmdaApp.js
js/app/controllers/EpnTapModule.js
js/app/views/EpnTapUI.js
js/app/views/IntervalUI.js
php/classes/EpnTapMgr.php
-/** 
+/**
  * Project  : AMDA-NG4
  * Name     : AmdaApp.js
- * @class   amdaApp.AmdaApp 
+ * @class   amdaApp.AmdaApp
  * @extends Ext.ux.desktop.App
  * @brief   Main class defining Amda Desktop and its Modules
  * @author  Ext JS Library 4.0 Copyright(c) 2006-2011 Sencha Inc. licensing@sencha.com
  */
  
- 
+
 Ext.define('amdaApp.AmdaApp', {
     extend: 'Ext.ux.desktop.App',
  
-    requires: [      
+    requires: [
        'Ext.window.MessageBox',
        'Ext.ux.desktop.ShortcutModel',
        'amdaUI.SampToolBarUI',
        'amdaDesktop.DynamicModule',
        'MyDesktop.Settings'
     ],
-    
+
     dynamicModules: {
 	visu : {
     		id          : 'visu-win',
@@ -26,7 +26,7 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
     		title       : 'Visualization',
     		source      : 'amdaDesktop.VisuModule',
     		useLauncher : true
-    	},    
+    	},
 	statistics : {
     		id          : 'statistics-win',
     		icon        : 'icon-statistics',
@@ -97,22 +97,22 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
     		source      : 'amdaDesktop.InteropModule',
     		useLauncher : true
     	},
-      epntap : {
-    		id          : 'epntap-win',
-    		icon        : 'icon-epntap',
-    		title       : 'EPN-TAP data',
-    		source      : 'amdaDesktop.EpnTapModule',
-    		useLauncher : true
-    	},
+		epntap : {
+			id          : 'epntap-win',
+			icon        : 'icon-epntap',
+			title       : 'EPN-TAP data',
+			source      : 'amdaDesktop.EpnTapModule',
+			useLauncher : true
+		},
     	info : {
     		id          : 'info-win',
     		icon        : 'icon-information',
     		title       : 'About AMDA',
     		source      : 'amdaDesktop.AboutModule',
     		useLauncher : false
-    	},	
+    	},
     	explorer : {
-    		id          : 'explorer-win',	
+    		id          : 'explorer-win',
     	    icon        : 'icon-elements',
     	    title       : 'Workspace Explorer',
     	    source      : 'amdaDesktop.ExplorerModule',
@@ -162,13 +162,13 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
     	    useLauncher : false
     	}
     },
-    
-// IDs of Modules working with  parameters; used in Alias Node 
+
+// IDs of Modules working with  parameters; used in Alias Node
     paramModulesID : ['plot-win', 'param-win', 'search-win', 'down-win'],
-   
+
 // Important system constants
     MAX_UPLOADED_FILE_SIZE : 30000000, // 30MB
-    
+
     listeners : {
 		scope : this,
 		beforeunload : function ()
@@ -179,19 +179,19 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
 				interopModule.forceSampDisconnect();
 			return true;
 		},
-		ready : function () 
+		ready : function ()
                 {
 				  //AKKA - Clean user WS
 	          AmdaAction.cleanUserWS(function(res,e){},this);
 		}
         },
-    
+
     init: function() {
         // custom logic before getXYZ methods get called...
  
         this.callParent();
  
-        // now ready...      
+        // now ready...
         //override createWindow method of desktop
         Ext.override(Ext.ux.desktop.Desktop, {
             createWindow: function (config, cls) {
@@ -206,16 +206,16 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
                             w.resizer.widthIncrement = me.xTickSize;
                             w.resizer.heightIncrement = me.yTickSize;
                         }
-                        
+
                         if (w.y < 0)
                             w.el.setY(0);
-                        
+
                         if (w.x + w.width > me.el.getWidth())
                             w.el.setX(me.el.getWidth()-w.width);
-                        
+
                         if (w.y + w.height > me.el.getHeight())
                             w.el.setY((me.el.getHeight()-w.height > 0) ? me.el.getHeight()-w.height : 0);
-                        
+
                     },
                     single: true
                 });
@@ -224,12 +224,12 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
         });
  
     },
-//create InfoBox 
+//create InfoBox
       infoMsg : function(msg) {
 	  Ext.Msg.show({
 	      title: 'AMDA Info',
 	      cls: 'infoMsg',
-	      msg: msg,	 
+	      msg: msg,
 	      modal: false,
 	      autoScroll: true,
 	      resizable: true,
@@ -237,35 +237,35 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
 	      buttons: Ext.Msg.OK
 	  });
 	},
-	
-//create WarningBox 
+
+//create WarningBox
       warningMsg : function(msg) {
 	  Ext.Msg.show({
 	      title: 'Attention',
-	      msg: msg,	 
+	      msg: msg,
 	      icon: Ext.Msg.WARNING,
 	      buttons: Ext.Msg.OK
 	  });
 	},
-	
-//create ErrorBox 
+
+//create ErrorBox
       errorMsg : function(msg) {
 	  Ext.Msg.show({
 	      title: 'Failure',
-	      msg: msg,	 
+	      msg: msg,
 	      icon: Ext.Msg.ERROR,
 	      buttons: Ext.Msg.OK
 	  });
-	},	   
-				  
+	},
+
     getModules : function(){
     	var allModules = [];
-    	
+
     	//Add dynamic modules
     	Ext.Object.each(this.dynamicModules, function(key, def) {
     		allModules.push(new amdaDesktop.DynamicModule(def.id, def.icon, def.title, def.source, def.useLauncher));
     	});
-    	
+
         return allModules;
     },
  
@@ -284,9 +284,9 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
  
             shortcuts: Ext.create('Ext.data.Store', {
                 model: 'Ext.ux.desktop.ShortcutModel',
-                data: [  
-                   { name: 'Help',  iconCls: 'help', module: 'help-win' },  
-                   { name: 'Create/Modify parameter',  iconCls: 'edit', module: 'param-win' },                     
+                data: [
+                   { name: 'Help',  iconCls: 'help', module: 'help-win' },
+                   { name: 'Create/Modify parameter',  iconCls: 'edit', module: 'param-win' },
                    { name: 'Plot data',  iconCls: 'plot', module: 'plot-win'},
                    { name: 'Data mining',  iconCls: 'search', module: 'search-win'},
 		   { name: 'Statistics',  iconCls: 'statistics', module: 'statistics-win'},
@@ -296,8 +296,8 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
                    { name: 'TimeTables operations',   iconCls: 'operations', module: 'ttsOpe-win' },
                    { name: 'Manage catalogs',  iconCls: 'catalog', module: 'catalog-win'},
                    { name: 'Visualize catalogs',  iconCls: 'visu_catalog', module: 'visu-win'},
-                   { name: 'EPN-TAP',   iconCls: 'epntap', module: 'epntap-win' },
-                   { name: 'Interoperability',   iconCls: 'interop', module: 'interop-win' }
+                   { name: 'Interoperability',   iconCls: 'interop', module: 'interop-win' },
+					{ name: 'EPN-TAP',   iconCls: 'epntap', module: 'epntap-win' }
                ]
             }),
  
@@ -310,7 +310,7 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
     getStartConfig : function() {
         var me = this, ret = me.callParent();
         return Ext.apply(ret, {
-            title: sessionID, 
+            title: sessionID,
             iconCls: 'icon-user',
             height: 270,
             toolConfig: {
@@ -322,7 +322,7 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
                         handler: me.onSettings,
                         scope: me
                     },
-                    '-',                    
+                    '-',
      /*               {
                         text : 'Manage Workspaces',
                         iconCls : 'icon-manage-ws',
@@ -372,9 +372,9 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
                             this.getLoadedModule(moduleId.replace('-tool', ''), true, function(module) {
                             	module.createWindow();
                             });
-                            
+
                         },
-                        scope : this  
+                        scope : this
                     }, {
                         text : 'Help',
                         iconCls : 'icon-help',
@@ -407,24 +407,24 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
                     }, '-', {
                         text : 'Logout',
                         iconCls : 'logout',
-                        scope : this,                     
+                        scope : this,
                         handler : me.onLogout
                     }
                 ]
             }
         });
     },
-    
+
     getModuleDefinition: function(id) {
     	return this.getModule(id);
     },
-    
+
     getLoadedModule: function(id, forceLoad, onReady) {
     	var moduleDef = this.getModuleDefinition(id);
     	if (!moduleDef)
     		return null;
     	if (!moduleDef.isReady())
-    	{	
+    	{
     		if (forceLoad)
     		{
     			//loadMask.show();
@@ -440,14 +440,14 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
 			onReady(moduleDef.get());
     	return moduleDef.get();
     },
-    
+
     getTaskbarConfig: function () {
         var ret = this.callParent();
         return Ext.apply(ret, {
             quickStart: [],
             trayItems: [
                 {
-                	name: this.dynamicModules.feedback.title, iconCls: 'icon-feedback', 
+                	name: this.dynamicModules.feedback.title, iconCls: 'icon-feedback',
                 	tooltip: { text: this.dynamicModules.feedback.title, align: 'bl-tl' },
                 	overflowText: this.dynamicModules.feedback.title,
                 	iconCls: this.dynamicModules.feedback.icon,
@@ -460,7 +460,7 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
                 	}
                 },
                 {
-                    name: this.dynamicModules.info.title, iconCls: 'icon-information', 
+                    name: this.dynamicModules.info.title, iconCls: 'icon-information',
                 	tooltip: { text: this.dynamicModules.info.title, align: 'bl-tl' },
                 	overflowText: this.dynamicModules.info.title,
                 	iconCls: this.dynamicModules.info.icon,
@@ -476,7 +476,7 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
                     name: 'Logout', iconCls : 'logout',
                     tooltip: { text: 'Logout', align: 'bl-tl' },
                     overflowText: 'Logout',
-                    scope : this,                     
+                    scope : this,
                     handler : this.onLogout
                 },
                 '-',
@@ -486,23 +486,23 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
     },
  
     onLogout: function (obj,e) {
-    	e.stopEvent();	
-    //	var interopModule = this.getModule(amdaDesktop.InteropModule.id);       
-    	if (isGuest) { 
-           this.guestLogout();             
+    	e.stopEvent();
+    //	var interopModule = this.getModule(amdaDesktop.InteropModule.id);
+    	if (isGuest) {
+           this.guestLogout();
         }
         else {
             this.saveSessionState();
-        }       
+        }
     },
-    
+
     onGetUserInfo : function (result, e){
     	var t = e.getTransaction();
-		if (e.status) 
-		{	
+		if (e.status)
+		{
 			if (result && result.success)
 			{
-				// SUCCESS  
+				// SUCCESS
 				var msg = '<b>Login :</b> '+result['login']+'<br/>';
 				msg += ('<b>Last Name :</b> '+result['name']+'<br/>');
 				msg += ('<b>First Name :</b> '+result['first_name']+'<br/>');
@@ -510,7 +510,7 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
 				msg += ('<b>Email :</b> '+result['email']+'<br/>');
 				msg += ('<b>Registration date :</b> '+result['date']+'<br/>');
 				msg += ('<b>Receive Newsletter :</b> '+(result['news'] == "1"?"true":"false")+'<br/>');
-				
+
 				this.infoMsg(msg);
 			}
 			else
@@ -523,46 +523,46 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
 		{
 			// FAILURE
 			this.errorMsg('Cannot get user info : '+e.message);
-		} 
+		}
 	},
-        
-        
+
+
     guestLogout: function()
     {
         Ext.Msg.show({
-                        title : 'Logout', 
+                        title : 'Logout',
                         msg   :'Your guest workspace is to be deleted. Continue logout ?',
                         buttons : Ext.Msg.YESNO,
-                        iconCls : 'logout', 
+                        iconCls : 'logout',
                         fn : function(btn) {
                           if (btn == 'yes')
                           {
                             AmdaAction.logout(true, function(){
                                 sessionID = '';
-                                window.location.href ='index.html';  
-                            });                                                                                      
-                          }                           
+                                window.location.href ='index.html';
+                            });
+                          }
                         }
-                    });               
+                    });
     },
-    
+
     forceLogout: function()
     {
       //  myDesktopApp.warningMsg('Your guest session is finished');
         AmdaAction.logout(true, function(){
                                 sessionID = '';
-                                window.location.href ='index.html';  
-                            });  
+                                window.location.href ='index.html';
+                            });
     },
-        
+
     saveSessionState : function()
     {
         var me = this;
         Ext.Msg.show({
-                        title : 'Logout', 
+                        title : 'Logout',
                         msg   :'Do you want to keep current windows sizes and locations<br/> for the next sessions?',
                         buttons : Ext.Msg.YESNOCANCEL,
-                        iconCls : 'logout', 
+                        iconCls : 'logout',
                         fn : function(btn) {
 	                  if (btn == 'yes')
 	                  {
@@ -577,8 +577,8 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
                                             window.location.href ='index.html';
                                     }
                             });
-                            Ext.state.Manager.getProvider().saveState();   
-                            AmdaAction.logout();         
+                            Ext.state.Manager.getProvider().saveState();
+                            AmdaAction.logout();
 	                  }
 	                  else if (btn == 'no')
 	                  {
@@ -590,9 +590,9 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
                                             window.location.href ='index.html';
                                     }
                             });
-                            Ext.state.Manager.getProvider().set(me.desktop.id+'_wallpaper',me.desktop.getWallpaper()); 
-                            Ext.state.Manager.getProvider().saveLastTime(); 
-                            AmdaAction.logout(); 
+                            Ext.state.Manager.getProvider().set(me.desktop.id+'_wallpaper',me.desktop.getWallpaper());
+                            Ext.state.Manager.getProvider().saveLastTime();
+                            AmdaAction.logout();
 	                  }
                         }
     			});
@@ -604,7 +604,7 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
         });
         dlg.show();
     },
-    
+
     /**
      * initialization at the start of AMDA-NG webApplication
      */
@@ -612,64 +612,63 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
         moduleIds = new Ext.util.MixedCollection();
         // Adding Workspace Explorer Id
         moduleIds.add(this.dynamicModules.explorer.id);
-                           
+
         moduleIds.each(function(item) {
             this.getLoadedModule(item, true, function (module) {
             	module.createWindow();
             });
         }, this);
-                
+
         if (freeSpace < diskQuota / 20) {
-            myDesktopApp.warningMsg('Think of cleaning up your work space.<br/>Only ' + 
+            myDesktopApp.warningMsg('Think of cleaning up your work space.<br/>Only ' +
             Math.round(freeSpace/1024/1024)+ 'MB of '+Math.round(diskQuota/1024/1024) +
             'MB rests');
         }
-                    
+
         if (isFirstVisit && !isGuest) {
-            if (isSpecialInfo) {                    
+            if (isSpecialInfo) {
                 myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.info.id, true, function(module) {
 			module.createWindow(isSpecialInfo, 'Welcome to AMDA', true);
 		});
             } else {
-	
+
                 myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.help.id, true, function(module) {
 			module.createWindow();
 		});
             }
-        } 
+        }
         else {
             if (isSpecialInfo && !isNewInfo) {
-		myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.info.id, true, function(module) {                    
+		myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.info.id, true, function(module) {
                 	module.createWindow(isSpecialInfo, 'Welcome to AMDA', true);
                	});
             }
         }
-        
+
          if (isNewInfo) {
             myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.info.id, true, function(module) {
-		//  module.createWindow('releaseNotes.' + AMDAVERSION, 'New Release V'+ AMDAVERSION);              
+		//  module.createWindow('releaseNotes.' + AMDAVERSION, 'New Release V'+ AMDAVERSION);
 		module.createWindow(news, 'Amda Latest News');
 	    });
         }
-        
+
         if (isGuest) {
             myDesktopApp.warningMsg("Welcome to Guest Session<br/>Guest session lasts for "+
                                     guestSessionDuration/3600+" h maximum<br/>"+
                                     "For extended use time and functionalities (saved sessions)<br/> please register at amda@irap.omp.eu");
             Ext.Function.defer(myDesktopApp.warningMsg,(guestSessionDuration-300)*1000, this, ["Your session will be closed in 5 min!"]);
-            Ext.Function.defer(myDesktopApp.forceLogout, guestSessionDuration*1000); 
+            Ext.Function.defer(myDesktopApp.forceLogout, guestSessionDuration*1000);
         }
  
-        
-        
+
+
         this.desktop.taskbar.tray.width = 130;
         this.desktop.taskbar.insert(4,new amdaUI.SampToolBarUI({id : 'samptb', onSwitchConnect : function ()
       	  {
         	myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.interop.id, true, function(module) {
         		module.switchSampConnect();
         	});
-        	
+
     	  }}));
     }
 });
-
@@ -7,7 +7,7 @@
  * @author  Nathanael Jourdane
  */
  
-// Load text with Ajax synchronously: takes path to file and optional MIME type
+// Load text with Ajax synchronously: takes path to file and optional MIME type.
 function loadTextFileAjaxSync(filePath, mimeType) {
 	var xmlhttp=new XMLHttpRequest();
 	xmlhttp.open("GET", filePath, false);
@@ -24,47 +24,9 @@ function loadTextFileAjaxSync(filePath, mimeType) {
 	}
 }
  
-function prettify(name) {
-	return name.charAt(0).toUpperCase() + name.replace(/_/g, ' ').substr(1).toLowerCase();
-}
-
-function allPrettify(name) {
-	return 'All ' + (name[name.length-1] == 's' ? name : name + 's').replace(/_/g, ' ').toLowerCase();
-}
-
-function isLatest(newStrDate, oldStrDate) {
-	if (newStrDate === null) {
-		return false;
-	}
-	if (oldStrDate === null) {
-		return true;
-	}
-
-	var newDate = newStrDate.split('/');
-	var oldDate = oldStrDate.split('/');
-
-	if(newDate[2]>oldDate[2]) {
-		return true;
-	} else if(newDate[2]<oldDate[2]) {
-		return false;
-	}
-	if(newDate[1]>oldDate[1]) {
-		return true;
-	} else if(newDate[1]<oldDate[1]) {
-		return false;
-	}
-	if(newDate[0]>oldDate[0]) {
-		return true;
-	} else {
-		return false;
-	}
-}
-
 Ext.define('amdaDesktop.EpnTapModule', {
  
 	extend: 'amdaDesktop.AmdaModule',
-
-	// requires: ['amdaUI.EpnTapUI', 'amdaReader.EpnTapReader'],
 	requires: ['amdaUI.EpnTapUI'],
 	contentId : 'EpnTapUI',
  
@@ -81,8 +43,13 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 	width : 1000,
 	height: 550,
  
-	/** @class Module initialisation. */
+	/**
+	Module initialisation.
+	*/
 	init: function() {
+
+		// TODO: Utiliser des stores pour accéder aux fichiers JS !!
+
 		this.metadata = JSON.parse(loadTextFileAjaxSync('../../generic_data/EpnTapData/metadata.json', 'application/json'));
 		this.services = JSON.parse(loadTextFileAjaxSync('../../generic_data/EpnTapData/services.json', 'application/json'));
 		this.productTypeDict = JSON.parse(loadTextFileAjaxSync('../../generic_data/EpnTapData/dataproduct_types.json', 'application/json'));
@@ -101,36 +68,93 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 		};
 	},
  
+	/**
+	Capitalize a name and replace underscores with spaces.
+	- `name`: The string to make pretty.
+	*/
+	prettify: function(name) {
+		return name.charAt(0).toUpperCase() + name.replace(/_/g, ' ').substr(1).toLowerCase();
+	},
+
+	/**
+	Capitalize a name, replace underscores with spaces, and write it in a plurial form.
+	- `name`: The string to make pretty.
+	*/
+	allPrettify: function(name) {
+		return 'All ' + (name[name.length-1] == 's' ? name : name + 's').replace(/_/g, ' ').toLowerCase();
+	},
+
+	/**
+	Compare two dates formated as dd/mm/yyyy and return:
+	- `true` if `newStrDate` is more recent than `oldStrDate`, or if `oldStrDate` is null;
+	- `false` if `oldStrDate` is more recent than `newStrDate`, or if `newStrDate` is null;
+	- `null` if a date is not well formed.
+	*/
+	isLatest: function(newStrDate, oldStrDate) {
+		if (newStrDate === null) {
+			return false;
+		}
+		if (oldStrDate === null) {
+			return true;
+		}
+
+		var newDate = newStrDate.split('/');
+		var oldDate = oldStrDate.split('/');
+
+		if(newDate[2]>oldDate[2]) {
+			return true;
+		} else if(newDate[2]<oldDate[2]) {
+			return false;
+		}
+		if(newDate[1]>oldDate[1]) {
+			return true;
+		} else if(newDate[1]<oldDate[1]) {
+			return false;
+		}
+		if(newDate[0]>oldDate[0]) {
+			return true;
+		} else {
+			return false;
+		}
+		return null;
+	},
+
+	/****************************
+	*** Service filter events ***
+	****************************/
+
+	/**
+	Trigerred after the render of `gridsPanel` (containing `servicesGrid` and `granulesGrid`). Among other things,
+	initializes the `productType` combobox and the `servicesGrid` table.
+	*/
 	onWindowLoaded: function() {
-		// UI elements
-		this.dataProdutTypeCB = Ext.getCmp('productTypeCB');
-		this.targetClassCB = Ext.getCmp('targetClassCB');
-		this.targetNameCB = Ext.getCmp('targetNameCB');
-		this.startTimeDF = Ext.getCmp('startTimeDF');
-		this.stopTimeDF = Ext.getCmp('stopTimeDF');
-
-		this.servicesGrid = Ext.getCmp('servicesGrid');
-		this.granulesGrid = Ext.getCmp('granulesGrid');
-
-		this.rowsPerPageNf = Ext.getCmp('rowsPerPageNf');
-		this.currentPageLb = Ext.getCmp('currentPageLb');
-		this.totalPagesLb = Ext.getCmp('totalPagesLb');
-
-		this.previousBtn = Ext.getCmp('previousPageBtn');
-		this.nextBtn = Ext.getCmp('nextPageBtn');
-		this.firstBtn = Ext.getCmp('firstPageBtn');
-		this.lastBtn = Ext.getCmp('lastPageBtn');
-
-		this.dataProdutTypeCB.getStore().removeAll();
-		this.dataProdutTypeCB.getStore().add({'id': 'all', 'name': 'All data product types'});
+
+		this.productTypeCB = Ext.getCmp('epnTapProductTypeCB');
+		this.targetClassCB = Ext.getCmp('epnTapTargetClassCB');
+		this.targetNameCB = Ext.getCmp('epnTapTargetNameCB');
+		this.timeSelector = Ext.getCmp('epnTapTimeSelector');
+		this.rowsPerPageNf = Ext.getCmp('epnTapRowsPerPageNf');
+		this.servicesGrid = Ext.getCmp('epnTapServicesGrid');
+		this.granulesGrid = Ext.getCmp('epnTapGranulesGrid');
+		this.currentPageLb = Ext.getCmp('epnTapCurrentPageLb');
+		this.totalPagesLb = Ext.getCmp('epnTapTotalPagesLb');
+		this.firstPageBtn = Ext.getCmp('epnTapFirstPageBtn');
+		this.previousPageBtn = Ext.getCmp('epnTapPreviousPageBtn');
+		this.nextPageBtn = Ext.getCmp('epnTapNextPageBtn');
+		this.lastPageBtn = Ext.getCmp('epnTapLastPageBtn');
+
+		this.timeSelector.setInterval(new Date(), new Date()); // TODO: use min/max dates
+
+		this.productTypeCB.getStore().removeAll();
+		this.productTypeCB.getStore().add({'id': 'all', 'name': 'All data product types'});
 		for (var productTypeId in this.metadata) {
 			if (productTypeId in this.productTypeDict) {
-				this.dataProdutTypeCB.getStore().add({'id': productTypeId, 'name': prettify(this.productTypeDict[productTypeId])});
+				this.productTypeCB.getStore().add({'id': productTypeId, 'name': this.prettify(this.productTypeDict[productTypeId])});
 			} else {
 				console.log('Unknown data product type "' + productTypeId + '"');
 			}
 		}
-		this.dataProdutTypeCB.select('all');
+		this.productTypeCB.select('all');
  
 		this.targetClassCB.getStore().removeAll();
 		this.targetClassCB.getStore().add({'id': 'all', 'name': 'All target names'});
@@ -145,26 +169,28 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 		this.updateServices();
 	},
  
-	// *** form events ***
-
+	/**
+	Trigerred when a new item is selected in `productTypeCB` (see `EpnTapUI.createProductTypeCB()`). Among other things,
+	updates the `targetClassCB` combobox and the `servicesGrid` table.
+	*/
 	onProductTypeCBChanged: function() {
 		this.targetClassCB.getStore().removeAll();
 		this.targetNameCB.getStore().removeAll();
 		this.targetNameCB.disable();
  
-		if (this.dataProdutTypeCB.value == 'all') {
+		if (this.productTypeCB.value == 'all') {
 			this.targetClassCB.disable();
 		} else {
-			var targetClasses = this.metadata[this.dataProdutTypeCB.value];
+			var targetClasses = this.metadata[this.productTypeCB.value];
  
 			if (Object.keys(targetClasses).length == 1) {
-				this.targetClassCB.getStore().add({'id': Object.keys(targetClasses)[0], 'name': prettify(Object.keys(targetClasses)[0])});
+				this.targetClassCB.getStore().add({'id': Object.keys(targetClasses)[0], 'name': this.prettify(Object.keys(targetClasses)[0])});
 				this.targetClassCB.disable();
 				this.targetClassCB.select(this.targetClassCB.getStore().getAt(0)['internalId']);
 			} else {
-				this.targetClassCB.getStore().add({'id': 'all', 'name': allPrettify(this.productTypeDict[this.dataProdutTypeCB.value])});
+				this.targetClassCB.getStore().add({'id': 'all', 'name': this.allPrettify(this.productTypeDict[this.productTypeCB.value])});
 				for (var targetClassId in targetClasses) {
-					this.targetClassCB.getStore().add({'id': targetClassId, 'name': prettify(targetClassId)});
+					this.targetClassCB.getStore().add({'id': targetClassId, 'name': this.prettify(targetClassId)});
 				}
 				this.targetClassCB.select('all');
 				this.targetClassCB.enable();
@@ -175,6 +201,10 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 		this.updateServices();
 	},
  
+	/**
+	Trigerred when a new item is selected in `targetClassCB` (see `EpnTapUI.createTargetClassCB()`). Among other things,
+	updates the `targetNameCB` combobox and the `servicesGrid` table.
+	*/
 	onTargetClassCBChanged: function() {
 		this.targetNameCB.getStore().removeAll();
  
@@ -183,16 +213,16 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 			this.targetNameCB.select('all');
 			this.targetNameCB.disable();
 		} else {
-			var targetNames = this.metadata[this.dataProdutTypeCB.value][this.targetClassCB.value];
+			var targetNames = this.metadata[this.productTypeCB.value][this.targetClassCB.value];
  
 			if (Object.keys(targetNames).length == 1) {
-				this.targetNameCB.getStore().add({'id': Object.keys(targetNames)[0], 'name': prettify(Object.keys(targetNames)[0])});
+				this.targetNameCB.getStore().add({'id': Object.keys(targetNames)[0], 'name': this.prettify(Object.keys(targetNames)[0])});
 				this.targetNameCB.select(this.targetNameCB.getStore().getAt(0)['internalId']);
 				this.targetNameCB.disable();
 			} else {
-				this.targetNameCB.getStore().add({'id': 'all', 'name': allPrettify(this.targetClassCB.value)});
+				this.targetNameCB.getStore().add({'id': 'all', 'name': this.allPrettify(this.targetClassCB.value)});
 				for (var targetNameId in targetNames) {
-					this.targetNameCB.getStore().add({'id': targetNameId, 'name': prettify(targetNameId)});
+					this.targetNameCB.getStore().add({'id': targetNameId, 'name': this.prettify(targetNameId)});
 				}
 				this.targetNameCB.select('all');
 				this.targetNameCB.enable();
@@ -201,89 +231,112 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 		this.updateServices();
 	},
  
+	/**
+	Trigerred when a new item is selected in `targetNameCB` (see `EpnTapUI.createTargetNameCB()`). Updates the
+	`servicesGrid` table.
+	*/
 	onTargetNameCBChanged: function() {
 		this.updateServices();
 	},
  
+	/**
+	Trigerred when the value of `rowsPerPageNf` is updated (see `EpnTapUI.createRowsPerPageNf()`). Do nothing yet, used
+	for debug purposes only.
+	*/
 	onRowsPerPageChanged: function() {
-		console.log("rows per page: " + this.rowsPerPageNf.value);
+		console.log("rows per page: " + this.productTypeCB);
 	},
  
-	// *** Buttons events ***
+	/*********************
+	*** Buttons events ***
+	*********************/
+
+	/**
+	Disable or enable the navigation buttons (see `EpnTapUI.createNavigationPanel()`).
+	*/
+	disableNavBtns: function(firt, previous, next, last) {
+		Ext.getCmp('epnTapFirstPageBtn').setDisabled(firt);
+		Ext.getCmp('epnTapPreviousPageBtn').setDisabled(previous);
+		Ext.getCmp('epnTapNextPageBtn').setDisabled(next);
+		Ext.getCmp('epnTapLastPageBtn').setDisabled(last);
+	},
  
+	/**
+	Trigerred when the `firstPageBtn` button is clicked (see `EpnTapUI.createNavigationPanel()`). Among other things,
+	send a new query and fill `granulesGrid`.
+	*/
 	onFirstPageBtnClicked: function() {
-		this.wait();
-		this.currentPageLb.setText('1');
-
-		this.nextBtn.setDisabled(false);
-		this.lastBtn.setDisabled(false);
-		this.firstBtn.setDisabled(true);
-		this.previousBtn.setDisabled(true);
-
+		var newPageNumber = 1;
+		var limit = Number(this.rowsPerPageNf.value);
+		var offset = 0;
 		var selectedServiceURL = this.services[this.selectedServiceId]['accessurl'];
-		var limit = this.rowsPerPageNf.value;
-		var offset = '0';
  
+		this.wait();
+		this.disableNavBtns(true, true, false, false);
+		this.currentPageLb.setText('' + newPageNumber);
 		AmdaAction.epnTapGetGranules(this.selectedServiceId, selectedServiceURL, this.filter, this.select, limit, offset, this.fillGranules);
 	},
  
+	/**
+	Trigerred when the `previousPageBtn` button is clicked (see `EpnTapUI.createNavigationPanel()`). Among other things,
+	send a new query and fill `granulesGrid`.
+	*/
 	onPreviousPageBtnClicked: function() {
-		this.wait();
 		var newPageNumber = Number(this.currentPageLb.text) - 1;
-		this.currentPageLb.setText('' + newPageNumber);
-
-		this.nextBtn.setDisabled(false);
-		this.lastBtn.setDisabled(false);
-		if (this.currentPageLb.text === '1') {
-			this.previousBtn.setDisabled(true);
-			this.firstBtn.setDisabled(true);
-		}
-
+		var limit = Number(this.rowsPerPageNf.value);
+		var offset = (newPageNumber-1) * limit;
 		var selectedServiceURL = this.services[this.selectedServiceId]['accessurl'];
-		var limit = this.rowsPerPageNf.value;
-		var offset = '' + (newPageNumber-1) * Number(this.rowsPerPageNf.value);
  
+		this.wait();
+		this.currentPageLb.setText('' + newPageNumber);
+		var isFirstPage = this.currentPageLb.text === '1';
+		this.disableNavBtns(isFirstPage, isFirstPage, false, false);
 		AmdaAction.epnTapGetGranules(this.selectedServiceId, selectedServiceURL, this.filter, this.select, limit, offset, this.fillGranules);
 	},
  
+	/**
+	Trigerred when the `nextPageBtn` button is clicked (see `EpnTapUI.createNavigationPanel()`). Among other things,
+	send a new query and fill `granulesGrid`.
+	*/
 	onNextPageBtnClicked: function() {
-		this.wait();
 		var newPageNumber = Number(this.currentPageLb.text) + 1;
-		this.currentPageLb.setText('' + newPageNumber);
-
-		this.previousBtn.setDisabled(false);
-		this.firstBtn.setDisabled(false);
-		if (this.currentPageLb.text === this.totalPagesLb.text) {
-			this.nextBtn.setDisabled(true);
-			this.lastBtn.setDisabled(true);
-		}
-
+		var limit = Number(this.rowsPerPageNf.value);
+		var offset = (newPageNumber-1) * limit;
 		var selectedServiceURL = this.services[this.selectedServiceId]['accessurl'];
-		var limit = this.rowsPerPageNf.value;
-		var offset = '' + (newPageNumber-1) * Number(this.rowsPerPageNf.value);
  
+		this.wait();
+		this.currentPageLb.setText('' + newPageNumber);
+		var isLastPage = this.currentPageLb.text == this.totalPagesLb.text;
+		this.disableNavBtns(false, false, isLastPage, isLastPage);
 		AmdaAction.epnTapGetGranules(this.selectedServiceId, selectedServiceURL, this.filter, this.select, limit, offset, this.fillGranules);
 	},
  
+	/**
+	Trigerred when the `lastPageBtn` button is clicked (see `EpnTapUI.createNavigationPanel()`). Among other things,
+	send a new query and fill `granulesGrid`.
+	*/
 	onLastPageBtnClicked: function() {
-		this.wait();
-		var newPageNumber = this.totalPagesLb.text;
-		this.currentPageLb.setText('' + newPageNumber);
-
-		this.previousBtn.setDisabled(false);
-		this.firstBtn.setDisabled(false);
-		this.nextBtn.setDisabled(true);
-		this.lastBtn.setDisabled(true);
-
+		var newPageNumber = Number(this.totalPagesLb.text);
+		var limit = Number(this.rowsPerPageNf.value);
+		var offset = (newPageNumber-1) * limit;
 		var selectedServiceURL = this.services[this.selectedServiceId]['accessurl'];
-		var limit = this.rowsPerPageNf.value;
-		var offset = '' + (newPageNumber-1) * Number(this.rowsPerPageNf.value);
  
+		console.log(newPageNumber, limit, offset, selectedServiceURL);
+
+		this.wait();
+		this.currentPageLb.setText('' + newPageNumber);
+		this.disableNavBtns(false, false, true, true);
 		AmdaAction.epnTapGetGranules(this.selectedServiceId, selectedServiceURL, this.filter, this.select, limit, offset, this.fillGranules);
 	},
  
-	// *** Grid click events ***
+	/*******************
+	*** Grids events ***
+	*******************/
  
+	/**
+	Trigerred when a row is clicked in `servicesGrid` table (see `EpnTapUI.createServicesGrid()`). Among other things,
+	send a new query and fill `granulesGrid`.
+	*/
 	onServiceSelected: function(selectedServiceId) {
 		this.wait();
 		this.selectedServiceId = selectedServiceId;
@@ -302,64 +355,32 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 			}
 		}
 		this.filter = Array(
-			this.dataProdutTypeCB.value !== 'all' ? this.dataProdutTypeCB.value : null, // product type
+			this.productTypeCB.value !== 'all' ? this.productTypeCB.value : null, // product type
 			this.targetNameCB.value !== 'all' ? this.targetNameCB.value : null, // target name
-			Ext.getCmp('startTimeDF').getRawValue() !== '' ? Ext.getCmp('startTimeDF').getRawValue() : null, // start time
-			Ext.getCmp('stopTimeDF').getRawValue() !== '' ? Ext.getCmp('stopTimeDF').getRawValue() : null // stop time
+			this.timeSelector.getStartTime() !== '' ? this.timeSelector.getStartTime() : null, // start time
+			this.timeSelector.getStopTime() !== '' ? this.timeSelector.getStopTime() : null // stop time
 		);
  
-		var limit = this.rowsPerPageNf.value;
 		AmdaAction.epnTapGetNbRows(selectedServiceId, selectedServiceURL, this.filter, this.updateNbRows);
-		AmdaAction.epnTapGetGranules(selectedServiceId, selectedServiceURL, this.filter, this.select, limit, 0, this.fillGranules);
+		AmdaAction.epnTapGetGranules(selectedServiceId, selectedServiceURL, this.filter, this.select, this.rowsPerPageNf.value, 0, this.fillGranules);
 	},
  
-	onGranuleSelected: function() {
-		// console.log('selected granule: ' + granule.targetName);
+	/**
+	Trigerred when a row is clicked in `granulesGrid` table (see `EpnTapUI.createGranulesGrid()`). Do nothing yet, used
+	for debug purposes only.
+	*/
+	onGranuleSelected: function(ui) {
+		console.log('selected granule: ' + granule.targetName);
 	},
  
-	// *** Other functions ***
-
-	updateNbRows: function(nb_results) {
-		/* /!\ Can not get `this`. */
-		var totalPages = '' + Math.ceil(Number(nb_results) / Ext.getCmp('rowsPerPageNf').value);
-
-		Ext.getCmp('currentPageLb').setText('1');
-		Ext.getCmp('totalPagesLb').setText(totalPages);
-		Ext.getCmp('previousPageBtn').setDisabled(true);
-		Ext.getCmp('firstPageBtn').setDisabled(true);
-		if (totalPages === '1') {
-			Ext.getCmp('nextPageBtn').setDisabled(true);
-			Ext.getCmp('lastPageBtn').setDisabled(true);
-		} else {
-			Ext.getCmp('nextPageBtn').setDisabled(false);
-			Ext.getCmp('lastPageBtn').setDisabled(false);
-		}
-	},
-
-	fillGranules: function(granules) {
-		/* /!\ Can not get `this`. */
-
-		if (granules == null) {
-			console.log("There is no granules to add.");
-		} else {
-			try {
-				console.log('Added granules:', granules);
-				Ext.getCmp('granulesGrid').getStore().removeAll();
-				Ext.getCmp('granulesGrid').getStore().add(granules);
-			} catch( e ) {
-				console.log('Can not add granules: ' + e);
-			}
-		}
-		Ext.getCmp('servicesGrid').setDisabled(false);
-		Ext.getCmp('servicesGrid').getEl().setStyle('cursor', 'default'); // CSS is correctly changed but without visible result.
-	},
-
-	wait: function() {
-		this.servicesGrid.getEl().setStyle('cursor', 'wait');
-		this.servicesGrid.setDisabled(true); // CSS is correctly changed but without visible result.
-	},
+	/**********************
+	*** Other functions ***
+	**********************/
  
-	updateServices: function() {
+	/**
+	Update the services store (see `EpnTapUI.servicesStore`), according to the field values in `serviceFilterPanel`.
+	*/
+	updateServices: function(ui) {
 		this.servicesGrid.getStore().removeAll();
 		this.granulesGrid.getStore().removeAll();
  
@@ -368,9 +389,12 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 		var timeMaxArr = null;
 		var timeMin = null;
 		var timeMax = null;
+		var productType = this.productTypeCB.value;
+		var targetClass = this.targetClassCB.value;
+		var targetName = this.targetNameCB.value;
  
 		var filterDict = new Array();
-		if(this.dataProdutTypeCB.value === 'all') {
+		if(productType === 'all') {
 			for (var dpt in this.metadata) {
 				for (var tc in this.metadata[dpt]) {
 					for (tn in this.metadata[dpt][tc]) {
@@ -378,10 +402,10 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 							service = this.metadata[dpt][tc][tn][serv];
 							timeMinArr = service[1].split('/');
 							filterDict[serv] = service[0] + (serv in filterDict ? filterDict[serv] : 0);
-							if (isLatest(service[1], timeMin)) {
+							if (this.isLatest(service[1], timeMin)) {
 								timeMin = service[1];
 							}
-							if (isLatest(service[2], timeMax)) {
+							if (this.isLatest(service[2], timeMax)) {
 								timeMax = service[2];
 							}
 						}
@@ -389,41 +413,41 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 				}
 			}
 		} else if (this.targetClassCB.value === 'all') {
-			for (var tc in this.metadata[this.dataProdutTypeCB.value]) {
-				for (tn in this.metadata[this.dataProdutTypeCB.value][tc]) {
-					for (serv in this.metadata[this.dataProdutTypeCB.value][tc][tn]) {
-						service = this.metadata[this.dataProdutTypeCB.value][tc][tn][serv];
+			for (var tc in this.metadata[productType]) {
+				for (tn in this.metadata[productType][tc]) {
+					for (serv in this.metadata[productType][tc][tn]) {
+						service = this.metadata[productType][tc][tn][serv];
 						filterDict[serv] = service[0] + (serv in filterDict ? filterDict[serv] : 0);
-						if (isLatest(service[1], timeMin)) {
+						if (this.isLatest(service[1], timeMin)) {
 							timeMin = service[1];
 						}
-						if (isLatest(service[2], timeMax)) {
+						if (this.isLatest(service[2], timeMax)) {
 							timeMax = service[2];
 						}
 					}
 				}
 			}
 		} else if (this.targetNameCB.value === 'all') {
-			for (tn in this.metadata[this.dataProdutTypeCB.value][this.targetClassCB.value]) {
-				for (serv in this.metadata[this.dataProdutTypeCB.value][this.targetClassCB.value][tn]) {
-					service = this.metadata[this.dataProdutTypeCB.value][this.targetClassCB.value][tn][serv];
+			for (tn in this.metadata[productType][targetClass]) {
+				for (serv in this.metadata[productType][targetClass][tn]) {
+					service = this.metadata[productType][targetClass][tn][serv];
 					filterDict[serv] = service[0] + (serv in filterDict ? filterDict[serv] : 0);
-					if (isLatest(service[1], timeMin)) {
+					if (this.isLatest(service[1], timeMin)) {
 						timeMin = service[1];
 					}
-					if (isLatest(service[2], timeMax)) {
+					if (this.isLatest(service[2], timeMax)) {
 						timeMax = service[2];
 					}
 				}
 			}
 		} else {
-			for (serv in this.metadata[this.dataProdutTypeCB.value][this.targetClassCB.value][this.targetNameCB.value]) {
-				service = this.metadata[this.dataProdutTypeCB.value][this.targetClassCB.value][this.targetNameCB.value][serv];
+			for (serv in this.metadata[productType][targetClass][targetName]) {
+				service = this.metadata[productType][targetClass][targetName][serv];
 				filterDict[serv] = service[0] + (serv in filterDict ? filterDict[serv] : 0);
-				if (isLatest(service[1], timeMin)) {
+				if (this.isLatest(service[1], timeMin)) {
 					timeMin = service[1];
 				}
-				if (isLatest(service[2], timeMax)) {
+				if (this.isLatest(service[2], timeMax)) {
 					timeMax = service[2];
 				}
 			}
@@ -443,6 +467,54 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 			var service = this.services[filter[s][0]];
 			this.servicesGrid.getStore().add({'id': filter[s][0], 'nbResults': filter[s][1], 'shortName': service['shortname'], 'title': service['title'], 'accessURL': service['accessurl']});
 		}
+	},
+
+	/**
+	Callback function, called from the PHP script when the query result is received, when a service is selected.
+
+	Among other things, update the `epnTapCurrentPageLb` label (see `EpnTapUI.createNavigationPanel()`).
+	*/
+	updateNbRows: function(nb_results) {
+		var totalPages = '' + Math.ceil(Number(nb_results) / Ext.getCmp('epnTapRowsPerPageNf').value);
+
+		Ext.getCmp('epnTapCurrentPageLb').setText('1');
+		Ext.getCmp('epnTapTotalPagesLb').setText(totalPages);
+
+		Ext.getCmp('epnTapPreviousPageBtn').setDisabled(true);
+		Ext.getCmp('epnTapFirstPageBtn').setDisabled(true);
+		Ext.getCmp('epnTapNextPageBtn').setDisabled(totalPages === '1');
+		Ext.getCmp('epnTapLastPageBtn').setDisabled(totalPages === '1');
+	},
+
+	/**
+	Callback function, called from the PHP script when the query result is received, when a service is selected or a
+	navigation button is clicked.
+
+	Among other things, fill the `epnTapGranulesGrid` table (see `EpnTapUI.granulesStore`).
+	*/
+	fillGranules: function(granules) {
+		if (granules == null) {
+			console.log("There is no granules to add.");
+		} else {
+			try {
+				console.log('Added granules:', granules);
+				Ext.getCmp('epnTapGranulesGrid').getStore().removeAll();
+				Ext.getCmp('epnTapGranulesGrid').getStore().add(granules);
+			} catch( e ) {
+				console.log('Can not add granules: ' + e);
+			}
+		}
+		Ext.getCmp('epnTapServicesGrid').setDisabled(false);
+		Ext.getCmp('epnTapServicesGrid').getEl().setStyle('cursor', 'default'); // CSS is correctly changed but without visible result.
+	},
+
+	/**
+	Called before to send a query. Set the EpnTap panel in "waiting mode", informing to the user that a request is
+	processing. The altered elements are resetted in `fillGranules()`.
+	*/
+	wait: function() {
+		this.servicesGrid.getEl().setStyle('cursor', 'wait');
+		this.servicesGrid.setDisabled(true); // CSS is correctly changed but without visible result.
 	}
  
 });
@@ -3,379 +3,590 @@
  * Name: EpnTapUI.js
  * @class amdaUI.EpnTapUI
  * @extends Ext.tab.Panel
- * @brief client for EPN-TAP services (View)
  * @author Nathanael JOURDANE
  * 24/10/2016: file creation
  */
  
- Ext.create('Ext.data.Store', {
+// TODO: Déplacer les stores dans un fichier séparé dans js.stores !
+
+/**
+`productTypesStore`: An ExtJS Store containing the list of the different data product types defined on all granules, on
+all available EPN-TAP services (defined in `generic_data/EpnTapData/metadata.json`, updated periodically with a cron
+script).
+
+This list is used to fill the `productTypeCB` combo box, which is initilized in `EpnTapModule` at the panel creation.
+
+- `id`: the data product type IDs, according to the EPN-TAP specification (see
+		https://voparis-confluence.obspm.fr/pages/viewpage.action?pageId=1148225);
+- `name`: the data product name, according to the EPN-TAP specification (ibid).
+
+These IDs and names are hard-defined in the JSon file `generic_data/EpnTapData/dataproduct_types.json`.
+
+Notes:
+- if a granule contains a data product type which is not conform to the EPN-TAP definition (ibid), it is not displayed
+in this store and an information message is displayed on the JavaScript console during the panel creation.
+- if a data product type is not present in any of the granules from the EPN-TAP services, it is not present in this
+store.
+*/
+Ext.create('Ext.data.Store', {
 	storeId:'productTypesStore',
 	fields: ['id', 'name']
 });
  
+/**
+`targetClassesStore`: An ExtJS Store containing the list of the different target classes defined on all granules, on
+all available EPN-TAP services (defined in `generic_data/EpnTapData/metadata.json`, updated periodically with a cron
+script), which match with the selected data product type.
+
+This list is used to fill the `targetClassCB` combo box, which is updated by `EpnTapModule` each time a new product type
+is selected.
+
+- `id`: the target class in lowercase, with the underscore between each word;
+- `name`: the target class, capitalized with spaces between each word (done `EpnTapModule.prettify()`).
+*/
 Ext.create('Ext.data.Store', {
 	storeId:'targetClassesStore',
 	fields: ['id', 'name']
 });
  
+/**
+`targetNamesStore`: An ExtJS Store containing the list of the different target names defined on all granules, on
+all available EPN-TAP services (defined in `generic_data/EpnTapData/metadata.json`, updated periodically with a cron
+script), which match with the selected data product and target class.
+
+This list is used to fill the `targetNameCB` combo box, which is updated by `EpnTapModule` each time a new target class
+(or, by transitivity, product type) is selected.
+
+- `id`: the target name in lowercase, with the underscore between each word;
+- `name`: the target name, capitalized with spaces between each word (done `EpnTapModule.prettify()`).
+*/
 Ext.create('Ext.data.Store', {
 	storeId: 'targetNamesStore',
 	fields: ['id', 'name']
 });
  
+/**
+`servicesStore`: An ExtJS Store containing the list of the EPN-TAP services (defined in
+`generic_data/EpnTapData/metadata.json`, updated periodically with a cron script), which contains at least one granule
+matching with the granules filter (the selected data product type, target class and target name).
+
+This list is used to fill the `servicesGrid` table, which is updated by `EpnTapModule` each time a new target name
+(or, by transitivity, target class or product type) is selected.
+
+- `id`: the database name of the service, according to the `table_name` column from the `rr.res_table` in the
+		registry database;
+- `nbResults`: the number of granules matching with the granules filter for this service;
+- `shortName`: the service short name, according to the `short_name` column from the `rr.resource` table in the registry
+		database;
+- `title`: the service title, according to the `res_title` column from the `rr.resource` table in the registry database;
+- `accessURL`: the service access URL, according to the `access_url` column from the `rr.interface` table in the
+		registry database.
+*/
 Ext.create('Ext.data.Store', {
 	storeId: 'servicesStore',
 	fields: ['id', 'nbResults', 'shortName', 'title', 'accessURL']
 });
  
+/**
+`granulesStore`: An ExtJS Store containing the list of granules of the selected service (on `servicesGrid`), which match
+with tge granules filter (the selected data product type, target class and target name).
+
+This list is used to fill the `granulesGrid` table, which is updated by `EpnTapModule` each time a new service is
+selected.
+
+- `num`: the line number, according to the order of the query response and the current page (see `currentPageLb`);
+- `dataproduct_type`: the dataproduct_type EPN-TAP parameter, as defined in
+	https://voparis-confluence.obspm.fr/display/VES/EPN-TAP+V2.0+parameters.
+- `target_name`: the target_name EPN-TAP parameter (ibid);
+- `time_min`: the time_min EPN-TAP parameter (ibid);
+- `time_max`: the time_max EPN-TAP parameter (ibid);
+- `access_format`: the access_format EPN-TAP parameter (ibid);
+- `granule_uid`: the granule_uid EPN-TAP parameter (ibid);
+- `access_estsize`: the access_estsize EPN-TAP parameter (ibid);
+- `access_url`: the access_url EPN-TAP parameter (ibid);
+- `thumbnail_url`: the thumbnail_url EPN-TAP parameter (ibid).
+*/
 Ext.create('Ext.data.Store', {
 	storeId:'granulesStore',
 	fields:['num', 'dataproduct_type', 'target_name', 'time_min', 'time_max', 'access_format', 'granule_uid', 'access_estsize', 'access_url', 'thumbnail_url']
 });
  
+/**
+`EpnTapUI`: The view of the AMDA EPN-TAP module, allowing the user to query and display granules information from
+EPN-TAP services.
+
+Note: The controller part of this module is defined in `js/app/controller/EpnTapModule`.
+*/
 Ext.define('amdaUI.EpnTapUI', {
-	extend: 'Ext.container.Container',
+	extend: 'Ext.panel.Panel',
 	alias: 'widget.panelEpnTap',
+	requires: ['amdaUI.IntervalUI'],
  
-	txtRender: function(val) {
-		return '<p style="white-space: normal;">' + val + '</p>';
-	},
-	linkRender: function(val) {
-		return '<a href="' + val + '">data</a>';
-	},
-	imgRender: function(val) {
-		return '<img width="40px height="40px" src="' + val + '">';
-	},
-	dptRender: function(val) {
-		var productTypeDict = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).productTypeDict;
-		return (val in productTypeDict) ? '<p style="white-space: normal;">' + productTypeDict[val] + '</p>' : '<em>' + val + '</em>';
-	},
-	formatRender: function(val) {
-		var mimetypeDict = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).mimetypeDict;
-		return (val in mimetypeDict) ? mimetypeDict[val] : '<em style="white-space: normal;">' + val + '</em>';
-	},
-	sizeRender: function(val) {
-		var size = parseInt(val);
-		if (isNaN(size)) {
-			return '';
-		} else if (size >= 1024*1024) {
-			return (size/(1024*1024)).toPrecision(3) + 'Go';
-		} else if (size >= 1024) {
-			return (size/1024).toPrecision(3) + 'Mo';
-		} else {
-			return size + 'Ko';
-		}
-	},
-
+	/**
+	Method constructor, which basically call the `init()` method to create the EpnTap panel.
+	*/
 	constructor: function(config) {
 		this.init(config);
 		this.callParent(arguments);
 	},
  
+	/**
+	Create all the EpnTapPanel UI elements, and apply the AMDA module `config` (which includes the created items).
+
+	When the panel is correctly rendered, the panel triggers `EpnTapModule.onWindowLoaded()`.
+
+	Note: All the UI elements creation are defined as functions in this init method and not as methods in order to make
+	them private (ie. to avoid `EpnTapUI.createServicesGrid();`, which doesn't make sense).
+	*/
 	init: function(config) {
+		var mod = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id);
+
+		/************
+		*** Grids ***
+		************/
+
+		/**
+		Create `epnTapServicesGrid`, an ExtJS grid containing the EPN-TAP services matching with the filter form
+		(`serviceFilterPanel`).
+
+		For each service, this grid displays:
+		- the service name;
+		- the number of granules matching with the filter.
+
+		Other informations are available through the tooltip `serviceTooltip`.
+
+		A click on a service triggers `EpnTapModule.onServiceSelected()`, which basically fills `GranulesGrid` by the
+		service granules.
+		*/
+		var createServicesGrid = function() {
+			return new Ext.grid.Panel({
+				id: 'epnTapServicesGrid',
+				title: 'Services',
+				store: Ext.data.StoreManager.lookup('servicesStore'),
+				flex: 1,
+				columns: [
+					{text: 'Name', dataIndex: 'id', flex: 3},
+					{text: 'Results', dataIndex: 'nbResults', flex: 2}
+				],
+				renderer: function(value, metadata,record) {
+					return getExpandableImage(value, metadata,record);
+				},
+				listeners: {
+					'cellclick': function(grid, td, cellIndex, record) { mod.onServiceSelected(record.data['id']); }
+				},
+				renderTo: Ext.getBody()
+			});
+		};
  
-		var epnTapModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id);
-
-		// *** Grids ***
-
-		this.servicesGrid = new Ext.grid.Panel({
-			id: 'servicesGrid',
-			title: 'Services',
-			store: Ext.data.StoreManager.lookup('servicesStore'),
-			flex: 1,
-			columns: [
-				{text: 'Name', dataIndex: 'id', flex: 3},
-				{text: 'Results', dataIndex: 'nbResults', flex: 2}
-			],
-			renderer: function(value, metadata,record) {
-				return getExpandableImage(value, metadata,record);
-			},
-			listeners: {
-				'cellclick': function(grid, td, cellIndex, record) {
-					epnTapModule.onServiceSelected(record.data['id']);
-				}
-			},
-			renderTo: Ext.getBody()
-		});
-
-		this.serviceTooltip = new Ext.tip.ToolTip({
-			id: 'serviceTooltip',
-			target: Ext.getCmp('servicesGrid').getView().el,
-			delegate: Ext.getCmp('servicesGrid').getView().itemSelector,
-			trackMouse: true,
-			listeners: {
-				beforeshow: function updateTipBody(tooltip) {
-					var service = Ext.getCmp('servicesGrid').getView().getRecord(tooltip.triggerElement);
-					var ttContent = '<h3>' + service.get('shortName') + '</h3>';
-					ttContent += '<p>' + service.get('title') + '</p>';
-					ttContent += '<p>' + service.get('accessURL') + '</p>';
-					tooltip.update(ttContent);
-				}
-			},
-			renderTo: Ext.getBody()
-		});
-
-		this.granulesGrid = new Ext.grid.Panel({
-			id: 'granulesGrid',
-			title: 'Granules',
-			store: Ext.data.StoreManager.lookup('granulesStore'),
-			flex: 5,
-			columns: [
-				{ text: 'Num',  dataIndex: 'num', flex: 1, renderer: this.txtRender },
-				{ text: 'Type',  dataIndex: 'dataproduct_type', flex: 2, renderer: this.dptRender },
-				{ text: 'Target', dataIndex: 'target_name', flex: 2, renderer: this.txtRender },
-				{ text: 'Time min', dataIndex: 'time_min', flex: 2, renderer: this.txtRender },
-				{ text: 'Time max', dataIndex: 'time_max', flex: 2, renderer: this.txtRender },
-				{ text: 'Format', dataIndex: 'access_format', flex: 2, renderer: this.formatRender },
-				{ text: 'uid', dataIndex: 'granule_uid', flex: 2, renderer: this.txtRender },
-				{ text: 'Size', dataIndex: 'access_estsize', flex: 1, renderer: this.sizeRender },
-				{ text: 'URL', dataIndex: 'access_url', flex: 1, renderer: this.linkRender },
-				{ text: 'Thumb.', dataIndex: 'thumbnail_url', flex: 1, renderer: this.imgRender}
-			],
-			listeners: {
-				'cellclick': function(grid, td, cellIndex, record) {
-					epnTapModule.onGranuleSelected(record.data['id']);
-				}
-			},
-			renderTo: Ext.getBody()
-		});
-
-		this.granuleTooltip = new Ext.tip.ToolTip({
-			id: 'granuleTooltip',
-			target: Ext.getCmp('granulesGrid').getView().el,
-			delegate: Ext.getCmp('granulesGrid').getView().itemSelector,
-			trackMouse: true,
-			listeners: {
-				beforeshow: function updateTipBody(tooltip) {
-					var thumb = Ext.getCmp('granulesGrid').getView().getRecord(tooltip.triggerElement).get('thumbnail_url');
-					tooltip.update('<img src="' + thumb + '">');
-				}
-			},
-			renderTo: Ext.getBody()
-		});
-
-		// *** Service filter elements, left part ***
-
-		this.productTypeCB = new Ext.form.field.ComboBox({
-			id: 'productTypeCB',
-			fieldLabel: 'Product type',
-			store: Ext.data.StoreManager.lookup('productTypesStore'),
-			queryMode: 'local',
-			displayField: 'name',
-			valueField: 'id',
-			name: 'productType',
-			editable: false,
-			listeners: {
-				'select': function(combo) {
-					epnTapModule.onProductTypeCBChanged(combo.value);
+		/**
+		Create `epnTapServiceTooltip`, an ExtJS tooltip for the `servicesGrid` rows, in order to display additional
+		information for each service, such as:
+			- short name;
+			- title;
+			- access URL.
+		*/
+		var createServiceTooltip = function() {
+			return new Ext.tip.ToolTip({
+				id: 'epnTapServiceTooltip',
+				target: Ext.getCmp('epnTapServicesGrid').getView().el,
+				delegate: Ext.getCmp('epnTapServicesGrid').getView().itemSelector,
+				trackMouse: true,
+				listeners: {
+					beforeshow: function updateTipBody(tooltip) {
+						var service = Ext.getCmp('servicesGrid').getView().getRecord(tooltip.triggerElement);
+						var ttContent = '<h3>' + service.get('shortName') + '</h3>';
+						ttContent += '<p>' + service.get('title') + '</p>';
+						ttContent += '<p>' + service.get('accessURL') + '</p>';
+						tooltip.update(ttContent);
+					}
+				},
+				renderTo: Ext.getBody()
+			});
+		};
+
+		/**
+		Create `epnTapGranulesGrid`, an ExtJS grid containing the granules of the selected service in
+		`epnTapServiceGrid`.
+
+		For each granule, this grid displays:
+			- the row number;
+			- the dataproduct type;
+			- the target name;
+			- the min and max times;
+			- the format;
+			- the UID (granule identifier);
+			- the estimated size;
+			- the URL;
+			- the thumbnail.
+
+		For more information about these parameters, see https://voparis-confluence.obspm.fr/display/VES/EPN-TAP+V2.0+parameters.
+		Each of these information are displayed in a specific rendering to improve user experience.
+		Other informations are available through the tooltip `granuleTooltip`.
+
+		A click on a granule triggers `EpnTapModule.onGranuleSelected()`.
+		*/
+		var createGranulesGrid = function() {
+			var txtRender = function(val) {
+				return '<p style="white-space: normal;">' + val + '</p>';
+			};
+			var linkRender = function(val) {
+				return '<a href="' + val + '">data</a>';
+			};
+			var imgRender = function(val) {
+				return '<img width="40px height="40px" src="' + val + '">';
+			};
+			var dptRender = function(val) {
+				return (val in mod.productTypeDict) ? '<p style="white-space: normal;">' + mod.productTypeDict[val] + '</p>' : '<em>' + val + '</em>';
+			};
+			var formatRender = function(val) {
+				return (val in mod.mimetypeDict) ? mod.mimetypeDict[val] : '<em style="white-space: normal;">' + val + '</em>';
+			};
+			var sizeRender = function(val) {
+				var size = parseInt(val);
+				if (isNaN(size)) {
+					return '';
+				} else if (size >= 1024*1024) {
+					return (size/(1024*1024)).toPrecision(3) + 'Go';
+				} else if (size >= 1024) {
+					return (size/1024).toPrecision(3) + 'Mo';
+				} else {
+					return size + 'Ko';
 				}
-			}
-		});
-
-		this.targetClassCB = new Ext.form.field.ComboBox({
-			id: 'targetClassCB',
-			fieldLabel: 'Target class',
-			store: Ext.data.StoreManager.lookup('targetClassesStore'),
-			queryMode: 'local',
-			displayField: 'name',
-			valueField: 'id',
-			name: 'targetClass',
-			editable: false,
-			listeners: {
-				'select': function(combo) {
-					epnTapModule.onTargetClassCBChanged(combo.value);
+			};
+
+			return new Ext.grid.Panel({
+				id: 'epnTapGranulesGrid',
+				title: 'Granules',
+				store: Ext.data.StoreManager.lookup('granulesStore'),
+				flex: 5,
+				columns: [
+					{ text: 'Num',  dataIndex: 'num', flex: 1, renderer: txtRender },
+					{ text: 'Type',  dataIndex: 'dataproduct_type', flex: 2, renderer: dptRender },
+					{ text: 'Target', dataIndex: 'target_name', flex: 2, renderer: txtRender },
+					{ text: 'Time min', dataIndex: 'time_min', flex: 2, renderer: txtRender },
+					{ text: 'Time max', dataIndex: 'time_max', flex: 2, renderer: txtRender },
+					{ text: 'Format', dataIndex: 'access_format', flex: 2, renderer: formatRender },
+					{ text: 'uid', dataIndex: 'granule_uid', flex: 2, renderer: txtRender },
+					{ text: 'Size', dataIndex: 'access_estsize', flex: 1, renderer: sizeRender },
+					{ text: 'URL', dataIndex: 'access_url', flex: 1, renderer: linkRender },
+					{ text: 'Thumb.', dataIndex: 'thumbnail_url', flex: 1, renderer: imgRender}
+				],
+				listeners: {
+					'cellclick': function(grid, td, cellIndex, record) { mod.onGranuleSelected(record.data['id']); }
+				},
+				renderTo: Ext.getBody()
+			});
+		};
+
+		/**
+		Create `epnTapGranuleTooltip`, an ExtJS tooltip for the `granulesGrid` rows, in order to display additional
+		information for each granule which is currently only the granule thumbnail, in full size.
+		*/
+		var createGranuleTooltip = function() {
+			return new Ext.tip.ToolTip({
+				id: 'epnTapGranuleTooltip',
+				target: Ext.getCmp('granulesGrid').getView().el,
+				delegate: Ext.getCmp('granulesGrid').getView().itemSelector,
+				trackMouse: true,
+				listeners: {
+					beforeshow: function updateTipBody(tooltip) {
+						var thumb = Ext.getCmp('granulesGrid').getView().getRecord(tooltip.triggerElement).get('thumbnail_url');
+						tooltip.update('<img src="' + thumb + '">');
+					}
+				},
+				renderTo: Ext.getBody()
+			});
+		};
+
+		/**
+		Create `epnTapGridsPanel`, an ExtJS Panel, containing `epnTapServicesGrid` and `epnTapGranulesGrid`.
+
+		After the rendering of the grids, it triggers `epnTapModule.onWindowLoaded()`, which basically fill
+		`epnTapServicesGrid` for the first time.
+		*/
+		var createGridsPanel = function() {
+			var self = this;
+			return new Ext.panel.Panel({
+				id: 'epnTapGridsPanel',
+				region: 'center',
+				height: 350,
+				layout: { type: 'hbox', pack: 'start', align: 'stretch' },
+				items: [
+					createServicesGrid(),
+					createGranulesGrid()
+				],
+				listeners: {
+					afterrender: function() { mod.onWindowLoaded(self); }
 				}
-			}
-		});
-
-		this.targetNameCB = new Ext.form.field.ComboBox({
-			id: 'targetNameCB',
-			fieldLabel: 'Target name',
-			store: Ext.data.StoreManager.lookup('targetNamesStore'),
-			queryMode: 'local',
-			displayField: 'name',
-			valueField: 'id',
-			name: 'targetName',
-			triggerAction: 'all',
-			typeAhead: true,
-			mode: 'remote',
-			minChars: 2,
-			forceSelection: true,
-			listeners: {
-				'select': function(combo) {
-					epnTapModule.onTargetNameCBChanged(combo.value);
+			});
+		};
+
+		/***************************
+		*** Service filter panel ***
+		***************************/
+
+		/**
+		Create `epnTapProductTypeCB`, an ExtJS ComboBox, containing a list of product types as defined in
+		`epnTapProductTypesStore`, which is initilized by `EpnTapModule`.
+
+		The selection of a produt type triggers `EpnTapModule.onProductTypeCBChanged()`, which basically update
+		`epnTapTargetClassCB` and `epnTapGranulesGrid`.
+		*/
+		var createProductTypeCB = function() {
+			return new Ext.form.field.ComboBox({
+				id: 'epnTapProductTypeCB',
+				fieldLabel: 'Product type',
+				store: Ext.data.StoreManager.lookup('productTypesStore'),
+				queryMode: 'local',
+				displayField: 'name',
+				valueField: 'id',
+				name: 'productType',
+				editable: false,
+				listeners: {
+					'select': function(combo) { mod.onProductTypeCBChanged(combo.value); }
 				}
-			}
-		});
-
-		// *** Service filter elements, right part ***
-
-		this.startTimeDF = new Ext.form.field.Date({
-			id: 'startTimeDF',
-			fieldLabel: 'Start time',
-			format: 'Y/m/d H:i:s',
-			width: 100,
-			listeners: {
-				'select': function(dateField, value) {
-					epnTapModule.onTargetNameCBChanged(value);
+			});
+		};
+
+		/**
+		Create `epnTapTargetClassCB`, an ExtJS ComboBox, containing a list of target classes corresponding to the
+		selected product type, as defined in `targetClassesStore`, which is initilized by `EpnTapModule`.
+
+		The selection of a target class triggers the `EpnTapModule.onTargetClassCBChanged()`, which basically updates
+		`targetNameCB` and `granulesGrid`.
+		*/
+		var createTargetClassCB = function() {
+			return new Ext.form.field.ComboBox({
+				id: 'epnTapTargetClassCB',
+				fieldLabel: 'Target class',
+				store: Ext.data.StoreManager.lookup('targetClassesStore'),
+				queryMode: 'local',
+				displayField: 'name',
+				valueField: 'id',
+				name: 'targetClass',
+				editable: false,
+				listeners: {
+					'select': function(combo) { mod.onTargetClassCBChanged(combo.value); }
 				}
-			}
-		});
-
-		this.stopTimeDF = new Ext.form.field.Date({
-			id: 'stopTimeDF',
-			fieldLabel: 'Stop time',
-			format: 'Y/m/d H:i:s',
-			width: 100,
-			listeners: {
-				'select': function(dateField, value) {
-					epnTapModule.onTargetNameCBChanged(value);
+			});
+		};
+
+		/**
+		Create `epnTapTargetNameCB`, an ExtJS ComboBox, containing a list of target names corresponding to the selected
+		target class, as defined in `targetNamesStore`, which is initilized by `EpnTapModule`.
+
+		The selection of a target name triggers `EpnTapModule.onTargetNameCBChanged()`, which basically updates
+		`granulesGrid`.
+		*/
+		var createTargetNameCB = function() {
+			return new Ext.form.field.ComboBox({
+				id: 'epnTapTargetNameCB',
+				fieldLabel: 'Target name',
+				store: Ext.data.StoreManager.lookup('targetNamesStore'),
+				queryMode: 'local',
+				displayField: 'name',
+				valueField: 'id',
+				name: 'targetName',
+				triggerAction: 'all',
+				typeAhead: true,
+				mode: 'remote',
+				minChars: 2,
+				forceSelection: true,
+				listeners: {
+					'select': function(combo) { mod.onTargetNameCBChanged(combo.value); }
 				}
-			}
-		});
-
-		this.durationPanel = new Ext.panel.Panel({
-			id: 'duration',
-			layout: { type: 'hbox', pack: 'start', align: 'stretch' },
-			border: false,
-			defaults: { width: 60, margin: '0, 5, 0, 5', xtype: 'numberfield', listeners: { 'select': function(elmt) { epnTapModule.onDurationChanged(elmt); } } },
-			items: [{
-				id: 'days',
-				margin: '0, 5, 0, 0',
-				fieldLabel: 'Duration',
-				emptyText: 'Days',
-				width: 170
-			}, {
-				id: 'hours',
-				emptyText: 'Hours'
-			}, {
-				id: 'minutes',
-				emptyText: 'Min.'
-			}, {
-				id: 'seconds',
-				emptyText: 'Sec.'
-			}]
-		});
-
-		this.rowPerPageNf = new Ext.form.field.Number({
-			id: 'rowsPerPageNf',
-			fieldLabel: 'Rows per page',
-			margin: '4 0 4 0',
-			width: 160,
-			height: 20,
-			value: 20,
-			minValue: 1,
-			maxValue: 2000,
-			listeners: {
-				'change': function(rowPerPageNf, newValue) {
-					epnTapModule.onRowsPerPageChanged(newValue);
+			});
+		};
+
+		/**
+		Create `epnTapServiceFilterPanel`, an ExtJS Panel containing two containers:
+		- the left container, containing the combo boxes (for product type, target class and target name)
+			and the navigation panel;
+		- the right container, containing the time selector.
+		*/
+		var createServiceFilterPanel = function() {
+			return new Ext.panel.Panel({
+				id: 'epnTapServiceFilterPanel',
+				region : 'north',
+				layout: { type: 'hbox', pack: 'start', align: 'stretch' },
+				defaults: { margin: 5 },
+				items: [{ // Left part
+					xtype : 'container',
+					layout: 'form',
+					flex: 2,
+					items: [
+						createProductTypeCB(),
+						createTargetClassCB(),
+						createTargetNameCB(),
+						{
+							xtype: 'panel',
+							layout: { type: 'hbox', pack: 'start', align: 'stretch' },
+							border: false,
+							items: [
+								createRowPerPageNf(),
+								createNavigationPanel()
+							]
+						}
+					]
+				}, { // Right part
+					xtype : 'form',
+					id: 'epnTapIntervalSelector',
+					layout: 'form',
+					border: 'false',
+					flex: 2,
+					items: [
+						createTimeSelector()
+					]
+				}]
+			});
+		};
+
+		/**
+		Create `epnTapTimeSelector`, an IntervalUI object, allowing the user to select a time interval (by filling two
+		dates and/or a duration).
+
+		See `js/app/views/IntervalUI.js` for more information about this component.
+		*/
+		var createTimeSelector = function() {
+			return Ext.create('amdaUI.IntervalUI', {
+				id: 'epnTapTimeSelector'
+			});
+		};
+
+		/***********************
+		*** Navigation panel ***
+		***********************/
+
+		/**
+		Create `epnTapRowsPerPageNf`, a ExtJS Number field, allowing the user to select the number of rows to display in
+		`epnTapGranulesGrid`.
+
+		When a new number is entered, it triggers `EpnTapModule.onRowsPerPageChanged()`.
+		*/
+		var createRowPerPageNf = function() {
+			return new Ext.form.field.Number({
+				id: 'epnTapRowsPerPageNf',
+				fieldLabel: 'Rows per page',
+				margin: '4 0 4 0',
+				width: 160,
+				height: 20,
+				value: 20,
+				minValue: 1,
+				maxValue: 2000,
+				listeners: {
+					'change': function(rowPerPageNf, newValue) { mod.onRowsPerPageChanged(newValue); }
 				}
-			}
-		});
-
-		// *** Panels ***
-
-		this.pageSelectPanel = new Ext.panel.Panel({
-			id: 'pageSelect',
-			border: false,
-			margin: '2 0 2 50',
-			defaults: { margin: '0 5 0 5', width: 20, xtype: 'button', disabled: true},
-			items: [{
-				xtype: 'label',
-				text: 'Page:'
-			}, {
-				id: 'firstPageBtn',
-				text: '|<',
-				tooltip: 'First page',
-				handler: function() { epnTapModule.onFirstPageBtnClicked(); }
-			}, {
-				id: 'previousPageBtn',
-				text: '<',
-				tooltip: 'Previous page',
-				handler: function() { epnTapModule.onPreviousPageBtnClicked(); }
-			}, {
-				xtype: 'label',
-				id: 'currentPageLb',
-				tooltip: 'Current page',
-				text: '-'
-			}, {
-				xtype: 'label',
-				text: '/'
-			}, {
-				xtype: 'label',
-				id: 'totalPagesLb',
-				tooltip: 'Total pages',
-				text: '-'
-			}, {
-				id: 'nextPageBtn',
-				text: '>',
-				tooltip: 'Next page',
-				handler: function() { epnTapModule.onNextPageBtnClicked(); }
-			}, {
-				id: 'lastPageBtn',
-				text: '>|',
-				tooltip: 'Last page',
-				handler: function() { epnTapModule.onLastPageBtnClicked(); }
-			}]
-		});
-
-		this.granulePagePanel = new Ext.panel.Panel({
-			id: 'granulePagePanel',
-			layout: { type: 'hbox', pack: 'start', align: 'stretch' },
-			border: false,
-			items: [this.rowPerPageNf, this.pageSelectPanel]
-		});
-
-		this.serviceFilterPanel = new Ext.panel.Panel({
-			id: 'serviceFilterPanel',
-			region : 'north',
-			layout: { type: 'hbox', pack: 'start', align: 'stretch' },
-			defaults: { margin: 5 },
-			items: [{ // Left part
-				xtype : 'container',
-				layout: 'form',
-				flex: 2,
-				items: [ this.productTypeCB, this.targetClassCB, this.targetNameCB ]
-			}, { // Right part
-				xtype : 'container',
-				layout: 'form',
-				flex: 2,
-				items: [ this.startTimeDF, this.stopTimeDF, this.durationPanel, this.granulePagePanel ]
-			}]
-		});
-
-		this.gridsPanel = new Ext.panel.Panel({
-			id: 'gridsPanel',
-			region: 'center',
-			height: 350,
-			layout: { type: 'hbox', pack: 'start', align: 'stretch' },
-			items: [ this.servicesGrid, this.granulesGrid ],
-			listeners: {
-				afterrender: function() { epnTapModule.onWindowLoaded(); }
-			}
-		});
-
-		this.infoPanel = new Ext.panel.Panel({
-			id: 'infoPanel',
-			region: 'south',
-			title: 'Information',
-			collapsible: true,
-			flex: 0,
-			height: 100,
-			autoHide: false,
-			bodyStyle: 'padding: 5px',
-			iconCls: 'icon-information',
-			loader: { autoLoad: true, url: helpDir + 'epnTapHOWTO' }
-		});
+			});
+		};
+
+		/**
+		Create `epnTapNavigationPanel`, an ExtJSPanel containing several elements in order to navigate through the
+		different pages of the query result. If the number of results is highter than the `epnTapRowsPerPageNf` field
+		value, the result appears to be displayed in different pages. This panel is used to select and display the page
+		number, mainly with these following elements:
+		- `epnTapFirstPageBtn`: an ExtJS Button, used to come back to the first page of result,
+				handling `EpnTapModule.onFirstPageBtnClicked()`;
+		- `epnTapPreviousPageBtn`: an ExtJS Button, used to come back to the previous page of result,
+				handling `EpnTapModule.onPreviousPageBtnClicked()`;
+		- `epnTapCurrentPageLb`: an ExtJS Label, displaying the actual current page; TODO: use a Number field instead!
+		- `epnTapTotalPagesLb`: an ExtJS Label, displaying the total page number of results (according to the
+		`epnTapRowsPerPageNf` field value);
+		- `epnTapNextPageBtn`: an ExtJS Button, used to go to the next page of result,
+				handling `EpnTapModule.onNextPageBtnClicked()`;
+		- `epnTapLastPageBtn`: an ExtJS Button, used to come back to the last page of result,
+				handling `EpnTapModule.onLastPageBtnClicked()`.
+
+		Note: Pages are not actually a "graphical filter": when the user navigate through the pages, a new query is send
+		to the server with the corresponding range, which improves the response time on large requests.
+		*/
+		var createNavigationPanel = function() {
+			return new Ext.panel.Panel({
+				name: 'epnTapNavigationPanel',
+				border: false,
+				margin: '2 0 2 50',
+				defaults: { margin: '0 5 0 5', width: 20, xtype: 'button', disabled: true},
+				items: [{
+					xtype: 'label',
+					text: 'Page:'
+				}, {
+					id: 'epnTapFirstPageBtn',
+					text: '|<',
+					tooltip: 'First page',
+					handler: function() { mod.onFirstPageBtnClicked(); }
+				}, {
+					id: 'epnTapPreviousPageBtn',
+					text: '<',
+					tooltip: 'Previous page',
+					handler: function() { mod.onPreviousPageBtnClicked(); }
+				}, {
+					xtype: 'label',
+					id: 'epnTapCurrentPageLb',
+					tooltip: 'Current page',
+					text: '-'
+				}, {
+					xtype: 'label',
+					text: '/'
+				}, {
+					xtype: 'label',
+					id: 'epnTapTotalPagesLb',
+					tooltip: 'Total pages',
+					text: '-'
+				}, {
+					id: 'epnTapNextPageBtn',
+					text: '>',
+					tooltip: 'Next page',
+					handler: function() { mod.onNextPageBtnClicked(); }
+				}, {
+					id: 'epnTapLastPageBtn',
+					text: '>|',
+					tooltip: 'Last page',
+					handler: function() { mod.onLastPageBtnClicked(); }
+				}]
+			});
+		};
+
+		/*******************
+		*** Other panels ***
+		*******************/
+
+		/**
+		Create `epnTapInfoPanel`, an ExtJS Panel used to display a brief user guide about how to use this module.
+		*/
+		var createInfoPanel = function() {
+			return new Ext.panel.Panel({
+				id: 'epnTapInfoPanel',
+				region: 'south',
+				title: 'Information',
+				collapsible: true,
+				flex: 0,
+				height: 100,
+				autoHide: false,
+				bodyStyle: 'padding: 5px',
+				iconCls: 'icon-information',
+				loader: { autoLoad: true, url: helpDir + 'epnTapHOWTO' }
+			});
+		};
+
+		// TODO tester ceci:
+		// config.title = 'EPN-TAP';
+		// config.layout = 'border';
+		// config.items = [
+		// 	createServiceFilterPanel(config.targetName),
+		// 	createGridsPanel(),
+		// 	createInfoPanel()
+		// ];
+		// Ext.apply(this, Ext.apply(arguments, config));
  
 		var myConf = {
 			width: 1000,
 			height: 550,
 			layout: 'border',
-			items: [ this.serviceFilterPanel, this.gridsPanel, this.infoPanel ]
+			items: [
+				createServiceFilterPanel(),
+				createGridsPanel(),
+				createInfoPanel()
+			]
 		};
-
 		Ext.apply(this, Ext.apply(arguments, myConf));
-
 	}
 });
@@ -6,7 +6,7 @@
  * @brief    common component to select interval
  * @author 	 Benjamin
  * @version  $Id: IntervalUI.js 2077 2014-02-11 11:33:36Z elena $
- * @todo Validations 
+ * @todo Validations
  *****************************************************************************
  * FT Id     :   Date   : Name - Description
  ******************************************************************************
@@ -15,17 +15,21 @@
  
 Ext.define('amdaUI.IntervalUI', {
     extend: 'Ext.container.Container',
-    
     alias: 'widget.intervalSelector',
-
     activeField : null,
-    
+
 	constructor: function(config) {
 		this.init(config);
 		this.callParent(arguments);
 	},
-    
-	setInterval : function(startDate,stopDate)
+
+	/**
+		Set the start and stop date, and update the duration field.
+		- startDate: A Extjs Date object representing the new start time.
+		- stopDate: A Extjs Date object representing the new stop time.
+		- return: None.
+	*/
+	setInterval : function(startDate, stopDate)
 	{
 		// get the search form
         var form = this.findParentByType('form').getForm();
@@ -33,44 +37,55 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
         var startField = form.findField('startDate');
         // get stop field
         var stopField = form.findField('stopDate');
-        
+
         if (startField != null)
         	startField.setValue(startDate);
-        
+
         if (stopField != null)
         	stopField.setValue(stopDate);
-        
+
         this.updateDuration();
 	},
-	
+
+	/**
+		Get the start time field value.
+		- return: A Extjs Date object representing the start time.
+	*/
 	getStartTime : function()
 	{
 		// get the search form
         var form = this.findParentByType('form').getForm();
         // get start field
         var startField = form.findField('startDate');
-        
+
         return startField.getValue();
 	},
-	
+
+	/**
+		Get the stop time field value.
+		- return: A Extjs Date object representing the stop time.
+	*/
 	getStopTime : function()
 	{
 		// get the search form
         var form = this.findParentByType('form').getForm();
         // get stop field
         var stopField = form.findField('stopDate');
-        
-        return stopField.getValue();		
+
+        return stopField.getValue();
 	},
-	
-    updateDuration: function() {
  
+	/*
+		#### Private methods from here ####
+	*/
+
+    updateDuration: function() {
         // get the search form
         var form = this.findParentByType('form').getForm();
         // get start value
-        var start = form.findField('startDate').getValue();
+        var start = this.getStartTime();
         // get stop value
-        var stop = form.findField('stopDate').getValue();
+        var stop = this.getStopTime();
         // if duration computable
         if (stop != null && start != null) {
  
@@ -78,18 +93,17 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
             var zoneOffset = stop.getTimezoneOffset() - start.getTimezoneOffset();
             // compute duration
             var diff = stop - start - zoneOffset*60000;
-            
+
             var durationDays = Math.floor(diff/86400000);
             // set all duration values
-            form.findField('durationDay').setValue(Ext.String.leftPad(durationDays,4,'0')); 
+            form.findField('durationDay').setValue(Ext.String.leftPad(durationDays,4,'0'));
             form.findField('durationHour').setValue(Ext.String.leftPad(Math.floor(diff/3600000 % 24),2,'0'));
             form.findField('durationMin').setValue(Ext.String.leftPad(Math.floor(diff/60000 % 60),2,'0'));
             form.findField('durationSec').setValue(Ext.String.leftPad(Math.floor(diff/1000 % 60),2,'0'));
-           
-            if (durationDays > 9999) {                   
+
+            if (durationDays > 9999) {
                 form.findField('durationDay').markInvalid('Maximum interval is 9999 days!');
             }
-            
         }
  
     },
@@ -99,13 +113,12 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
         var form = this.findParentByType('form').getForm();
         // get global validation status for duration fields
         return (
-                form.findField('durationDay').isValid() && form.findField('durationHour').isValid() 
+                form.findField('durationDay').isValid() && form.findField('durationHour').isValid()
                 && form.findField('durationMin').isValid() && form.findField('durationSec').isValid()
         );// return true if all duration fields are Valid false otherwise
     },
  
     updateStop: function() {
-
         // get the time form
         var form = this.findParentByType('form').getForm();
         // get duration value
@@ -121,68 +134,72 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
         form.findField('stopDate').setValue(stop);
  
     },
-	
-	onChangeStartField : function(field, newValue, oldValue)         
-	{           
-            if (field.isValid())  {
-            // get the search form
-                var form = this.findParentByType('form').getForm();
-                // set to the stop datefield the newValue as minValue
-                form.findField('stopDate').setMinValue(newValue);
-                // if it's a user modification
-                if (oldValue != null && this.activeField == 'start')  {
-                    // launch the update of duration fields
-                    this.updateDuration();
-                }
-        }	
+
+	onChangeStartField : function(field, newValue, oldValue)
+	{
+        if (field.isValid())  {
+        // get the search form
+            var form = this.findParentByType('form').getForm();
+            // set to the stop datefield the newValue as minValue
+            form.findField('stopDate').setMinValue(newValue);
+            // if it's a user modification
+            if (oldValue != null && this.activeField == 'start')  {
+                // launch the update of duration fields
+                this.updateDuration();
+            }
+    }
 	},
-	
-	onChangeStopField: function(field, newValue, oldValue){
-        if (field.isValid() && oldValue != null  && this.activeField == 'stop')  {
-            // launch the update of duration fields                              
-            this.updateDuration();  
-        }       
+
+	onChangeStopField: function(field, newValue, oldValue) {
+        if (field.isValid() && oldValue != null  && this.activeField == 'stop') {
+            // launch the update of duration fields
+            this.updateDuration();
+        }
     },
-	
+
 	getDateField : function(fieldName,fieldText,fieldId,onChangeField)
 	{
 		return {
 			layout: {type: 'hbox', align: 'middle'},
             items: [
-                { 
-                    xtype: 'datefield', name: fieldName, format: 'Y/m/d H:i:s',
-                    enforceMaxLength : true,
-                    maxLength: 19,
-                    fieldLabel: fieldText, labelAlign: 'right', labelWidth: 60,
+                {
+					xtype: 'datefield',
+					name: fieldName,
+					format: 'Y/m/d H:i:s',
+					enforceMaxLength: true,
+					maxLength: 19,
+					fieldLabel: fieldText,
+					labelAlign: 'right',
+					labelWidth: 60,
                     listeners: {
                         change: onChangeField,
                         focus: function(field) {
                             this.activeField = fieldId;
                         },
                         scope : this
-                    } 
-                } 
-            ]       
+                    }
+                }
+            ]
         };
 	},
-	
+
 	getStartField : function()
 	{
-		return this.getDateField('startDate','Start Time','start',this.onChangeStartField);
+		return this.getDateField('startDate','Start Time','start', this.onChangeStartField);
 	},
-	
+
 	getStopField : function()
 	{
 		return this.getDateField('stopDate','Stop Time','stop',this.onChangeStopField);
 	},
-	
+
 	getDurationField : function()
 	{
             return {
             layout: {type: 'hbox', align: 'middle'},
             height: 45,
-            defaults: { 
-                xtype: 'textfield', labelAlign: 'top', width: 30, 
+            defaults: {
+                xtype: 'textfield', labelAlign: 'top', width: 30,
                 allowBlank: false, maxLength:2, enforceMaxLength : true,
                 hideTrigger: true,
                 regex: /^[0-9]([0-9])*$/i,
@@ -190,15 +207,15 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
                     change: function(field, newValue, oldValue){
                         if (this.isValidDuration() && oldValue != null && this.activeField == 'duration')  {
                             // launch the update of stop datefield
-                            this.updateStop();  
-                        }       
+                            this.updateStop();
+                        }
                     },
                     focus: function(field) {
-                        this.activeField = 'duration';                  
-                    },  
+                        this.activeField = 'duration';
+                    },
                     scope : this
-                } 
-            },                           
+                }
+            },
             items:[
                 { xtype: 'displayfield', labelWidth: 60, labelAlign: 'right', width: 60, fieldLabel: '<br>Duration'},
                 { xtype: 'component', width: 5},
@@ -206,20 +223,19 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
                 { xtype: 'component', width: 5},
                 { name: 'durationHour', fieldLabel: 'Hrs'},
                 { xtype: 'component', width: 5},
-                { name: 'durationMin', fieldLabel: 'Mins'},  
+                { name: 'durationMin', fieldLabel: 'Mins'},
                 { xtype: 'component', width: 5},
                 { name: 'durationSec', fieldLabel: 'Secs'}
             ]
         };
 	},
-	
+
     init : function(config) {
-        
         var me = this;
-        
+
         var myConf = {
                     border: false,
-                    plain: true, 
+                    plain: true,
                     flex: 1,
                     layout: 'anchor',
                     defaults: { height : 30, xtype : 'container'},
@@ -230,9 +246,6 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
                             me.getDurationField()
                         ]
         };
-
-        Ext.apply (this , Ext.apply (arguments, myConf));  
+        Ext.apply (this , Ext.apply (arguments, myConf));
 	}
 });
-    
-    
 \ No newline at end of file
@@ -54,7 +54,7 @@ class EpnTapMgr {
  
 	/* filter order: product type, target name, time min, time max */
 	public function getGranules($table_name, $access_url, $filter, $select, $limit, $offset) {
-		$query = "SELECT TOP $limit " . join(', ', $select) . " FROM $table_name.epn_core " . $this->createFilter($filter[0], $filter[1], $filter[2], $filter[3]) . " OFFSET $offset";
+		$query = "SELECT TOP {$limit} " . join(', ', $select) . " FROM {$table_name}.epn_core " . $this->createFilter($filter[0], $filter[1], $filter[2], $filter[3]) . " OFFSET {$offset}";
 		// return $query;
 		$result = $this->request($access_url, $query);
 		for ($i = 0 ; $i < sizeof($result) ; $i++) {
@@ -67,7 +67,7 @@ class EpnTapMgr {
  
 	/* filter order: product type, target name, time min, time max */
 	public function getNbRows($table_name, $access_url, $filter) {
-		$query = "SELECT COUNT(*) AS nb_rows FROM $table_name.epn_core " . $this->createFilter($filter[0], $filter[1], $filter[2], $filter[3]);
+		$query = "SELECT COUNT(*) AS nb_rows FROM {$table_name}.epn_core " . $this->createFilter($filter[0], $filter[1], $filter[2], $filter[3]);
 		// return $query;
 		return $this->request($access_url, $query)[0]['nb_rows'];
 	}