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

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

[Visualization] latitude/longitude axeType
File size: 12.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 )
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
21        /** *********** CONTAINERS *********** **/
22        this.containerPlateforms = $( "containerPlateforms" );
23        this.containerParameters = $( "containerParameters" );
24        this.containerButtons = $( "containerButtons" );
25        this.containerOptionCalendar = $( "containerOptionCalendar" );
26        this.containerOptionAxe = $( "containerOptionAxe" );
27
28        /** *********** LOADING *********** **/
29        // Create loading object for plateforms
30        var param = new Object();
31        param.id = "loadingForPlateforms";
32        param.parent = this.containerPlateforms;
33        this.loadingPlateforms = new Loading( param );
34        this.loadingPlateforms.display();
35
36        // Create loading object for parameters
37        var param = new Object();
38        param.id = "loadingForParameters";
39        param.parent = this.containerParameters;
40        this.loadingParameters = new Loading( param );
41        this.loadingParameters.display();
42
43        /** *********** WINDOW FOR THE PLOT *********** **/
44        this.plotWindow = new Window( {className: "dialog", zIndex: 100,
45            resizable: true, draggable:true, wiredDrag: true,
46            showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff } );
47        this.plotWindow.setTitle( interfaceTexts["app.title"] + "-" + interfaceTexts["data.visualization.quicklook"] );
48
49        this.createOptions();
50        this.displayPlateforms();
51    },
52
53    // CREATES ********************************************************
54    createOptions: function()
55    {
56        // Calendar
57        this.calendarFormat = "%Y-%m-%d %H:%i";
58        this.calendarConverter = new AnyTime.Converter( { format: this.calendarFormat } );
59
60        AnyTime.picker( "beginDate", { format: this.calendarFormat, firstDOW: 1,
61            labelTitle: interfaceTexts["data.visualization.selectDate"], labelYear: interfaceTexts["data.visualization.selectYear"], labelMonth: interfaceTexts["data.visualization.selectMonth"], labelDayOfMonth: interfaceTexts["data.visualization.selectDay"],
62            labelHour: interfaceTexts["data.visualization.selectHour"], labelMinute: interfaceTexts["data.visualization.selectMinute"],
63            methodToCall: this.onClickBeginDate.bindAsEventListener( this )
64        } );
65
66        AnyTime.picker( "endDate", { format: this.calendarFormat, firstDOW: 1,
67            labelTitle: interfaceTexts["data.visualization.selectDate"], labelYear: interfaceTexts["data.visualization.selectYear"], labelMonth: interfaceTexts["data.visualization.selectMonth"], labelDayOfMonth: interfaceTexts["data.visualization.selectDay"],
68            labelHour: interfaceTexts["data.visualization.selectHour"], labelMinute: interfaceTexts["data.visualization.selectMinute"],
69            idToUpdateEarliest: "beginDate"
70        } );
71
72        this.clearButton = new Button( {value:interfaceTexts["data.visualization.button.clear"], parent:this.containerOptionCalendar, id:"button_clear", className:"small", onClick:this.onClickClear.bind( this )} );
73
74        // Buttons and axe's types
75        this.createButtons();
76        this.createListAxes();
77    },
78
79    createButtons: function()
80    {
81        this.visualizeButton = new Button( {value:interfaceTexts["data.visualization.button.visualize"], parent:this.containerButtons, id:"button_visualize", onClick:this.onClickVisualize.bind( this )} );
82//        this.visualizeButton.disable();
83        this.downloadButton = new Button( {value:interfaceTexts["data.visualization.button.download"], parent:this.containerButtons, id:"button_download", onClick:this.onClickDownload.bind( this )} );
84        this.downloadButton.disable();
85    },
86
87    createListAxes: function()
88    {
89        var paramSelect = new Object();
90        paramSelect.id = "select_axes";
91        paramSelect.parent = $( "containerOptionAxe" );
92        this.selectAxes = new Select( paramSelect );
93    },
94
95    // REQUESTS ********************************************************
96    requestParametersByPlateform: function()
97    {
98        if( this.selectedPlateform )
99            new Ajax.Request( "visualization?methodName=searchParametersByPlateform&id=" + this.selectedPlateform.getId(),
100            {
101                onSuccess:this.handleParametersBySelectedPlateform.bind( this )
102            } );
103    },
104
105    // HANDLES ********************************************************
106    handleParametersBySelectedPlateform: function( result )
107    {
108        this.jsonParameters = result.responseText.evalJSON().parameters;
109        this.displayParameters();
110    },
111
112    // DISPLAYS ********************************************************
113    displayPlateforms: function()
114    {
115        this.plateforms = new ListPlatforms( this.jsonPlateforms, new Object() );
116
117        this.plateforms.addOpenListener( this.onSelectPlateform.bind( this ) );
118        this.loadingPlateforms.hide();
119        this.plateforms.displayWithPairImpair( this.containerPlateforms, "NoPlateform", interfaceTexts["data.visualization.noPlateform"] );
120
121        // Select the first plateform by default
122        if( this.jsonPlateforms && this.jsonPlateforms[0] )
123        {
124            var plateformToSelect = this.plateforms.getItemById( this.jsonPlateforms[0].id );
125            this.onSelectPlateform( plateformToSelect.divItem );
126            this.selectedPlateform = plateformToSelect.divItem;
127        }
128    },
129
130    displayParameters: function()
131    {
132        this.parameters = new ListParameters( this.jsonParameters, new Object() );
133
134        this.parameters.addOpenListener( this.onSelectParameter.bind( this ) );
135        this.loadingParameters.hide();
136        this.parameters.displayWithPairImpair( this.containerParameters, "NoParameter", interfaceTexts["data.visualization.noParameter"] );
137
138        this.resizeContainers();
139    },
140
141    // EVENTS ********************************************************
142    onSelectPlateform: function( objPlateform )
143    {
144        if( this.selectedPlateform && objPlateform.getId() == this.selectedPlateform.getId() )
145            return;
146
147        // Unselect old plateform
148        if( this.selectedPlateform )
149            this.selectedPlateform.unselect();
150
151        this.selectedPlateform = objPlateform;
152        this.selectedPlateform.select();
153
154        // Unselect old parameter
155        if( this.selectedParameter )
156            this.selectedParameter = false;
157
158        // Change plateformType's select
159        this.updateListAxes();
160
161        $( "textareaTitle" ).value = this.selectedPlateform.getName();
162        this.requestParametersByPlateform();
163        this.testAllFields();
164    },
165
166    onSelectParameter: function( objParameter )
167    {
168        if( this.selectedParameter && objParameter.getId() == this.selectedParameter.getId() )
169            return;
170
171        // Unselect old parameter
172        if( this.selectedParameter )
173            this.selectedParameter.unselect();
174
175        this.selectedParameter = objParameter;
176        this.selectedParameter.select();
177
178        $( "textareaTitle" ).value = this.selectedPlateform.getName() + " - " + this.selectedParameter.getName();
179        this.testAllFields();
180    },
181
182    onClickBeginDate: function()
183    {
184        var oneHour = 60 * 60 * 1000;
185        var beginDateTime = this.calendarConverter.parse( $( "beginDate" ).value ).getTime();
186        var endDateTime = null;
187        if( "" != $( "endDate" ).value )
188            endDateTime = this.calendarConverter.parse( $( "endDate" ).value ).getTime();
189        this.beginDateWithAnHourLater = new Date( beginDateTime + oneHour );
190
191        if( null == endDateTime || endDateTime < beginDateTime )
192            $( "endDate" ).value = this.calendarConverter.format( this.beginDateWithAnHourLater );
193
194        this.beginDate = this.calendarConverter.parse( $( "beginDate" ).value ).getTime();
195        this.endDate = this.calendarConverter.parse( $( "endDate" ).value ).getTime();
196
197        this.testAllFields();
198    },
199
200    onClickClear: function()
201    {
202        $( "beginDate" ).value = "";
203        this.beginDate = false;
204        $( "endDate" ).value = "";
205        this.endDate = false;
206    },
207
208    onClickVisualize: function()
209    {
210//        this.plotWindow.getContent().innerHTML = '<div class="loadingPlot"><img src="/Megapoli/resources/icons/loading_datas.gif"/></div>';
211
212//        var url = "visualization/plotEther?plateformId=" + this.selectedPlateform.getId()
213//                + "&parameterId=" + this.selectedParameter.getId()
214//                + "&dateBegin=" + this.beginDate
215//                + "&dateEnd=" + this.endDate
216//                + "&title=" + encodeURIComponent( $( "textareaTitle" ).value )
217//                + "&axeType=" + this.selectAxes.getValue();
218
219        var url = "visualization/plotEther?plateformId=14"
220                + "&parameterId=125"
221                + "&dateBegin=" + this.beginDate
222                + "&dateEnd=" + this.endDate
223                + "&title=" + encodeURIComponent( $( "textareaTitle" ).value )
224                + "&axeType=" + this.selectAxes.getValue();
225
226        this.plotWindow.getContent().innerHTML = '<img src=' + url + ' />';
227        this.plotWindow.setSize( <%=EtherPlotServiceImpl.getMaxWidth()%>, <%=EtherPlotServiceImpl.getMaxHeight()%> );
228        this.plotWindow.show();
229    },
230
231    onClickDownload: function()
232    {
233        if( this.testAllFields() )
234            alert( "ok" );
235        else
236            alert( "non ok" );
237    },
238
239    // OTHERS ********************************************************
240    // TODO : resize !!!
241    resizeContainers: function()
242    {
243        var titleSize = 85;
244        var parentHeight = this.superParent.offsetHeight - titleSize;
245        var containerPlateformsHeight = this.generalContainerParameters.offsetHeight;
246        var containerParametersHeight = this.generalContainerParameters.offsetHeight;
247
248        var containerPlateforms = this.containerPlateforms.offsetHeight;
249        var containerParameters = this.containerParameters.offsetHeight;
250        var containerOptionsHeight = this.generalContainerOptions.offsetHeight;
251
252        var maxHeight = Math.max( containerPlateforms, containerParameters, containerOptionsHeight );
253
254        if( maxHeight > parentHeight )
255        {
256            this.superParent.style.height = maxHeight + 110 + "px";
257            this.generalContainerPlateforms.style.height = maxHeight + 10 + "px";
258            this.generalContainerParameters.style.height = maxHeight + 10 + "px";
259        } else if( maxHeight == containerOptionsHeight )
260        {
261//            this.superParent.style.height = containerOptionsHeight + titleSize + 25 + "px";
262            this.generalContainerPlateforms.style.height = containerOptionsHeight + "px";
263            this.generalContainerParameters.style.height = containerOptionsHeight + "px";
264        }
265    },
266
267    testAllFields: function()
268    {
269        if( !this.selectedPlateform || !this.selectedParameter || !this.beginDate || !this.endDate )
270        {
271//            this.visualizeButton.disable();
272            this.downloadButton.disable();
273            return;
274        }
275
276        this.visualizeButton.enable();
277        this.downloadButton.enable();
278    },
279
280    updateListAxes: function()
281    {
282        this.selectAxes.clear();
283        var jsonAxeTypes;
284
285        if( "MOBILE" == this.selectedPlateform.jsonElement.type )
286            jsonAxeTypes = this.jsonAxeTypesForMobilePlateforms;
287        else
288            jsonAxeTypes = this.jsonAxeTypesForFixedPlateforms;
289
290        jsonAxeTypes.each( function ( axeType )
291        {
292            this.selectAxes.add( axeType.value, interfaceTexts[axeType.text] );
293        }.bind( this ) );
294
295        this.selectAxes.selectFirst( false );
296    }
297
298} );
299
300</script>
Note: See TracBrowser for help on using the repository browser.