Adapt plot UI in relation with new plot object

Benjamin Renard
1 parent 6f513d3f
Showing 6 changed files with 254 additions and 437 deletions Show diff stats
js/app/models/PlotObjects/MultiplotRequestObject.js
js/app/views/PlotComponents/PlotElementPanel.js
js/app/views/PlotComponents/PlotTabContent.js
js/app/views/PlotComponents/PlotTabPanel.js
js/app/views/PlotComponents/PlotTree.js
js/app/views/PlotUI.js
@@ -31,14 +31,27 @@ Ext.define(&#39;amdaPlotObj.MultiplotRequestObject&#39;, {
     	var me = this;
     	me.callParent(arguments);
     },
+
+    isDirty: function() {
+        var dirty = false;
+        this.plots().each(function(plotNode) {
+            var plotObject = plotNode.get('object');
+            if (plotObject && (plotObject.get('id') != '') && plotObject.dirty) {
+                dirty = true;
+            }
+        });
+        return dirty;
+    },
  
     createNewPlot: function() {
         var plotNode = Ext.create('amdaModel.PlotNode', {
             leaf : true,
             contextNode : this
         });
+        var plotObject = Ext.create(plotNode.get('objectDataModel'));
+        plotNode.set('object',plotObject);
         this.plots().add(plotNode);
-        return this.plots()[this.plots().count()-1];
+        return this.plots().getAt(this.plots().count()-1);
     },
  
     removePlotById: function(id) {
@@ -10,6 +10,7 @@
  
 Ext.define('amdaPlotComp.PlotElementPanel', {
 	extend: 'Ext.form.Panel',
+
  
 	elementFormsManager : new Ext.AbstractManager(),
  
@@ -9,86 +9,109 @@
  */
  
 Ext.define('amdaPlotComp.PlotTabContent', {
-	extend: 'Ext.form.Panel',
-	
-	requires: [
-	           'amdaUI.TimeSelectorUI',
-	           'amdaPlotComp.PlotTree'
+    extend: 'Ext.form.Panel',
+
+    requires: [
+        'amdaUI.TimeSelectorUI',
+        'amdaPlotComp.PlotTree',
+        'amdaPlotComp.PlotOutputForm',
+        'amdaPlotComp.PlotElementPanel'
     ],
  
-    treePlot: null,
-    
-    //Link to the Plot Element Panel
-    plotElementPanel: null,
-    
-    //linkk to the Plot Tab Panel
-    plotTabPanel : null,
-    
-    //Link to the time selctor
-    timeSelector : null,
-    
-    //Tab Object
-    object: null,
+    //Link to the Plot Node
+    plotNode: null,
+
+    timeSelector: null,
+    plotTree: null,
+    plotElement: null,
+    plotOutput: null,
  
     constructor: function(config) {
 		this.init(config);	    
 		this.callParent(arguments);
-	},
-	
-	setTabObject : function(object) {
-		this.object = object;
-		this.treePlot.buildTree(this.object);
-		this.timeSelector.intervalSel.setInterval(this.object.get('startDate'), this.object.get('stopDate'));
-		this.addTTs(this.object.get('timeTables'));
-	},
-	
-	addTTs : function(TTarray) {
-		// set TTTab	    
-		this.timeSelector.setTTTab(TTarray);
-	},
+    },
  
-	updateLinkedToMultiPlotMode : function (isLinkedToMultiPlotMode) {
-		this.timeSelector.setVisible(!isLinkedToMultiPlotMode);
-		this.plotTabPanel.updateLinkedToMultiPlotMode(isLinkedToMultiPlotMode);
-	},
+    updateTimeObject : function() {
+        var timeSource = this.timeSelector.getActiveTimeSource();
+        var tabForm = this.getForm();
+        tabForm.updateRecord(this.plotNode.get('object'));
+        this.plotNode.get('object').set('timesrc', timeSource);
+        if (timeSource === amdaModel.AmdaTimeObject.inputTimeSrc[0])
+            this.plotNode.get('object').set('timeTables',this.timeSelector.TTGrid.getStore().data.items);
+    },
  
-	updateTimeObject : function() {
-		var timeSource = this.timeSelector.getActiveTimeSource();
-    	var tabForm = this.getForm();
-    	tabForm.updateRecord(this.object);
-    	this.object.set('timesrc', timeSource);
-    	if (timeSource === amdaModel.AmdaTimeObject.inputTimeSrc[0])
-        	this.object.set('timeTables',this.timeSelector.TTGrid.getStore().data.items);
-	},
-	
-	init : function(config) {
-		var me = this;
-		
-		this.plotElementPanel = config.plotElementPanel;
-		this.plotTabPanel = config.plotTabPanel;
-		
-		this.timeSelector = new amdaUI.TimeSelectorUI( { id: 'plotTimeSelectorTab' + config.tabId, border : false, flex: 3, collapsible: true, collapseDirection : 'bottom',  hidden: true} );
-		this.treePlot = new amdaPlotComp.PlotTree({flex: 5.6, plotElementPanel: this.plotElementPanel, plotTabContent: this});
-		
-		var myConf = {
-				bodyStyle: { background : '#dfe8f6' },
-				border : false,
-				defaults: {
-					border: false
-				},
-				layout: {
-				    type: 'vbox',
-				    pack: 'start',
-				    align: 'stretch'
-				},
-				items: [
-				        this.treePlot,
-				        this.timeSelector
-				]
-		};
+    init : function(config) {
+        var me = this;
+        me.plotNode = config.plotNode;
+
+        this.timeSelector = new amdaUI.TimeSelectorUI( { id: 'plotTimeSelectorTab' + me.plotNode.id, border : false, flex: 6, collapsible: true, collapseDirection : 'bottom'} );
+        this.plotElement = new amdaPlotComp.PlotElementPanel({flex: 11});
+        this.treePlot = new amdaPlotComp.PlotTree({flex: 11, plotElementPanel: this.plotElement});
+        this.plotOutput = new amdaPlotComp.PlotOutputForm({flex: 6, collapseDirection : 'bottom', collapsible : true });
+
+        var treePanel = new Ext.form.Panel({
+            flex: 1,
+            layout: {
+                type: 'vbox',
+                pack: 'start',
+                align: 'stretch'
+            },
+            bodyStyle: { background : '#dfe8f6' },
+            defaults: {
+                border: false
+            },
+            items: [
+                this.treePlot,
+                this.timeSelector
+            ]
+        });
+
+        var optionsPanel = new Ext.form.Panel({
+            flex: 1,
+            layout: {
+                type: 'vbox',
+                pack: 'start',
+                align: 'stretch'
+            },
+            bodyStyle: { background : '#dfe8f6' },
+            defaults: {
+                border: false
+            },
+            items: [
+                this.plotElement,
+                this.plotOutput
+            ]
+        });
+
  
-		Ext.apply (this , Ext.apply (arguments, myConf));
+        var myConf = {
+            bodyStyle: { background : '#dfe8f6' },
+            border : false,
+            defaults: {
+                border: false
+            },
+            layout: {
+                type: 'hbox',
+                pack: 'start',
+                align: 'stretch'
+            },
+            items: [
+                treePanel,
+                optionsPanel
+            ],
+            listeners: {
+                afterrender: function(comp, eOpts) {
+                    this.plotOutput.setObject(this.plotNode.get('object'));
+                    this.timeSelector.intervalSel.setInterval(this.plotNode.get('object').get('startDate'), this.plotNode.get('object').get('stopDate'));
+                    this.timeSelector.setTTTab(this.plotNode.get('object').get('timeTables'));
+                    this.treePlot.buildTree(this.plotNode.get('object'));
+                },
+                scope: this
+            }
+        };
+
+        Ext.apply (this , Ext.apply (arguments, myConf));
  
  
-	}
-});
 \ No newline at end of file
+    }
+});
@@ -9,195 +9,124 @@
  */
  
 Ext.define('amdaPlotComp.PlotTabPanel', {
-	extend: 'Ext.tab.Panel',
+    extend: 'Ext.tab.Panel',
  
-	requires: [
-	           'amdaPlotComp.PlotTabContent'
-	],
+    requires: [
+        'amdaPlotComp.PlotTabContent'
+    ],
  
-        //Link to the Plot UI
-        plotUI : null,
+    //Link to the Plot UI
+    plotUI : null,
  
-	//Request object
-	multiplot_object: null,
+    //Multiplot object
+    multiplot_object: null,
  
-	constructor: function(config) {
-		this.init(config);	    
-		this.callParent(arguments);
-	},
+    constructor: function(config) {
+        this.init(config);	    
+        this.callParent(arguments);
+    },
  
-	setMultiplotObject: function(multiplot_object)
-	{
-		var me = this;
-		this.removeAll();
-		this.multiplot_object = multiplot_object;
+    setMultiplotObject: function(multiplot_object) {
+        var me = this;
+        this.removeAll();
+        this.multiplot_object = multiplot_object;
  
-		this.multiplot_object.plots().each(function (rec, index) {
-			this.addPlotNode(rec, index == 0);
-		}, this);
-	},
+        this.multiplot_object.plots().each(function (rec, index) {
+            this.addPlotNode(rec, index == 0);
+        }, this);
+    },
  
-	addPlotNode: function(plotNode, selectTab)
-	{
-		var tabNumber = this.getTabBar().items.getCount();
-		var tabContent = new amdaPlotComp.PlotTabContent();
-		tabContent.setPlotNode(plotNode);
-		var me = this;
-    	        var tabComp = this.add({
-    		    title: (plotNode.get('text') != '') ? plotNode.get('text') : 'Plot '+tabNumber,
-    		    closable: true,
-    		    layout: 'fit',
-    		    bodyStyle: 'background: none',
-    		    defaults: {
-				border: false
-		    },
-    		    items: [
-    		        tabContent
-    		    ],
-    		    listeners : {
-    			scope : this,
-    			beforeclose: function( tab, eOpts ) {
-    				if (this.items.getCount() == 1)
-    				{
-    					myDesktopApp.warningMsg('You need to keep at least one plot definition');
-    					return false;
-    				}
-    				return true;
-    			},
-    			close: function( tab, eOpts ) {
-    				if (tab.items.getAt(0).object)
-    					this.object.removeTabById(tab.items.getAt(0).object.get('id'));
-    			},
-    			destroy: function(tab, eOpts) {
-				
-    				this.updatePlotTabs();
-    			},
-			afterrender: function(tab, e0pts) {
-				if (!tab.tab.el) {
-					return;
-				}
-				tab.tab.el.on('contextmenu', function(e, t, eOpts) {
-					var menu = new Ext.menu.Menu({
-						items: [
-							{
-								text: 'Rename',
-								handler: function() {
-									Ext.Msg.prompt('Rename', 'Please enter new plot tab name:', function(btn, text){
-										if (btn == 'ok'){
-											tabObject.set('tab-name',text);
-											me.updatePlotTabs();
-										}
-									}, me);
-								}
-							}
-						]
-					});
-					var position = e.getXY();
-					e.stopEvent();
-					menu.showAt(position);
-				},this);
-			}
-    		}
-    	});
+    addPlotNode: function(plotNode, selectTab)
+    {
+        var tabNumber = this.getTabBar().items.getCount();
+        var tabContent = new amdaPlotComp.PlotTabContent({plotNode: plotNode});
+        var me = this;
+        var tabComp = this.add({
+            title: (plotNode.get('text') != '') ? plotNode.get('text') : 'Plot '+tabNumber,
+            closable: true,
+            layout: 'fit',
+            bodyStyle: 'background: none',
+            defaults: {
+                border: false
+            },
+            items: [
+                tabContent
+            ],
+            listeners : {
+                scope : this,
+                beforeclose: function( tab, eOpts ) {
+                    if (this.items.getCount() == 1)
+                    {
+                        myDesktopApp.warningMsg('You need to keep at least one plot definition');
+                        return false;
+                    }
+                    return true;
+                },
+                close: function( tab, eOpts ) {
+                    if (tab.items.getAt(0).object)
+                        this.object.removeTabById(tab.items.getAt(0).object.get('id'));
+                },
+                destroy: function(tab, eOpts) {	
+                    this.updatePlotTabs();
+                }
+            }
+        });
  
-    	if (selectTab)
-    		this.setActiveTab(tabComp);
+        if (selectTab)
+            this.setActiveTab(tabComp);
  
-    	return tabContent;
-	},
+        return tabContent;
+    },
  
-	updatePlotTabs: function()
-	{
-		var me = this;
-		var haveSelectedTab = false;
-		this.object.tabs().each(function (rec, index) {
-			if (rec.get('id') == me.object.get('active-tab-id')) {
-				haveSelectedTab = true;
-			}
-		});
-
-		var i = 0;
-		for (i = 0; i < this.items.getCount(); ++i)
-		{
-			var tabItem = this.items.getAt(i);
-			var tabContent = tabItem.items.getAt(0);
-			var tabObj = this.object.tabs().getById(tabContent.tabId);
-			if (!tabObj) {
-				continue;
-			}
-			if (!haveSelectedTab) {
-				//Set first tab as the selected one
-				this.setActiveTab(tabItem);
-				this.object.set('active-tab-id', tabObj.get('id'));
-				haveSelectedTab = true;
-			}
-			var tabNumber =  i+1;
-			tabItem.setTitle((tabObj.get('tab-name') != '') ? tabObj.get('tab-name') : 'Plot '+tabNumber);
-			tabContent.setTabObject(tabObj);
-		}
-	},
-	
-	updateLinkedToMultiPlotMode : function(isLinkedToMultiPlotMode) {
-		this.plotUI.updateLinkedToMultiPlotMode(isLinkedToMultiPlotMode);
-	},
+    updatePlotTabs: function()
+    {
+        // ToDo - BRE
+    },
  
-	updateTimeObject : function() {
-		for (i = 0; i < this.items.getCount(); ++i)
-		{
-			this.items.getAt(i).items.getAt(0).updateTimeObject();
-		}
-	},
+    updateTimeObject : function() {
+        for (i = 0; i < this.items.getCount(); ++i)
+        {
+            this.items.getAt(i).items.getAt(0).updateTimeObject();
+        }
+    },
  
-	getTreeFromPlotTab: function(plotTab)
-	{
-		return plotTab.child().treePlot;
-	},
+    getTreeFromPlotTab: function(plotTab)
+    {
+        return plotTab.child().treePlot;
+    },
  
-	getSelectedTabId: function()
-	{
-		if (this.getActiveTab())
-			return this.getActiveTab().child().tabId;
-		return 0;
-	},
+    getSelectedTabId: function()
+    {
+        if (this.getActiveTab())
+            return this.getActiveTab().child().tabId;
+        return 0;
+    },
  
-	init : function(config) {
-		var me = this;
-		
-		this.plotElementPanel = config.plotElementPanel;
-		this.plotUI = config.plotUI;
-		
-		var myConf = {
-				plain: true,
-				bodyStyle: { background : '#dfe8f6' },
-				border : false,
-				defaults: {
-					border: false
-				},	
-				tabBar:{
-					items:[
-					       {
-					    text:'+',
-					    closable: false,
-					    handler:function(btn,e){
-					    	var tabContent = me.addPlotNode(me.multiplot_object.createNewPlot(), true);
-					    }
-					}]
-				},
-				
-				listeners: {
-					tabchange: function(tabPanel, newCard, oldCard, eOpts ) {
-						var newCardTree = this.getTreeFromPlotTab(newCard);
-						var selectedNode = newCardTree.getSelectedNode();
-						if (selectedNode == null)
-							me.plotElementPanel.resetElement();
-						else
-							me.plotElementPanel.setElement(selectedNode.type,selectedNode.object, newCardTree);
-						newCardTree.updateLinkedToMultiPlotMode();
-					},
-					scope: me
-				}
-		};
-		
-		Ext.apply (this , Ext.apply (arguments, myConf));
-	}
+    init : function(config) {
+        var me = this;
+
+        this.plotUI = config.plotUI;
+
+        var myConf = {
+            plain: true,
+            bodyStyle: { background : '#dfe8f6' },
+            border : false,
+            defaults: {
+                border: false
+            },	
+            tabBar:{
+                items:[
+                    {
+                        text:'+',
+                        closable: false,
+                        handler:function(btn,e){
+                            var tabContent = me.addPlotNode(me.multiplot_object.createNewPlot(), true);
+                        }
+                    }
+                ]
+            }
+        };
+
+        Ext.apply (this , Ext.apply (arguments, myConf));
+    }
 });
@@ -853,10 +853,6 @@ Ext.define(&#39;amdaPlotComp.PlotTree&#39;, {
         }
 	},
  
