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

Last change on this file since 366 was 366, checked in by vmipsl, 12 years ago

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