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

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

Servlet _ TimeSerie?

  • interface bloquée pour 2 params ok
  • dates en CEST et non GMT ok
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 )
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 ), onMouseOver:this.onMouseOverAddPlot.bind( this ), onMouseOut:this.onMouseOutAddPlot.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 ), onMouseOver:this.onMouseOverInitPlot.bind( this ), onMouseOut:this.onMouseOutInitPlot.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    onMouseOverInitPlot: function()
273    {
274//        this.initPlotButton.setValue(interfaceTexts["data.visualization.parameter.init"]);
275    },
276
277    onMouseOutInitPlot: function()
278    {
279//        this.initPlotButton.setValue(interfaceTexts["data.visualization.button.init"]);
280    },
281
282    onClickAddPlot: function()
283    {
284        this.updateNumberAndListParameterToDisplay( 2 );
285    },
286
287    onMouseOverAddPlot: function()
288    {
289//        this.addPlotButton.setValue(interfaceTexts["data.visualization.parameter.add"]);
290    },
291
292    onMouseOutAddPlot: function()
293    {
294//        this.addPlotButton.setValue(interfaceTexts["data.visualization.add"]);
295    },
296
297    onClickVisualize: function()
298    {
299//        this.plotWindow.getContent().innerHTML = '<div class="loadingPlot"><img src="/Megapoli/resources/icons/loading_datas.gif"/></div>';
300
301//        var url = "visualization/plotEther?plateformId=" + this.selectedPlateform.getId()
302//                + "&parameterId=" + this.selectedParameter.getId()
303//                + "&dateBegin=" + this.beginDate
304//                + "&dateEnd=" + this.endDate
305//                + "&title=" + encodeURIComponent( $( "textareaTitle" ).value )
306//                + "&axeType=" + this.selectAxes.getValue();
307
308        // TODO : utiliser JSON pour envoyer arrayPIdPId
309        var arrayPIdPId = new Array();
310        if( 1 < this.numberParameterToDisplay )
311        {
312            var index = 0;
313            this.selectPlots.arrayOptions.each( function( option )
314            {
315                arrayPIdPId[index] = option.itemValue;
316                index++;
317            } );
318        }
319        else if( this.selectedPlateform && this.selectedParameter )
320            arrayPIdPId[0] = this.selectedPlateform.getId() + "-" + this.selectedParameter.getId();
321
322        var url = "visualization/plotEther?"
323                + "dateBegin=" + this.beginDate
324                + "&dateEnd=" + this.endDate
325                + "&title=" + encodeURIComponent( $( "textareaTitle" ).value )
326                + "&pIdPIdList=" + arrayPIdPId
327                + "&axeType=" + this.selectAxes.getValue();
328
329        this.plotWindow.getContent().innerHTML = '<img src=' + url + ' />';
330
331        <%--this.plotWindow.getContent().innerHTML = '<applet code="AppletTimeSerie.class" codebase="<%=request.getContextPath()%>/applets" height="400px" width="400px"> ' +--%>
332        <%--'<param name="plateformId" value="14"> ' +--%>
333        <%--'<param name="parameterId" value="90"> ' +--%>
334        <%--'<param name="dateBegin" value=""> ' +--%>
335        <%--'<param name="dateEnd" value=""> ' +--%>
336        <%--'<param name="title" value="zzzz"> ' +--%>
337        <%--'<param name="axeType" value="MOBILE"> ' +--%>
338        <%--'</applet>';--%>
339        this.plotWindow.setSize( <%=EtherPlotServiceImpl.getMaxWidth()%>, <%=EtherPlotServiceImpl.getMaxHeight()%> );
340        this.plotWindow.show();
341    },
342
343    onClickDownload: function()
344    {
345        if( this.testAllFields() )
346            alert( "ok" );
347        else
348            alert( "non ok" );
349    },
350
351    // OTHERS ********************************************************
352    resizeContainers: function()
353    {
354        var titleSize = document.getElementById( "nav" ).offsetHeight + document.getElementById( "title" ).offsetHeight + 30;
355        var parentHeight = this.superParent.offsetHeight - titleSize;
356        var containerPlateformsHeight = this.generalContainerParameters.offsetHeight;
357        var containerParametersHeight = this.generalContainerParameters.offsetHeight;
358
359        var containerPlateforms = this.containerPlateforms.offsetHeight;
360        var containerParameters = this.containerParameters.offsetHeight;
361        var containerOptionsHeight = this.generalContainerOptions.offsetHeight;
362
363        var maxHeight = Math.max( containerPlateforms, containerParameters, containerOptionsHeight );
364
365        this.superParent.style.height = maxHeight + titleSize + 35 + "px";
366        this.generalContainerPlateforms.style.height = maxHeight + 20 + "px";
367        this.generalContainerParameters.style.height = maxHeight + 20 + "px";
368    },
369
370    testAllFields: function()
371    {
372        if( (!this.selectedPlateform || !this.selectedParameter) && 0 == this.numberParameterToDisplay )
373        {
374            this.visualizeButton.disable();
375            this.downloadButton.disable();
376            return;
377        }
378
379        this.visualizeButton.enable();
380        this.downloadButton.enable();
381    },
382
383    updateListAxes: function()
384    {
385        this.selectAxes.clear();
386        var jsonAxeTypes;
387
388        if( "MOBILE" == this.selectedPlateform.jsonElement.type )
389            jsonAxeTypes = this.jsonAxeTypesForMobilePlateforms;
390        else
391            jsonAxeTypes = this.jsonAxeTypesForFixedPlateforms;
392
393        jsonAxeTypes.each( function ( axeType )
394        {
395            this.selectAxes.add( axeType.value, interfaceTexts[axeType.text] );
396        }.bind( this ) );
397
398        this.selectAxes.selectFirst( false );
399    },
400
401    /**
402     * action = 0 --> init list
403     * action = 1 --> select parameter
404     * action = 2 --> add parameter
405     */
406    updateNumberAndListParameterToDisplay: function( action )
407    {
408        switch( action )
409        {
410            case 0:
411                // INIT
412                this.selectPlots.clear();
413                this.selectParameters.clear();
414                this.selectPlotsPlateformType = false;
415
416                if( this.selectedPlateform && this.selectedParameter )
417                {
418                    this.selectPlots.changeSelectMiddle( this.selectedPlateform.getId() + "-" + this.selectedParameter.getId(), this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
419
420                    this.numberParameterToDisplay = 1;
421                    $( "messages_number_parameters" ).innerHTML = this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"];
422                }
423                else
424                {
425                    this.selectPlots.add( null, interfaceTexts["data.visualization.graph.noPlot"] );
426                    this.selectPlots.selectFirst( false );
427
428                    this.numberParameterToDisplay = 0;
429                    $( "messages_number_parameters" ).innerHTML = "";
430                }
431                break;
432
433            case 1 :
434                // SELECT
435                if( 0 == this.numberParameterToDisplay || "MOBILE" == this.selectedPlateform.jsonElement.type )
436                {
437                    this.selectPlots.clear();
438                    this.selectParameters.clear();
439                    this.numberParameterToDisplay = 1;
440                }
441
442                this.selectPlots.changeSelectMiddle( this.selectedPlateform.getId() + "-" + this.selectedParameter.getId(), this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
443                $( "messages_number_parameters" ).innerHTML = this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"];
444                break;
445
446            default:
447                // ADD
448                var plotValue = this.selectedPlateform.getId() + "-" + this.selectedParameter.getId();
449                var isParameterAlreadySelected = content( this.selectParameters, this.selectedParameter.getId() );
450                if( !this.selectPlots.content( plotValue ) && (isParameterAlreadySelected || (!isParameterAlreadySelected && this.selectParameters.size() < 2)) )
451                {
452                    this.selectPlots.add( plotValue, this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
453                    this.selectPlots.select( plotValue, false );
454                    this.selectPlotsPlateformType = this.selectedPlateform.jsonElement.type;
455                    this.selectParameters[this.selectParameters.size()] = this.selectedParameter.getId();
456
457                    this.numberParameterToDisplay = this.selectPlots.getSize();
458                }
459
460                $( "messages_number_parameters" ).innerHTML = this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"];
461                break;
462        }
463    }
464
465} );
466
467</script>
Note: See TracBrowser for help on using the repository browser.