~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to lib/SunViewer/SelectByDateMenu.js

  • Committer: Michael Lynch
  • Date: 2008-02-01 06:21:07 UTC
  • Revision ID: mike@mike-desktop-20080201062107-uhqip0rcpsfc91mq
Initial import

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
/**
 
2
 * @author Patrick Schmiedel patrick.schmiedel@gmx.net
 
3
 */
 
4
 
 
5
/**
 
6
 * @classDescription Builds and manages a menu for selecting the current
 
7
 * image through drop-downs for the year, month, day and image.
 
8
 * NOTE: This class is to be replaced by a more intuitive way of browsing
 
9
 * through the available data.
 
10
 */
 
11
var SelectByDateMenu = Class.create();
 
12
 
 
13
SelectByDateMenu.prototype =  Object.extend(new SunViewerWidget(), {
 
14
        // Default options
 
15
        defaultOptions: $H({
 
16
                tileDir: 'images/tiles/',
 
17
                Database: 'lib/HV_Database/'
 
18
        }),
 
19
        
 
20
        /**
 
21
         * @constructor
 
22
         * @param {String} elementId    The ID of the menu HTML element.
 
23
         * @param {Hash} options                Available options: tileDir
 
24
         */
 
25
        initialize: function(elementId, options) {
 
26
                this.date = { year: 0, month: 0, day: 0, image: '' };
 
27
                this.map = { instrument: '-all-' };
 
28
 
 
29
                Object.extend(this, this.defaultOptions);
 
30
                Object.extend(this, options);
 
31
                
 
32
                if (elementId && document.getElementById(elementId)) {
 
33
                        this.domNode = $(elementId);
 
34
                        this.instrumentHtmlElement = $(this.domNode.id + '.InstrumentSel');
 
35
                        this.yearHtmlElement = $(this.domNode.id + '.YearSel');
 
36
                        this.monthHtmlElement = $(this.domNode.id + '.MonthSel');
 
37
                        this.dayHtmlElement = $(this.domNode.id + '.DaySel');
 
38
                        this.imageHtmlElement = $(this.domNode.id + '.ImageSel');
 
39
                        this.observeElements().populateElements();
 
40
                }
 
41
        },
 
42
        
 
43
        /**
 
44
         * @method createHtmlElement    Creates the menu HTML element and its sub-elements.
 
45
         * @return {HTML Element}               The menu HTML element.
 
46
         */
 
47
        createHtmlElement: function() {
 
48
                var htmlElement = document.createElement('span');
 
49
                htmlElement.className = 'selectByDateMenu';
 
50
                this.domNode = htmlElement;
 
51
                this.createElements().appendElements().observeElements().populateElements();
 
52
                return htmlElement;
 
53
        },
 
54
        
 
55
        /**
 
56
         * @method createTableCells     Creates the table cells containing the drop-down menus.
 
57
         * @return {Hash}                       A Hash containing an entry for each drop-down cell.
 
58
         */
 
59
        createTableCells: function() {
 
60
                var htmlElement = document.createElement('span');
 
61
                htmlElement.className = 'selectByDateMenu';
 
62
                this.domNode = htmlElement;
 
63
                this.createElements().observeElements().populateElements();
 
64
                return {
 
65
                        instrument: this.createTableCell(this.instrumentHtmlElement),
 
66
                        year: this.createTableCell(this.yearHtmlElement),
 
67
                        month: this.createTableCell(this.monthHtmlElement),
 
68
                        day: this.createTableCell(this.dayHtmlElement),
 
69
                        image: this.createTableCell(this.imageHtmlElement)
 
70
                };
 
71
        },
 
72
        
 
73
        /**
 
74
         * @method createTableCell                              Creates a single table cell containing one drop-down menu.
 
75
         * @param {HTML Element} htmlElement    The drop-down menu HTML element.
 
76
         * @return {HTML Element}                               The table cell containing the drop-down menu.
 
77
         */
 
78
        createTableCell: function(htmlElement) {
 
79
                var td = document.createElement('td');
 
80
                td.className = 'layerConfigurator';
 
81
                td.appendChild(htmlElement);
 
82
                return td;
 
83
        },
 
84
        
 
85
        /**
 
86
         * @method createElements       Creates the drop-down menus.
 
87
         */
 
88
        createElements: function() {
 
89
                this.instrumentHtmlElement = document.createElement('select');
 
90
                this.instrumentHtmlElement.id = this.domNode.id + '.InstrumentSel';
 
91
                this.yearHtmlElement = document.createElement('select');
 
92
                this.yearHtmlElement.id = this.domNode.id + '.YearSel';
 
93
                this.monthHtmlElement = document.createElement('select');
 
94
                this.monthHtmlElement.id = this.domNode.id + '.MonthSel';
 
95
                this.dayHtmlElement = document.createElement('select');
 
96
                this.dayHtmlElement.id = this.domNode.id + '.DaySel';
 
97
                this.imageHtmlElement = document.createElement('select');
 
98
                this.imageHtmlElement.id = this.domNode.id + '.ImageSel';
 
99
                return this;
 
100
        },
 
101
        
 
102
        /**
 
103
         * @method appendElements       Appends the drop-down menus and their labels to the menu HTML element.
 
104
         */
 
105
        appendElements: function() {
 
106
                this.domNode.appendChild(document.createTextNode('Instrument '));
 
107
                this.domNode.appendChild(this.instrumentHtmlElement);
 
108
                this.domNode.appendChild(document.createTextNode('Year '));
 
109
                this.domNode.appendChild(this.yearHtmlElement);
 
110
                this.domNode.appendChild(document.createTextNode(' Month '));
 
111
                this.domNode.appendChild(this.monthHtmlElement);
 
112
                this.domNode.appendChild(document.createTextNode(' Day '));
 
113
                this.domNode.appendChild(this.dayHtmlElement);
 
114
                this.domNode.appendChild(document.createTextNode(' Image '));
 
115
                this.domNode.appendChild(this.imageHtmlElement);
 
116
                return this;
 
117
        },
 
118
 
 
119
        /**
 
120
         * @method populateElements     Populates the drop-down menus.
 
121
         */
 
122
        populateElements: function() {
 
123
                var callback = this.populateInstruments.bind(this);
 
124
                var url = this.Database + 'ReturnInstruments.php';
 
125
                new AjaxRequestWrapper.getCached(url, callback);
 
126
                return this;
 
127
        },
 
128
 
 
129
        /**
 
130
         * @method observeElements      Registers the change event handlers for the drop-down menus.
 
131
         */
 
132
        observeElements: function() {
 
133
                Event.observe(this.instrumentHtmlElement, 'change', this.handleInstrumentChange.bind(this));
 
134
                Event.observe(this.yearHtmlElement, 'change', this.handleYearChange.bind(this));
 
135
                Event.observe(this.monthHtmlElement, 'change', this.handleMonthChange.bind(this));
 
136
                Event.observe(this.dayHtmlElement, 'change', this.handleDayChange.bind(this));
 
137
                Event.observe(this.imageHtmlElement, 'change', this.handleImageChange.bind(this));
 
138
                return this;
 
139
        },
 
140
        
 
141
        
 
142
        populateInstruments: function(txt) {
 
143
                var instruments = eval(txt);
 
144
                var options = this.instrumentHtmlElement;
 
145
                options.length = 0;
 
146
                this.map.instrument = "-all-";
 
147
                var option = new Option("-all-", "-all-", false, false);
 
148
                options.appendChild(option);
 
149
                
 
150
                for (var Counter = 0; Counter < instruments.length; Counter++)
 
151
                {
 
152
                        var option = new Option(instruments[Counter], instruments[Counter], false, false);
 
153
                        options.appendChild(option);
 
154
                }
 
155
                
 
156
                this.map.instrument = instruments[0];
 
157
                
 
158
                var callback = this.populateYears.bind(this);
 
159
                var url = this.Database + 'ReturnYears.php?Instrument=' + this.map.instrument;
 
160
                new AjaxRequestWrapper.getCached(url, callback);
 
161
        },
 
162
        
 
163
        /**
 
164
         * @method populateYears        Populates the years drop-down.
 
165
         * @param {String} txt          The contents of the dirlist.txt file.
 
166
         */
 
167
        populateYears: function(txt) {
 
168
                var years = eval(txt);
 
169
                var options = this.yearHtmlElement;
 
170
                options.length = 0;
 
171
                this.date.year = 0;
 
172
                for (var Counter = 0; Counter < years.length; Counter++)
 
173
                {
 
174
                        var option = new Option(years[Counter], years[Counter], false, false);
 
175
                        options.appendChild(option);
 
176
                }
 
177
                
 
178
                this.date.year = years[0];
 
179
                
 
180
                var callback = this.populateMonths.bind(this);
 
181
                var url = this.Database + 'ReturnMonths.php?Instrument=' + this.map.instrument + '&Year=' + this.date.year;
 
182
                new AjaxRequestWrapper.getCached(url, callback);
 
183
        },
 
184
        
 
185
        /**
 
186
         * @method populateMonths       Populates the months drop-down.
 
187
         * @param {String} txt          The contents of the dirlist.txt file.
 
188
         */
 
189
        populateMonths: function(txt) {
 
190
                var months = eval(txt);
 
191
                var year = this.date.year;
 
192
                var options = this.monthHtmlElement;
 
193
                options.length = 0;
 
194
                this.date.month = 0;
 
195
                for (var Counter = 0; Counter < months.length; Counter++)
 
196
                {
 
197
                        var monthProperties = {
 
198
                                year: year,
 
199
                                month: months[Counter]
 
200
                        };
 
201
                        var option = new Option(months[Counter], months[Counter], false, false);
 
202
                        option.properties = monthProperties;
 
203
                        options.appendChild(option);
 
204
                }
 
205
 
 
206
                this.date.month = months[0];
 
207
                
 
208
                var callback = this.populateDays.bind(this);
 
209
                var url = this.Database + 'ReturnDays.php?Instrument=' + this.map.instrument + '&Year=' + this.date.year + '&Month=' + this.date.month;
 
210
                new AjaxRequestWrapper.getCached(url, callback);
 
211
        },
 
212
        
 
213
        populateDays: function(txt) {
 
214
                var days = eval(txt);
 
215
                var year = this.date.year;
 
216
                var month = this.date.month;
 
217
                var options = this.dayHtmlElement;
 
218
                options.length = 0;
 
219
                this.date.Day = 0;
 
220
                for (var Counter = 0; Counter < days.length; Counter++)
 
221
                {
 
222
                        var dayProperties = {
 
223
                                year: year,
 
224
                                month: month,
 
225
                                day: days[Counter]
 
226
                        };
 
227
                        var option = new Option(days[Counter], days[Counter], false, false);
 
228
                        option.properties = dayProperties;
 
229
                        options.appendChild(option);
 
230
                }
 
231
 
 
232
                this.date.day = days[0];
 
233
                
 
234
                var callback = this.populateImages.bind(this);
 
235
                var url = this.Database + 'ReturnImages.php?Instrument=' + this.map.instrument + '&Year=' + this.date.year + '&Month=' + this.date.month + '&Day=' + this.date.day;
 
236
                new AjaxRequestWrapper.getCached(url, callback);
 
237
 
 
238
        },
 
239
        
 
240
        populateImages: function(txt) {
 
241
                var images = eval(txt);
 
242
                var self = this;
 
243
                var year = this.date.year;
 
244
                var month = this.date.month;
 
245
                var day = this.date.day;
 
246
                var options = this.imageHtmlElement;
 
247
                options.length = 0;
 
248
                
 
249
                for (var Counter = 0; Counter < images.length; Counter++)
 
250
                {
 
251
                        hour = images[Counter][4];
 
252
                        min = images[Counter][5];
 
253
                        sec = images[Counter][6];
 
254
                        observatory = images[Counter][7];
 
255
                        instrument = images[Counter][8];
 
256
                        detector = images[Counter][9];
 
257
                        measurement = images[Counter][10];
 
258
                        
 
259
                        StringDay = this.date.day.toString();
 
260
                        if (StringDay.length == 1)
 
261
                        {
 
262
                                StringDay = "0" + StringDay;
 
263
                        }
 
264
                        StringHour = hour.toString();
 
265
                        if (StringHour.length == 1)
 
266
                        {
 
267
                                StringHour = "0" + StringHour;
 
268
                        }
 
269
                        StringMinute = min.toString();
 
270
                        if (StringMinute.length == 1)
 
271
                        {
 
272
                                StringMinute = "0" + StringMinute;
 
273
                        }
 
274
                        StringSecond = sec.toString();
 
275
                        if (StringSecond.length == 1)
 
276
                        {
 
277
                                StringSecond = "0" + StringSecond;
 
278
                        }
 
279
                        
 
280
                        
 
281
                        var sunImg = new SunImage(
 
282
                        {
 
283
                                date: new SunImgDate(
 
284
                                {
 
285
                                        year: self.date.year,
 
286
                                        month: self.date.month,
 
287
                                        day: day,
 
288
                                        hour: images[Counter][4],
 
289
                                        min: images[Counter][5],
 
290
                                        sec: images[Counter][6]
 
291
                                }),
 
292
                                observatory: observatory,
 
293
                                instrument: instrument,
 
294
                                detector: detector,
 
295
                                measurement: measurement,
 
296
                                wavelength: "",
 
297
                                resolution: "",
 
298
                                tileDir: "http://localhost/hvdb" + "/" + this.date.year + "/" + this.date.month + "/" + StringDay + "/" + StringHour  + "/" + observatory + "/" + instrument + "/" + detector + "/" + measurement + "/" + this.date.year + "_" + this.date.month + "_" + StringDay + "_" + StringHour + StringMinute + StringSecond + "_" + observatory + "_" + instrument + "_" + detector + "_" + measurement
 
299
                        });
 
300
                        
 
301
                        
 
302
                        var imgDesc = images[Counter][0];
 
303
                        
 
304
                        var option = new Option(imgDesc, imgDesc, false, false);
 
305
                        option.properties = sunImg;
 
306
                        options.appendChild(option);
 
307
                        
 
308
                }
 
309
                self.handleImageChange();
 
310
 
 
311
        },
 
312
        
 
313
        handleInstrumentChange: function() {
 
314
                // refresh month drop-down
 
315
                this.map.instrument = this.instrumentHtmlElement.options[this.instrumentHtmlElement.selectedIndex].value;
 
316
                var callback = this.populateYears.bind(this); 
 
317
                var url = this.Database + 'ReturnYears.php?Instrument=' + this.map.instrument;
 
318
                new AjaxRequestWrapper.getCached(url, callback);
 
319
        },
 
320
 
 
321
        /**
 
322
         * Event handler: year change
 
323
         */
 
324
        handleYearChange: function() {
 
325
                // refresh month drop-down
 
326
                this.date.year = this.yearHtmlElement.options[this.yearHtmlElement.selectedIndex].value;
 
327
                var callback = this.populateMonths.bind(this); 
 
328
                var url = this.Database + 'ReturnMonths.php?Instrument=' + this.map.instrument + '&Year=' + this.date.year;
 
329
                new AjaxRequestWrapper.getCached(url, callback);
 
330
        },
 
331
 
 
332
        /**
 
333
         * Event handler: month change
 
334
         */
 
335
        handleMonthChange: function() {
 
336
                // refresh day drop-down
 
337
                var monthProperties = this.monthHtmlElement.options[this.monthHtmlElement.selectedIndex].properties;
 
338
                this.date.month = monthProperties.month;
 
339
                var callback = this.populateImages.bind(this);
 
340
                var url = this.Database + 'ReturnDays.php?Instrument=' + this.map.instrument + '&Year=' + this.date.year + '&Month=' + this.date.month;
 
341
                new AjaxRequestWrapper.getCached(url, callback);
 
342
        },
 
343
 
 
344
        /**
 
345
         * Event handler: day change
 
346
         */
 
347
        handleDayChange: function() {
 
348
                Debug.output("handle day change");
 
349
                // refresh image drop-down
 
350
                var dayProperties = this.dayHtmlElement.options[this.dayHtmlElement.selectedIndex].properties;
 
351
                this.date.day = dayProperties.day;
 
352
                var callback = this.populateImages.bind(this);
 
353
                var url = this.Database + 'ReturnImages.php?Instrument=' + this.map.instrument + '&Year=' + this.date.year + '&Month=' + this.date.month + '&Day=' + this.date.day;
 
354
                new AjaxRequestWrapper.getCached(url, callback, true);
 
355
        },
 
356
 
 
357
        /**
 
358
         * Event handler: image change
 
359
         */
 
360
        /**
 
361
         * Event handler: image change
 
362
         */
 
363
        handleImageChange: function() {
 
364
                Debug.output("handle image change");
 
365
                this.selectedImage = this.imageHtmlElement.options[this.imageHtmlElement.selectedIndex].properties;
 
366
 
 
367
                // Dirty hack here
 
368
                if (Debug.loadingIndicator.loadingItemCount != 0) {
 
369
                        Debug.output("dirty hack");
 
370
                        Debug.loadingIndicator.reset();
 
371
                }
 
372
 
 
373
                var callback = this.setImageParameters.bind(this);
 
374
                var url = this.selectedImage.tileDir + '/parameters.txt';
 
375
                new Ajax.Request(url,
 
376
                        {
 
377
                                method: 'get',
 
378
                                onSuccess: function(transport) { callback(transport.responseText); },
 
379
                                onFailure: function(transport) { callback(''); }
 
380
                        }
 
381
                );
 
382
        },
 
383
        
 
384
        /**
 
385
         * TODO: Check the contents of the parameters.txt file before eval()-ing them.
 
386
         * @method setImageParameters   Sets the image parameters according to the values in the text file.
 
387
         * @param {String} txt                  The contents of the parameters.txt file from the tile directory.
 
388
         */
 
389
        setImageParameters: function(txt) {
 
390
                Debug.output("setimageparamaters");
 
391
                var lines = txt.split("\n");
 
392
                var lcount = lines.length;
 
393
                for (var i=0; i<lcount; i++) {
 
394
                        var line = lines[i];
 
395
                        if (line.substr(0,1) == '#') continue;
 
396
                        var equalsPos = line.indexOf('=');
 
397
                        if (equalsPos < 0) continue;
 
398
                        eval('this.selectedImage.' + line.strip() + ';');
 
399
                }
 
400
                this.notifyNewImage();
 
401
        },
 
402
        
 
403
        /**
 
404
         * @method notifyNewImage       Notifies the listeners that a new image has been selected.
 
405
         */
 
406
        notifyNewImage: function() {
 
407
                // notify listeners
 
408
                Debug.output("notifynewimage");
 
409
                this.notifyListeners('ImageChange', this.selectedImage);
 
410
        }
 
411
});