2
* @author Patrick Schmiedel patrick.schmiedel@gmx.net
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.
11
var SelectByDateMenu = Class.create();
13
SelectByDateMenu.prototype = Object.extend(new SunViewerWidget(), {
16
tileDir: 'images/tiles/',
17
Database: 'lib/HV_Database/'
22
* @param {String} elementId The ID of the menu HTML element.
23
* @param {Hash} options Available options: tileDir
25
initialize: function(elementId, options) {
26
this.date = { year: 0, month: 0, day: 0, image: '' };
27
this.map = { instrument: '-all-' };
29
Object.extend(this, this.defaultOptions);
30
Object.extend(this, options);
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();
44
* @method createHtmlElement Creates the menu HTML element and its sub-elements.
45
* @return {HTML Element} The menu HTML element.
47
createHtmlElement: function() {
48
var htmlElement = document.createElement('span');
49
htmlElement.className = 'selectByDateMenu';
50
this.domNode = htmlElement;
51
this.createElements().appendElements().observeElements().populateElements();
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.
59
createTableCells: function() {
60
var htmlElement = document.createElement('span');
61
htmlElement.className = 'selectByDateMenu';
62
this.domNode = htmlElement;
63
this.createElements().observeElements().populateElements();
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)
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.
78
createTableCell: function(htmlElement) {
79
var td = document.createElement('td');
80
td.className = 'layerConfigurator';
81
td.appendChild(htmlElement);
86
* @method createElements Creates the drop-down menus.
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';
103
* @method appendElements Appends the drop-down menus and their labels to the menu HTML element.
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);
120
* @method populateElements Populates the drop-down menus.
122
populateElements: function() {
123
var callback = this.populateInstruments.bind(this);
124
var url = this.Database + 'ReturnInstruments.php';
125
new AjaxRequestWrapper.getCached(url, callback);
130
* @method observeElements Registers the change event handlers for the drop-down menus.
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));
142
populateInstruments: function(txt) {
143
var instruments = eval(txt);
144
var options = this.instrumentHtmlElement;
146
this.map.instrument = "-all-";
147
var option = new Option("-all-", "-all-", false, false);
148
options.appendChild(option);
150
for (var Counter = 0; Counter < instruments.length; Counter++)
152
var option = new Option(instruments[Counter], instruments[Counter], false, false);
153
options.appendChild(option);
156
this.map.instrument = instruments[0];
158
var callback = this.populateYears.bind(this);
159
var url = this.Database + 'ReturnYears.php?Instrument=' + this.map.instrument;
160
new AjaxRequestWrapper.getCached(url, callback);
164
* @method populateYears Populates the years drop-down.
165
* @param {String} txt The contents of the dirlist.txt file.
167
populateYears: function(txt) {
168
var years = eval(txt);
169
var options = this.yearHtmlElement;
172
for (var Counter = 0; Counter < years.length; Counter++)
174
var option = new Option(years[Counter], years[Counter], false, false);
175
options.appendChild(option);
178
this.date.year = years[0];
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);
186
* @method populateMonths Populates the months drop-down.
187
* @param {String} txt The contents of the dirlist.txt file.
189
populateMonths: function(txt) {
190
var months = eval(txt);
191
var year = this.date.year;
192
var options = this.monthHtmlElement;
195
for (var Counter = 0; Counter < months.length; Counter++)
197
var monthProperties = {
199
month: months[Counter]
201
var option = new Option(months[Counter], months[Counter], false, false);
202
option.properties = monthProperties;
203
options.appendChild(option);
206
this.date.month = months[0];
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);
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;
220
for (var Counter = 0; Counter < days.length; Counter++)
222
var dayProperties = {
227
var option = new Option(days[Counter], days[Counter], false, false);
228
option.properties = dayProperties;
229
options.appendChild(option);
232
this.date.day = days[0];
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);
240
populateImages: function(txt) {
241
var images = eval(txt);
243
var year = this.date.year;
244
var month = this.date.month;
245
var day = this.date.day;
246
var options = this.imageHtmlElement;
249
for (var Counter = 0; Counter < images.length; Counter++)
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];
259
StringDay = this.date.day.toString();
260
if (StringDay.length == 1)
262
StringDay = "0" + StringDay;
264
StringHour = hour.toString();
265
if (StringHour.length == 1)
267
StringHour = "0" + StringHour;
269
StringMinute = min.toString();
270
if (StringMinute.length == 1)
272
StringMinute = "0" + StringMinute;
274
StringSecond = sec.toString();
275
if (StringSecond.length == 1)
277
StringSecond = "0" + StringSecond;
281
var sunImg = new SunImage(
283
date: new SunImgDate(
285
year: self.date.year,
286
month: self.date.month,
288
hour: images[Counter][4],
289
min: images[Counter][5],
290
sec: images[Counter][6]
292
observatory: observatory,
293
instrument: instrument,
295
measurement: measurement,
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
302
var imgDesc = images[Counter][0];
304
var option = new Option(imgDesc, imgDesc, false, false);
305
option.properties = sunImg;
306
options.appendChild(option);
309
self.handleImageChange();
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);
322
* Event handler: year change
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);
333
* Event handler: month change
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);
345
* Event handler: day change
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);
358
* Event handler: image change
361
* Event handler: image change
363
handleImageChange: function() {
364
Debug.output("handle image change");
365
this.selectedImage = this.imageHtmlElement.options[this.imageHtmlElement.selectedIndex].properties;
368
if (Debug.loadingIndicator.loadingItemCount != 0) {
369
Debug.output("dirty hack");
370
Debug.loadingIndicator.reset();
373
var callback = this.setImageParameters.bind(this);
374
var url = this.selectedImage.tileDir + '/parameters.txt';
375
new Ajax.Request(url,
378
onSuccess: function(transport) { callback(transport.responseText); },
379
onFailure: function(transport) { callback(''); }
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.
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++) {
395
if (line.substr(0,1) == '#') continue;
396
var equalsPos = line.indexOf('=');
397
if (equalsPos < 0) continue;
398
eval('this.selectedImage.' + line.strip() + ';');
400
this.notifyNewImage();
404
* @method notifyNewImage Notifies the listeners that a new image has been selected.
406
notifyNewImage: function() {
408
Debug.output("notifynewimage");
409
this.notifyListeners('ImageChange', this.selectedImage);