First version for multiplot UI

Benjamin Renard
1 parent 580cdf42
Showing 7 changed files with 259 additions and 9 deletions Show diff stats
js/app/controllers/PlotModule.js
js/app/models/PlotObjects/MultiplotRequestObject.js
js/app/models/PlotObjects/PlotRequestObject.js
js/app/views/MultiPlotUI.js
js/app/views/PlotComponents/PlotTabContent.js
js/app/views/PlotComponents/PlotTabPanel.js
js/app/views/PlotUI.js
@@ -16,7 +16,8 @@ Ext.define(&#39;amdaDesktop.PlotModule&#39;, {
 	           'amdaPlotObj.MultiplotRequestObject',
 	           'amdaModel.MultiplotNode',
 	           'amdaUI.PlotTabResultUI',
-	           'amdaPlotComp.PlotPreviewUI'
+	           'amdaPlotComp.PlotPreviewUI',
+		   'amdaUI.MultiPlotUI'
 	],
  
 	contentId : 'plotUI',
@@ -39,7 +40,9 @@ Ext.define(&#39;amdaDesktop.PlotModule&#39;, {
     helpFile : 'plotHelp',
  
     plotResultWindowsManager : new Ext.AbstractManager(),
-    
+ 
+    multiPlotWin: null,
+   
     computeResultWindowSize : function(panelResult) {
         var size = panelResult.getImageSize();
         size.width  += 30;
@@ -139,6 +142,9 @@ Ext.define(&#39;amdaDesktop.PlotModule&#39;, {
         this.plotResultWindowsManager.each(function (key, value, length) {
             value.close();
         });
+	if (this.multiPlotWin) {
+		this.multiPlotWin.close();
+	}
     },
  
     updatePreview : function(plotPreviewConfig) {
@@ -232,5 +238,53 @@ Ext.define(&#39;amdaDesktop.PlotModule&#39;, {
             me.getUiContent().updateTabs();
             me.getUiContent().updateRequestName(renamedNode);
         }
+    },
+
+    showMultiplotWin: function() {
+	var me = this;
+        var desktop = this.app.getDesktop();
+        var win = desktop.getWindow(this.id);
+
+        if (!win) {
+            return;
+        }
+
+	if (!this.multiPlotWin) {
+		var multiPlotPanel = Ext.create('amdaUI.MultiPlotUI',
+			{
+                            plotWin: me.getUiContent()
+			}
+		);
+		this.multiPlotWin = myDesktopApp.getDesktop().createWindow({
+			id    : "multiplot-win",
+			title : "Multi Plot Manager",
+			width : 320,
+			height: 320,
+			minHeight: 300,
+			minWidth: 320,
+			layout: 'fit',
+			items : [
+				multiPlotPanel
+			],
+                        listeners: {
+                            beforeclose: function(win,opt) {
+                                me.multiPlotWin = null;
+                            }
+                        }
+		});
+	}
+
+	this.multiPlotWin.show();
+
+    },
+
+    refreshMultiPlot: function() {
+        if (this.multiPlotWin) {
+            this.multiPlotWin.items.items[0].refreshMultiPlot();
+        }
+    },
+
+    isMultiPlot : function() {
+        return this.multiPlotWin && !this.multiPlotWin.isHidden();
     }
 });
@@ -101,6 +101,46 @@ Ext.define(&#39;amdaPlotObj.MultiplotRequestObject&#39;, {
             this.plots().remove(plotNode);
     },
  
-    addPlot: function(plotNode) {
+    getJsonValues : function()
+    {
+        var requestValues  = new Object();
+
+        requestValues['nodeType'] = 'request';
+        requestValues['leaf'] = true;
+
+        requestValues['timesrc'] =  this.get('timesrc');
+        // if there's at least one timeTable name into 'timeTables' collection
+        if (this.get('timesrc') == amdaModel.AmdaTimeObject.inputTimeSrc[0] && this.get('timeTables') && this.get('timeTables').length){
+            // get complete timeTables collection
+            var timeTables = this.get('timeTables');
+            // init an empty array for timeTables
+            requestValues['timeTables'] = [];
+            // for each interval record
+            Ext.Array.each(timeTables, function(item, index, all){
+                if (!item.$className) {
+                    requestValues['timeTables'][index] = {timeTableName : item.timeTableName, id : item.id};
+                }
+                // get Json simplified value
+                else {
+                    requestValues['timeTables'][index] = item.getJsonValues();
+                }
+            });
+        } else {
+            requestValues['startDate'] = this.get('startDate');
+            requestValues['stopDate'] = this.get('stopDate');
+            requestValues['durationDay'] = this.get('durationDay');
+            requestValues['durationHour'] = this.get('durationHour');
+            requestValues['durationMin'] = this.get('durationMin');
+            requestValues['durationSec'] = this.get('durationSec');
+        }
+
+        requestValues['plots'] = [];
+        this.plots().each(function(plotNode) {
+            if (plotNode.get('object').get('multi-selected')) {
+                requestValues['plots'].push(plotNode.get('object').getJsonValues());
+            }
+        });
+
+        return requestValues;
     }
 });
