Commit d9a1b6f63b31729eaec1f0441e4d6273452b0e99

Authored by Hacene SI HADJ MOHAND
1 parent 915febd3

ajout de fonctions drag and drop reload ko

Showing 2 changed files with 352 additions and 301 deletions   Show diff stats
js/app/controllers/VisuModule.js
@@ -39,6 +39,12 @@ Ext.define('amdaDesktop.VisuModule', { @@ -39,6 +39,12 @@ Ext.define('amdaDesktop.VisuModule', {
39 this.setLinkedNode(temporaryNode); 39 this.setLinkedNode(temporaryNode);
40 40
41 this.createWindow(); 41 this.createWindow();
42 - } 42 + },
  43 +
  44 + addCatalog: function(catalogObject) {
  45 + var uiContent = this.getUiContent();
  46 + uiContent.addCatalog(catalogObject);
  47 + },
  48 +
43 49
44 }); 50 });
js/app/views/VisuUI.js
@@ -8,317 +8,362 @@ @@ -8,317 +8,362 @@
8 */ 8 */
9 9
10 Ext.define('amdaUI.VisuUI', { 10 Ext.define('amdaUI.VisuUI', {
11 - extend: 'Ext.container.Container',  
12 - alias: 'widget.panelVisu', 11 + extend: 'Ext.container.Container',
  12 + alias: 'widget.panelVisu',
13 13
14 - requires: [  
15 - 'amdaUI.CatalogVisuScatter',  
16 - 'amdaUI.CatalogVisuHistogram'  
17 - ], 14 + requires: [
  15 + 'amdaUI.CatalogVisuScatter',
  16 + 'amdaUI.CatalogVisuHistogram'
  17 + ],
18 18
19 - visuTabContents: [], 19 + visuTabContents: [],
20 20
21 - parametersStore: null,  
22 - catalogStore: null,  
23 - emptyChartConfig: null, 21 + parametersStore: null,
  22 + catalogStore: null,
  23 + emptyChartConfig: null,
24 24
25 - constructor: function(config) {  
26 - this.init(config);  
27 - this.callParent(arguments);  
28 - if (this.object) 25 + constructor: function (config) {
  26 + this.init(config);
  27 + this.callParent(arguments);
  28 + if (this.object)
  29 + this.loadObject();
  30 + },
  31 +
  32 + setObject: function (obj) {
  33 + this.object = obj;
29 this.loadObject(); 34 this.loadObject();
30 - },  
31 -  
32 - setObject : function (obj) {  
33 - this.object = obj;  
34 - this.loadObject();  
35 - },  
36 -  
37 - updateObject : function () {  
38 - return true;  
39 - },  
40 -  
41 - reset : function() {  
42 - var tabPanel = Ext.getCmp('visu-tabpanel');  
43 - Ext.Array.each(tabPanel.items.items, function(item) {  
44 - Ext.each(item.query('field'), function(field) {  
45 - field.reset();  
46 - });  
47 - });  
48 - this.replaceChart(null);  
49 - },  
50 -  
51 - /**  
52 - * load object catalog into this view  
53 - */  
54 - loadObject : function()  
55 - {  
56 - var me = this;  
57 -  
58 - var onAfterInit = function(result, e)  
59 - {  
60 - if (!result) {  
61 - myDesktopApp.errorMsg(e.message);  
62 - Ext.defer(function(){Ext.Msg.toFront()},10);  
63 -  
64 - return;  
65 - }  
66 - else if (!result.success)  
67 - {  
68 - if (result.message)  
69 - myDesktopApp.errorMsg(result.message);  
70 - else  
71 - myDesktopApp.errorMsg('Unknown error during catalog cache initialisation');  
72 -  
73 - Ext.defer(function(){Ext.Msg.toFront()},10);  
74 -  
75 - return;  
76 - }  
77 -  
78 - me.parametersStore.removeAll();  
79 - Ext.Array.each(result.parameters, function(param) {  
80 - if ((param.type == 0) || (param.type == 1) || (param.type == 3)) {  
81 - me.parametersStore.add(param);  
82 - }  
83 - });  
84 -  
85 - var dateConvert = function (value, rec) {  
86 - if (!Ext.isDate(value)) {  
87 - var valueString = new String(value);  
88 - return new Date(valueString+'Z');  
89 - }  
90 - return value;  
91 - };  
92 -  
93 - var fieldsConfig = [];  
94 - fieldsConfig.push({type: 'date', id: 'start', name : 'start', dateFormat: 'Y-m-d\\TH:i:s', convert: dateConvert});  
95 - fieldsConfig.push({type: 'date', id: 'stop', name : 'stop', dateFormat: 'Y-m-d\\TH:i:s', convert: dateConvert});  
96 - me.parametersStore.each(function (param) {  
97 - switch (param.get('type')) {  
98 - case 0: //double  
99 - fieldsConfig.push({  
100 - type: 'float',  
101 - id: param.get('id'),  
102 - name: param.get('id') 35 + },
  36 +
  37 + updateObject: function () {
  38 + return true;
  39 + },
  40 + addCatalog: function(cat) {
  41 + this.setObject(cat)
  42 + },
  43 +
  44 + reset: function () {
  45 + var tabPanel = Ext.getCmp('visu-tabpanel');
  46 + Ext.Array.each(tabPanel.items.items, function (item) {
  47 + Ext.each(item.query('field'), function (field) {
  48 + field.reset();
  49 + });
  50 + });
  51 + this.replaceChart(null);
  52 + },
  53 +
  54 + /**
  55 + * load object catalog into this view
  56 + */
  57 + loadObject: function ()
  58 + {
  59 + var me = this;
  60 +
  61 + var onAfterInit = function (result, e)
  62 + {
  63 + if (!result) {
  64 + myDesktopApp.errorMsg(e.message);
  65 + Ext.defer(function () {
  66 + Ext.Msg.toFront()
  67 + }, 10);
  68 +
  69 + return;
  70 + } else if (!result.success)
  71 + {
  72 + if (result.message)
  73 + myDesktopApp.errorMsg(result.message);
  74 + else
  75 + myDesktopApp.errorMsg('Unknown error during catalog cache initialisation');
  76 +
  77 + Ext.defer(function () {
  78 + Ext.Msg.toFront()
  79 + }, 10);
  80 +
  81 + return;
  82 + }
  83 +
  84 + me.parametersStore.removeAll();
  85 + Ext.Array.each(result.parameters, function (param) {
  86 + if ((param.type == 0) || (param.type == 1) || (param.type == 3)) {
  87 + me.parametersStore.add(param);
  88 + }
103 }); 89 });
104 - break;  
105 - case 1: //dateTime  
106 - fieldsConfig.push({  
107 - type: 'date',  
108 - id: param.get('id'),  
109 - name : param.get('id'),  
110 - convert: dateConvert 90 +
  91 + var dateConvert = function (value, rec) {
  92 + if (!Ext.isDate(value)) {
  93 + var valueString = new String(value);
  94 + return new Date(valueString + 'Z');
  95 + }
  96 + return value;
  97 + };
  98 +
  99 + var fieldsConfig = [];
  100 + fieldsConfig.push({type: 'date', id: 'start', name: 'start', dateFormat: 'Y-m-d\\TH:i:s', convert: dateConvert});
  101 + fieldsConfig.push({type: 'date', id: 'stop', name: 'stop', dateFormat: 'Y-m-d\\TH:i:s', convert: dateConvert});
  102 + me.parametersStore.each(function (param) {
  103 + switch (param.get('type')) {
  104 + case 0: //double
  105 + fieldsConfig.push({
  106 + type: 'float',
  107 + id: param.get('id'),
  108 + name: param.get('id')
  109 + });
  110 + break;
  111 + case 1: //dateTime
  112 + fieldsConfig.push({
  113 + type: 'date',
  114 + id: param.get('id'),
  115 + name: param.get('id'),
  116 + convert: dateConvert
  117 + });
  118 + break;
  119 + case 3: //int
  120 + fieldsConfig.push({
  121 + type: 'int',
  122 + id: param.get('id'),
  123 + name: param.get('id')
  124 + });
  125 + break;
  126 + }
111 }); 127 });
112 - break;  
113 - case 3: //int  
114 - fieldsConfig.push({  
115 - type: 'int',  
116 - id: param.get('id'),  
117 - name: param.get('id') 128 +
  129 + me.catalogStore = Ext.create('Ext.data.Store', {
  130 + fields: fieldsConfig
118 }); 131 });
119 - break; 132 + me.catalogStore.loadData(result.intervals);
  133 +
  134 + me.reset();
120 } 135 }
121 - });  
122 -  
123 - me.catalogStore = Ext.create('Ext.data.Store', {  
124 - fields : fieldsConfig  
125 - });  
126 - me.catalogStore.loadData(result.intervals);  
127 -  
128 - me.reset();  
129 - }  
130 -  
131 - var opt = {  
132 - 'typeTT' : 'catalog', 'id' : this.object.get('id'),  
133 - 'name' : this.object.get('name')  
134 - };  
135 -  
136 - this.formPanel.getForm().loadRecord(this.object);  
137 - AmdaAction.readIntervalsForChart(opt, onAfterInit);  
138 - },  
139 -  
140 - /**  
141 - * Check if changes were made before closing window  
142 - * @return true if changes  
143 - */  
144 - fclose : function()  
145 - {  
146 - return false;  
147 - },  
148 -  
149 - plotChart : function () {  
150 - var tabPanel = Ext.getCmp('visu-tabpanel');  
151 - var newChartConfig = tabPanel.activeTab.items.items[0].getChartConfig(this.catalogStore);  
152 - this.replaceChart(newChartConfig);  
153 - },  
154 -  
155 - replaceChart: function(newChartConfig) {  
156 - if (!newChartConfig) {  
157 - newChartConfig = this.emptyChartConfig;  
158 - }  
159 - var chart = Ext.getCmp('visu-chart');  
160 - var chartPanel = chart.up();  
161 - chartPanel.remove(chart);  
162 - chartPanel.insert(Ext.create('Ext.chart.Chart', newChartConfig));  
163 - },  
164 -  
165 - saveChart : function() {  
166 - var chart = Ext.getCmp('visu-chart');  
167 - if (chart) {  
168 - chart.save({  
169 - type: 'image/png',  
170 - defaultUrl : window.location  
171 - });  
172 - }  
173 - },  
174 -  
175 - initChartTypes: function() {  
176 - var me = this;  
177 -  
178 - var tabPanel = Ext.getCmp('visu-tabpanel');  
179 - if (!tabPanel)  
180 - return;  
181 -  
182 - var chartTypes = [  
183 - {  
184 - title: 'Scatter',  
185 - widget: 'widget.panelCatalogVisuScatter'  
186 - },  
187 - {  
188 - title: 'Histogram',  
189 - widget: 'widget.panelCatalogVisuHistogram'  
190 - }  
191 - ];  
192 -  
193 - var isFirst = true;  
194 - Ext.Array.each(chartTypes, function(chartType) {  
195 - var tabContent = Ext.create(chartType.widget, {parametersStore : me.parametersStore});  
196 - var tab = tabPanel.add({  
197 - title: chartType.title,  
198 - items: [  
199 - tabContent  
200 - ],  
201 - layout: 'fit'  
202 - });  
203 - me.visuTabContents.push(tabContent);  
204 - if (isFirst) {  
205 - tabPanel.setActiveTab(tab);  
206 - isFirst = false;  
207 - }  
208 - });  
209 - },  
210 -  
211 - init : function (config)  
212 - {  
213 - this.catalogStore = Ext.create('Ext.data.Store', {  
214 - fields: []  
215 - });  
216 -  
217 - this.parametersStore = Ext.create('Ext.data.Store', {  
218 - fields: [  
219 - {name: 'id', type: 'string'},  
220 - {name: 'name', type: 'string'},  
221 - {name: 'type', type: 'int'}  
222 - ],  
223 - data: []  
224 - });  
225 -  
226 - this.emptyChartConfig = {  
227 - xtype: 'chart',  
228 - region: 'center',  
229 - store: this.catalogStore,  
230 - id: 'visu-chart',  
231 - animate: false,  
232 - mask: false,  
233 - shadow: false,  
234 - theme:'Blue',  
235 - background: { fill : "#fff" }  
236 - };  
237 -  
238 - this.formPanel = Ext.create('Ext.form.Panel', {  
239 - region: 'center',  
240 - layout: 'border',  
241 - bodyStyle: {background : '#dfe8f6'},  
242 - defaults: { border : false, align: 'stretch', padding: '3'},  
243 - items: [  
244 - {  
245 - xtype : 'fieldset',  
246 - region: 'north',  
247 - items : [ 136 +
  137 + var opt = {
  138 + 'typeTT': 'catalog', 'id': this.object.get('id'),
  139 + 'name': this.object.get('name')
  140 + };
  141 +
  142 + this.formPanel.getForm().loadRecord(this.object);
  143 + AmdaAction.readIntervalsForChart(opt, onAfterInit);
  144 + },
  145 +
  146 + /**
  147 + * Check if changes were made before closing window
  148 + * @return true if changes
  149 + */
  150 + fclose: function ()
  151 + {
  152 + return false;
  153 + },
  154 +
  155 + plotChart: function () {
  156 + var tabPanel = Ext.getCmp('visu-tabpanel');
  157 + var newChartConfig = tabPanel.activeTab.items.items[0].getChartConfig(this.catalogStore);
  158 + this.replaceChart(newChartConfig);
  159 + },
  160 +
  161 + replaceChart: function (newChartConfig) {
  162 + if (!newChartConfig) {
  163 + newChartConfig = this.emptyChartConfig;
  164 + }
  165 + var chart = Ext.getCmp('visu-chart');
  166 + var chartPanel = chart.up();
  167 + chartPanel.remove(chart);
  168 + chartPanel.insert(Ext.create('Ext.chart.Chart', newChartConfig));
  169 + },
  170 +
  171 + saveChart: function () {
  172 + var chart = Ext.getCmp('visu-chart');
  173 + if (chart) {
  174 + chart.save({
  175 + type: 'image/png',
  176 + defaultUrl: window.location
  177 + });
  178 + }
  179 + },
  180 +
  181 + initChartTypes: function () {
  182 + var me = this;
  183 +
  184 + var tabPanel = Ext.getCmp('visu-tabpanel');
  185 + if (!tabPanel)
  186 + return;
  187 +
  188 + var chartTypes = [
248 { 189 {
249 - xtype: 'fieldcontainer',  
250 - layout: 'hbox',  
251 - fieldDefaults: { labelWidth: 80, labelAlign : 'right' },  
252 - items: [  
253 - { xtype:'textfield', fieldLabel: 'Catalog Name', name: 'name', readOnly: true},  
254 - { xtype: 'splitter' },  
255 - { xtype:'textfield', fieldLabel: 'Intervals', name: 'nbIntervals', readOnly: true}  
256 - ]  
257 - }  
258 - ],  
259 - },  
260 - {  
261 - xtype: 'container',  
262 - region: 'center',  
263 - layout: 'border',  
264 - items: [ 190 + title: 'Scatter',
  191 + widget: 'widget.panelCatalogVisuScatter'
  192 + },
265 { 193 {
266 - xtype: 'tabpanel',  
267 - region: 'west',  
268 - width: 250, 194 + title: 'Histogram',
  195 + widget: 'widget.panelCatalogVisuHistogram'
  196 + }
  197 + ];
  198 +
  199 + var isFirst = true;
  200 + Ext.Array.each(chartTypes, function (chartType) {
  201 + var tabContent = Ext.create(chartType.widget, {parametersStore: me.parametersStore});
  202 + var tab = tabPanel.add({
  203 + title: chartType.title,
  204 + items: [
  205 + tabContent
  206 + ],
  207 + layout: 'fit'
  208 + });
  209 + me.visuTabContents.push(tabContent);
  210 + if (isFirst) {
  211 + tabPanel.setActiveTab(tab);
  212 + isFirst = false;
  213 + }
  214 + });
  215 + },
  216 +
  217 + init: function (config)
  218 + {
  219 + this.catalogStore = Ext.create('Ext.data.Store', {
  220 + fields: []
  221 + });
  222 +
  223 + this.parametersStore = Ext.create('Ext.data.Store', {
  224 + fields: [
  225 + {name: 'id', type: 'string'},
  226 + {name: 'name', type: 'string'},
  227 + {name: 'type', type: 'int'}
  228 + ],
  229 + data: []
  230 + });
  231 +
  232 + this.emptyChartConfig = {
  233 + xtype: 'chart',
  234 + region: 'center',
  235 + store: this.catalogStore,
  236 + id: 'visu-chart',
  237 + animate: false,
  238 + mask: false,
  239 + shadow: false,
  240 + theme: 'Blue',
  241 + background: {fill: "#fff"}
  242 + };
  243 +
  244 + this.formPanel = Ext.create('Ext.form.Panel', {
  245 + region: 'center',
  246 + layout: 'border',
  247 + bodyStyle: {background: '#dfe8f6'},
  248 + defaults: {border: false, align: 'stretch', padding: '3'},
  249 + items: [
  250 + {
  251 + xtype: 'fieldset',
  252 + region: 'north',
  253 + items: [
  254 + {
  255 + xtype: 'fieldcontainer',
  256 + layout: 'hbox',
  257 + fieldDefaults: {labelWidth: 80, labelAlign: 'right'},
  258 + items: [
  259 + {xtype: 'textfield', fieldLabel: 'Catalog Name', name: 'name', readOnly: true},
  260 + {xtype: 'splitter'},
  261 + {xtype: 'textfield', fieldLabel: 'Intervals', name: 'nbIntervals', readOnly: true}
  262 + ]
  263 + }
  264 + ],
  265 + },
  266 + {
  267 + xtype: 'container',
  268 + region: 'center',
  269 + layout: 'border',
  270 + items: [
  271 + {
  272 + xtype: 'tabpanel',
  273 + region: 'west',
  274 + width: 250,
269 // height: 400, 275 // height: 400,
270 - id: 'visu-tabpanel'  
271 - },  
272 - this.emptyChartConfig  
273 - ]  
274 - }  
275 - ],  
276 - fbar:[  
277 - {  
278 - type: 'button',  
279 - text: 'Plot',  
280 - scope : this,  
281 - handler: this.plotChart  
282 - },  
283 - {  
284 - type: 'button',  
285 - text: 'Reset',  
286 - scope : this,  
287 - handler: this.reset  
288 - },  
289 - {  
290 - type: 'button',  
291 - text: 'Save Chart',  
292 - scope : this,  
293 - handler: this.saveChart  
294 - }  
295 - ]  
296 - });  
297 -  
298 - var myConf = {  
299 - layout: 'border',  
300 - items: [  
301 - this.formPanel,  
302 - {  
303 - xtype: 'panel',  
304 - region: 'south',  
305 - title: 'Information',  
306 - collapsible: true,  
307 - collapseMode: 'header',  
308 - height: 100,  
309 - autoHide: false,  
310 - bodyStyle: 'padding:5px',  
311 - iconCls: 'icon-information',  
312 - loader: {  
313 - autoLoad: true,  
314 - url: helpDir+'visuHOWTO'  
315 - }  
316 - }  
317 - ]  
318 - };  
319 -  
320 - this.initChartTypes();  
321 -  
322 - Ext.apply (this, Ext.apply(arguments, myConf)); 276 + id: 'visu-tabpanel'
  277 + },
  278 + this.emptyChartConfig
  279 + ]
  280 + }
  281 + ],
  282 + fbar: [
  283 + {
  284 + type: 'button',
  285 + text: 'Plot',
  286 + scope: this,
  287 + handler: this.plotChart
  288 + },
  289 + {
  290 + type: 'button',
  291 + text: 'Reset',
  292 + scope: this,
  293 + handler: this.reset
  294 + },
  295 + {
  296 + type: 'button',
  297 + text: 'Save Chart',
  298 + scope: this,
  299 + handler: this.saveChart
  300 + }
  301 + ],
  302 + listeners:
  303 + {
  304 + render: function (o, op)
  305 + {
  306 + var me = this;
  307 + var el = me.body.dom;
  308 + var dropTarget = Ext.create('Ext.dd.DropTarget', el, {
  309 + ddGroup: 'explorerTree',
  310 + notifyEnter: function (ddSource, e, data)
  311 + {
  312 +
  313 + },
  314 + notifyOver: function (ddSource, e, data)
  315 + {
  316 + var nodeType = data.records[0].get('nodeType');
  317 + if ((nodeType == 'catalog' || nodeType == 'sharedcatalog') &&
  318 + (data.records[0].get('leaf')))
  319 + {
  320 + this.valid = true;
  321 + return this.dropAllowed;
  322 + }
  323 + this.valid = false;
  324 + return this.dropNotAllowed;
  325 + },
  326 + notifyDrop: function (ddSource, e, data)
  327 + {
  328 + if (!this.valid)
  329 + return false;
  330 + var visuModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.visu.id);
  331 + if (visuModule) {
  332 + var dropObject = data.records[0];
  333 + dropObject.set('name', data.records[0].get('text'));
  334 + visuModule.addCatalog(dropObject);
  335 + }
  336 + return true;
  337 + }
  338 + });
  339 + }
  340 + }
  341 + });
  342 +
  343 + var myConf = {
  344 + layout: 'border',
  345 + items: [
  346 + this.formPanel,
  347 + {
  348 + xtype: 'panel',
  349 + region: 'south',
  350 + title: 'Information',
  351 + collapsible: true,
  352 + collapseMode: 'header',
  353 + height: 100,
  354 + autoHide: false,
  355 + bodyStyle: 'padding:5px',
  356 + iconCls: 'icon-information',
  357 + loader: {
  358 + autoLoad: true,
  359 + url: helpDir + 'visuHOWTO'
  360 + }
  361 + }
  362 + ]
  363 + };
  364 +
  365 + this.initChartTypes();
  366 +
  367 + Ext.apply(this, Ext.apply(arguments, myConf));
323 } 368 }
324 }); 369 });