Blame view

js/app/views/EpnTapUI.js 22.8 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
/**
`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.
*/
b083bc63   Nathanael Jourdane   Update productTyp...
29
Ext.create('Ext.data.ArrayStore', {
7055f5d6   Nathanael Jourdane   Code refactoring
30
	storeId:'productTypesStore',
bfcf6dc8   Nathanael Jourdane   Fill the combo-bo...
31
	fields: ['id', 'name']
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
32
33
});

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

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

12c10cdb   Nathanael Jourdane   Get the list of s...
66
67
68
69
70
71
72
/**
`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.
8d5634e3   Nathanael Jourdane   Use epn-tap store...
73

12c10cdb   Nathanael Jourdane   Get the list of s...
74
75
76
77
78
79
80
81
82
- `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.
*/
8d5634e3   Nathanael Jourdane   Use epn-tap store...
83
Ext.create('Ext.data.Store', {
12c10cdb   Nathanael Jourdane   Get the list of s...
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
	storeId: 'servicesStore',
	fields: [
		{name: 'id', type: 'string'},
		{name: 'short_name', type: 'string'},
		{name: 'res_title', type: 'string'},
		{name: 'ivoid', type: 'string'},
		{name: 'access_url', type: 'string'},
		{name: 'table_name', type: 'string'},
		{name: 'content_type', type: 'string'},
		{name: 'creator_seq', type: 'string'},
		{name: 'content_level', type: 'string'},
		{name: 'reference_url', type: 'string'},
		{name: 'created', type: 'date', dateFormat: 'c'},
		{name: 'updated', type: 'date', dateFormat: 'c'},
		{name: 'nb_results', type: 'integer'}
a8794c12   Nathanael Jourdane   Big refactoring (...
99
	]
8d5634e3   Nathanael Jourdane   Use epn-tap store...
100
101
});

12c10cdb   Nathanael Jourdane   Get the list of s...
102
103
104
/**
`metadataStore`: [...]
*/
8d5634e3   Nathanael Jourdane   Use epn-tap store...
105
106
107
108
109
110
Ext.create('Ext.data.ArrayStore', {
	storeId: 'metadataStore',
	fields: [
		{name: 'dataproduct_type', type: 'string', mapping: 0},
		{name: 'target_class', type: 'string', mapping: 1},
		{name: 'target_name', type: 'string', mapping: 2},
12c10cdb   Nathanael Jourdane   Get the list of s...
111
		{name: 'service_id', type: 'string', mapping: 3},
8d5634e3   Nathanael Jourdane   Use epn-tap store...
112
113
114
115
116
117
		{name: 'nb_results', type: 'integer', mapping: 4},
		{name: 'time_min', type: 'date', dateFormat: 'd/m/Y', mapping: 5},
		{name: 'time_max', type: 'date', dateFormat: 'd/m/Y', mapping: 6}
	],
	proxy: {
		type: 'ajax',
784cf22c   Nathanael Jourdane   Fix crash when ep...
118
119
		// url : '../../../generic_data/EpnTapData/metadata.json'
		url : 'generic_data/EpnTapData/metadata.json'
8d5634e3   Nathanael Jourdane   Use epn-tap store...
120
121
122
	}
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
123
/**
b185823c   Nathanael Jourdane   Use IntervalUI mo...
124
`granulesStore`: An ExtJS Store containing the list of granules of the selected service (on `servicesGrid`), which match
ba6dfa5e   Nathanael Jourdane   (regression bug) ...
125
with the granules filter (the selected data product type, target class and target name).
b185823c   Nathanael Jourdane   Use IntervalUI mo...
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

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...
142
Ext.create('Ext.data.Store', {
7055f5d6   Nathanael Jourdane   Code refactoring
143
	storeId:'granulesStore',
44c334be   Nathanael Jourdane   When lauched from...
144
	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...
145
146
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
147
148
149
150
151
152
/**
`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 ...
153
Ext.define('amdaUI.EpnTapUI', {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
154
	extend: 'Ext.panel.Panel',
78c2f505   Nathanael Jourdane   Improve granules ...
155
	alias: 'widget.panelEpnTap',
b185823c   Nathanael Jourdane   Use IntervalUI mo...
156
	requires: ['amdaUI.IntervalUI'],
78c2f505   Nathanael Jourdane   Improve granules ...
157

98760ae1   Nathanael Jourdane   BugFix window siz...
158
159
	// width: 800,
	// height: 600,
a048eff4   Nathanael Jourdane   Add EPN-TAP to Am...
160

b185823c   Nathanael Jourdane   Use IntervalUI mo...
161
162
163
	/**
	Method constructor, which basically call the `init()` method to create the EpnTap panel.
	*/
78c2f505   Nathanael Jourdane   Improve granules ...
164
	constructor: function(config) {
78c2f505   Nathanael Jourdane   Improve granules ...
165
166
167
168
		this.init(config);
		this.callParent(arguments);
	},

b185823c   Nathanael Jourdane   Use IntervalUI mo...
169
170
171
172
173
174
175
176
	/**
	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 ...
177
	init: function(config) {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
178
179
180
181
182
183
184
185
186
187
188
189
		/************
		*** 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.
190
191
192
193
		Other informations are available through an ExtJS Tooltip, on each row:
		- short name;
		- title;
		- access URL.
b185823c   Nathanael Jourdane   Use IntervalUI mo...
194
195
196
197
198

		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.
199
			var epnTapServicesGrid = new Ext.grid.Panel({
b185823c   Nathanael Jourdane   Use IntervalUI mo...
200
201
202
203
				id: 'epnTapServicesGrid',
				title: 'Services',
				store: Ext.data.StoreManager.lookup('servicesStore'),
				flex: 1,
ba6dfa5e   Nathanael Jourdane   (regression bug) ...
204
				height: 405,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
205
				columns: [
3a42858d   Nathanael Jourdane   Update the number...
206
207
					{text: 'Name', dataIndex: 'short_name', flex: 1},
					{text: '~Nb results', dataIndex: 'nb_results', flex: 1}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
208
				],
8d5634e3   Nathanael Jourdane   Use epn-tap store...
209
				renderer: function(value, metadata, record) {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
210
211
					return getExpandableImage(value, metadata,record);
				},
8d5634e3   Nathanael Jourdane   Use epn-tap store...
212
213
214
215
216
217
218
219
				viewConfig: {
					forceFit: true,
					getRowClass: function(record, index) {
						if (record.get('nb_results') === 0) {
							return 'disabled_row';
						}
					}
				},
b185823c   Nathanael Jourdane   Use IntervalUI mo...
220
221
				renderTo: Ext.getBody()
			});
78c2f505   Nathanael Jourdane   Improve granules ...
222

e3f1df86   Nathanael Jourdane   Fix tooltip bug.
223
224
225
			Ext.create('Ext.tip.ToolTip', {
				target: epnTapServicesGrid.getView().el,
				delegate: epnTapServicesGrid.getView().itemSelector,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
226
227
228
				trackMouse: true,
				listeners: {
					beforeshow: function updateTipBody(tooltip) {
12c10cdb   Nathanael Jourdane   Get the list of s...
229
230
231
232
233
234
235
236
237
238
						var column_titles = {'res_title': 'Title',
									 'ivoid': 'ivoid',
									 'access_url': 'Access URL',
									 'table_name': 'Table name',
									 'content_type': 'content type',
									 'creator_seq': 'Creator',
									 'content_level': 'Content level',
									 'reference_url': 'reference URL',
									 'created': 'Created on',
									 'updated': 'Updated on'};
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
239
						var service = epnTapServicesGrid.getView().getRecord(tooltip.triggerElement);
12c10cdb   Nathanael Jourdane   Get the list of s...
240
241
						var ttContent = '<h3>' + service.get('short_name') + '</h3><ul>';
						for (var column in column_titles) {
3a42858d   Nathanael Jourdane   Update the number...
242
243
244
245
246
							var col_content = service.get(column);
							if(column === 'content_level' && col_content!=='') {
								col_content = col_content.replace(/#/g, ", ");
							}
							ttContent += '<li><b>' + column_titles[column] + '</b>: ' + col_content + '</li>';
12c10cdb   Nathanael Jourdane   Get the list of s...
247
248
						}
						tooltip.update(ttContent + '</ul>');
b185823c   Nathanael Jourdane   Use IntervalUI mo...
249
					}
784cf22c   Nathanael Jourdane   Fix crash when ep...
250
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
251
			});
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
252
253

			return epnTapServicesGrid;
b185823c   Nathanael Jourdane   Use IntervalUI mo...
254
255
256
257
		};

		/**
		Create `epnTapGranulesGrid`, an ExtJS grid containing the granules of the selected service in
12c10cdb   Nathanael Jourdane   Get the list of s...
258
		`epnTapServicesGrid`.
b185823c   Nathanael Jourdane   Use IntervalUI mo...
259
260

		For each granule, this grid displays:
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
261
262
263
264
265
266
267
268
269
		- 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...
270

b185823c   Nathanael Jourdane   Use IntervalUI mo...
271
		Each of these information are displayed in a specific rendering to improve user experience.
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
272
273
274
275
		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...
276
277
278
279
280

		A click on a granule triggers `EpnTapModule.onGranuleSelected()`.
		*/
		var createGranulesGrid = function() {
			var txtRender = function(val) {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
281
282
283
				return '<p style="white-space: normal;">' + val + '</p>';
			};
			var linkRender = function(val) {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
284
285
286
				return '<a href="' + val + '">data</a>';
			};
			var imgRender = function(val) {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
287
288
289
				return '<img width="40px height="40px" src="' + val + '">';
			};
			var dptRender = function(val) {
a8794c12   Nathanael Jourdane   Big refactoring (...
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
				productTypeDict = {
					'im': 'Image',
					'ma': 'Map',
					'sp': 'Spectrum',
					'ds': 'Dynamic spectrum',
					'sc': 'Spectral cube',
					'pr': 'Profile',
					'vo': 'Volume',
					'mo': 'Movie',
					'cu': 'Cube',
					'ts': 'Time series',
					'ca': 'Catalogue',
					'ci': 'Catalogue item'
				};
				return (val in productTypeDict) ? '<p style="white-space: normal;">' + productTypeDict[val] + '</p>' : '<em>' + val + '</em>';
b185823c   Nathanael Jourdane   Use IntervalUI mo...
305
306
			};
			var formatRender = function(val) {
b083bc63   Nathanael Jourdane   Update productTyp...
307
308
309
310
311
312
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
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
				// A dictionnary used to associate the mimetype (i.e "application/fits") to a pretty printed word (i.e "fits").
				mimetypeDict = {
					'application/fits': 'fits',
					'application/x-pds': 'pds',
					'image/x-pds': 'pds',
					'application/gml+xml': 'gml',
					'application/json': 'json',
					'application/octet-stream': 'bin, idl, envi or matlab',
					'application/pdf': 'pdf',
					'application/postscript': 'ps',
					'application/vnd.geo+json': 'geojson',
					'application/vnd.google-earth.kml+xml': 'kml',
					'application/vnd.google-earth.kmz': 'kmz',
					'application/vnd.ms-excel': 'xls',
					'application/x-asdm': 'asdm',
					'application/x-cdf': 'cdf',
					'application/x-cdf-istp': 'cdf',
					'application/x-cdf-pds4': 'cdf',
					'application/x-cef1': 'cef1',
					'application/x-cef2': 'cef2',
					'application/x-directory': 'dir',
					'application/x-fits-bintable': 'bintable',
					'application/x-fits-euro3d': 'euro3d',
					'application/x-fits-mef': 'mef',
					'application/x-geotiff': 'geotiff',
					'application/x-hdf': 'hdf',
					'application/x-netcdf': 'nc',
					'application/x-netcdf4': 'nc',
					'application/x-tar': 'tar',
					'application/x-tar-gzip': 'gtar',
					'application/x-votable+xml': 'votable',
					'application/x-votable+xml;content=datalink': 'votable',
					'application/zip': 'zip',
					'image/fits': 'fits',
					'image/gif': 'gif',
					'image/jpeg': 'jpeg',
					'image/png': 'png',
					'image/tiff': 'tiff',
					'image/x-fits-gzip': 'fits',
					'image/x-fits-hcompress': 'fits',
					'text/csv': 'csv',
					'text/html': 'html',
					'text/plain': 'txt',
					'text/tab-separated-values': 'tsv',
					'text/xml': 'xml',
					'video/mpeg': 'mpeg',
					'video/quicktime': 'mov',
					'video/x-msvideo': 'avi'
				};
a8794c12   Nathanael Jourdane   Big refactoring (...
356
				return (val in mimetypeDict) ? mimetypeDict[val] : '<em style="white-space: normal;">' + val + '</em>';
b185823c   Nathanael Jourdane   Use IntervalUI mo...
357
358
			};
			var sizeRender = function(val) {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
359
360
361
362
363
364
365
366
367
				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
368
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
369
370
			};

e3f1df86   Nathanael Jourdane   Fix tooltip bug.
371
			var epnTapGranulesGrid = new Ext.grid.Panel({
b185823c   Nathanael Jourdane   Use IntervalUI mo...
372
373
374
				id: 'epnTapGranulesGrid',
				title: 'Granules',
				store: Ext.data.StoreManager.lookup('granulesStore'),
3a42858d   Nathanael Jourdane   Update the number...
375
				flex: 4,
ba6dfa5e   Nathanael Jourdane   (regression bug) ...
376
				height: 405,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
377
378
				columns: [
					{ text: 'Num',  dataIndex: 'num', flex: 1, renderer: txtRender },
494949bb   Nathanael Jourdane   Remove dataproduc...
379
					// { text: 'Type',  dataIndex: 'dataproduct_type', flex: 2, renderer: dptRender },
b185823c   Nathanael Jourdane   Use IntervalUI mo...
380
381
382
					{ 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 },
494949bb   Nathanael Jourdane   Remove dataproduc...
383
					// { text: 'Format', dataIndex: 'access_format', flex: 2, renderer: formatRender },
b185823c   Nathanael Jourdane   Use IntervalUI mo...
384
385
386
387
388
					{ 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}
				],
b185823c   Nathanael Jourdane   Use IntervalUI mo...
389
390
				renderTo: Ext.getBody()
			});
b185823c   Nathanael Jourdane   Use IntervalUI mo...
391

e3f1df86   Nathanael Jourdane   Fix tooltip bug.
392
393
394
			Ext.create('Ext.tip.ToolTip', {
				target: epnTapGranulesGrid.getView().el,
				delegate: epnTapGranulesGrid.getView().itemSelector,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
395
396
397
				trackMouse: true,
				listeners: {
					beforeshow: function updateTipBody(tooltip) {
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
398
						var thumb = epnTapGranulesGrid.getView().getRecord(tooltip.triggerElement).get('thumbnail_url');
b185823c   Nathanael Jourdane   Use IntervalUI mo...
399
400
						tooltip.update('<img src="' + thumb + '">');
					}
784cf22c   Nathanael Jourdane   Fix crash when ep...
401
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
402
			});
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
403
404

			return epnTapGranulesGrid;
b185823c   Nathanael Jourdane   Use IntervalUI mo...
405
406
407
408
409
410
411
412
413
414
415
416
		};

		/**
		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',
9f9ca1da   Nathanael Jourdane   Fix scrollbar (WIP)
417
				region: 'center',
1227cc87   Nathanael Jourdane   Fix the scrollbar...
418
419
				layout: { type: 'hbox' },
				height: 530,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
420
421
422
423
				items: [
					createServicesGrid(),
					createGranulesGrid()
				],
784cf22c   Nathanael Jourdane   Fix crash when ep...
424
				renderTo: Ext.getBody()
b185823c   Nathanael Jourdane   Use IntervalUI mo...
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
			});
		};

		/***************************
		*** 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',
b185823c   Nathanael Jourdane   Use IntervalUI mo...
445
				valueField: 'id',
b76558dc   Nathanael Jourdane   reduce comboboxes...
446
				maxWidth: 100,
b083bc63   Nathanael Jourdane   Update productTyp...
447
				displayField: 'name',
b185823c   Nathanael Jourdane   Use IntervalUI mo...
448
				name: 'productType',
a8794c12   Nathanael Jourdane   Big refactoring (...
449
				editable: false
b185823c   Nathanael Jourdane   Use IntervalUI mo...
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
			});
		};

		/**
		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',
b76558dc   Nathanael Jourdane   reduce comboboxes...
468
				maxWidth: 100,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
469
				name: 'targetClass',
a8794c12   Nathanael Jourdane   Big refactoring (...
470
				editable: false
b185823c   Nathanael Jourdane   Use IntervalUI mo...
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
			});
		};

		/**
		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,
b76558dc   Nathanael Jourdane   reduce comboboxes...
492
				maxWidth: 100,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
493
494
				mode: 'remote',
				minChars: 2,
a8794c12   Nathanael Jourdane   Big refactoring (...
495
				forceSelection: true
b185823c   Nathanael Jourdane   Use IntervalUI mo...
496
497
498
499
500
501
502
503
504
505
506
507
508
			});
		};

		/**
		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',
b76558dc   Nathanael Jourdane   reduce comboboxes...
509
				layout: { type: 'hbox' },
b185823c   Nathanael Jourdane   Use IntervalUI mo...
510
511
512
				defaults: { margin: 5 },
				items: [{ // Left part
					xtype : 'container',
9b951b58   Nathanael Jourdane   Move EPN-TAP modu...
513
					flex: 3,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
					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()
					]
784cf22c   Nathanael Jourdane   Fix crash when ep...
537
538
				}],
				renderTo: Ext.getBody()
b185823c   Nathanael Jourdane   Use IntervalUI mo...
539
540
541
542
543
544
545
546
547
548
549
			});
		};

		/**
		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...
550
551
				id: 'epnTapTimeSelector',
				durationLimit: 99999
b185823c   Nathanael Jourdane   Use IntervalUI mo...
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
			});
		};

		/***********************
		*** 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,
a8794c12   Nathanael Jourdane   Big refactoring (...
574
				maxValue: 2000
b185823c   Nathanael Jourdane   Use IntervalUI mo...
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
			});
		};

		/**
		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: '|<',
a8794c12   Nathanael Jourdane   Big refactoring (...
610
					tooltip: 'First page'
b185823c   Nathanael Jourdane   Use IntervalUI mo...
611
612
613
				}, {
					id: 'epnTapPreviousPageBtn',
					text: '<',
a8794c12   Nathanael Jourdane   Big refactoring (...
614
					tooltip: 'Previous page'
b185823c   Nathanael Jourdane   Use IntervalUI mo...
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
				}, {
					xtype: 'label',
					id: 'epnTapCurrentPageLb',
					tooltip: 'Current page',
					text: '-'
				}, {
					xtype: 'label',
					text: '/'
				}, {
					xtype: 'label',
					id: 'epnTapTotalPagesLb',
					tooltip: 'Total pages',
					text: '-'
				}, {
					id: 'epnTapNextPageBtn',
					text: '>',
a8794c12   Nathanael Jourdane   Big refactoring (...
631
					tooltip: 'Next page'
b185823c   Nathanael Jourdane   Use IntervalUI mo...
632
633
634
				}, {
					id: 'epnTapLastPageBtn',
					text: '>|',
a8794c12   Nathanael Jourdane   Big refactoring (...
635
					tooltip: 'Last page'
b185823c   Nathanael Jourdane   Use IntervalUI mo...
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
				}]
			});
		};

		/*******************
		*** 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',
784cf22c   Nathanael Jourdane   Fix crash when ep...
658
659
				loader: { autoLoad: true, url: helpDir + 'epnTapHOWTO' },
				renderTo: Ext.getBody()
b185823c   Nathanael Jourdane   Use IntervalUI mo...
660
661
662
			});
		};

3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
663
		var myConf = {
98760ae1   Nathanael Jourdane   BugFix window siz...
664
			id: 'epnTapWindow',
9f9ca1da   Nathanael Jourdane   Fix scrollbar (WIP)
665
			layout: { type: 'vbox', align: 'stretch' },
b185823c   Nathanael Jourdane   Use IntervalUI mo...
666
667
			items: [
				createServiceFilterPanel(),
98760ae1   Nathanael Jourdane   BugFix window siz...
668
669
				createGridsPanel(),
				createInfoPanel()
a8794c12   Nathanael Jourdane   Big refactoring (...
670
			]
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
671
		};
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
672
		Ext.apply(this, Ext.apply(arguments, myConf));
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
673
674
	}
});