@@ -29,6 +29,7 @@ Ext.define(&#39;amdaPlotObj.PlotRequestObject&#39;, {
 	fields : [
               {name: 'tab-index', type: 'int', defaultValue: 0, persist: false},
               {name: 'tab-title', type: 'string', defaultValue: '', persist: false},
+              {name: 'multi-selected', type: 'boolean', defaultValue: false, persist: false},
  
               {name: 'file-format', type: 'string'},
               {name: 'file-output', type: 'string'},
@@ -0,0 +1,111 @@
+/**
+ * Project   : AMDA-NG
+ * Name      : MultiPlotUI.js
+ * @class    amdaUI.MultiPlotUI
+ * @extends  Ext. panel.Panel
+ * @brief    MultiPlot UI definition (View)
+ * @author
+ * @version  $Id: MultiPlotUI.js benjamin
+ */
+
+Ext.define('amdaUI.MultiPlotUI', {
+    extend: 'Ext.panel.Panel',
+
+    plotWin: null,
+
+    timeSelector: null,
+    newInteractiveSessionCheck: null, 
+    plotSelector: null,
+
+    constructor: function(config) {
+        this.init(config);
+        this.callParent(arguments);
+    },
+
+    refreshMultiPlot: function() {
+        var me = this;
+        var tabsInfo = this.plotWin.plotTabs.getTabsInfo();
+        this.plotSelector.removeAll();
+        Ext.Array.each(tabsInfo, function(tabInfo) {
+            me.plotSelector.add(
+                {
+                    boxLabel: tabInfo.name,
+                    checked: tabInfo.object.get('multi-selected'),
+                    listeners: {
+                        change: function(field, newValue, oldValue, eOpts) {
+                            tabInfo.object.set('multi-selected', newValue);
+                        }
+                    }
+                }
+            );
+        });
+    },
+
+    doMultiPlot: function() {
+        // Update time definition
+        var timeSource = this.timeSelector.getActiveTimeSource();
+        this.plotWin.object.set('timesrc', timeSource);
+        if (timeSource === amdaModel.AmdaTimeObject.inputTimeSrc[0])
+            this.plotWin.object.set('timeTables',this.timeSelector.TTGrid.getStore().data.items);
+
+        // Time validation
+        if (!this.timeSelector.isValid(false)) {
+            myDesktopApp.errorMsg('Error in Time definition');
+            return false;
+        }
+
+	// Execute multiplot request
+	var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);
+	plotModule.linkedNode.execute();
+    },
+
+    init : function(config) {
+        var me = this;
+
+        this.timeSelector = new amdaUI.TimeSelectorUI( { id: 'multiplot-time-selector', border : false, collapsible: false, height: 180} );
+	this.newInteractiveSessionCheck =  Ext.create('Ext.form.Checkbox', {
+            xtype: 'checkbox',
+            boxLabel: 'New Interactive Session for Selected Plot Requests'
+	});
+        this.plotSelector = Ext.create('Ext.form.CheckboxGroup', {
+            xtype: 'checkboxgroup',
+            flex: 1,
+            columns: 3,
+            minHeight: 40,
+            autoScroll: true
+        });
+        var myConf = {
+            layout: {
+                type: 'vbox',
+                pack: 'start',
+                align: 'stretch'
+            },
+            items: [
+                this.plotSelector,
+                this.newInteractiveSessionCheck,
+                this.timeSelector
+            ],
+            listeners: {
+                afterrender: function() {
+                    me.refreshMultiPlot();
+                    me.timeSelector.intervalSel.setInterval(me.plotWin.object.get('startDate'), me.plotWin.object.get('stopDate'));
+                    me.timeSelector.intervalSel.updateStop();
+                    me.timeSelector.setTTTab(me.plotWin.object.get('timeTables'));
+                    me.timeSelector.timeSrc.setActiveTab(me.plotWin.object.get('timesrc'));
+                }
+            },
+            fbar: [
+                '->',
+                {
+                    xtype: 'button',
+                    text: 'Plot',
+                    scope: this,
+                    handler: function(button) {
+                        this.doMultiPlot();
+                    }
+                }
+            ]
+        };
+        Ext.apply(this, Ext.apply(arguments, myConf));
+    }
+});
@@ -54,6 +54,9 @@ Ext.define(&#39;amdaPlotComp.PlotTabContent&#39;, {
     doPlot : function() {
         this.plotNode.get('object').set('tab-index', this.tabIndex);
         this.plotNode.get('object').set('tab-title', this.getPlotTitle());
+        this.plotNode.get('object').set('multi-selected', false);
+        var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);
+        plotModule.refreshMultiPlot();
         this.plotNode.execute();
     },
  
@@ -34,8 +34,9 @@ Ext.define(&#39;amdaPlotComp.PlotTabPanel&#39;, {
         this.multiplot_object = multiplot_object;
  
         this.multiplot_object.plots().each(function (rec, index) {
-            this.addPlotNode(rec, index == 0);
+            this.addPlotNode(rec, index == 0, false);
         }, this);
+        this.refreshMultiPlot();
     },
  
     reloadPlot : function(plotNode) {
@@ -49,7 +50,7 @@ Ext.define(&#39;amdaPlotComp.PlotTabPanel&#39;, {
         }
     },
  
-    addPlotNode: function(plotNode, selectTab)
+    addPlotNode: function(plotNode, selectTab, refreshMultiPlot)
     {
         for (i = 0; i < this.items.getCount(); ++i)
         {
@@ -104,6 +105,9 @@ Ext.define(&#39;amdaPlotComp.PlotTabPanel&#39;, {
  
         if (selectTab)
             this.setActiveTab(tabComp);
+
+        if (refreshMultiPlot)
+            this.refreshMultiPlot();
  
         return tabContent;
     },
@@ -129,6 +133,7 @@ Ext.define(&#39;amdaPlotComp.PlotTabPanel&#39;, {
             if (!this.getActiveTab())
                 this.setActiveTab(tabItem);
         }
+        this.refreshMultiPlot();
     },
  
     closePlotTabIfOpened: function(plotNodeToClose) {
@@ -139,6 +144,7 @@ Ext.define(&#39;amdaPlotComp.PlotTabPanel&#39;, {
             var plotNode = tabContent.plotNode;
             if (plotNode == renamedNode) {
                 this.remove(tabItem.getId());
+                this.refreshMultiPlot();
             }
         }
     },
@@ -153,6 +159,7 @@ Ext.define(&#39;amdaPlotComp.PlotTabPanel&#39;, {
             if (plotNode == renamedNode) {
 		plotNode.get('object').set('name', renamedNode.get('text'));
                 tabContent.updateUI();
+                this.refreshMultiPlot();
             }
         }
     },
@@ -174,6 +181,28 @@ Ext.define(&#39;amdaPlotComp.PlotTabPanel&#39;, {
     {
         return plotTab.child().treePlot;
     },
+
+    getTabsInfo: function()
+    {
+        var tabsInfo = [];
+        for (i = 0; i < this.items.getCount(); ++i) {
+            var tabItem = this.items.getAt(i);
+            var tabContent = tabItem.items.getAt(0);
+            var plotNode = tabContent.plotNode;
+            tabsInfo.push({
+                name: tabContent.getPlotTitle(),
+                object: plotNode.get('object'),
+                selected: (tabItem == this.getActiveTab())
+            });
+        }
+        return tabsInfo;
+    },
+
+    refreshMultiPlot: function()
+    {
+        var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);
+        plotModule.refreshMultiPlot();
+    },
  
     init : function(config) {
         var me = this;
@@ -193,7 +222,7 @@ Ext.define(&#39;amdaPlotComp.PlotTabPanel&#39;, {
                         text:'+',
                         closable: false,
                         handler:function(btn,e){
-                            var tabContent = me.addPlotNode(me.multiplot_object.createNewPlot(), true);
+                            var tabContent = me.addPlotNode(me.multiplot_object.createNewPlot(), true, true);
                         }
                     }
                 ],
@@ -70,7 +70,7 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
     },
  
     editPlot : function(plotNode) {
-        this.plotTabs.addPlotNode(plotNode, true);
+        this.plotTabs.addPlotNode(plotNode, true, true);
     },
  
     reloadPlot : function(plotNode) {
@@ -81,10 +81,12 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
      * plot method called by 'Do Plot' button to launch the plot process
      */
     doPlot : function(){
+        var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);
         if ( this.updateObject(false) ) {
             var plotTab = this.plotTabs.getCurrentPlotTabContent();
-            if (plotTab)
+            if (plotTab) {
                 plotTab.doPlot();
+            }
         }
     },  
  
@@ -181,7 +183,17 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
                     handler: function(button) {
                         this.resetProcess();
                     }
-                },'->', '-', {
+                },
+		'-', {
+			xtype: 'button',
+			text: 'Multiplot',
+			scope: this,
+			handler: function(button) {
+				var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);
+				plotModule.showMultiplotWin();
+			}
+		},
+		'->', '-', {
                     xtype: 'button',
                     text: 'Save',
                     scope: this,