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

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

Login BO
visu sous-menus
File size: 19.4 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["data.visualization.selectDate"], labelYear: interfaceTexts["data.visualization.selectYear"], labelMonth: interfaceTexts["data.visualization.selectMonth"], labelDayOfMonth: interfaceTexts["data.visualization.selectDay"],
63            labelHour: interfaceTexts["data.visualization.selectHour"], labelMinute: interfaceTexts["data.visualization.selectMinute"],
64            methodToCall: jQuery.proxy( this.onClickBeginDate, this )
65        } );
66
67        AnyTime.picker( "endDate", { format: this.calendarFormat, firstDOW: 1,
68            labelTitle: interfaceTexts["data.visualization.selectDate"], labelYear: interfaceTexts["data.visualization.selectYear"], labelMonth: interfaceTexts["data.visualization.selectMonth"], labelDayOfMonth: interfaceTexts["data.visualization.selectDay"],
69            labelHour: interfaceTexts["data.visualization.selectHour"], labelMinute: interfaceTexts["data.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["data.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["data.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["data.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["data.visualization.graph.noPlot"] );
109        this.selectPlots.selectFirst( false );
110
111        this.selectPlotsPlateformType = false;
112
113        this.addPlotButton = new Button( {value:interfaceTexts["data.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["data.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 = result.responseText.evalJSON().result;
147
148        var downloadWindow = new Window( {className: "dialog", zIndex: 100, resizable: true, draggable:true, wiredDrag: true, showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff } );
149        downloadWindow.setTitle( interfaceTexts["data.access.extract3"] );
150        if( stateResult == "ok" )
151        {
152            downloadWindow.getContent().innerHTML = '<div class="textExamplesTD">' + interfaceTexts["data.access.extract.process.short"] + '</div>';
153            downloadWindow.setSize( 350, 50 );
154        }
155        else
156        {
157            downloadWindow.getContent().innerHTML = '<div class="textExamplesTD">' + interfaceTexts["data.access.extract.process.error"] + '</div>';
158            downloadWindow.setSize( 350, 60 );
159        }
160        downloadWindow.show();
161    },
162
163    // DISPLAYS ********************************************************
164    displayPlateforms: function()
165    {
166        this.plateforms = new ListPlatforms( this.jsonPlateforms, new Object() );
167
168        this.plateforms.addOpenListener( jQuery.proxy( this.onSelectPlateform, this ) );
169        this.loadingPlateforms.hide();
170        this.plateforms.display( this.containerPlateforms, "NoPlateform", interfaceTexts["data.visualization.noPlateform"] );
171
172        // Select the first plateform by default
173        if( this.jsonPlateforms && this.jsonPlateforms[0] )
174        {
175            var plateformToSelect = this.plateforms.getItemById( this.jsonPlateforms[0].id );
176            this.onSelectPlateform( plateformToSelect.divItem );
177            this.selectedPlateform = plateformToSelect.divItem;
178        }
179    },
180
181    displayParameters: function()
182    {
183        this.parameters = new ListParameters( this.jsonParameters, new Object() );
184
185        this.parameters.addOpenListener( jQuery.proxy( this.onSelectParameter, this ) );
186        this.loadingParameters.hide();
187        this.parameters.display( this.containerParameters, "NoParameter", interfaceTexts["data.visualization.noParameter"], "containerParameter" );
188    },
189
190    // EVENTS ********************************************************
191    onSelectPlateform: function( objPlateform )
192    {
193        if( this.selectedPlateform && objPlateform.getId() == this.selectedPlateform.getId() )
194            return;
195
196        // Unselect old plateform
197        if( this.selectedPlateform )
198            this.selectedPlateform.unselect();
199
200        this.selectedPlateform = objPlateform;
201        this.selectedPlateform.select();
202
203        // Unselect old parameter
204        if( this.selectedParameter )
205            this.selectedParameter = false;
206        this.selectedParameterId = false;
207
208        // Change axe's list select
209        this.updateListAxes();
210
211        this.addPlotButton.disable();
212
213        $( "#textareaTitle" ).html( this.selectedPlateform.getName() );
214
215        // Init number and list of parameter to display
216        if( "MOBILE" == this.selectedPlateform.jsonElement.type )
217            this.updateNumberAndListParameterToDisplay( 0 );
218
219        if( 1 > this.selectPlots.getSize() )
220            this.numberParameterToDisplay = 0;
221
222        this.requestParametersByPlateform();
223        this.testAllFields();
224    },
225
226    onSelectParameter: function( objParameter )
227    {
228        if( this.selectedParameter && objParameter.getId() == this.selectedParameterId )
229            return;
230
231        // Unselect old parameter
232        if( this.selectedParameter )
233            this.selectedParameter.unselect();
234
235        this.selectedParameterId = objParameter.getId();
236        this.selectedParameter = objParameter;
237        this.selectedParameter.select();
238
239        // Change title
240        $( "#textareaTitle" ).html( this.selectedPlateform.getName() + " - " + this.selectedParameter.getNameWithCode() );
241
242        // Update number and list of parameter to display
243        this.updateNumberAndListParameterToDisplay( 1 );
244
245        // Enable/disable addPlot's button
246        if( (!this.selectPlotsPlateformType || this.selectPlotsPlateformType == this.selectedPlateform.jsonElement.type) && "MOBILE" != this.selectedPlateform.jsonElement.type )
247            this.addPlotButton.enable();
248        else
249            this.addPlotButton.disable();
250
251        this.testAllFields();
252    },
253
254    onClickBeginDate: function()
255    {
256        var oneHour = 60 * 60 * 1000;
257        var beginDateTime = this.calendarConverter.parse( $( "#beginDate" ).val() ).getTime();
258        var endDateTime = null;
259        if( "" != $( "#endDate" ).val() )
260            endDateTime = this.calendarConverter.parse( $( "#endDate" ).val() ).getTime();
261        this.beginDateWithAnHourLater = new Date( beginDateTime + oneHour );
262
263        if( null == endDateTime || endDateTime < beginDateTime )
264            $( "#endDate" ).val( this.calendarConverter.format( this.beginDateWithAnHourLater ) );
265
266        this.beginDate = this.calendarConverter.parse( $( "#beginDate" ).val() ).getTime();
267        this.endDate = this.calendarConverter.parse( $( "#endDate" ).val() ).getTime();
268
269        this.testAllFields();
270    },
271
272    onClickEndDate: function()
273    {
274        this.endDate = this.calendarConverter.parse( $( "#endDate" ).val() ).getTime();
275    },
276
277    onClickClear: function()
278    {
279        $( "#beginDate" ).val( "" );
280        this.beginDate = false;
281        $( "#endDate" ).val( "" );
282        this.endDate = false;
283    },
284
285    onClickInitPlot: function()
286    {
287        this.updateNumberAndListParameterToDisplay( 0 );
288    },
289
290    onClickAddPlot: function()
291    {
292        this.updateNumberAndListParameterToDisplay( 2 );
293    },
294
295    onClickVisualize: function()
296    {
297        var urlObject = this.createUrl();
298
299        if( urlObject.displayPlot )
300        {
301            var url = "visualization/plotEther?" + urlObject.parameters;
302            var $dialog = $( '<div></div>' )
303                    .html( '<img src=' + url + ' />' )
304                    .dialog( {
305                                 autoOpen: false,
306                                 title: interfaceTexts["app.title"] + "-" + interfaceTexts["data.visualization.quicklook"],
307                                 minHeight: <%=EtherPlotServiceImpl.getMaxHeight()%>,
308                                 minWidth: <%=EtherPlotServiceImpl.getMaxWidth()%> + 28
309                             } );
310        }
311        else
312        {
313            var $dialog = $( '<div></div>' )
314                    .html( '<BR/><center>' + interfaceTexts["data.visualization.graph.noPlot"] + '</center>' )
315                    .dialog( {
316                                 autoOpen: false,
317                                 title: interfaceTexts["app.title"] + "-" + interfaceTexts["data.visualization.quicklook"],
318                                 height: 50,
319                                 width: 400
320                             } );
321        }
322
323        $dialog.dialog( 'open' );
324    },
325
326    onClickDownload: function()
327    {
328        if( !getJSONUser() )
329        // Method showLogin writen in megapoliHead.jsp
330            getLoginModule().showLogin( templateTexts["data.authentification.text"] );
331        else
332            this.requestDownload();
333    },
334
335    // OTHERS ********************************************************
336    testAllFields: function()
337    {
338        if( (!this.selectedPlateform || !this.selectedParameter) && 0 == this.numberParameterToDisplay )
339        {
340            this.visualizeButton.disable();
341            this.downloadButton.disable();
342            return;
343        }
344
345        this.visualizeButton.enable();
346        this.downloadButton.enable();
347    },
348
349    updateListAxes: function()
350    {
351        this.selectAxes.clear();
352        var jsonAxeTypes;
353
354        if( "MOBILE" == this.selectedPlateform.jsonElement.type )
355            jsonAxeTypes = this.jsonAxeTypesForMobilePlateforms;
356        else
357            jsonAxeTypes = this.jsonAxeTypesForFixedPlateforms;
358
359        jQuery.each( jsonAxeTypes, jQuery.proxy( function ( i, axeType )
360        {
361            this.selectAxes.add( axeType.value, interfaceTexts[axeType.text] );
362        }, this ) );
363
364        this.selectAxes.selectFirst( false );
365    },
366
367    /**
368     * action = 0 --> init list
369     * action = 1 --> select parameter
370     * action = 2 --> add parameter
371     */
372    updateNumberAndListParameterToDisplay: function( action )
373    {
374        switch( action )
375        {
376            case 0:
377                // INIT
378                this.selectPlots.clear();
379                this.selectParameters = $();
380                this.selectPlotsPlateformType = false;
381
382                if( this.selectedPlateform && this.selectedParameter )
383                {
384                    this.selectPlots.changeSelectMiddle( this.selectedPlateform.getId() + "-" + this.selectedParameter.getId(), this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
385
386                    this.numberParameterToDisplay = 1;
387                    $( "#messages_number_parameters" ).html( this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"] );
388                }
389                else
390                {
391                    this.selectPlots.add( null, interfaceTexts["data.visualization.graph.noPlot"] );
392                    this.selectPlots.selectFirst( false );
393
394                    this.numberParameterToDisplay = 0;
395                    $( "#messages_number_parameters" ).html( "" );
396                }
397                break;
398
399            case 1 :
400                // SELECT
401                if( 0 == this.numberParameterToDisplay || "MOBILE" == this.selectedPlateform.jsonElement.type )
402                {
403                    this.selectPlots.clear();
404                    this.selectParameters.empty();
405                    this.numberParameterToDisplay = 1;
406                }
407
408                this.selectPlots.changeSelectMiddle( this.selectedPlateform.getId() + "-" + this.selectedParameter.getId(), this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
409                $( "#messages_number_parameters" ).html( this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"] );
410                break;
411
412            default:
413                // ADD
414                var plotValue = this.selectedPlateform.getId() + "-" + this.selectedParameter.getId();
415                var isParameterAlreadySelected = content( this.selectParameters, this.selectedParameter.getId() );
416                if( !this.selectPlots.content( plotValue ) && (isParameterAlreadySelected || (!isParameterAlreadySelected && this.selectParameters.size() < 2)) )
417                {
418                    this.selectPlots.add( plotValue, this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
419                    this.selectPlots.select( plotValue, false );
420                    this.selectPlotsPlateformType = this.selectedPlateform.jsonElement.type;
421                    if( !isParameterAlreadySelected )
422                        this.selectParameters.push( this.selectedParameter.getId() );
423
424                    this.numberParameterToDisplay = this.selectPlots.getSize();
425                }
426
427                $( "#messages_number_parameters" ).html( this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"] );
428                break;
429        }
430    },
431
432    createUrl : function()
433    {
434        // TODO : utiliser JSON pour envoyer arrayPIdPId
435        var result = new Object();
436
437        result.displayPlot = true;
438        var arrayPIdPId = new Array();
439        if( 1 <= this.numberParameterToDisplay && 1 <= this.selectPlots.getSize() )
440        {
441            this.selectPlots.arrayOptions.each( function( index, option )
442            {
443                arrayPIdPId[index] = option.itemValue;
444            } );
445        }
446        else if( this.selectedPlateform && this.selectedParameter )
447            arrayPIdPId[0] = this.selectedPlateform.getId() + "-" + this.selectedParameter.getId();
448        else
449            result.displayPlot = false;
450
451        result.parameters = "dateBegin=" + this.beginDate
452                + "&dateEnd=" + this.endDate
453                + "&title=" + encodeURIComponent( $( "#textareaTitle" ).val() )
454                + "&pfIdPIdList=" + arrayPIdPId
455                + "&axeType=" + this.selectAxes.getValue();
456
457        return result;
458    }
459} );
460
461function onClickHelp()
462{
463    var helpWindow = new Window( {className: "dialog", zIndex: 100, resizable: true, draggable:true, wiredDrag: true, showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff } );
464    helpWindow.setTitle( interfaceTexts["data.visualization.parameter.buttons.help"] );
465    helpWindow.getContent().innerHTML = '<div class="textExamplesTD">' + interfaceTexts["data.visualization.parameter.buttons.help.text"] + '</div>';
466    helpWindow.setSize( 350, 100 );
467    helpWindow.show();
468}
469
470
471</script>
Note: See TracBrowser for help on using the repository browser.