source: ether_megapoli/trunk/web/visualization/visu_parameter_by_pf-script.jsp @ 217

Last change on this file since 217 was 217, checked in by vmipsl, 13 years ago

download with popup
File size: 20.7 KB
Line 
1<%@ page import="com.ether.EtherPlotServiceImpl" %>
2
3<script type="text/javascript">
4var InterfaceVisualization = Class.create( {
5
6    initialize: function( jsonPlateforms, axeTypesForFixedPlateforms, axeTypesForMobilePlateforms )
7    {
8        // Values
9        this.parent = $( "txt" );
10        this.superParent = $( "pageContent" ); // need to resize in function of containerParameters
11        this.generalContainerPlateforms = $( "generalContainerPlateforms" );
12        this.generalContainerParameters = $( "generalContainerParameters" );
13        this.generalContainerOptions = $( "generalContainerOptions" );
14        this.jsonPlateforms = jsonPlateforms || null;
15        this.jsonAxeTypesForFixedPlateforms = axeTypesForFixedPlateforms || null;
16        this.jsonAxeTypesForMobilePlateforms = axeTypesForMobilePlateforms || null;
17        this.selectedPlateform = false;
18        this.selectedParameter = false;
19        this.beginDate = false;
20        this.endDate = false;
21        this.numberParameterToDisplay = 0;
22
23        /** *********** CONTAINERS *********** **/
24        this.containerPlateforms = $( "containerPlateforms" );
25        this.containerParameters = $( "containerParameters" );
26        this.containerButtons = $( "containerButtons" );
27        this.containerOptionCalendar = $( "containerOptionCalendar" );
28        this.containerOptionType = $( "containerOptionType" );
29        this.containerOptionPlotsSelect = $( "containerOptionPlotsSelect" );
30        this.containerOptionPlotsButtons = $( "containerOptionPlotsButtons" );
31
32        /** *********** LOADING *********** **/
33        // Create loading object for plateforms
34        var param = new Object();
35        param.id = "loadingForPlateforms";
36        param.parent = this.containerPlateforms;
37        this.loadingPlateforms = new Loading( param );
38        this.loadingPlateforms.display();
39
40        // Create loading object for parameters
41        var param = new Object();
42        param.id = "loadingForParameters";
43        param.parent = this.containerParameters;
44        this.loadingParameters = new Loading( param );
45        this.loadingParameters.display();
46
47        /** *********** WINDOW FOR THE PLOT *********** **/
48        this.plotWindow = new Window( {className: "dialog", zIndex: 100,
49            resizable: true, draggable:true, wiredDrag: true,
50            showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff } );
51        this.plotWindow.setTitle( interfaceTexts["app.title"] + "-" + interfaceTexts["data.visualization.quicklook"] );
52
53        this.createOptions();
54        this.displayPlateforms();
55    },
56
57    // CREATES ********************************************************
58    createOptions: function()
59    {
60        // Calendar
61        this.calendarFormat = "%Y-%m-%d %H:%i";
62        this.calendarConverter = new AnyTime.Converter( { format: this.calendarFormat } );
63
64        AnyTime.picker( "beginDate", { format: this.calendarFormat, firstDOW: 1,
65            labelTitle: interfaceTexts["data.visualization.selectDate"], labelYear: interfaceTexts["data.visualization.selectYear"], labelMonth: interfaceTexts["data.visualization.selectMonth"], labelDayOfMonth: interfaceTexts["data.visualization.selectDay"],
66            labelHour: interfaceTexts["data.visualization.selectHour"], labelMinute: interfaceTexts["data.visualization.selectMinute"],
67            methodToCall: this.onClickBeginDate.bindAsEventListener( this )
68        } );
69
70        AnyTime.picker( "endDate", { format: this.calendarFormat, firstDOW: 1,
71            labelTitle: interfaceTexts["data.visualization.selectDate"], labelYear: interfaceTexts["data.visualization.selectYear"], labelMonth: interfaceTexts["data.visualization.selectMonth"], labelDayOfMonth: interfaceTexts["data.visualization.selectDay"],
72            labelHour: interfaceTexts["data.visualization.selectHour"], labelMinute: interfaceTexts["data.visualization.selectMinute"],
73            methodToCall: this.onClickEndDate.bindAsEventListener( this ),
74            idToUpdateEarliest: "beginDate"
75        } );
76
77        this.clearCalendarButton = new Button( {value:interfaceTexts["data.visualization.button.clear"], parent:this.containerOptionCalendar, id:"button_clear_calendar", className:"small", onClick:this.onClickClear.bind( this )} );
78
79        // Buttons and axe's types
80        this.createButtons();
81        this.createListTypes();
82        this.createListPlots();
83    },
84
85    createButtons: function()
86    {
87        this.visualizeButton = new Button( {value:interfaceTexts["data.visualization.button.visualize"], parent:this.containerButtons, id:"button_visualize", onClick:this.onClickVisualize.bind( this )} );
88        this.visualizeButton.disable();
89        this.downloadButton = new Button( {value:interfaceTexts["data.visualization.button.download"], parent:this.containerButtons, id:"button_download", onClick:this.onClickDownload.bind( this )} );
90        this.downloadButton.disable();
91    },
92
93    createListTypes: function()
94    {
95        var paramSelect = new Object();
96        paramSelect.id = "select_axes";
97        paramSelect.parent = this.containerOptionType;
98        this.selectAxes = new Select( paramSelect );
99    },
100
101    createListPlots: function()
102    {
103        var paramSelect = new Object();
104        paramSelect.id = "select_plots";
105        paramSelect.parent = this.containerOptionPlotsSelect;
106        paramSelect.classNameOption = "select_plot_option";
107        this.selectPlots = new Select( paramSelect );
108        this.selectParameters = $A();
109        this.selectPlots.add( null, interfaceTexts["data.visualization.graph.noPlot"] );
110        this.selectPlots.selectFirst( false );
111
112        this.selectPlotsPlateformType = false;
113
114        this.addPlotButton = new Button( {value:interfaceTexts["data.visualization.add"], parent:this.containerOptionPlotsButtons, id:"button_add_plot", className:"small", onClick:this.onClickAddPlot.bind( this )} );
115        this.addPlotButton.disable();
116        this.initPlotButton = new Button( {value:interfaceTexts["data.visualization.button.init"], parent:this.containerOptionPlotsButtons, id:"button_init_plot", className:"small", onClick:this.onClickInitPlot.bind( this )} );
117    },
118
119    // REQUESTS ********************************************************
120    requestParametersByPlateform: function()
121    {
122        if( this.selectedPlateform )
123            new Ajax.Request( "visualization?methodName=searchParametersByPlateform&id=" + this.selectedPlateform.getId(),
124            {
125                onSuccess:this.handleParametersBySelectedPlateform.bind( this )
126            } );
127    },
128
129    requestDownload: function()
130    {
131        var urlObject = this.createUrl();
132        new Ajax.Request( "?methodName=downloadData&" + urlObject.parameters,
133        {
134            onSuccess:this.handleDownload.bind( this )
135        } );
136    },
137
138    // HANDLES ********************************************************
139    handleParametersBySelectedPlateform: function( result )
140    {
141        this.jsonParameters = result.responseText.evalJSON().parameters;
142        this.displayParameters();
143    },
144
145    handleDownload: function( result )
146    {
147        var stateResult = result.responseText.evalJSON().result;
148
149        var downloadWindow = new Window( {className: "dialog", zIndex: 100, resizable: true, draggable:true, wiredDrag: true, showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff } );
150        downloadWindow.setTitle( interfaceTexts["data.access.extract3"] );
151        if( stateResult == "ok" )
152        {
153            downloadWindow.getContent().innerHTML = '<div class="textExamplesTD">' + interfaceTexts["data.access.extract.process.short"] + '</div>';
154            downloadWindow.setSize( 350, 50 );
155        }
156        else
157        {
158            downloadWindow.getContent().innerHTML = '<div class="textExamplesTD">' + interfaceTexts["data.access.extract.process.error"] + '</div>';
159            downloadWindow.setSize( 350, 60 );
160        }
161        downloadWindow.show();
162    },
163
164    // DISPLAYS ********************************************************
165    displayPlateforms: function()
166    {
167        this.plateforms = new ListPlatforms( this.jsonPlateforms, new Object() );
168
169        this.plateforms.addOpenListener( this.onSelectPlateform.bind( this ) );
170        this.loadingPlateforms.hide();
171        this.plateforms.displayWithPairImpair( this.containerPlateforms, "NoPlateform", interfaceTexts["data.visualization.noPlateform"] );
172
173        // Select the first plateform by default
174        if( this.jsonPlateforms && this.jsonPlateforms[0] )
175        {
176            var plateformToSelect = this.plateforms.getItemById( this.jsonPlateforms[0].id );
177            this.onSelectPlateform( plateformToSelect.divItem );
178            this.selectedPlateform = plateformToSelect.divItem;
179        }
180    },
181
182    displayParameters: function()
183    {
184        var objectParameter = new Object();
185        objectParameter.onMouseOverContainer = this.onMouseOverParameter;
186        objectParameter.onMouseOutContainer = this.onMouseOutParameter;
187        this.parameters = new ListParameters( this.jsonParameters, objectParameter );
188
189        this.parameters.addOpenListener( this.onSelectParameter.bind( this ) );
190        this.loadingParameters.hide();
191        this.parameters.displayWithPairImpair( this.containerParameters, "NoParameter", interfaceTexts["data.visualization.noParameter"] );
192
193        this.resizeContainers();
194    },
195
196    // EVENTS ********************************************************
197    onSelectPlateform: function( objPlateform )
198    {
199        if( this.selectedPlateform && objPlateform.getId() == this.selectedPlateform.getId() )
200            return;
201
202        // Unselect old plateform
203        if( this.selectedPlateform )
204            this.selectedPlateform.unselect();
205
206        this.selectedPlateform = objPlateform;
207        this.selectedPlateform.select();
208
209        // Unselect old parameter
210        if( this.selectedParameter )
211            this.selectedParameter = false;
212
213        // Change axe's list select
214        this.updateListAxes();
215
216        this.addPlotButton.disable();
217
218        $( "textareaTitle" ).value = this.selectedPlateform.getName();
219
220        // Init number and list of parameter to display
221        if( "MOBILE" == this.selectedPlateform.jsonElement.type )
222            this.updateNumberAndListParameterToDisplay( 0 );
223
224        if( 1 > this.selectPlots.getSize() )
225            this.numberParameterToDisplay = 0;
226
227        this.requestParametersByPlateform();
228        this.testAllFields();
229    },
230
231    onSelectParameter: function( objParameter )
232    {
233        if( this.selectedParameter && objParameter.getId() == this.selectedParameter.getId() )
234            return;
235
236        // Unselect old parameter
237        if( this.selectedParameter )
238            this.selectedParameter.unselect();
239
240        this.selectedParameter = objParameter;
241        this.selectedParameter.select();
242
243        // Change title
244        $( "textareaTitle" ).value = this.selectedPlateform.getName() + " - " + this.selectedParameter.getName();
245
246        // Update number and list of parameter to display
247        this.updateNumberAndListParameterToDisplay( 1 );
248
249        // Enable/disable addPlot's button
250        if( (!this.selectPlotsPlateformType || this.selectPlotsPlateformType == this.selectedPlateform.jsonElement.type) && "MOBILE" != this.selectedPlateform.jsonElement.type )
251            this.addPlotButton.enable();
252        else
253            this.addPlotButton.disable();
254
255        this.testAllFields();
256    },
257
258    onMouseOverParameter: function()
259    {
260        this.divContainer.innerHTML = this.jsonElement.name + " (" + this.jsonElement.code + ")";
261    },
262
263    onMouseOutParameter: function()
264    {
265        this.divContainer.innerHTML = this.jsonElement.name;
266    },
267
268    onClickBeginDate: function()
269    {
270        var oneHour = 60 * 60 * 1000;
271        var beginDateTime = this.calendarConverter.parse( $( "beginDate" ).value ).getTime();
272        var endDateTime = null;
273        if( "" != $( "endDate" ).value )
274            endDateTime = this.calendarConverter.parse( $( "endDate" ).value ).getTime();
275        this.beginDateWithAnHourLater = new Date( beginDateTime + oneHour );
276
277        if( null == endDateTime || endDateTime < beginDateTime )
278            $( "endDate" ).value = this.calendarConverter.format( this.beginDateWithAnHourLater );
279
280        this.beginDate = this.calendarConverter.parse( $( "beginDate" ).value ).getTime();
281        this.endDate = this.calendarConverter.parse( $( "endDate" ).value ).getTime();
282
283        this.testAllFields();
284    },
285
286    onClickEndDate: function()
287    {
288        this.endDate = this.calendarConverter.parse( $( "endDate" ).value ).getTime();
289    },
290
291    onClickClear: function()
292    {
293        $( "beginDate" ).value = "";
294        this.beginDate = false;
295        $( "endDate" ).value = "";
296        this.endDate = false;
297    },
298
299    onClickInitPlot: function()
300    {
301        this.updateNumberAndListParameterToDisplay( 0 );
302    },
303
304    onClickAddPlot: function()
305    {
306        this.updateNumberAndListParameterToDisplay( 2 );
307    },
308
309    onClickVisualize: function()
310    {
311        var urlObject = this.createUrl();
312
313        if( urlObject.displayPlot )
314        {
315            var url = "visualization/plotEther?" + urlObject.parameters;
316
317            this.plotWindow.getContent().innerHTML = '<img src=' + url + ' />';
318            this.plotWindow.setSize( <%=EtherPlotServiceImpl.getMaxWidth()%>, <%=EtherPlotServiceImpl.getMaxHeight()%> );
319            this.plotWindow.show();
320        }
321        else
322        {
323            this.plotWindow.getContent().innerHTML = '<BR/><center>' + interfaceTexts["data.visualization.graph.noPlot"] + '</center>';
324            this.plotWindow.setSize( 400, 50 );
325            this.plotWindow.show();
326        }
327    },
328
329    onClickDownload: function()
330    {
331        if( <%=null == request.getSession().getAttribute( "SES_USER" )%> )
332        {
333            var loginWindow = new Window( {className: "dialog", zIndex: 100, resizable: true, draggable:true, wiredDrag: true, showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff } );
334            loginWindow.setTitle( interfaceTexts["data.authentification"] );
335            loginWindow.getContent().innerHTML = '<div class="textExamplesTD">' + interfaceTexts["data.authentification.text"] + '</div>';
336            loginWindow.setSize( 350, 50 );
337            loginWindow.show();
338        }
339        else
340            this.requestDownload();
341    },
342
343    // OTHERS ********************************************************
344    resizeContainers: function()
345    {
346        var titleSize = document.getElementById( "nav" ).offsetHeight + document.getElementById( "title" ).offsetHeight + 30;
347        var parentHeight = this.superParent.offsetHeight - titleSize;
348        var containerPlateformsHeight = this.generalContainerParameters.offsetHeight;
349        var containerParametersHeight = this.generalContainerParameters.offsetHeight;
350
351        var containerPlateforms = this.containerPlateforms.offsetHeight;
352        var containerParameters = this.containerParameters.offsetHeight;
353        var containerOptionsHeight = this.generalContainerOptions.offsetHeight;
354
355        var maxHeight = Math.max( containerPlateforms, containerParameters, containerOptionsHeight );
356
357        this.superParent.style.height = maxHeight + titleSize + 35 + "px";
358        this.generalContainerPlateforms.style.height = maxHeight + 20 + "px";
359        this.generalContainerParameters.style.height = maxHeight + 20 + "px";
360    },
361
362    testAllFields: function()
363    {
364        if( (!this.selectedPlateform || !this.selectedParameter) && 0 == this.numberParameterToDisplay )
365        {
366            this.visualizeButton.disable();
367            this.downloadButton.disable();
368            return;
369        }
370
371        this.visualizeButton.enable();
372        this.downloadButton.enable();
373    },
374
375    updateListAxes: function()
376    {
377        this.selectAxes.clear();
378        var jsonAxeTypes;
379
380        if( "MOBILE" == this.selectedPlateform.jsonElement.type )
381            jsonAxeTypes = this.jsonAxeTypesForMobilePlateforms;
382        else
383            jsonAxeTypes = this.jsonAxeTypesForFixedPlateforms;
384
385        jsonAxeTypes.each( function ( axeType )
386        {
387            this.selectAxes.add( axeType.value, interfaceTexts[axeType.text] );
388        }.bind( this ) );
389
390        this.selectAxes.selectFirst( false );
391    },
392
393    /**
394     * action = 0 --> init list
395     * action = 1 --> select parameter
396     * action = 2 --> add parameter
397     */
398    updateNumberAndListParameterToDisplay: function( action )
399    {
400        switch( action )
401        {
402            case 0:
403                // INIT
404                this.selectPlots.clear();
405                this.selectParameters.clear();
406                this.selectPlotsPlateformType = false;
407
408                if( this.selectedPlateform && this.selectedParameter )
409                {
410                    this.selectPlots.changeSelectMiddle( this.selectedPlateform.getId() + "-" + this.selectedParameter.getId(), this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
411
412                    this.numberParameterToDisplay = 1;
413                    $( "messages_number_parameters" ).innerHTML = this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"];
414                }
415                else
416                {
417                    this.selectPlots.add( null, interfaceTexts["data.visualization.graph.noPlot"] );
418                    this.selectPlots.selectFirst( false );
419
420                    this.numberParameterToDisplay = 0;
421                    $( "messages_number_parameters" ).innerHTML = "";
422                }
423                break;
424
425            case 1 :
426                // SELECT
427                if( 0 == this.numberParameterToDisplay || "MOBILE" == this.selectedPlateform.jsonElement.type )
428                {
429                    this.selectPlots.clear();
430                    this.selectParameters.clear();
431                    this.numberParameterToDisplay = 1;
432                }
433
434                this.selectPlots.changeSelectMiddle( this.selectedPlateform.getId() + "-" + this.selectedParameter.getId(), this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
435                $( "messages_number_parameters" ).innerHTML = this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"];
436                break;
437
438            default:
439                // ADD
440                var plotValue = this.selectedPlateform.getId() + "-" + this.selectedParameter.getId();
441                var isParameterAlreadySelected = content( this.selectParameters, this.selectedParameter.getId() );
442                if( !this.selectPlots.content( plotValue ) && (isParameterAlreadySelected || (!isParameterAlreadySelected && this.selectParameters.size() < 2)) )
443                {
444                    this.selectPlots.add( plotValue, this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
445                    this.selectPlots.select( plotValue, false );
446                    this.selectPlotsPlateformType = this.selectedPlateform.jsonElement.type;
447                    if( !isParameterAlreadySelected )
448                        this.selectParameters[this.selectParameters.size()] = this.selectedParameter.getId();
449
450                    this.numberParameterToDisplay = this.selectPlots.getSize();
451                }
452
453                $( "messages_number_parameters" ).innerHTML = this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"];
454                break;
455        }
456    },
457
458    createUrl : function()
459    {
460        // TODO : utiliser JSON pour envoyer arrayPIdPId
461        var result = new Object();
462
463        result.displayPlot = true;
464        var arrayPIdPId = new Array();
465        if( 1 <= this.numberParameterToDisplay && 1 <= this.selectPlots.getSize() )
466        {
467            var index = 0;
468            this.selectPlots.arrayOptions.each( function( option )
469            {
470                arrayPIdPId[index] = option.itemValue;
471                index++;
472            } );
473        }
474        else if( this.selectedPlateform && this.selectedParameter )
475            arrayPIdPId[0] = this.selectedPlateform.getId() + "-" + this.selectedParameter.getId();
476        else
477            result.displayPlot = false;
478
479        result.parameters = "dateBegin=" + this.beginDate
480                + "&dateEnd=" + this.endDate
481                + "&title=" + encodeURIComponent( $( "textareaTitle" ).value )
482                + "&pfIdPIdList=" + arrayPIdPId
483                + "&axeType=" + this.selectAxes.getValue();
484
485        return result;
486    }
487} );
488
489function onClickHelp()
490{
491    var helpWindow = new Window( {className: "dialog", zIndex: 100, resizable: true, draggable:true, wiredDrag: true, showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff } );
492    helpWindow.setTitle( interfaceTexts["data.visualization.parameter.buttons.help"] );
493    helpWindow.getContent().innerHTML = '<div class="textExamplesTD">' + interfaceTexts["data.visualization.parameter.buttons.help.text"] + '</div>';
494    helpWindow.setSize( 350, 100 );
495    helpWindow.show();
496}
497
498
499</script>
Note: See TracBrowser for help on using the repository browser.