From 574171f0df8caf76d37b15146896ef8bf1408387 Mon Sep 17 00:00:00 2001
From: Nathanael Jourdane
Date: Wed, 11 Jan 2017 18:44:05 +0100
Subject: [PATCH] Display granules thumbnails and other UI improvments.
---
js/app/controllers/EpnTapModule.js | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------
js/app/views/EpnTapUI.js | 43 +++++++++++++++++++++++++++++++++----------
js/resources/css/amda.css | 13 +++++++++++++
3 files changed, 103 insertions(+), 58 deletions(-)
diff --git a/js/app/controllers/EpnTapModule.js b/js/app/controllers/EpnTapModule.js
index cfd0622..23073c0 100644
--- a/js/app/controllers/EpnTapModule.js
+++ b/js/app/controllers/EpnTapModule.js
@@ -7,26 +7,6 @@
* @author Nathanael Jourdane
*/
-// for(let service of Ext.getCmp('servicesPanel').getStore().getRange()) {
-// var filter = Array(service.data.schema, service.data.accessurl, targetName, productType, startTime, stopTime);
-// AmdaAction.epnTapMgr('getServiceNbResults', filter, function(epnTapServices) {
-// service.set('nb_responses', epnTapServices===null ? "-" : epnTapServices);
-// console.log(epnTapServices);
-// });
-// }
-
-// var grid = Ext.getCmp('servicesPanel');
-// var selection = grid.getSelectionModel();
-// access_url = [];
-// table_name = [];
-// for(i=0 ; i' + val + '
'; };
+var link_render = function(val) { return 'get'; };
+var img_render = function(val) { return '' };
+
+var granulesPanel = Ext.create('Ext.grid.Panel', {
id: 'granulesPanel',
- xtype : 'grid',
title: 'Granules',
- store: Ext.data.StoreManager.lookup('granulesStore'),
+ store: Ext.data.StoreManager.lookup('granules_store'),
flex: 3,
+ cls: 'epntap_granules',
columns: [
- { text: 'Type', dataIndex: 'type', flex: 1 },
- { text: 'Target', dataIndex: 'target_name', flex: 1 },
- { text: 'Time min', dataIndex: 'time_min', flex: 2 },
- { text: 'Time max', dataIndex: 'time_max', flex: 2 }
+ { text: 'Type', dataIndex: 'dataproduct_type', flex: 1, renderer: txt_render },
+ { text: 'Target', dataIndex: 'target_name', flex: 2, renderer: txt_render },
+ { text: 'Time min', dataIndex: 'time_min', flex: 2, renderer: txt_render },
+ { text: 'Time max', dataIndex: 'time_max', flex: 2, renderer: txt_render },
+ { text: 'Format', dataIndex: 'access_format', flex: 2, renderer: txt_render },
+ { text: 'uid', dataIndex: 'granule_uid', flex: 2, renderer: txt_render },
+ { text: 'Size', dataIndex: 'access_estsize', flex: 2, renderer: txt_render },
+ { text: 'URL', dataIndex: 'access_url', flex: 1, renderer: link_render },
+ { text: 'Thumbnail', dataIndex: 'thumbnail_url', flex: 2, renderer: img_render}
],
listeners: {
'cellclick': function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onGranuleSelected(record.data);
}
+ },
+ renderTo: Ext.getBody()
+});
+
+var tooltip = Ext.create('Ext.tip.ToolTip', {
+ target: granulesPanel.getView().el,
+ delegate: granulesPanel.getView().itemSelector,
+ trackMouse: true,
+ renderTo: Ext.getBody(),
+ listeners: {
+ beforeshow: function updateTipBody(tip) {
+ var thumb = granulesPanel.getView().getRecord(tooltip.triggerElement).get('thumbnail_url');
+ tooltip.update('');
+ }
}
-}
+});
var mainPanel = {
id: 'mainPanel',
@@ -202,7 +225,7 @@ Ext.define('amdaUI.EpnTapUI', {
init : function(config) {
var myConf = {
- width: 600,
+ width: 800,
height: 550,
layout: 'border',
items: [
diff --git a/js/resources/css/amda.css b/js/resources/css/amda.css
index f74a45d..d82ec66 100644
--- a/js/resources/css/amda.css
+++ b/js/resources/css/amda.css
@@ -487,3 +487,16 @@ p + p {
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100) !important;
opacity: 1.0 !important;
}
+
+.epntap_granules img {
+ max-width: 40px;
+ max-height: 40px;
+}
+
+#granule_tooltip {
+ /*position:absolute;*/
+ margin:5px;
+ width:200px;
+ height:50px;
+ border:1px solid black;
+}
--
libgit2 0.21.2