Blame view

js/app/views/EpnTapUI.js 20 KB
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
1
2
3
4
5
/**
 * Project: AMDA-NG
 * Name: EpnTapUI.js
 * @class amdaUI.EpnTapUI
 * @extends Ext.tab.Panel
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
6
7
8
9
 * @author Nathanael JOURDANE
 * 24/10/2016: file creation
 */

b185823c   Nathanael Jourdane   Use IntervalUI mo...
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 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', {
7055f5d6   Nathanael Jourdane   Code refactoring
32
	storeId:'productTypesStore',
bfcf6dc8   Nathanael Jourdane   Fill the combo-bo...
33
	fields: ['id', 'name']
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
34
35
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
36
37
38
39
40
41
42
43
44
45
46
/**
`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()`).
*/
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
47
Ext.create('Ext.data.Store', {
7055f5d6   Nathanael Jourdane   Code refactoring
48
	storeId:'targetClassesStore',
bfcf6dc8   Nathanael Jourdane   Fill the combo-bo...
49
	fields: ['id', 'name']
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
50
51
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
52
53
54
55
56
57
58
59
60
61
62
/**
`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()`).
*/
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
63
Ext.create('Ext.data.Store', {
7055f5d6   Nathanael Jourdane   Code refactoring
64
	storeId: 'targetNamesStore',
bfcf6dc8   Nathanael Jourdane   Fill the combo-bo...
65
	fields: ['id', 'name']
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
66
67
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/**
`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.
*/
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
85
Ext.create('Ext.data.Store', {
7055f5d6   Nathanael Jourdane   Code refactoring
86
87
	storeId: 'servicesStore',
	fields: ['id', 'nbResults', 'shortName', 'title', 'accessURL']
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
88
89
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/**
`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).
*/
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
109
Ext.create('Ext.data.Store', {
7055f5d6   Nathanael Jourdane   Code refactoring
110
	storeId:'granulesStore',
ced907d1   Nathanael Jourdane   Fix granule type
111
	fields:['num', 'dataproduct_type', 'target_name', 'time_min', 'time_max', 'access_format', 'granule_uid', 'access_estsize', 'access_url', 'thumbnail_url']
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
112
113
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
114
115
116
117
118
119
/**
`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`.
*/
78c2f505   Nathanael Jourdane   Improve granules ...
120
Ext.define('amdaUI.EpnTapUI', {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
121
	extend: 'Ext.panel.Panel',
78c2f505   Nathanael Jourdane   Improve granules ...
122
	alias: 'widget.panelEpnTap',
b185823c   Nathanael Jourdane   Use IntervalUI mo...
123
	requires: ['amdaUI.IntervalUI'],
78c2f505   Nathanael Jourdane   Improve granules ...
124

b185823c   Nathanael Jourdane   Use IntervalUI mo...
125
126
127
	/**
	Method constructor, which basically call the `init()` method to create the EpnTap panel.
	*/
78c2f505   Nathanael Jourdane   Improve granules ...
128
	constructor: function(config) {
78c2f505   Nathanael Jourdane   Improve granules ...
129
130
131
132
		this.init(config);
		this.callParent(arguments);
	},

b185823c   Nathanael Jourdane   Use IntervalUI mo...
133
134
135
136
137
138
139
140
	/**
	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).
	*/
78c2f505   Nathanael Jourdane   Improve granules ...
141
	init: function(config) {
9b951b58   Nathanael Jourdane   Move EPN-TAP modu...
142
		var mod = config.module;
b185823c   Nathanael Jourdane   Use IntervalUI mo...
143
144
145
146
147
148
149
150
151
152
153
154
155

		/************
		*** 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.

e3f1df86   Nathanael Jourdane   Fix tooltip bug.
156
157
158
159
		Other informations are available through an ExtJS Tooltip, on each row:
		- short name;
		- title;
		- access URL.
b185823c   Nathanael Jourdane   Use IntervalUI mo...
160
161
162
163
164

		A click on a service triggers `EpnTapModule.onServiceSelected()`, which basically fills `GranulesGrid` by the
		service granules.
		*/
		var createServicesGrid = function() {
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
165
			var epnTapServicesGrid = new Ext.grid.Panel({
b185823c   Nathanael Jourdane   Use IntervalUI mo...
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
				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()
			});
78c2f505   Nathanael Jourdane   Improve granules ...
182

e3f1df86   Nathanael Jourdane   Fix tooltip bug.
183
184
185
			Ext.create('Ext.tip.ToolTip', {
				target: epnTapServicesGrid.getView().el,
				delegate: epnTapServicesGrid.getView().itemSelector,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
186
187
188
				trackMouse: true,
				listeners: {
					beforeshow: function updateTipBody(tooltip) {
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
189
						var service = epnTapServicesGrid.getView().getRecord(tooltip.triggerElement);
b185823c   Nathanael Jourdane   Use IntervalUI mo...
190
191
192
193
194
195
196
197
						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()
			});
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
198
199

			return epnTapServicesGrid;
b185823c   Nathanael Jourdane   Use IntervalUI mo...
200
201
202
203
204
205
206
		};

		/**
		Create `epnTapGranulesGrid`, an ExtJS grid containing the granules of the selected service in
		`epnTapServiceGrid`.

		For each granule, this grid displays:
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
207
208
209
210
211
212
213
214
215
		- 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.
b185823c   Nathanael Jourdane   Use IntervalUI mo...
216

b185823c   Nathanael Jourdane   Use IntervalUI mo...
217
		Each of these information are displayed in a specific rendering to improve user experience.
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
218
219
220
221
		For more information about these parameters, see https://voparis-confluence.obspm.fr/display/VES/EPN-TAP+V2.0+parameters.

		Other informations are available through an ExtJS Tooltip on each row:
		- currently only the granule thumbnail, in full size.
b185823c   Nathanael Jourdane   Use IntervalUI mo...
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250

		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';
7055f5d6   Nathanael Jourdane   Code refactoring
251
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
252
253
			};

e3f1df86   Nathanael Jourdane   Fix tooltip bug.
254
			var epnTapGranulesGrid = new Ext.grid.Panel({
b185823c   Nathanael Jourdane   Use IntervalUI mo...
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
				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()
			});
b185823c   Nathanael Jourdane   Use IntervalUI mo...
276

e3f1df86   Nathanael Jourdane   Fix tooltip bug.
277
278
279
			Ext.create('Ext.tip.ToolTip', {
				target: epnTapGranulesGrid.getView().el,
				delegate: epnTapGranulesGrid.getView().itemSelector,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
280
281
282
				trackMouse: true,
				listeners: {
					beforeshow: function updateTipBody(tooltip) {
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
283
						var thumb = epnTapGranulesGrid.getView().getRecord(tooltip.triggerElement).get('thumbnail_url');
b185823c   Nathanael Jourdane   Use IntervalUI mo...
284
285
286
287
288
						tooltip.update('<img src="' + thumb + '">');
					}
				},
				renderTo: Ext.getBody()
			});
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
289
290

			return epnTapGranulesGrid;
b185823c   Nathanael Jourdane   Use IntervalUI mo...
291
292
293
294
295
296
297
298
299
300
301
302
303
		};

		/**
		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',
9b951b58   Nathanael Jourdane   Move EPN-TAP modu...
304
				// height: 350,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
305
306
307
308
309
310
311
				layout: { type: 'hbox', pack: 'start', align: 'stretch' },
				items: [
					createServicesGrid(),
					createGranulesGrid()
				],
				listeners: {
					afterrender: function() { mod.onWindowLoaded(self); }
7055f5d6   Nathanael Jourdane   Code refactoring
312
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
			});
		};

		/***************************
		*** 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); }
7055f5d6   Nathanael Jourdane   Code refactoring
339
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
			});
		};

		/**
		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); }
7055f5d6   Nathanael Jourdane   Code refactoring
362
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
			});
		};

		/**
		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); }
7055f5d6   Nathanael Jourdane   Code refactoring
389
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
			});
		};

		/**
		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',
9b951b58   Nathanael Jourdane   Move EPN-TAP modu...
408
					flex: 3,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
					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', {
5e85f9e6   Nathanael Jourdane   Add 'durationLimi...
444
445
				id: 'epnTapTimeSelector',
				durationLimit: 99999
b185823c   Nathanael Jourdane   Use IntervalUI mo...
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
			});
		};

		/***********************
		*** 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); }
7055f5d6   Nathanael Jourdane   Code refactoring
471
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
			});
		};

		/**
		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));
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
572

3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
573
		var myConf = {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
574
575
576
577
578
			items: [
				createServiceFilterPanel(),
				createGridsPanel(),
				createInfoPanel()
			]
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
579
		};
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
580
		Ext.apply(this, Ext.apply(arguments, myConf));
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
581
582
	}
});