do not count segment jumps in track length and duration
[lantea.git] / js / ui.js
1 /* This Source Code Form is subject to the terms of the Mozilla Public
2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5 // Get the best-available objects for indexedDB and requestAnimationFrame.
6 window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
7 window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
8
9 var mainDB;
10 var gAppInitDone = false;
11 var gUIHideCountdown = 0;
12 var gWaitCounter = 0;
13 var gAction, gActionLabel;
14 var gOSMAPIURL = "http://api.openstreetmap.org/";
15
16 window.onload = function() {
17   gAction = document.getElementById("action");
18   gActionLabel = document.getElementById("actionlabel");
19
20   var mSel = document.getElementById("mapSelector");
21   for (var mapStyle in gMapStyles) {
22     var opt = document.createElement("option");
23     opt.value = mapStyle;
24     opt.text = gMapStyles[mapStyle].name;
25     mSel.add(opt, null);
26   }
27
28   var areas = document.getElementsByClassName("overlayArea");
29   for (var i = 0; i <= areas.length - 1; i++) {
30     areas[i].addEventListener("mouseup", uiEvHandler, false);
31     areas[i].addEventListener("mousemove", uiEvHandler, false);
32     areas[i].addEventListener("mousedown", uiEvHandler, false);
33     areas[i].addEventListener("mouseout", uiEvHandler, false);
34
35     areas[i].addEventListener("touchstart", uiEvHandler, false);
36     areas[i].addEventListener("touchmove", uiEvHandler, false);
37     areas[i].addEventListener("touchend", uiEvHandler, false);
38     areas[i].addEventListener("touchcancel", uiEvHandler, false);
39     areas[i].addEventListener("touchleave", uiEvHandler, false);
40   }
41
42   document.getElementById("body").addEventListener("keydown", uiEvHandler, false);
43
44   if (navigator.platform.length == "") {
45     // For Firefox OS, don't display the "save" button.
46     // Do this by setting the debugHide class for testing in debug mode.
47     document.getElementById("saveTrackButton").classList.add("debugHide");
48   }
49
50   // Without OAuth, the login data is useless
51   //document.getElementById("uploadSettingsArea").classList.remove("debugHide");
52   // As login data is useless for now, always enable upload button
53   document.getElementById("uploadTrackButton").disabled = false;
54
55   if (gDebug) {
56     // Note that GPX upload returns an error 500 on the dev API right now.
57     gOSMAPIURL = "http://api06.dev.openstreetmap.org/";
58   }
59
60   gAction.addEventListener("dbinit-done", initMap, false);
61   gAction.addEventListener("mapinit-done", postInit, false);
62   console.log("starting DB init...");
63   initDB();
64 }
65
66 function postInit(aEvent) {
67   gAction.removeEventListener(aEvent.type, postInit, false);
68   console.log("init done, draw map.");
69   gMapPrefsLoaded = true;
70   gAppInitDone = true;
71   //gMap.resizeAndDraw();  <-- HACK: This triggers bug 1001853, work around with a delay.
72   window.setTimeout(gMap.resizeAndDraw, 100);
73   gActionLabel.textContent = "";
74   gAction.style.display = "none";
75   setTracking(document.getElementById("trackCheckbox"));
76   gPrefs.get(gDebug ? "osm_dev_user" : "osm_user", function(aValue) {
77     if (aValue) {
78       document.getElementById("uploadUser").value = aValue;
79       document.getElementById("uploadTrackButton").disabled = false;
80     }
81   });
82   gPrefs.get(gDebug ? "osm_dev_pwd" : "osm_pwd", function(aValue) {
83     var upwd = document.getElementById("uploadPwd");
84     if (aValue)
85       document.getElementById("uploadPwd").value = aValue;
86   });
87 }
88
89 window.onresize = function() {
90   gMap.resizeAndDraw();
91 }
92
93 function initDB(aEvent) {
94   // Open DB.
95   if (aEvent)
96     gAction.removeEventListener(aEvent.type, initDB, false);
97   var request = window.indexedDB.open("MainDB-lantea", 2);
98   request.onerror = function(event) {
99     // Errors can be handled here. Error codes explain in:
100     // https://developer.mozilla.org/en/IndexedDB/IDBDatabaseException#Constants
101     if (gDebug)
102       console.log("error opening mainDB: " + event.target.errorCode);
103   };
104   request.onsuccess = function(event) {
105     mainDB = request.result;
106     var throwEv = new CustomEvent("dbinit-done");
107     gAction.dispatchEvent(throwEv);
108   };
109   request.onupgradeneeded = function(event) {
110     mainDB = request.result;
111     var ver = mainDB.version || 0; // version is empty string for a new DB
112     if (gDebug)
113       console.log("mainDB has version " + ver + ", upgrade needed.");
114     if (!mainDB.objectStoreNames.contains("prefs")) {
115       // Create a "prefs" objectStore.
116       var prefsStore = mainDB.createObjectStore("prefs");
117     }
118     if (!mainDB.objectStoreNames.contains("track")) {
119       // Create a "track" objectStore.
120       var trackStore = mainDB.createObjectStore("track", {autoIncrement: true});
121     }
122     if (!mainDB.objectStoreNames.contains("tilecache")) {
123       // Create a "tilecache" objectStore.
124       var tilecacheStore = mainDB.createObjectStore("tilecache");
125     }
126     mainDB.onversionchange = function(event) {
127       mainDB.close();
128       mainDB = undefined;
129       initDB();
130     };
131   };
132 }
133
134 function showUI() {
135   if (gUIHideCountdown <= 0) {
136     var areas = document.getElementsByClassName('overlayArea');
137     for (var i = 0; i <= areas.length - 1; i++) {
138       areas[i].classList.remove("hidden");
139     }
140     setTimeout(maybeHideUI, 1000);
141   }
142   gUIHideCountdown = 5;
143 }
144
145 function maybeHideUI() {
146   gUIHideCountdown--;
147   if (document.getElementById("trackArea").style.display == "block") {
148     // If track area is visible, update track data.
149     document.getElementById("trackLength").textContent = calcTrackLength().toFixed(1);
150     document.getElementById("trackDuration").textContent = Math.round(calcTrackDuration()/60);
151   }
152   if (gUIHideCountdown <= 0) {
153     var areas = document.getElementsByClassName('overlayArea');
154     for (var i = 0; i <= areas.length - 1; i++) {
155       areas[i].classList.add("hidden");
156     }
157   }
158   else {
159     setTimeout(maybeHideUI, 1000);
160   }
161 }
162
163 function toggleTrackArea() {
164   var fs = document.getElementById("trackArea");
165   if (fs.style.display != "block") {
166     fs.style.display = "block";
167     showUI();
168   }
169   else {
170     fs.style.display = "none";
171   }
172 }
173
174 function toggleSettings() {
175   var fs = document.getElementById("settingsArea");
176   if (fs.style.display != "block") {
177     fs.style.display = "block";
178     showUI();
179   }
180   else {
181     fs.style.display = "none";
182   }
183 }
184
185 function toggleFullscreen() {
186   if ((document.fullScreenElement && document.fullScreenElement !== null) ||
187       (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
188       (document.webkitFullScreenElement && document.webkitFullScreenElement !== null)) {
189     if (document.cancelFullScreen) {
190       document.cancelFullScreen();
191     } else if (document.mozCancelFullScreen) {
192       document.mozCancelFullScreen();
193     } else if (document.webkitCancelFullScreen) {
194       document.webkitCancelFullScreen();
195     }
196   }
197   else {
198     var elem = document.getElementById("body");
199     if (elem.requestFullScreen) {
200       elem.requestFullScreen();
201     } else if (elem.mozRequestFullScreen) {
202       elem.mozRequestFullScreen();
203     } else if (elem.webkitRequestFullScreen) {
204       elem.webkitRequestFullScreen();
205     }
206   }
207 }
208
209 function showUploadDialog() {
210   var dia = document.getElementById("dialogArea");
211   var areas = dia.children;
212   for (var i = 0; i <= areas.length - 1; i++) {
213     areas[i].style.display = "none";
214   }
215   document.getElementById("uploadDialog").style.display = "block";
216   document.getElementById("uploadTrackButton").disabled = true;
217   dia.classList.remove("hidden");
218 }
219
220 function showGLWarningDialog() {
221   var dia = document.getElementById("dialogArea");
222   var areas = dia.children;
223   for (var i = 0; i <= areas.length - 1; i++) {
224     areas[i].style.display = "none";
225   }
226   document.getElementById("noGLwarning").style.display = "block";
227   dia.classList.remove("hidden");
228 }
229
230 function cancelDialog() {
231   document.getElementById("dialogArea").classList.add("hidden");
232   document.getElementById("uploadTrackButton").disabled = false;
233 }
234
235 var uiEvHandler = {
236   handleEvent: function(aEvent) {
237     var touchEvent = aEvent.type.indexOf('touch') != -1;
238
239     switch (aEvent.type) {
240       case "mousedown":
241       case "touchstart":
242       case "mousemove":
243       case "touchmove":
244       case "mouseup":
245       case "touchend":
246       case "keydown":
247         showUI();
248         break;
249     }
250   }
251 };
252
253 function setUploadField(aField) {
254   switch (aField.id) {
255     case "uploadUser":
256       gPrefs.set(gDebug ? "osm_dev_user" : "osm_user", aField.value);
257       document.getElementById("uploadTrackButton").disabled = !aField.value.length;
258       break;
259     case "uploadPwd":
260       gPrefs.set(gDebug ? "osm_dev_pwd" : "osm_pwd", aField.value);
261       break;
262   }
263 }
264
265 function makeISOString(aTimestamp) {
266   // ISO time format is YYYY-MM-DDTHH:mm:ssZ
267   var tsDate = new Date(aTimestamp);
268   // Note that .getUTCMonth() returns a number between 0 and 11 (0 for January)!
269   return tsDate.getUTCFullYear() + "-" +
270          (tsDate.getUTCMonth() < 9 ? "0" : "") + (tsDate.getUTCMonth() + 1 ) + "-" +
271          (tsDate.getUTCDate() < 10 ? "0" : "") + tsDate.getUTCDate() + "T" +
272          (tsDate.getUTCHours() < 10 ? "0" : "") + tsDate.getUTCHours() + ":" +
273          (tsDate.getUTCMinutes() < 10 ? "0" : "") + tsDate.getUTCMinutes() + ":" +
274          (tsDate.getUTCSeconds() < 10 ? "0" : "") + tsDate.getUTCSeconds() + "Z";
275 }
276
277 function convertTrack(aTargetFormat) {
278   var out = "";
279   switch (aTargetFormat) {
280     case "gpx":
281       out += '<?xml version="1.0" encoding="UTF-8" ?>' + "\n\n";
282       out += '<gpx version="1.0" creator="Lantea" xmlns="http://www.topografix.com/GPX/1/0">' + "\n";
283       if (gTrack.length) {
284         out += '  <trk>' + "\n";
285         out += '    <trkseg>' + "\n";
286         for (var i = 0; i < gTrack.length; i++) {
287           if (gTrack[i].beginSegment && i > 0) {
288             out += '    </trkseg>' + "\n";
289             out += '    <trkseg>' + "\n";
290           }
291           out += '      <trkpt lat="' + gTrack[i].coords.latitude + '" lon="' +
292                                         gTrack[i].coords.longitude + '">' + "\n";
293           if (gTrack[i].coords.altitude) {
294             out += '        <ele>' + gTrack[i].coords.altitude + '</ele>' + "\n";
295           }
296           out += '        <time>' + makeISOString(gTrack[i].time) + '</time>' + "\n";
297           out += '      </trkpt>' + "\n";
298         }
299         out += '    </trkseg>' + "\n";
300         out += '  </trk>' + "\n";
301       }
302       out += '</gpx>' + "\n";
303       break;
304     case "json":
305       out = JSON.stringify(gTrack);
306       break;
307     default:
308       break;
309   }
310   return out;
311 }
312
313 function saveTrack() {
314   if (gTrack.length) {
315     var outDataURI = "data:application/gpx+xml," +
316                      encodeURIComponent(convertTrack("gpx"));
317     window.open(outDataURI, 'GPX Track');
318   }
319 }
320
321 function saveTrackDump() {
322   if (gTrack.length) {
323     var outDataURI = "data:application/json," +
324                      encodeURIComponent(convertTrack("json"));
325     window.open(outDataURI, 'JSON dump');
326   }
327 }
328
329 function uploadTrack() {
330   // Hide all areas in the dialog.
331   var dia = document.getElementById("dialogArea");
332   var areas = dia.children;
333   for (var i = 0; i <= areas.length - 1; i++) {
334     areas[i].style.display = "none";
335   }
336   // Reset all the fields in the status area.
337   document.getElementById("uploadStatusCloseButton").disabled = true;
338   document.getElementById("uploadInProgress").style.display = "block";
339   document.getElementById("uploadSuccess").style.display = "none";
340   document.getElementById("uploadFailed").style.display = "none";
341   document.getElementById("uploadError").style.display = "none";
342   document.getElementById("uploadErrorMsg").textContent = "";
343   // Now show the status area.
344   document.getElementById("uploadStatus").style.display = "block";
345
346   // See http://wiki.openstreetmap.org/wiki/Api06#Uploading_traces
347   var trackBlob = new Blob([convertTrack("gpx")],
348                            { "type" : "application/gpx+xml" });
349   var formData = new FormData();
350   formData.append("file", trackBlob);
351   var desc = document.getElementById("uploadDesc").value;
352   formData.append("description",
353                   desc.length ? desc : "Track recorded via Lantea Maps");
354   //formData.append("tags", "");
355   formData.append("visibility",
356                   document.getElementById("uploadVisibility").value);
357   // Do an empty POST request first, so that we don't send everything,
358   // then ask for credentials, and then send again.
359   var hXHR = new XMLHttpRequest();
360   hXHR.onreadystatechange = function() {
361     if (hXHR.readyState == 4 && (hXHR.status == 200 || hXHR.status == 400)) {
362       // 400 is Bad Request, but that's expected as this was empty.
363       // So far so good, init actual upload.
364       var XHR = new XMLHttpRequest();
365       XHR.onreadystatechange = function() {
366         if (XHR.readyState == 4 && XHR.status == 200) {
367           // Everthing looks fine.
368           reportUploadStatus(true);
369         } else if (XHR.readyState == 4 && XHR.status != 200) {
370           // Fetched the wrong page or network error...
371           reportUploadStatus(false);
372         }
373       };
374       XHR.open("POST", gOSMAPIURL + "api/0.6/gpx/create", true);
375       // Cross-Origin XHR doesn't allow username/password (HTTP Auth).
376       // So, we'll ask the user for entering credentials with rather ugly UI.
377       XHR.withCredentials = true;
378       try {
379         XHR.send(formData); // Send actual form data.
380       }
381       catch (e) {
382         reportUploadStatus(false, e);
383       }
384     } else if (hXHR.readyState == 4 && hXHR.status != 200) {
385       // Fetched the wrong page or network error...
386       reportUploadStatus(false);
387     }
388   };
389   hXHR.open("POST", gOSMAPIURL + "api/0.6/gpx/create", true);
390   // Cross-Origin XHR doesn't allow username/password (HTTP Auth).
391   // So, we'll ask the user for entering credentials with rather ugly UI.
392   hXHR.withCredentials = true;
393   try {
394     hXHR.send(); // Empty request, see above.
395   }
396   catch (e) {
397     reportUploadStatus(false, e);
398   }
399 }
400
401 function reportUploadStatus(aSuccess, aMessage) {
402   document.getElementById("uploadStatusCloseButton").disabled = false;
403   document.getElementById("uploadInProgress").style.display = "none";
404   if (aSuccess) {
405     document.getElementById("uploadSuccess").style.display = "block";
406   }
407   else if (aMessage) {
408     document.getElementById("uploadErrorMsg").textContent = aMessage;
409     document.getElementById("uploadError").style.display = "block";
410   }
411   else {
412     document.getElementById("uploadFailed").style.display = "block";
413   }
414 }
415
416 var gPrefs = {
417   objStore: "prefs",
418
419   get: function(aKey, aCallback) {
420     if (!mainDB)
421       return;
422     var transaction = mainDB.transaction([this.objStore]);
423     var request = transaction.objectStore(this.objStore).get(aKey);
424     request.onsuccess = function(event) {
425       aCallback(request.result, event);
426     };
427     request.onerror = function(event) {
428       // Errors can be handled here.
429       aCallback(undefined, event);
430     };
431   },
432
433   set: function(aKey, aValue, aCallback) {
434     if (!mainDB)
435       return;
436     var success = false;
437     var transaction = mainDB.transaction([this.objStore], "readwrite");
438     var objStore = transaction.objectStore(this.objStore);
439     var request = objStore.put(aValue, aKey);
440     request.onsuccess = function(event) {
441       success = true;
442       if (aCallback)
443         aCallback(success, event);
444     };
445     request.onerror = function(event) {
446       // Errors can be handled here.
447       if (aCallback)
448         aCallback(success, event);
449     };
450   },
451
452   unset: function(aKey, aCallback) {
453     if (!mainDB)
454       return;
455     var success = false;
456     var transaction = mainDB.transaction([this.objStore], "readwrite");
457     var request = transaction.objectStore(this.objStore).delete(aKey);
458     request.onsuccess = function(event) {
459       success = true;
460       if (aCallback)
461         aCallback(success, event);
462     };
463     request.onerror = function(event) {
464       // Errors can be handled here.
465       if (aCallback)
466         aCallback(success, event);
467     }
468   }
469 };
470
471 var gTrackStore = {
472   objStore: "track",
473
474   getList: function(aCallback) {
475     if (!mainDB)
476       return;
477     var transaction = mainDB.transaction([this.objStore]);
478     var objStore = transaction.objectStore(this.objStore);
479     if (objStore.getAll) { // currently Mozilla-specific
480       objStore.getAll().onsuccess = function(event) {
481         aCallback(event.target.result);
482       };
483     }
484     else { // Use cursor (standard method).
485       var tPoints = [];
486       objStore.openCursor().onsuccess = function(event) {
487         var cursor = event.target.result;
488         if (cursor) {
489           tPoints.push(cursor.value);
490           cursor.continue();
491         }
492         else {
493           aCallback(tPoints);
494         }
495       };
496     }
497   },
498
499   getListStepped: function(aCallback) {
500     if (!mainDB)
501       return;
502     var transaction = mainDB.transaction([this.objStore]);
503     var objStore = transaction.objectStore(this.objStore);
504     // Use cursor in reverse direction (so we get the most recent position first)
505     objStore.openCursor(null, "prev").onsuccess = function(event) {
506       var cursor = event.target.result;
507       if (cursor) {
508         aCallback(cursor.value);
509         cursor.continue();
510       }
511       else {
512         aCallback(null);
513       }
514     };
515   },
516
517   push: function(aValue, aCallback) {
518     if (!mainDB)
519       return;
520     var transaction = mainDB.transaction([this.objStore], "readwrite");
521     var objStore = transaction.objectStore(this.objStore);
522     var request = objStore.add(aValue);
523     request.onsuccess = function(event) {
524       if (aCallback)
525         aCallback(request.result, event);
526     };
527     request.onerror = function(event) {
528       // Errors can be handled here.
529       if (aCallback)
530         aCallback(false, event);
531     };
532   },
533
534   clear: function(aCallback) {
535     if (!mainDB)
536       return;
537     var success = false;
538     var transaction = mainDB.transaction([this.objStore], "readwrite");
539     var request = transaction.objectStore(this.objStore).clear();
540     request.onsuccess = function(event) {
541       success = true;
542       if (aCallback)
543         aCallback(success, event);
544     };
545     request.onerror = function(event) {
546       // Errors can be handled here.
547       if (aCallback)
548         aCallback(success, event);
549     }
550   }
551 };