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

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

Livraison _ confs + extrations path /resources + visualisation images/bouton
File size: 18.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 )
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.selectedPlateform = false;
17        this.selectedParameter = false;
18        this.beginDate = false;
19        this.endDate = false;
20        this.numberParameterToDisplay = 0;
21
22        /** *********** CONTAINERS *********** **/
23        this.containerPlateforms = $( "containerPlateforms" );
24        this.containerParameters = $( "containerParameters" );
25        this.containerButtons = $( "containerButtons" );
26        this.containerOptionCalendar = $( "containerOptionCalendar" );
27        this.containerOptionType = $( "containerOptionType" );
28        this.containerOptionPlotsSelect = $( "containerOptionPlotsSelect" );
29        this.containerOptionPlotsButtons = $( "containerOptionPlotsButtons" );
30
31        /** *********** LOADING *********** **/
32        // Create loading object for plateforms
33        var param = new Object();
34        param.id = "loadingForPlateforms";
35        param.parent = this.containerPlateforms;
36        this.loadingPlateforms = new Loading( param );
37        this.loadingPlateforms.display();
38
39        // Create loading object for parameters
40        var param = new Object();
41        param.id = "loadingForParameters";
42        param.parent = this.containerParameters;
43        this.loadingParameters = new Loading( param );
44        this.loadingParameters.display();
45
46        /** *********** WINDOW FOR THE PLOT *********** **/
47        this.plotWindow = new Window( {className: "dialog", zIndex: 100,
48            resizable: true, draggable:true, wiredDrag: true,
49            showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff } );
50        this.plotWindow.setTitle( interfaceTexts["app.title"] + "-" + interfaceTexts["data.visualization.quicklook"] );
51
52        this.createOptions();
53        this.displayPlateforms();
54    },
55
56    // CREATES ********************************************************
57    createOptions: function()
58    {
59        // Calendar
60        this.calendarFormat = "%Y-%m-%d %H:%i";
61        this.calendarConverter = new AnyTime.Converter( { format: this.calendarFormat } );
62
63        AnyTime.picker( "beginDate", { format: this.calendarFormat, firstDOW: 1,
64            labelTitle: interfaceTexts["data.visualization.selectDate"], labelYear: interfaceTexts["data.visualization.selectYear"], labelMonth: interfaceTexts["data.visualization.selectMonth"], labelDayOfMonth: interfaceTexts["data.visualization.selectDay"],
65            labelHour: interfaceTexts["data.visualization.selectHour"], labelMinute: interfaceTexts["data.visualization.selectMinute"],
66            methodToCall: this.onClickBeginDate.bindAsEventListener( this )
67        } );
68
69        AnyTime.picker( "endDate", { format: this.calendarFormat, firstDOW: 1,
70            labelTitle: interfaceTexts["data.visualization.selectDate"], labelYear: interfaceTexts["data.visualization.selectYear"], labelMonth: interfaceTexts["data.visualization.selectMonth"], labelDayOfMonth: interfaceTexts["data.visualization.selectDay"],
71            labelHour: interfaceTexts["data.visualization.selectHour"], labelMinute: interfaceTexts["data.visualization.selectMinute"],
72            methodToCall: this.onClickEndDate.bindAsEventListener( this ),
73            idToUpdateEarliest: "beginDate"
74        } );
75
76        this.clearCalendarButton = new Button( {value:interfaceTexts["data.visualization.button.clear"], parent:this.containerOptionCalendar, id:"button_clear_calendar", className:"small", onClick:this.onClickClear.bind( 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:this.onClickVisualize.bind( this )} );
87        this.visualizeButton.disable();
88        this.downloadButton = new Button( {value:interfaceTexts["data.visualization.button.download"], parent:this.containerButtons, id:"button_download", onClick:this.onClickDownload.bind( 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 = $A();
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:this.onClickAddPlot.bind( 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:this.onClickInitPlot.bind( this )} );
116    },
117
118    // REQUESTS ********************************************************
119    requestParametersByPlateform: function()
120    {
121        if( this.selectedPlateform )
122            new Ajax.Request( "visualization?methodName=searchParametersByPlateform&id=" + this.selectedPlateform.getId(),
123            {
124                onSuccess:this.handleParametersBySelectedPlateform.bind( this )
125            } );
126    },
127
128    // HANDLES ********************************************************
129    handleParametersBySelectedPlateform: function( result )
130    {
131        this.jsonParameters = result.responseText.evalJSON().parameters;
132        this.displayParameters();
133    },
134
135    // DISPLAYS ********************************************************
136    displayPlateforms: function()
137    {
138        this.plateforms = new ListPlatforms( this.jsonPlateforms, new Object() );
139
140        this.plateforms.addOpenListener( this.onSelectPlateform.bind( this ) );
141        this.loadingPlateforms.hide();
142        this.plateforms.displayWithPairImpair( this.containerPlateforms, "NoPlateform", interfaceTexts["data.visualization.noPlateform"] );
143
144        // Select the first plateform by default
145        if( this.jsonPlateforms && this.jsonPlateforms[0] )
146        {
147            var plateformToSelect = this.plateforms.getItemById( this.jsonPlateforms[0].id );
148            this.onSelectPlateform( plateformToSelect.divItem );
149            this.selectedPlateform = plateformToSelect.divItem;
150        }
151    },
152
153    displayParameters: function()
154    {
155        var objectParameter = new Object();
156        objectParameter.onMouseOverContainer = this.onMouseOverParameter;
157        objectParameter.onMouseOutContainer = this.onMouseOutParameter;
158        this.parameters = new ListParameters( this.jsonParameters, objectParameter );
159
160        this.parameters.addOpenListener( this.onSelectParameter.bind( this ) );
161        this.loadingParameters.hide();
162        this.parameters.displayWithPairImpair( this.containerParameters, "NoParameter", interfaceTexts["data.visualization.noParameter"] );
163
164        this.resizeContainers();
165    },
166
167    // EVENTS ********************************************************
168    onSelectPlateform: function( objPlateform )
169    {
170        if( this.selectedPlateform && objPlateform.getId() == this.selectedPlateform.getId() )
171            return;
172
173        // Unselect old plateform
174        if( this.selectedPlateform )
175            this.selectedPlateform.unselect();
176
177        this.selectedPlateform = objPlateform;
178        this.selectedPlateform.select();
179
180        // Unselect old parameter
181        if( this.selectedParameter )
182            this.selectedParameter = false;
183
184        // Change axe's list select
185        this.updateListAxes();
186
187        this.addPlotButton.disable();
188
189        $( "textareaTitle" ).value = this.selectedPlateform.getName();
190
191        // Init number and list of parameter to display
192        if( "MOBILE" == this.selectedPlateform.jsonElement.type )
193            this.updateNumberAndListParameterToDisplay( 0 );
194
195        this.requestParametersByPlateform();
196        this.testAllFields();
197    },
198
199    onSelectParameter: function( objParameter )
200    {
201        if( this.selectedParameter && objParameter.getId() == this.selectedParameter.getId() )
202            return;
203
204        // Unselect old parameter
205        if( this.selectedParameter )
206            this.selectedParameter.unselect();
207
208        this.selectedParameter = objParameter;
209        this.selectedParameter.select();
210
211        // Change title
212        $( "textareaTitle" ).value = this.selectedPlateform.getName() + " - " + this.selectedParameter.getName();
213
214        // Update number and list of parameter to display
215        this.updateNumberAndListParameterToDisplay( 1 );
216
217        // Enable/disable addPlot's button
218        if( (!this.selectPlotsPlateformType || this.selectPlotsPlateformType == this.selectedPlateform.jsonElement.type) && "MOBILE" != this.selectedPlateform.jsonElement.type )
219            this.addPlotButton.enable();
220        else
221            this.addPlotButton.disable();
222
223        this.testAllFields();
224    },
225
226    onMouseOverParameter: function()
227    {
228        this.divContainer.innerHTML = this.jsonElement.name + " (" + this.jsonElement.code + ")";
229    },
230
231    onMouseOutParameter: function()
232    {
233        this.divContainer.innerHTML = this.jsonElement.name;
234    },
235
236    onClickBeginDate: function()
237    {
238        var oneHour = 60 * 60 * 1000;
239        var beginDateTime = this.calendarConverter.parse( $( "beginDate" ).value ).getTime();
240        var endDateTime = null;
241        if( "" != $( "endDate" ).value )
242            endDateTime = this.calendarConverter.parse( $( "endDate" ).value ).getTime();
243        this.beginDateWithAnHourLater = new Date( beginDateTime + oneHour );
244
245        if( null == endDateTime || endDateTime < beginDateTime )
246            $( "endDate" ).value = this.calendarConverter.format( this.beginDateWithAnHourLater );
247
248        this.beginDate = this.calendarConverter.parse( $( "beginDate" ).value ).getTime();
249        this.endDate = this.calendarConverter.parse( $( "endDate" ).value ).getTime();
250
251        this.testAllFields();
252    },
253
254    onClickEndDate: function()
255    {
256        this.endDate = this.calendarConverter.parse( $( "endDate" ).value ).getTime();
257    },
258
259    onClickClear: function()
260    {
261        $( "beginDate" ).value = "";
262        this.beginDate = false;
263        $( "endDate" ).value = "";
264        this.endDate = false;
265    },
266
267    onClickInitPlot: function()
268    {
269        this.updateNumberAndListParameterToDisplay( 0 );
270    },
271
272    onClickAddPlot: function()
273    {
274        this.updateNumberAndListParameterToDisplay( 2 );
275    },
276
277    onClickVisualize: function()
278    {
279        // TODO : utiliser JSON pour envoyer arrayPIdPId
280        var arrayPIdPId = new Array();
281        if( 1 < this.numberParameterToDisplay )
282        {
283            var index = 0;
284            this.selectPlots.arrayOptions.each( function( option )
285            {
286                arrayPIdPId[index] = option.itemValue;
287                index++;
288            } );
289        }
290        else if( this.selectedPlateform && this.selectedParameter )
291            arrayPIdPId[0] = this.selectedPlateform.getId() + "-" + this.selectedParameter.getId();
292
293        var url = "visualization/plotEther?"
294                + "dateBegin=" + this.beginDate
295                + "&dateEnd=" + this.endDate
296                + "&title=" + encodeURIComponent( $( "textareaTitle" ).value )
297                + "&pIdPIdList=" + arrayPIdPId
298                + "&axeType=" + this.selectAxes.getValue();
299
300        this.plotWindow.getContent().innerHTML = '<img src=' + url + ' />';
301        this.plotWindow.setSize( <%=EtherPlotServiceImpl.getMaxWidth()%>, <%=EtherPlotServiceImpl.getMaxHeight()%> );
302        this.plotWindow.show();
303    },
304
305    onClickDownload: function()
306    {
307        if( this.testAllFields() )
308            alert( "ok" );
309        else
310            alert( "non ok" );
311    },
312
313    // OTHERS ********************************************************
314    resizeContainers: function()
315    {
316        var titleSize = document.getElementById( "nav" ).offsetHeight + document.getElementById( "title" ).offsetHeight + 30;
317        var parentHeight = this.superParent.offsetHeight - titleSize;
318        var containerPlateformsHeight = this.generalContainerParameters.offsetHeight;
319        var containerParametersHeight = this.generalContainerParameters.offsetHeight;
320
321        var containerPlateforms = this.containerPlateforms.offsetHeight;
322        var containerParameters = this.containerParameters.offsetHeight;
323        var containerOptionsHeight = this.generalContainerOptions.offsetHeight;
324
325        var maxHeight = Math.max( containerPlateforms, containerParameters, containerOptionsHeight );
326
327        this.superParent.style.height = maxHeight + titleSize + 35 + "px";
328        this.generalContainerPlateforms.style.height = maxHeight + 20 + "px";
329        this.generalContainerParameters.style.height = maxHeight + 20 + "px";
330    },
331
332    testAllFields: function()
333    {
334        if( (!this.selectedPlateform || !this.selectedParameter) && 0 == this.numberParameterToDisplay )
335        {
336            this.visualizeButton.disable();
337            this.downloadButton.disable();
338            return;
339        }
340
341        this.visualizeButton.enable();
342//        this.downloadButton.enable();
343    },
344
345    updateListAxes: function()
346    {
347        this.selectAxes.clear();
348        var jsonAxeTypes;
349
350        if( "MOBILE" == this.selectedPlateform.jsonElement.type )
351            jsonAxeTypes = this.jsonAxeTypesForMobilePlateforms;
352        else
353            jsonAxeTypes = this.jsonAxeTypesForFixedPlateforms;
354
355        jsonAxeTypes.each( function ( axeType )
356        {
357            this.selectAxes.add( axeType.value, interfaceTexts[axeType.text] );
358        }.bind( this ) );
359
360        this.selectAxes.selectFirst( false );
361    },
362
363    /**
364     * action = 0 --> init list
365     * action = 1 --> select parameter
366     * action = 2 --> add parameter
367     */
368    updateNumberAndListParameterToDisplay: function( action )
369    {
370        switch( action )
371        {
372            case 0:
373                // INIT
374                this.selectPlots.clear();
375                this.selectParameters.clear();
376                this.selectPlotsPlateformType = false;
377
378                if( this.selectedPlateform && this.selectedParameter )
379                {
380                    this.selectPlots.changeSelectMiddle( this.selectedPlateform.getId() + "-" + this.selectedParameter.getId(), this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
381
382                    this.numberParameterToDisplay = 1;
383                    $( "messages_number_parameters" ).innerHTML = this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"];
384                }
385                else
386                {
387                    this.selectPlots.add( null, interfaceTexts["data.visualization.graph.noPlot"] );
388                    this.selectPlots.selectFirst( false );
389
390                    this.numberParameterToDisplay = 0;
391                    $( "messages_number_parameters" ).innerHTML = "";
392                }
393                break;
394
395            case 1 :
396                // SELECT
397                if( 0 == this.numberParameterToDisplay || "MOBILE" == this.selectedPlateform.jsonElement.type )
398                {
399                    this.selectPlots.clear();
400                    this.selectParameters.clear();
401                    this.numberParameterToDisplay = 1;
402                }
403
404                this.selectPlots.changeSelectMiddle( this.selectedPlateform.getId() + "-" + this.selectedParameter.getId(), this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
405                $( "messages_number_parameters" ).innerHTML = this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"];
406                break;
407
408            default:
409                // ADD
410                var plotValue = this.selectedPlateform.getId() + "-" + this.selectedParameter.getId();
411                var isParameterAlreadySelected = content( this.selectParameters, this.selectedParameter.getId() );
412                if( !this.selectPlots.content( plotValue ) && (isParameterAlreadySelected || (!isParameterAlreadySelected && this.selectParameters.size() < 2)) )
413                {
414                    this.selectPlots.add( plotValue, this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
415                    this.selectPlots.select( plotValue, false );
416                    this.selectPlotsPlateformType = this.selectedPlateform.jsonElement.type;
417                    if( !isParameterAlreadySelected )
418                        this.selectParameters[this.selectParameters.size()] = this.selectedParameter.getId();
419
420                    this.numberParameterToDisplay = this.selectPlots.getSize();
421                }
422
423                $( "messages_number_parameters" ).innerHTML = this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"];
424                break;
425        }
426    }
427} );
428
429function onClickHelp()
430{
431    this.helpWindow = new Window( {className: "dialog", zIndex: 100, resizable: true, draggable:true, wiredDrag: true, showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff } );
432    this.helpWindow.setTitle( interfaceTexts["data.visualization.parameter.buttons.help"] );
433    this.helpWindow.getContent().innerHTML = '<div class="textExamplesTD">' + interfaceTexts["data.visualization.parameter.buttons.help.text"] + '</div>';
434    this.helpWindow.setSize( 350, 100 );
435    this.helpWindow.show();
436}
437
438
439</script>
Note: See TracBrowser for help on using the repository browser.