1 | <script type="text/javascript"> |
---|
2 | var InterfaceVisualization = Class.create({ |
---|
3 | |
---|
4 | initialize: function( jsonPlateforms ) |
---|
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.generalContainerCalendar = $("generalContainerCalendar"); |
---|
12 | this.jsonPlateforms = jsonPlateforms || null; |
---|
13 | this.selectedPlateform = false; |
---|
14 | this.selectedParameter = false; |
---|
15 | this.beginDate = false; |
---|
16 | this.endDate = false; |
---|
17 | this.notice = Dom.getContainer("notice"); |
---|
18 | |
---|
19 | /** *********** CONTAINERS *********** **/ |
---|
20 | // Create container for plateforms |
---|
21 | this.containerPlateforms = Dom.getContainer("containerPlateforms"); |
---|
22 | this.containerParameters = Dom.getContainer("containerParameters"); |
---|
23 | this.containerButtons = Dom.getContainer("containerButtons"); |
---|
24 | |
---|
25 | /** *********** LOADING *********** **/ |
---|
26 | // Create loading object for plateforms |
---|
27 | var param = new Object(); |
---|
28 | param.id = "loadingForPlateforms"; |
---|
29 | param.parent = this.containerPlateforms; |
---|
30 | this.loadingPlateforms = new Loading(param); |
---|
31 | this.loadingPlateforms.display(); |
---|
32 | |
---|
33 | // Create loading object for parameters |
---|
34 | var param = new Object(); |
---|
35 | param.id = "loadingForParameters"; |
---|
36 | param.parent = this.containerParameters; |
---|
37 | this.loadingParameters = new Loading(param); |
---|
38 | this.loadingParameters.display(); |
---|
39 | |
---|
40 | /** *********** BUTTONS *********** **/ |
---|
41 | this.visualizeButton = new Button({value:interfaceTexts["data.visualization.button.visualize"], parent:this.containerButtons, id:"button_visualize", onClick:this.onClickVisualize.bind(this)}); |
---|
42 | this.visualizeButton.disable(); |
---|
43 | this.downloadButton = new Button({value:interfaceTexts["data.visualization.button.download"], parent:this.containerButtons, id:"button_download", onClick:this.onClickDownload.bind(this)}); |
---|
44 | this.downloadButton.disable(); |
---|
45 | |
---|
46 | this.createCalendar(); |
---|
47 | this.displayPlateforms(); |
---|
48 | }, |
---|
49 | |
---|
50 | // REQUESTS ******************************************************** |
---|
51 | requestParametersByPlateform: function() |
---|
52 | { |
---|
53 | if(this.selectedPlateform) |
---|
54 | new Ajax.Request("visualization?methodName=searchParametersByPlateform&id=" + this.selectedPlateform.getId(), |
---|
55 | { |
---|
56 | onSuccess:this.handleParametersBySelectedPlateform.bind(this) |
---|
57 | }); |
---|
58 | }, |
---|
59 | |
---|
60 | requestValuesByPlateformByParameterByPeriod: function() |
---|
61 | { |
---|
62 | if(this.selectedPlateform) |
---|
63 | new Ajax.Request("visualization?methodName=searchDatasByPlateformByParameterByPeriod" + |
---|
64 | "&plateformId=" + this.selectedPlateform.getId() + |
---|
65 | "¶meterId=" + this.selectedParameter.getId() + |
---|
66 | "&dateBegin=" + this.beginDate + |
---|
67 | "&dateEnd=" + this.endDate, |
---|
68 | { |
---|
69 | onSuccess:this.handleValuesByPlateformByParameterByPeriod.bind(this) |
---|
70 | }); |
---|
71 | }, |
---|
72 | |
---|
73 | // HANDLES ******************************************************** |
---|
74 | handleParametersBySelectedPlateform: function( result ) |
---|
75 | { |
---|
76 | this.jsonParameters = result.responseText.evalJSON().parameters; |
---|
77 | this.displayParameters(); |
---|
78 | }, |
---|
79 | |
---|
80 | handleValuesByPlateformByParameterByPeriod: function( result ) |
---|
81 | { |
---|
82 | // this.notice.style.visibility = "hidden"; |
---|
83 | |
---|
84 | this.jsonValues = result.responseText.evalJSON().values; |
---|
85 | alert("values : "+this.jsonValues.size()); |
---|
86 | }, |
---|
87 | |
---|
88 | // DISPLAYS ******************************************************** |
---|
89 | createCalendar: function() |
---|
90 | { |
---|
91 | // Embedded Calendar |
---|
92 | this.calendar = Calendar.setup( |
---|
93 | { |
---|
94 | dateField: 'embeddedDateField', |
---|
95 | endDateField: 'embeddedEndDateField', |
---|
96 | parentElement: 'embeddedCalendar', |
---|
97 | clickToDateField: true, |
---|
98 | selectHandler: this.onClickCalendar.bind(this) |
---|
99 | }) |
---|
100 | }, |
---|
101 | |
---|
102 | displayPlateforms: function() |
---|
103 | { |
---|
104 | this.plateforms = new ListPlatforms(this.jsonPlateforms, new Object()); |
---|
105 | |
---|
106 | this.plateforms.addOpenListener(this.onSelectPlateform.bind(this)); |
---|
107 | this.loadingPlateforms.hide(); |
---|
108 | this.plateforms.displayWithPairImpair(this.containerPlateforms, "NoPlateform", interfaceTexts["data.visualization.noPlateform"]); |
---|
109 | |
---|
110 | // Select the first plateform by default |
---|
111 | if( this.jsonPlateforms && this.jsonPlateforms[0] ) |
---|
112 | { |
---|
113 | var plateformToSelect = this.plateforms.getItemById(this.jsonPlateforms[0].id); |
---|
114 | this.onSelectPlateform(plateformToSelect.divItem); |
---|
115 | this.selectedPlateform = plateformToSelect.divItem; |
---|
116 | } |
---|
117 | }, |
---|
118 | |
---|
119 | displayParameters: function() |
---|
120 | { |
---|
121 | this.parameters = new ListParameters(this.jsonParameters, new Object()); |
---|
122 | |
---|
123 | this.parameters.addOpenListener(this.onSelectParameter.bind(this)); |
---|
124 | this.loadingParameters.hide(); |
---|
125 | this.parameters.displayWithPairImpair(this.containerParameters, "NoParameter", interfaceTexts["data.visualization.noParameter"]); |
---|
126 | |
---|
127 | this.resizeContainers(); |
---|
128 | }, |
---|
129 | |
---|
130 | // EVENTS ******************************************************** |
---|
131 | onSelectPlateform: function( objPlateform ) |
---|
132 | { |
---|
133 | if( this.selectedPlateform && objPlateform.getId() == this.selectedPlateform.getId() ) |
---|
134 | return; |
---|
135 | |
---|
136 | // Unselect old plateform |
---|
137 | if( this.selectedPlateform ) |
---|
138 | this.selectedPlateform.unselect(); |
---|
139 | |
---|
140 | this.selectedPlateform = objPlateform; |
---|
141 | this.selectedPlateform.select(); |
---|
142 | |
---|
143 | // Unselect old parameter |
---|
144 | if( this.selectedParameter ) |
---|
145 | this.selectedParameter = false; |
---|
146 | |
---|
147 | this.requestParametersByPlateform(); |
---|
148 | this.testAllFields(); |
---|
149 | }, |
---|
150 | |
---|
151 | onSelectParameter: function( objParameter ) |
---|
152 | { |
---|
153 | if( this.selectedParameter && objParameter.getId() == this.selectedParameter.getId() ) |
---|
154 | return; |
---|
155 | |
---|
156 | // Unselect old parameter |
---|
157 | if( this.selectedParameter ) |
---|
158 | this.selectedParameter.unselect(); |
---|
159 | |
---|
160 | this.selectedParameter = objParameter; |
---|
161 | this.selectedParameter.select(); |
---|
162 | this.testAllFields(); |
---|
163 | }, |
---|
164 | |
---|
165 | onClickCalendar: function(calendar) |
---|
166 | { |
---|
167 | if (!calendar.dateField) return false |
---|
168 | |
---|
169 | if(calendar.clickToDateField) |
---|
170 | { |
---|
171 | Element.update(calendar.dateField, calendar.date.print(calendar.dateFormat)) |
---|
172 | this.beginDate = calendar.date.print(calendar.dateFormat); |
---|
173 | } else { |
---|
174 | Element.update(calendar.endDateField, calendar.date.print(calendar.dateFormat)) |
---|
175 | this.endDate = calendar.date.print(calendar.dateFormat); |
---|
176 | } |
---|
177 | calendar.setClickToDateField(!calendar.clickToDateField); |
---|
178 | this.testCalendarPeriod(calendar.dateField.innerHTML,calendar.endDateField.innerHTML); |
---|
179 | |
---|
180 | // Call the close handler, if necessary |
---|
181 | if (calendar.shouldClose) calendar.callCloseHandler() |
---|
182 | }, |
---|
183 | |
---|
184 | onClickVisualize: function() |
---|
185 | { |
---|
186 | this.displayLoading(); |
---|
187 | this.requestValuesByPlateformByParameterByPeriod(); |
---|
188 | }, |
---|
189 | |
---|
190 | onClickDownload: function() |
---|
191 | { |
---|
192 | if(this.testAllFields()) |
---|
193 | alert("ok"); |
---|
194 | else |
---|
195 | alert("non ok"); |
---|
196 | }, |
---|
197 | |
---|
198 | // OTHERS ******************************************************** |
---|
199 | resizeContainers: function() |
---|
200 | { |
---|
201 | var titleSize = 85; |
---|
202 | var parentHeight = this.superParent.offsetHeight - titleSize; |
---|
203 | var containerPlateformsHeight = this.generalContainerParameters.offsetHeight; |
---|
204 | var containerParametersHeight = this.generalContainerParameters.offsetHeight; |
---|
205 | |
---|
206 | var containerPlateforms = this.containerPlateforms.offsetHeight; |
---|
207 | var containerParameters = this.containerParameters.offsetHeight; |
---|
208 | var containerCalendarHeight = this.generalContainerCalendar.offsetHeight; |
---|
209 | |
---|
210 | var maxHeight = Math.max(containerPlateforms, containerParameters, containerCalendarHeight); |
---|
211 | |
---|
212 | |
---|
213 | if(maxHeight > parentHeight) |
---|
214 | { |
---|
215 | this.superParent.style.height = maxHeight + 110 + "px"; |
---|
216 | this.generalContainerPlateforms.style.height = maxHeight + 10 + "px"; |
---|
217 | this.generalContainerParameters.style.height = maxHeight + 10 + "px"; |
---|
218 | } else if(maxHeight == containerCalendarHeight) { |
---|
219 | this.superParent.style.height = containerCalendarHeight + titleSize + 25 + "px"; |
---|
220 | this.generalContainerPlateforms.style.height = containerCalendarHeight + "px"; |
---|
221 | this.generalContainerParameters.style.height = containerCalendarHeight + "px"; |
---|
222 | } |
---|
223 | }, |
---|
224 | |
---|
225 | testCalendarPeriod: function(beginDate, endDate) |
---|
226 | { |
---|
227 | if(!beginDate || !endDate) |
---|
228 | return false; |
---|
229 | |
---|
230 | var matchFormat = /^(\d{4})-(\d{2})-(\d{2})$/i; |
---|
231 | var testBeginDate = beginDate.match(matchFormat); |
---|
232 | var testEndDate = endDate.match(matchFormat); |
---|
233 | if(!testEndDate || !testEndDate) |
---|
234 | return; |
---|
235 | |
---|
236 | this.resizeContainers(); |
---|
237 | |
---|
238 | var datesOk = beginDate <= endDate; |
---|
239 | if(!datesOk) |
---|
240 | this.displayNotice(); |
---|
241 | else |
---|
242 | this.hideNotice(); |
---|
243 | |
---|
244 | if(!datesOk || !this.selectedPlateform || !this.selectedParameter){ |
---|
245 | this.visualizeButton.disable(); |
---|
246 | this.downloadButton.disable(); |
---|
247 | return false; |
---|
248 | } else { |
---|
249 | this.visualizeButton.enable(); |
---|
250 | this.downloadButton.enable(); |
---|
251 | return true; |
---|
252 | } |
---|
253 | }, |
---|
254 | |
---|
255 | testAllFields: function() |
---|
256 | { |
---|
257 | if(!this.selectedPlateform || !this.selectedParameter || !this.beginDate || !this.endDate) |
---|
258 | { |
---|
259 | this.visualizeButton.disable(); |
---|
260 | this.downloadButton.disable(); |
---|
261 | } |
---|
262 | |
---|
263 | return this.testCalendarPeriod(this.beginDate, this.endDate); |
---|
264 | }, |
---|
265 | |
---|
266 | displayNotice: function() |
---|
267 | { |
---|
268 | this.notice.innerHTML = " "; |
---|
269 | this.notice.removeClassName("loading"); |
---|
270 | this.notice.addClassName("error"); |
---|
271 | this.notice.innerHTML = interfaceTexts["data.visualization.Unvalid_Period"]; |
---|
272 | this.notice.style.visibility = "visible"; |
---|
273 | }, |
---|
274 | |
---|
275 | hideNotice: function() |
---|
276 | { |
---|
277 | this.notice.innerHTML = " "; |
---|
278 | this.notice.style.visibility = "hidden"; |
---|
279 | }, |
---|
280 | |
---|
281 | displayLoading: function() |
---|
282 | { |
---|
283 | this.notice.innerHTML = " "; |
---|
284 | this.notice.removeClassName("error"); |
---|
285 | this.notice.style.visibility = "visible"; |
---|
286 | this.notice.addClassName("loading"); |
---|
287 | var image = new Element('img', {src: 'resources/icons/loading_datas.gif'}); |
---|
288 | this.notice.appendChild(image); |
---|
289 | }, |
---|
290 | |
---|
291 | hideLoading: function() |
---|
292 | { |
---|
293 | this.notice.innerHTML = " "; |
---|
294 | } |
---|
295 | }); |
---|
296 | |
---|
297 | </script> |
---|