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

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

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