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/. */
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;
10 var gAppInitDone = false;
11 var gUIHideCountdown = 0;
13 var gTrackUpdateInterval;
14 var gAction, gActionLabel;
15 var gBackendURL = "https://backend.lantea.kairo.at";
16 var gAuthClientID = "lantea";
18 window.onload = function() {
19 if (/\/login\.html/.test(window.location)) {
20 // If we are in the login window, call a function to complete the process and don't do anything else here.
21 completeLoginWindow();
24 gAction = document.getElementById("action");
25 gActionLabel = document.getElementById("actionlabel");
27 var mSel = document.getElementById("mapSelector");
28 for (var mapStyle in gMapStyles) {
29 var opt = document.createElement("option");
31 opt.text = gMapStyles[mapStyle].name;
35 var areas = document.getElementsByClassName("autoFade");
36 for (var i = 0; i <= areas.length - 1; i++) {
37 areas[i].addEventListener("mouseup", uiEvHandler, false);
38 areas[i].addEventListener("mousemove", uiEvHandler, false);
39 areas[i].addEventListener("mousedown", uiEvHandler, false);
40 areas[i].addEventListener("mouseout", uiEvHandler, false);
42 areas[i].addEventListener("touchstart", uiEvHandler, false);
43 areas[i].addEventListener("touchmove", uiEvHandler, false);
44 areas[i].addEventListener("touchend", uiEvHandler, false);
45 areas[i].addEventListener("touchcancel", uiEvHandler, false);
46 areas[i].addEventListener("touchleave", uiEvHandler, false);
49 document.getElementById("body").addEventListener("keydown", uiEvHandler, false);
51 if (navigator.platform.length == "") {
52 // For Firefox OS, don't display the "save" button.
53 // Do this by setting the debugHide class for testing in debug mode.
54 document.getElementById("saveTrackButton").classList.add("debugHide");
57 // Set backend URL in a way that it works for testing on localhost as well as
58 // both the lantea.kairo.at and lantea-dev.kairo.at deployments.
59 if (window.location.host == "localhost") {
60 gBackendURL = window.location.protocol + '//' + window.location.host + "/lantea-backend/";
63 gBackendURL = window.location.protocol + '//' + "backend." + window.location.host + "/";
65 // Make sure to use a different login client ID for the -dev setup.
66 if (/\-dev\./.test(window.location.host)) {
67 gAuthClientID += "-dev";
70 document.getElementById("libCloseButton").onclick = hideLibrary;
72 // Set up the login area.
73 document.getElementById("loginbtn").onclick = startLogin;
74 document.getElementById("logoutbtn").onclick = doLogout;
75 prepareLoginButton(function() {
76 // Anything that needs the backend should only be triggered from in here.
77 // That makes sure that the first call the the backend is oauth_state and no other is running in parallel.
78 // If we call multiple backend methods at once and no session is open, we create multiple sessions, which calls for confusion later on.
80 // Call any UI preparation that needs the backend.
83 gAction.addEventListener("dbinit-done", initMap, false);
84 gAction.addEventListener("mapinit-done", postInit, false);
85 console.log("starting DB init...");
89 function postInit(aEvent) {
90 gAction.removeEventListener(aEvent.type, postInit, false);
91 console.log("init done, draw map.");
92 gMapPrefsLoaded = true;
94 //gMap.resizeAndDraw(); <-- HACK: This triggers bug 1001853, work around with a delay.
95 window.setTimeout(gMap.resizeAndDraw, 100);
96 gActionLabel.textContent = "";
97 gAction.style.display = "none";
98 setTracking(document.getElementById("trackCheckbox"));
99 gPrefs.get("devicename", function(aValue) {
101 document.getElementById("uploadDevName").value = aValue;
106 window.onresize = function() {
107 gMap.resizeAndDraw();
110 function startLogin() {
111 var authURL = authData["url"] + "authorize?response_type=code&client_id=" + gAuthClientID + "&scope=email" +
112 "&state=" + authData["state"] + "&redirect_uri=" + encodeURIComponent(getRedirectURI());
113 if (window.open(authURL, "KaiRoAuth", 'height=450,width=600')) {
114 console.log("Sign In window open.");
117 console.log("Opening Sign In window failed.");
121 function getRedirectURI() {
122 return window.location.protocol + '//' + window.location.host + window.location.pathname.replace("index.html", "") + "login.html";
125 function doLogout() {
126 fetchBackend("logout", "GET", null,
127 function(aResult, aStatus) {
129 prepareLoginButton();
132 console.log("Backend issue trying to log out.");
139 function prepareLoginButton(aCallback) {
140 fetchBackend("oauth_state", "GET", null,
141 function(aResult, aStatus) {
142 if (aStatus == 200) {
143 if (aResult["logged_in"]) {
145 "email": aResult["email"],
146 "permissions": aResult["permissions"],
152 authData = {"state": aResult["state"], "url": aResult["url"]};
158 console.log("Backend error " + aStatus + " fetching OAuth state: " + aResult["message"]);
160 if (aCallback) { aCallback(); }
166 function completeLoginWindow() {
168 window.opener.finishLogin(getParameterByName("code"), getParameterByName("state"));
172 document.getElementById("logininfo").textContent = "You have called this document outside of the login flow, which is not supported.";
176 function finishLogin(aCode, aState) {
177 if (aState == authData["state"]) {
178 fetchBackend("login?code=" + aCode + "&state=" + aState + "&redirect_uri=" + encodeURIComponent(getRedirectURI()), "GET", null,
179 function(aResult, aStatus) {
180 if (aStatus == 200) {
182 "email": aResult["email"],
183 "permissions": aResult["permissions"],
188 console.log("Login error " + aStatus + ": " + aResult["message"]);
189 prepareLoginButton();
196 console.log("Login state did not match, not continuing with login.");
200 function displayLogin() {
201 document.getElementById("loginbtn").classList.add("hidden");
202 document.getElementById("logindesc").classList.add("hidden");
203 document.getElementById("username").classList.remove("hidden");
204 document.getElementById("username").textContent = userData.email;
205 document.getElementById("uploadTrackButton").disabled = false;
206 document.getElementById("libraryShowLine").classList.remove("hidden");
207 document.getElementById("logoutbtn").classList.remove("hidden");
210 function displayLogout() {
211 document.getElementById("logoutbtn").classList.add("hidden");
212 document.getElementById("username").classList.add("hidden");
213 document.getElementById("username").textContent = "";
214 document.getElementById("uploadTrackButton").disabled = true;
215 document.getElementById("libraryShowLine").classList.add("hidden");
216 document.getElementById("loginbtn").classList.remove("hidden");
217 document.getElementById("logindesc").classList.remove("hidden");
220 function initDB(aEvent) {
223 gAction.removeEventListener(aEvent.type, initDB, false);
224 var request = window.indexedDB.open("MainDB-lantea", 2);
225 request.onerror = function(event) {
226 // Errors can be handled here. Error codes explain in:
227 // https://developer.mozilla.org/en/IndexedDB/IDBDatabaseException#Constants
229 console.log("error opening mainDB: " + event.target.errorCode);
231 request.onsuccess = function(event) {
232 mainDB = request.result;
233 var throwEv = new CustomEvent("dbinit-done");
234 gAction.dispatchEvent(throwEv);
236 request.onupgradeneeded = function(event) {
237 mainDB = request.result;
238 var ver = mainDB.version || 0; // version is empty string for a new DB
240 console.log("mainDB has version " + ver + ", upgrade needed.");
241 if (!mainDB.objectStoreNames.contains("prefs")) {
242 // Create a "prefs" objectStore.
243 var prefsStore = mainDB.createObjectStore("prefs");
245 if (!mainDB.objectStoreNames.contains("track")) {
246 // Create a "track" objectStore.
247 var trackStore = mainDB.createObjectStore("track", {autoIncrement: true});
249 if (!mainDB.objectStoreNames.contains("tilecache")) {
250 // Create a "tilecache" objectStore.
251 var tilecacheStore = mainDB.createObjectStore("tilecache");
253 mainDB.onversionchange = function(event) {
262 if (gUIHideCountdown <= 0) {
263 var areas = document.getElementsByClassName('autoFade');
264 for (var i = 0; i <= areas.length - 1; i++) {
265 areas[i].classList.remove("hidden");
267 setTimeout(maybeHideUI, 1000);
269 gUIHideCountdown = 5;
272 function maybeHideUI() {
274 if (gUIHideCountdown <= 0) {
275 var areas = document.getElementsByClassName('autoFade');
276 for (var i = 0; i <= areas.length - 1; i++) {
277 areas[i].classList.add("hidden");
281 setTimeout(maybeHideUI, 1000);
285 function updateTrackInfo() {
286 document.getElementById("trackLengthNum").textContent = calcTrackLength().toFixed(1);
287 var duration = calcTrackDuration();
288 var durationM = Math.round(duration/60);
289 var durationH = Math.floor(durationM/60); durationM = durationM - durationH * 60;
290 document.getElementById("trackDurationH").style.display = durationH ? "inline" : "none";
291 document.getElementById("trackDurationHNum").textContent = durationH;
292 document.getElementById("trackDurationMNum").textContent = durationM;
295 function toggleTrackArea() {
296 var fs = document.getElementById("trackArea");
297 if (fs.classList.contains("hidden")) {
298 prepareLoginButton();
299 fs.classList.remove("hidden");
301 gTrackUpdateInterval = setInterval(updateTrackInfo, 1000);
304 clearInterval(gTrackUpdateInterval);
305 fs.classList.add("hidden");
309 function toggleSettings() {
310 var fs = document.getElementById("settingsArea");
311 if (fs.classList.contains("hidden")) {
312 fs.classList.remove("hidden");
316 fs.classList.add("hidden");
320 function toggleFullscreen() {
321 if ((document.fullScreenElement && document.fullScreenElement !== null) ||
322 (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
323 (document.webkitFullScreenElement && document.webkitFullScreenElement !== null)) {
324 if (document.cancelFullScreen) {
325 document.cancelFullScreen();
326 } else if (document.mozCancelFullScreen) {
327 document.mozCancelFullScreen();
328 } else if (document.webkitCancelFullScreen) {
329 document.webkitCancelFullScreen();
333 var elem = document.getElementById("body");
334 if (elem.requestFullScreen) {
335 elem.requestFullScreen();
336 } else if (elem.mozRequestFullScreen) {
337 elem.mozRequestFullScreen();
338 } else if (elem.webkitRequestFullScreen) {
339 elem.webkitRequestFullScreen();
344 function showUploadDialog() {
345 var dia = document.getElementById("trackDialogArea");
346 var areas = dia.children;
347 for (var i = 0; i <= areas.length - 1; i++) {
348 areas[i].style.display = "none";
350 document.getElementById("uploadDialog").style.display = "block";
351 document.getElementById("uploadTrackButton").disabled = true;
352 dia.classList.remove("hidden");
355 function showGLWarningDialog() {
356 var dia = document.getElementById("dialogArea");
357 var areas = dia.children;
358 for (var i = 0; i <= areas.length - 1; i++) {
359 areas[i].style.display = "none";
361 document.getElementById("noGLwarning").style.display = "block";
362 dia.classList.remove("hidden");
365 function cancelTrackDialog() {
366 document.getElementById("trackDialogArea").classList.add("hidden");
367 document.getElementById("uploadTrackButton").disabled = false;
371 handleEvent: function(aEvent) {
372 var touchEvent = aEvent.type.indexOf('touch') != -1;
374 switch (aEvent.type) {
388 function setUploadField(aField) {
390 case "uploadDevName":
391 gPrefs.set("devicename", aField.value);
396 function makeISOString(aTimestamp) {
397 // ISO time format is YYYY-MM-DDTHH:mm:ssZ
398 var tsDate = new Date(aTimestamp);
399 // Note that .getUTCMonth() returns a number between 0 and 11 (0 for January)!
400 return tsDate.getUTCFullYear() + "-" +
401 (tsDate.getUTCMonth() < 9 ? "0" : "") + (tsDate.getUTCMonth() + 1 ) + "-" +
402 (tsDate.getUTCDate() < 10 ? "0" : "") + tsDate.getUTCDate() + "T" +
403 (tsDate.getUTCHours() < 10 ? "0" : "") + tsDate.getUTCHours() + ":" +
404 (tsDate.getUTCMinutes() < 10 ? "0" : "") + tsDate.getUTCMinutes() + ":" +
405 (tsDate.getUTCSeconds() < 10 ? "0" : "") + tsDate.getUTCSeconds() + "Z";
408 function convertTrack(aTargetFormat) {
410 switch (aTargetFormat) {
412 out += '<?xml version="1.0" encoding="UTF-8" ?>' + "\n\n";
413 out += '<gpx version="1.0" creator="Lantea" xmlns="http://www.topografix.com/GPX/1/0">' + "\n";
415 out += ' <trk>' + "\n";
416 out += ' <trkseg>' + "\n";
417 for (var i = 0; i < gTrack.length; i++) {
418 if (gTrack[i].beginSegment && i > 0) {
419 out += ' </trkseg>' + "\n";
420 out += ' <trkseg>' + "\n";
422 out += ' <trkpt lat="' + gTrack[i].coords.latitude + '" lon="' +
423 gTrack[i].coords.longitude + '">' + "\n";
424 if (gTrack[i].coords.altitude) {
425 out += ' <ele>' + gTrack[i].coords.altitude + '</ele>' + "\n";
427 out += ' <time>' + makeISOString(gTrack[i].time) + '</time>' + "\n";
428 out += ' </trkpt>' + "\n";
430 out += ' </trkseg>' + "\n";
431 out += ' </trk>' + "\n";
433 out += '</gpx>' + "\n";
436 out = JSON.stringify(gTrack);
444 function saveTrack() {
446 var outDataURI = "data:application/gpx+xml," +
447 encodeURIComponent(convertTrack("gpx"));
448 window.open(outDataURI, 'GPX Track');
452 function saveTrackDump() {
454 var outDataURI = "data:application/json," +
455 encodeURIComponent(convertTrack("json"));
456 window.open(outDataURI, 'JSON dump');
460 function uploadTrack() {
461 // Hide all areas in the dialog.
462 var dia = document.getElementById("trackDialogArea");
463 var areas = dia.children;
464 for (var i = 0; i <= areas.length - 1; i++) {
465 areas[i].style.display = "none";
467 // Reset all the fields in the status area.
468 document.getElementById("uploadStatusCloseButton").disabled = true;
469 document.getElementById("uploadInProgress").style.display = "block";
470 document.getElementById("uploadSuccess").style.display = "none";
471 document.getElementById("uploadFailed").style.display = "none";
472 document.getElementById("uploadError").style.display = "none";
473 document.getElementById("uploadErrorMsg").textContent = "";
474 // Now show the status area.
475 document.getElementById("uploadStatus").style.display = "block";
477 // Assemble field to post to the backend.
478 var formData = new FormData();
479 formData.append("jsondata", convertTrack("json"));
480 var desc = document.getElementById("uploadDesc").value;
481 formData.append("comment",
482 desc.length ? desc : "Track recorded via Lantea Maps");
483 formData.append("devicename",
484 document.getElementById("uploadDevName").value);
485 formData.append("public",
486 document.getElementById("uploadPublic").value);
488 fetchBackend("save_track", "POST", formData,
489 function(aResult, aStatusCode) {
490 if (aStatusCode >= 400) {
491 reportUploadStatus(false, aResult);
494 reportUploadStatus(true);
500 function reportUploadStatus(aSuccess, aMessage) {
501 document.getElementById("uploadStatusCloseButton").disabled = false;
502 document.getElementById("uploadInProgress").style.display = "none";
504 document.getElementById("uploadSuccess").style.display = "block";
507 document.getElementById("uploadErrorMsg").textContent = aMessage;
508 document.getElementById("uploadError").style.display = "block";
511 document.getElementById("uploadFailed").style.display = "block";
518 get: function(aKey, aCallback) {
521 var transaction = mainDB.transaction([this.objStore]);
522 var request = transaction.objectStore(this.objStore).get(aKey);
523 request.onsuccess = function(event) {
524 aCallback(request.result, event);
526 request.onerror = function(event) {
527 // Errors can be handled here.
528 aCallback(undefined, event);
532 set: function(aKey, aValue, aCallback) {
536 var transaction = mainDB.transaction([this.objStore], "readwrite");
537 var objStore = transaction.objectStore(this.objStore);
538 var request = objStore.put(aValue, aKey);
539 request.onsuccess = function(event) {
542 aCallback(success, event);
544 request.onerror = function(event) {
545 // Errors can be handled here.
547 aCallback(success, event);
551 unset: function(aKey, aCallback) {
555 var transaction = mainDB.transaction([this.objStore], "readwrite");
556 var request = transaction.objectStore(this.objStore).delete(aKey);
557 request.onsuccess = function(event) {
560 aCallback(success, event);
562 request.onerror = function(event) {
563 // Errors can be handled here.
565 aCallback(success, event);
573 getList: function(aCallback) {
576 var transaction = mainDB.transaction([this.objStore]);
577 var objStore = transaction.objectStore(this.objStore);
578 if (objStore.getAll) { // currently Mozilla-specific
579 objStore.getAll().onsuccess = function(event) {
580 aCallback(event.target.result);
583 else { // Use cursor (standard method).
585 objStore.openCursor().onsuccess = function(event) {
586 var cursor = event.target.result;
588 tPoints.push(cursor.value);
598 getListStepped: function(aCallback) {
601 var transaction = mainDB.transaction([this.objStore]);
602 var objStore = transaction.objectStore(this.objStore);
603 // Use cursor in reverse direction (so we get the most recent position first)
604 objStore.openCursor(null, "prev").onsuccess = function(event) {
605 var cursor = event.target.result;
607 aCallback(cursor.value);
616 push: function(aValue, aCallback) {
619 var transaction = mainDB.transaction([this.objStore], "readwrite");
620 var objStore = transaction.objectStore(this.objStore);
621 var request = objStore.add(aValue);
622 request.onsuccess = function(event) {
624 aCallback(request.result, event);
626 request.onerror = function(event) {
627 // Errors can be handled here.
629 aCallback(false, event);
633 clear: function(aCallback) {
637 var transaction = mainDB.transaction([this.objStore], "readwrite");
638 var request = transaction.objectStore(this.objStore).clear();
639 request.onsuccess = function(event) {
642 aCallback(success, event);
644 request.onerror = function(event) {
645 // Errors can be handled here.
647 aCallback(success, event);
652 function fetchBackend(aEndpoint, aMethod, aSendData, aCallback, aCallbackForwards) {
653 var XHR = new XMLHttpRequest();
654 XHR.onreadystatechange = function() {
655 if (XHR.readyState == 4) {
656 // State says we are fully loaded.
658 if (XHR.getResponseHeader("Content-Type") == "application/json") {
659 // Got a JSON object, see if we have success.
661 result = JSON.parse(XHR.responseText);
665 result = {"error": e,
666 "message": XHR.responseText};
670 result = XHR.responseText;
672 aCallback(result, XHR.status, aCallbackForwards);
675 XHR.open(aMethod, gBackendURL + aEndpoint, true);
676 XHR.withCredentials = "true";
677 //XHR.setRequestHeader("Accept", "application/json");
679 XHR.send(aSendData); // Send actual form data.
682 aCallback(e, 500, aCallbackForwards);
686 function getParameterByName(aName) {
687 // from http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
688 name = aName.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
689 var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
690 results = regex.exec(location.search);
691 return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));