-	updateLinkedToMultiPlotMode : function() {
-		this.plotTabContent.updateLinkedToMultiPlotMode(this.tabObject.get('multi-plot-linked'));
-	},
-	
 	init : function(config) {
 		var me = this;
  
@@ -894,12 +890,12 @@ Ext.define(&#39;amdaPlotComp.PlotTree&#39;, {
 		this.linkToMultiPlotCombo = Ext.create('Ext.form.field.Checkbox', {
 			xtype: 'checkbox',
 			boxLabel: 'Link to MultiPlot',
+                        disabled: true,
 			listeners: {
 				change: function(combo, newValue, oldValue, eOpts) {
 					if (this.tabObject)
 					{
 			        	this.tabObject.set('multi-plot-linked', newValue);
-			        	this.updateLinkedToMultiPlotMode();
 					}
 				},
 			    scope: this
@@ -10,61 +10,47 @@
  
  
 Ext.define('amdaUI.PlotUI', {
-	extend: 'Ext.container.Container',
-	alias: 'widget.newPanelPlot',
+    extend: 'Ext.container.Container',
+    alias: 'widget.newPanelPlot',
  
-	requires: [
-	           'amdaModel.DownloadNode',
-	           'amdaModel.Download',
-	           'amdaUI.TimeSelectorUI',
-	           'amdaPlotComp.PlotTabPanel',
-	           'amdaPlotComp.PlotOutputForm',
-	           'amdaPlotComp.PlotElementPanel'
+    requires: [
+        'amdaModel.DownloadNode',
+        'amdaModel.Download',
+        'amdaPlotComp.PlotTabPanel'
     ],
  
-	formPanel: null,
-	
-	multiPlotIntervalPanel : null,
-	
-	plotOutput: null,
-	
-	plotTabs : null,
-	
-	plotElement : null,
-	
-	constructor: function(config) {
-		this.init(config);	    
-		this.callParent(arguments);
-		if (this.object)
-			this.setObject(this.object);
-	},
-	
-	setObject : function(object) {
-		this.object = object;
-                if (this.object.plots().count() == 0) {
-                    this.object.createNewPlot();
-                }
-		//this.plotOutput.setObject(this.object);
-		this.plotTabs.setMultiplotObject(this.object);
-		//this.timeSelector.intervalSel.setInterval(this.object.get('startDate'), this.object.get('stopDate'));
-		//this.addTTs(this.object.get('timeTables'));
-	},
+    formPanel: null,	
+    plotTabs : null,
+
+    constructor: function(config) {
+        this.init(config);	    
+        this.callParent(arguments);
+        if (this.object)
+            this.setObject(this.object);
+    },
+
+    setObject : function(object) {
+        this.object = object;
+        if (this.object.plots().count() == 0) {
+            this.object.createNewPlot();
+        }
+        this.plotTabs.setMultiplotObject(this.object);
+    },
  
-	/**
-	 * overwrite metod called by Save button
-	 */
-	overwriteProcess : function(btn)
-	{	
-		if (btn == 'cancel') return;	
-  
-		this.saveProcess(true);		
-	},
+    /**
+     * overwrite metod called by Save button
+     */
+    overwriteProcess : function(btn)
+    {	
+        if (btn == 'cancel') return;
+        this.saveProcess(true);		
+    },
  
  
-	/**
-	 * save method called by Save button to launch the save process
-	 */
-	saveProcess : function(toRename) { 
+    /**
+     * save method called by Save button to launch the save process
+     */
+    saveProcess : function(toRename) { 
 		var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);
 		if (!plotModule)
 							return;
@@ -156,11 +142,6 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
 			crtTimeSelector.addTT(newTTName,newTTid);
 	},
  
-	addTTs : function(TTarray) {
-		// set TTTab	    
-		this.timeSelector.setTTTab(TTarray);
-	},
-
 	/**
 	* Set Start-Stop from parameter info (Local & MyData)
 	*/ 
@@ -189,25 +170,11 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
 		}
 	},
  
-	updatePlotTabName: function(tabId, name) {
-		var me = this;
-		this.object.tabs().each(function (tabObject) {
-			if (tabId == tabObject.getId()) {
-				tabObject.set('tab-name', name);
-				me.plotTabs.updatePlotTabs();
-			}
-		});
-	},
-
 	insertPlotTab : function(tabData) {
 		var newTab = this.object.createNewTab(tabData);
 		this.plotTabs.addPlotTab(newTab,true);
 	},
  
-	updateLinkedToMultiPlotMode : function(isLinkedToMultiPlotMode) {
-		this.timeSelector.setVisible(isLinkedToMultiPlotMode); 
-	},
-
 	keepOnlySelectedTabInObject: function(showWarning, onSuccess) {
 		if (this.object.tabs().count() == 1) {
 			if (onSuccess) {
@@ -328,19 +295,11 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
 	},
  
 	init : function(config) {
-		//this.timeSelector = new amdaUI.TimeSelectorUI( { id: 'multiPlotTimeSelector' + config.id, title : 'MultiPlot Time Selection', border : false, collapsible : true, collapseDirection : 'bottom', visible : false, flex: 2 } );
-		
-		//this.plotOutput = new amdaPlotComp.PlotOutputForm({flex: 2, collapseDirection : 'bottom', collapsible : true });
-		
-		//this.plotElement = new amdaPlotComp.PlotElementPanel({flex: 4});
-
-		this.plotTabs = new amdaPlotComp.PlotTabPanel({flex: 4, plotUI : this});
+		this.plotTabs = new amdaPlotComp.PlotTabPanel({plotUI : this});
  
                 this.formPanel = new Ext.form.Panel({
                     region: 'center',
-                    layout: {
-
-                    },
+                    layout: 'fit',
                     bodyStyle: { background : '#dfe8f6' },
                     defaults: {
                         border: false
@@ -392,110 +351,6 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
                     ]
                 });
  
-		
-		/*this.optionsPanel = new Ext.form.Panel({
-			layout: {
-			    type: 'vbox',
-			    pack: 'start',
-			    align: 'stretch'
-			},
-			bodyStyle: { background : '#dfe8f6' },  
-			defaults: {
-				border: false
-			},
-			items: [
-			        this.plotElement,
-			        this.plotOutput
-			]
-		});
-		
-		this.formPanel = new Ext.form.Panel({
-			region: 'center',
-			layout: {
-			    type: 'hbox',
-			    pack: 'start',
-			    align: 'stretch'
-			},
-			bodyStyle: { background : '#dfe8f6' },  
-			defaults: {
-				border: false
-			},
-			items: [
-			        {
-						xtype : 'panel',
-						layout: {
-						    type: 'vbox',
-						    pack: 'start',
-						    align: 'stretch'
-						},
-						bodyStyle: { background : '#dfe8f6' },
-						defaults: {
-							border: false
-						},
-						flex: 1,
-						items: [
-	        				this.plotTabs,
-	        				this.timeSelector // this.multiPlotIntervalPanel
-	        			]
-					},
-			        {
-			        	xtype : 'panel',
-			        	layout: 'fit',
-			        	bodyStyle: { background : '#dfe8f6' },  
-			        	defaults: {
-							border: false
-						},
-			        	flex: 1,
-			        	items: [
-			        	        this.optionsPanel
-			            ]
-			        }
-			],
-			fbar: [
-					{
-						xtype: 'button',
-						text: 'Plot',
-						scope: this,
-						handler: function(button) {
-							this.doPlot();
-						}
-					},' ', {
-						xtype: 'button',
-						text: 'Get Data',
-						scope: this,
-						handler: function(button) {
-							this.getDataProcess();
-						}
-					},' ', {
-						xtype: 'button',
-						text: 'Reset',
-						scope: this,
-						handler: function(button) {
-							this.resetProcess();
-						}
-					},
-					'->', '-', {
-						xtype: 'splitbutton',
-						text: 'Save All Tabs',
-						menu: {
-							items: [
-								{
-									text: 'Save Current Tab',
-									scope: this,
-									handler: function() {
-										this.savePlotRequest(false);
-									}
-								},
-							]
-						},
-						scope: this,
-						handler: function(button) {
-							this.savePlotRequest(true);
-						}
-					 } 
-			]
-		});*/
-
 		var myConf = {
 			layout: 'border',
 			items: [