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

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

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