Improve granuleGrid rendering

Nathanael Jourdane
1 parent a8a12768
Showing 2 changed files with 95 additions and 89 deletions Show diff stats
js/app/views/EpnTapUI.js
php/epntap.php
@@ -503,101 +503,96 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 	TODO: infinite scroll! http://docs.sencha.com/extjs/4.2.3/extjs-build/examples/grid/infinite-scroll-with-filter.html
 	*/
 	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) {
-			var productTypeDict = Ext.data.StoreManager.lookup('productTypesStore').data.map;
-			return productTypeDict[val].data.name;
-		};
-		var formatRender = function(val) {
-			// 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'
-			};
-			return (val in mimetypeDict) ? 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';
+		Ext.define('App.util.Format', {
+			override: 'Ext.util.Format',
+			'text': function(data) {
+				return '<p style="white-space: normal;">' + data + '</p>';
+			},
+			'link': function(data) {
+				return '<a href="' + data + '">data</a>';
+			},
+			'img': function(data) {
+				return '<img width="40px height="40px" src="' + data + '">';
+			},
+			'type': function(data) {
+				var productTypeDict = Ext.data.StoreManager.lookup('productTypesStore').data.map;
+				return '<p>' + productTypeDict[data].data.name + '</p>';
+			},
+			'format': function(data) {
+				var 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'
+				};
+				return (data in mimetypeDict) ? '<p>' + mimetypeDict[data] + '</p>' : '<em>' + data + '</em>';
+			},
+			'size': function(data) {
+				var size = parseInt(data);
+				var txt = '';
+				if (isNaN(size)) {
+				} else if (size >= 1024*1024) {
+					txt = (size/(1024*1024)).toPrecision(3) + 'Go';
+				} else if (size >= 1024) {
+					txt = (size/1024).toPrecision(3) + 'Mo';
+				} else {
+					txt = size + 'Ko';
+				}
+				return '<p>' + txt + '</p>'
+			},
+			'date': function(data) {
+				
 			}
-		};
+		});
  
 		var epnTapGranulesGrid = new Ext.grid.Panel({
 			id: 'epnTapGranulesGrid',
 			title: 'Granules',
 			store: Ext.data.StoreManager.lookup('granulesStore'),
 			flex: 4,
-			columns: [
-				// { text: 'Num',  dataIndex: 'num', flex: 1, renderer: txtRender, hidden: true },
-				// { text: 'Type',  dataIndex: 'dataproduct_type', flex: 2, renderer: dptRender },
-				// { text: 'Target', dataIndex: 'target_name', flex: 2, renderer: txtRender, hidden: true },
-				// { 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}
-			],
+			columns: [],
 			dockedItems: [{
 				xtype: 'pagingtoolbar',
 				id: 'epnTapPagingTB',
@@ -118,11 +118,22 @@ function getGranules() {
 	// error_log('getGranules query: ' . $query);
 	$rows = request($url, $query);
  
+	$visibleColumns = ['granule_uid', 'dataproduct_type', 'time_min', 'time_max', 'access_estsize', 'thumbnail_url', 'access_url'];
+	$names = ['dataproduct_type' => 'Type', 'access_estsize' => 'Size'];
+	$renderers = ['dataproduct_type' => 'type', 'access_estsize' => 'size', 'access_format' => 'format', 'access_url' => 'link', 'thumbnail_url' => 'img'];
+	$flexs = ['granule_uid' => 2];
+
 	$fields = array();
 	$columns = array();
 	foreach($rows[0] as $key => $value) {
 		$fields[] = ['name' => $key, 'type' => 'string'];
-		$columns[] = ['text' => ucfirst(str_replace('_', ' ', $key)), 'dataIndex' => $key];
+		$columns[] = [
+			'dataIndex' => $key,
+			'text' => array_key_exists($key, $names) ? $names[$key] : ucfirst(str_replace('_', ' ', $key)),
+			'flex' => array_key_exists($key, $flexs) ? $flexs[$key] : 1,
+			'hidden' => !in_array($key, $visibleColumns),
+			'renderer' => array_key_exists($key, $renderers) ? $renderers[$key] : 'text'
+		];
 	}
  
 	$metadata = ['fields' => $fields, 'columns' => $columns, 'root' => 'data'];