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

Last change on this file since 339 was 339, checked in by vmipsl, 12 years ago
  • UserSerializer?
  • Correction fenêtre visualisation aide + download
  • Upload fichier --> image poubelle
  • Correction chrome
File size: 19.6 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.clearCalendarButton = new Button( {value:interfaceTexts["visualization.button.clear"], parent:this.containerOptionCalendar, id:"button_clear_calendar", className:"small", onClick:jQuery.proxy( this.onClickClear, this )} );
77
78        // Buttons and axe's types
79        this.createButtons();
80        this.createListTypes();
81        this.createListPlots();
82    },
83
84    createButtons: function()
85    {
86        this.visualizeButton = new Button( {value:interfaceTexts["visualization.button.visualize"], parent:this.containerButtons, id:"button_visualize", onClick:jQuery.proxy( this.onClickVisualize, this )} );
87        this.visualizeButton.disable();
88        this.downloadButton = new Button( {value:interfaceTexts["visualization.button.download"], parent:this.containerButtons, id:"button_download", onClick:jQuery.proxy( this.onClickDownload, this )} );
89        this.downloadButton.disable();
90    },
91
92    createListTypes: function()
93    {
94        var paramSelect = new Object();
95        paramSelect.id = "select_axes";
96        paramSelect.parent = this.containerOptionType;
97        this.selectAxes = new Select( paramSelect );
98    },
99
100    createListPlots: function()
101    {
102        var paramSelect = new Object();
103        paramSelect.id = "select_plots";
104        paramSelect.parent = this.containerOptionPlotsSelect;
105        paramSelect.classNameOption = "select_plot_option";
106        this.selectPlots = new Select( paramSelect );
107        this.selectParameters = $();
108        this.selectPlots.add( null, interfaceTexts["visualization.graph.noPlot"] );
109        this.selectPlots.selectFirst( false );
110
111        this.selectPlotsPlateformType = false;
112
113        this.addPlotButton = new Button( {value:interfaceTexts["visualization.add"], parent:this.containerOptionPlotsButtons, id:"button_add_plot", className:"small", onClick:jQuery.proxy( this.onClickAddPlot, this )} );
114        this.addPlotButton.disable();
115        this.initPlotButton = new Button( {value:interfaceTexts["visualization.button.init"], parent:this.containerOptionPlotsButtons, id:"button_init_plot", className:"small", onClick:jQuery.proxy( this.onClickInitPlot, this )} );
116    },
117
118    // REQUESTS ********************************************************
119    requestParametersByPlateform: function()
120    {
121        if( this.selectedPlateform )
122            $.ajax( {
123                url: "visualization?methodName=searchParametersByPlateform&id=" + this.selectedPlateform.getId(),
124                success:jQuery.proxy( this.handleParametersBySelectedPlateform, this )
125            } );
126    },
127
128    requestDownload: function()
129    {
130        var urlObject = this.createUrl();
131        $.ajax( {
132            url: "visualization?methodName=downloadData&" + urlObject.parameters,
133            success:jQuery.proxy( this.handleDownload, this )
134        } );
135    },
136
137    // HANDLES ********************************************************
138    handleParametersBySelectedPlateform: function( result )
139    {
140        this.jsonParameters = jQuery.parseJSON( result ).parameters;
141        this.displayParameters();
142    },
143
144    handleDownload: function( result )
145    {
146        var stateResult = jQuery.parseJSON( result ).result;
147
148        if( "ok" == stateResult )
149        {
150            var $dialog = $( '<div></div>' )
151                    .html( '<div class="textExamplesTD">' + interfaceTexts["data.access.extract.process.short"] + '</div>' )
152                    .dialog( {
153                                 autoOpen: false,
154                                 title: interfaceTexts["data.access.extract3"],
155                                 minHeight: 50,
156                                 minWidth: 350
157                             } );
158            $dialog.dialog( 'open' );
159        }
160        else
161        {
162            var $dialog = $( '<div></div>' )
163                    .html( '<div class="textExamplesTD">' + interfaceTexts["data.access.extract.process.error"] + '</div>' )
164                    .dialog( {
165                                 autoOpen: false,
166                                 title: interfaceTexts["data.access.extract3"],
167                                 minHeight: 60,
168                                 minWidth: 350
169                             } );
170            $dialog.dialog( 'open' );
171        }
172    },
173
174    // DISPLAYS ********************************************************
175    displayPlateforms: function()
176    {
177        this.plateforms = new ListPlatforms( this.jsonPlateforms, new Object() );
178
179        this.plateforms.addOpenListener( jQuery.proxy( this.onSelectPlateform, this ) );
180        this.loadingPlateforms.hide();
181        this.plateforms.display( this.containerPlateforms, "NoPlateform", interfaceTexts["visualization.noPlateform"] );
182
183        // Select the first plateform by default
184        if( this.jsonPlateforms && this.jsonPlateforms[0] )
185        {
186            var plateformToSelect = this.plateforms.getItemById( this.jsonPlateforms[0].id );
187            this.onSelectPlateform( plateformToSelect.divItem );
188            this.selectedPlateform = plateformToSelect.divItem;
189        }
190    },
191
192    displayParameters: function()
193    {
194        this.parameters = new ListParameters( this.jsonParameters, new Object() );
195
196        this.parameters.addOpenListener( jQuery.proxy( this.onSelectParameter, this ) );
197        this.loadingParameters.hide();
198        this.parameters.display( this.containerParameters, "NoParameter", interfaceTexts["visualization.noParameter"], "containerParameter" );
199    },
200
201    // EVENTS ********************************************************
202    onSelectPlateform: function( objPlateform )
203    {
204        if( this.selectedPlateform && objPlateform.getId() == this.selectedPlateform.getId() )
205            return;
206
207        // Unselect old plateform
208        if( this.selectedPlateform )
209            this.selectedPlateform.unselect();
210
211        this.selectedPlateform = objPlateform;
212        this.selectedPlateform.select();
213
214        // Unselect old parameter
215        if( this.selectedParameter )
216            this.selectedParameter = false;
217        this.selectedParameterId = false;
218
219        // Change axe's list select
220        this.updateListAxes();
221
222        this.addPlotButton.disable();
223
224        $( "#textareaTitle" ).html( this.selectedPlateform.getName() );
225
226        // Init number and list of parameter to display
227        if( "MOBILE" == this.selectedPlateform.jsonElement.type )
228            this.updateNumberAndListParameterToDisplay( 0 );
229
230        if( 1 > this.selectPlots.getSize() )
231            this.numberParameterToDisplay = 0;
232
233        this.requestParametersByPlateform();
234        this.testAllFields();
235    },
236
237    onSelectParameter: function( objParameter )
238    {
239        if( this.selectedParameter && objParameter.getId() == this.selectedParameterId )
240            return;
241
242        // Unselect old parameter
243        if( this.selectedParameter )
244            this.selectedParameter.unselect();
245
246        this.selectedParameterId = objParameter.getId();
247        this.selectedParameter = objParameter;
248        this.selectedParameter.select();
249
250        // Change title
251        $( "#textareaTitle" ).html( this.selectedPlateform.getName() + " - " + this.selectedParameter.getNameWithCode() );
252
253        // Update number and list of parameter to display
254        this.updateNumberAndListParameterToDisplay( 1 );
255
256        // Enable/disable addPlot's button
257        if( (!this.selectPlotsPlateformType || this.selectPlotsPlateformType == this.selectedPlateform.jsonElement.type) && "MOBILE" != this.selectedPlateform.jsonElement.type )
258            this.addPlotButton.enable();
259        else
260            this.addPlotButton.disable();
261
262        this.testAllFields();
263    },
264
265    onClickBeginDate: function()
266    {
267        var oneHour = 60 * 60 * 1000;
268        var beginDateTime = this.calendarConverter.parse( $( "#beginDate" ).val() ).getTime();
269        var endDateTime = null;
270        if( "" != $( "#endDate" ).val() )
271            endDateTime = this.calendarConverter.parse( $( "#endDate" ).val() ).getTime();
272        this.beginDateWithAnHourLater = new Date( beginDateTime + oneHour );
273
274        if( null == endDateTime || endDateTime < beginDateTime )
275            $( "#endDate" ).val( this.calendarConverter.format( this.beginDateWithAnHourLater ) );
276
277        this.beginDate = this.calendarConverter.parse( $( "#beginDate" ).val() ).getTime();
278        this.endDate = this.calendarConverter.parse( $( "#endDate" ).val() ).getTime();
279
280        this.testAllFields();
281    },
282
283    onClickEndDate: function()
284    {
285        this.endDate = this.calendarConverter.parse( $( "#endDate" ).val() ).getTime();
286    },
287
288    onClickClear: function()
289    {
290        $( "#beginDate" ).val( "" );
291        this.beginDate = false;
292        $( "#endDate" ).val( "" );
293        this.endDate = false;
294    },
295
296    onClickInitPlot: function()
297    {
298        this.updateNumberAndListParameterToDisplay( 0 );
299    },
300
301    onClickAddPlot: function()
302    {
303        this.updateNumberAndListParameterToDisplay( 2 );
304    },
305
306    onClickVisualize: function()
307    {
308        var urlObject = this.createUrl();
309
310        if( urlObject.displayPlot )
311        {
312            var url = "visualization/plotEther?" + urlObject.parameters;
313            var $dialog = $( '<div></div>' )
314                    .html( '<img src=' + url + ' />' )
315                    .dialog( {
316                                 autoOpen: false,
317                                 title: interfaceTexts["app.title"] + "-" + interfaceTexts["visualization.quicklook"],
318                                 minHeight: <%=EtherPlotServiceImpl.getMaxHeight()%>,
319                                 minWidth: <%=EtherPlotServiceImpl.getMaxWidth()%> + 28
320                             } );
321        }
322        else
323        {
324            var $dialog = $( '<div></div>' )
325                    .html( '<BR/><center>' + interfaceTexts["visualization.graph.noPlot"] + '</center>' )
326                    .dialog( {
327                                 autoOpen: false,
328                                 title: interfaceTexts["app.title"] + "-" + interfaceTexts["visualization.quicklook"],
329                                 height: 50,
330                                 width: 400
331                             } );
332        }
333
334        $dialog.dialog( 'open' );
335    },
336
337    onClickDownload: function()
338    {
339        if( !getJSONUser() )
340        // Method showLogin writen in megapoliHead.jsp
341            getLoginModule().showLogin( templateTexts["login.text"] );
342        else
343            this.requestDownload();
344    },
345
346    // OTHERS ********************************************************
347    testAllFields: function()
348    {
349        if( (!this.selectedPlateform || !this.selectedParameter) && 0 == this.numberParameterToDisplay )
350        {
351            this.visualizeButton.disable();
352            this.downloadButton.disable();
353            return;
354        }
355
356        this.visualizeButton.enable();
357        this.downloadButton.enable();
358    },
359
360    updateListAxes: function()
361    {
362        this.selectAxes.clear();
363        var jsonAxeTypes;
364
365        if( "MOBILE" == this.selectedPlateform.jsonElement.type )
366            jsonAxeTypes = this.jsonAxeTypesForMobilePlateforms;
367        else
368            jsonAxeTypes = this.jsonAxeTypesForFixedPlateforms;
369
370        jQuery.each( jsonAxeTypes, jQuery.proxy( function ( i, axeType )
371        {
372            this.selectAxes.add( axeType.value, interfaceTexts[axeType.text] );
373        }, this ) );
374
375        this.selectAxes.selectFirst( false );
376    },
377
378    /**
379     * action = 0 --> init list
380     * action = 1 --> select parameter
381     * action = 2 --> add parameter
382     */
383    updateNumberAndListParameterToDisplay: function( action )
384    {
385        switch( action )
386        {
387            case 0:
388                // INIT
389                this.selectPlots.clear();
390                this.selectParameters = $();
391                this.selectPlotsPlateformType = false;
392
393                if( this.selectedPlateform && this.selectedParameter )
394                {
395                    this.selectPlots.changeSelectMiddle( this.selectedPlateform.getId() + "-" + this.selectedParameter.getId(), this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
396
397                    this.numberParameterToDisplay = 1;
398                    $( "#messages_number_parameters" ).html( this.numberParameterToDisplay + " " + interfaceTexts["visualization.parameter"] );
399                }
400                else
401                {
402                    this.selectPlots.add( null, interfaceTexts["visualization.graph.noPlot"] );
403                    this.selectPlots.selectFirst( false );
404
405                    this.numberParameterToDisplay = 0;
406                    $( "#messages_number_parameters" ).html( "" );
407                }
408                break;
409
410            case 1 :
411                // SELECT
412                if( 0 == this.numberParameterToDisplay || "MOBILE" == this.selectedPlateform.jsonElement.type )
413                {
414                    this.selectPlots.clear();
415                    this.selectParameters.empty();
416                    this.numberParameterToDisplay = 1;
417                }
418
419                this.selectPlots.changeSelectMiddle( this.selectedPlateform.getId() + "-" + this.selectedParameter.getId(), this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
420                $( "#messages_number_parameters" ).html( this.numberParameterToDisplay + " " + interfaceTexts["visualization.parameter"] );
421                break;
422
423            default:
424                // ADD
425                var plotValue = this.selectedPlateform.getId() + "-" + this.selectedParameter.getId();
426                var isParameterAlreadySelected = content( this.selectParameters, this.selectedParameter.getId() );
427                if( !this.selectPlots.content( plotValue ) && (isParameterAlreadySelected || (!isParameterAlreadySelected && this.selectParameters.size() < 2)) )
428                {
429                    this.selectPlots.add( plotValue, this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
430                    this.selectPlots.select( plotValue, false );
431                    this.selectPlotsPlateformType = this.selectedPlateform.jsonElement.type;
432                    if( !isParameterAlreadySelected )
433                        this.selectParameters.push( this.selectedParameter.getId() );
434
435                    this.numberParameterToDisplay = this.selectPlots.getSize();
436                }
437
438                $( "#messages_number_parameters" ).html( this.numberParameterToDisplay + " " + interfaceTexts["visualization.parameter"] );
439                break;
440        }
441    },
442
443    createUrl : function()
444    {
445        // TODO : utiliser JSON pour envoyer arrayPIdPId
446        var result = new Object();
447
448        result.displayPlot = true;
449        var arrayPIdPId = new Array();
450        if( 1 <= this.numberParameterToDisplay && 1 <= this.selectPlots.getSize() )
451        {
452            this.selectPlots.arrayOptions.each( function( index, option )
453            {
454                arrayPIdPId[index] = option.itemValue;
455            } );
456        }
457        else if( this.selectedPlateform && this.selectedParameter )
458            arrayPIdPId[0] = this.selectedPlateform.getId() + "-" + this.selectedParameter.getId();
459        else
460            result.displayPlot = false;
461
462        result.parameters = "dateBegin=" + this.beginDate
463                + "&dateEnd=" + this.endDate
464                + "&title=" + encodeURIComponent( $( "#textareaTitle" ).val() )
465                + "&pfIdPIdList=" + arrayPIdPId
466                + "&axeType=" + this.selectAxes.getValue();
467
468        return result;
469    }
470} );
471
472function onClickHelp()
473{
474    var $dialog = $( '<div></div>' )
475            .html( '<div class="textExamplesTD">' + interfaceTexts["visualization.parameter.buttons.help.text"] + '</div>' )
476            .dialog( {
477                         autoOpen: false,
478                         title: interfaceTexts["visualization.parameter.buttons.help"],
479                         minHeight: 100,
480                         minWidth: 350
481                     } );
482    $dialog.dialog( 'open' );
483}
484
485
486</script>
Note: See TracBrowser for help on using the repository browser.