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 indexedDB object.
   6 window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
   7 var mainDB;
   8
   9 var gUIHideCountdown = 0;
  10 var gWaitCounter = 0;
  11 var gAction, gActionLabel;
  12 var gOSMAPIURL = "http://api.openstreetmap.org/";
  13
  14 window.onload = function() {
  15   gAction = document.getElementById("action");
  16   gActionLabel = document.getElementById("actionlabel");
  17
  18   var mSel = document.getElementById("mapSelector");
  19   for (var mapStyle in gMapStyles) {
  20     var opt = document.createElement("option");
  21     opt.value = mapStyle;
  22     opt.text = gMapStyles[mapStyle].name;
  23     mSel.add(opt, null);
  24   }
  25
  26   var areas = document.getElementsByClassName('overlayArea');
  27   for (var i = 0; i <= areas.length - 1; i++) {
  28     areas[i].addEventListener("mouseup", uiEvHandler, false);
  29     areas[i].addEventListener("mousemove", uiEvHandler, false);
  30     areas[i].addEventListener("mousedown", uiEvHandler, false);
  31     areas[i].addEventListener("mouseout", uiEvHandler, false);
  32
  33     areas[i].addEventListener("touchstart", uiEvHandler, false);
  34     areas[i].addEventListener("touchmove", uiEvHandler, false);
  35     areas[i].addEventListener("touchend", uiEvHandler, false);
  36     areas[i].addEventListener("touchcancel", uiEvHandler, false);
  37     areas[i].addEventListener("touchleave", uiEvHandler, false);
  38   }
  39
  40   document.getElementById("body").addEventListener("keydown", uiEvHandler, false);
  41
  42   if (navigator.platform.length == "") {
  43     // For Firefox OS, don't display the "save" button.
  44     // Do this by setting the debugHide class for testing in debug mode.
  45     document.getElementById("saveTrackButton").classList.add("debugHide");
  46   }
  47
  48   // Without OAuth, the login data is useless
  49   //document.getElementById("uploadSettingsArea").classList.remove("debugHide");
  50   // As login data is useless for now, always enable upload button
  51   document.getElementById("uploadTrackButton").disabled = false;
  52
  53   if (gDebug) {
  54     // Note that GPX upload returns an error 500 on the dev API right now.
  55     gOSMAPIURL = "http://api06.dev.openstreetmap.org/";
  56   }
  57
  58   initDB();
  59   initMap();
  60
  61   var loopCnt = 0;
  62   var waitForInitAndDraw = function() {
  63     if ((gWaitCounter <= 0) || (loopCnt > 100)) {
  64       if (gWaitCounter <= 0)
  65         gWaitCounter = 0;
  66       else
  67         console.log("Loading failed (waiting for init).");
  68
  69       gMapPrefsLoaded = true;
  70       resizeAndDraw();
  71       gActionLabel.textContent = "";
  72       gAction.style.display = "none";
  73       setTracking(document.getElementById("trackCheckbox"));
  74       gPrefs.get(gDebug ? "osm_dev_user" : "osm_user", function(aValue) {
  75         if (aValue) {
  76           document.getElementById("uploadUser").value = aValue;
  77           document.getElementById("uploadTrackButton").disabled = false;
  78         }
  79       });
  80       gPrefs.get(gDebug ? "osm_dev_pwd" : "osm_pwd", function(aValue) {
  81         var upwd = document.getElementById("uploadPwd");
  82         if (aValue)
  83           document.getElementById("uploadPwd").value = aValue;
  84       });
  85     }
  86     else
  87       setTimeout(waitForInitAndDraw, 100);
  88     loopCnt++;
  89   };
  90   waitForInitAndDraw();
  91 }
  92
  93 window.onresize = function() {
  94   resizeAndDraw();
  95 }
  96
  97 function initDB() {
  98   // Open DB.
  99   var request = window.indexedDB.open("MainDB-lantea", 2);
 100   request.onerror = function(event) {
 101     // Errors can be handled here. Error codes explain in:
 102     // https://developer.mozilla.org/en/IndexedDB/IDBDatabaseException#Constants
 103     if (gDebug)
 104       console.log("error opening mainDB: " + event.target.errorCode);
 105   };
 106   request.onsuccess = function(event) {
 107     mainDB = request.result;
 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 (gUIHideCountdown <= 0) {
 148     var areas = document.getElementsByClassName('overlayArea');
 149     for (var i = 0; i <= areas.length - 1; i++) {
 150       areas[i].classList.add("hidden");
 151     }
 152   }
 153   else {
 154     setTimeout(maybeHideUI, 1000);
 155   }
 156 }
 157
 158 function toggleTrackArea() {
 159   var fs = document.getElementById("trackArea");
 160   if (fs.style.display != "block") {
 161     fs.style.display = "block";
 162     showUI();
 163   }
 164   else {
 165     fs.style.display = "none";
 166   }
 167 }
 168
 169 function toggleSettings() {
 170   var fs = document.getElementById("settingsArea");
 171   if (fs.style.display != "block") {
 172     fs.style.display = "block";
 173     showUI();
 174   }
 175   else {
 176     fs.style.display = "none";
 177   }
 178 }
 179
 180 function toggleFullscreen() {
 181   if ((document.fullScreenElement && document.fullScreenElement !== null) ||
 182       (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
 183       (document.webkitFullScreenElement && document.webkitFullScreenElement !== null)) {
 184     if (document.cancelFullScreen) {
 185       document.cancelFullScreen();
 186     } else if (document.mozCancelFullScreen) {
 187       document.mozCancelFullScreen();
 188     } else if (document.webkitCancelFullScreen) {
 189       document.webkitCancelFullScreen();
 190     }
 191   }
 192   else {
 193     var elem = document.getElementById("body");
 194     if (elem.requestFullScreen) {
 195       elem.requestFullScreen();
 196     } else if (elem.mozRequestFullScreen) {
 197       elem.mozRequestFullScreen();
 198     } else if (elem.webkitRequestFullScreen) {
 199       elem.webkitRequestFullScreen();
 200     }
 201   }
 202 }
 203
 204 function showUploadDialog() {
 205   var dia = document.getElementById("dialogArea");
 206   var areas = dia.children;
 207   for (var i = 0; i <= areas.length - 1; i++) {
 208     areas[i].style.display = "none";
 209   }
 210   document.getElementById("uploadDialog").style.display = "block";
 211   document.getElementById("uploadTrackButton").disabled = true;
 212   dia.classList.remove("hidden");
 213 }
 214
 215 function cancelDialog() {
 216   document.getElementById("dialogArea").classList.add("hidden");
 217   document.getElementById("uploadTrackButton").disabled = false;
 218 }
 219
 220 var uiEvHandler = {
 221   handleEvent: function(aEvent) {
 222     var touchEvent = aEvent.type.indexOf('touch') != -1;
 223
 224     switch (aEvent.type) {
 225       case "mousedown":
 226       case "touchstart":
 227       case "mousemove":
 228       case "touchmove":
 229       case "mouseup":
 230       case "touchend":
 231       case "keydown":
 232         showUI();
 233         break;
 234     }
 235   }
 236 };
 237
 238 function setUploadField(aField) {
 239   switch (aField.id) {
 240     case "uploadUser":
 241       gPrefs.set(gDebug ? "osm_dev_user" : "osm_user", aField.value);
 242       document.getElementById("uploadTrackButton").disabled = !aField.value.length;
 243       break;
 244     case "uploadPwd":
 245       gPrefs.set(gDebug ? "osm_dev_pwd" : "osm_pwd", aField.value);
 246       break;
 247   }
 248 }
 249
 250 function makeISOString(aTimestamp) {
 251   // ISO time format is YYYY-MM-DDTHH:mm:ssZ
 252   var tsDate = new Date(aTimestamp);
 253   return tsDate.getUTCFullYear() + "-" +
 254          (tsDate.getUTCMonth() < 10 ? "0" : "") + tsDate.getUTCMonth() + "-" +
 255          (tsDate.getUTCDate() < 10 ? "0" : "") + tsDate.getUTCDate() + "T" +
 256          (tsDate.getUTCHours() < 10 ? "0" : "") + tsDate.getUTCHours() + ":" +
 257          (tsDate.getUTCMinutes() < 10 ? "0" : "") + tsDate.getUTCMinutes() + ":" +
 258          (tsDate.getUTCSeconds() < 10 ? "0" : "") + tsDate.getUTCSeconds() + "Z";
 259 }
 260
 261 function convertTrack(aTargetFormat) {
 262   var out = "";
 263   switch (aTargetFormat) {
 264     case "gpx":
 265       out += '<?xml version="1.0" encoding="UTF-8" ?>' + "\n\n";
 266       out += '<gpx version="1.0" creator="Lantea" xmlns="http://www.topografix.com/GPX/1/0">' + "\n";
 267       if (gTrack.length) {
 268         out += '  <trk>' + "\n";
 269         out += '    <trkseg>' + "\n";
 270         for (var i = 0; i < gTrack.length; i++) {
 271           if (gTrack[i].beginSegment && i > 0) {
 272             out += '    </trkseg>' + "\n";
 273             out += '    <trkseg>' + "\n";
 274           }
 275           out += '      <trkpt lat="' + gTrack[i].coords.latitude + '" lon="' +
 276                                         gTrack[i].coords.longitude + '">' + "\n";
 277           if (gTrack[i].coords.altitude) {
 278             out += '        <ele>' + gTrack[i].coords.altitude + '</ele>' + "\n";
 279           }
 280           out += '        <time>' + makeISOString(gTrack[i].time) + '</time>' + "\n";
 281           out += '      </trkpt>' + "\n";
 282         }
 283         out += '    </trkseg>' + "\n";
 284         out += '  </trk>' + "\n";
 285       }
 286       out += '</gpx>' + "\n";
 287       break;
 288     case "json":
 289       out = JSON.stringify(gTrack);
 290       break;
 291     default:
 292       break;
 293   }
 294   return out;
 295 }
 296
 297 function saveTrack() {
 298   if (gTrack.length) {
 299     var outDataURI = "data:application/gpx+xml," +
 300                      encodeURIComponent(convertTrack("gpx"));
 301     window.open(outDataURI, 'GPX Track');
 302   }
 303 }
 304
 305 function saveTrackDump() {
 306   if (gTrack.length) {
 307     var outDataURI = "data:application/json," +
 308                      encodeURIComponent(convertTrack("json"));
 309     window.open(outDataURI, 'JSON dump');
 310   }
 311 }
 312
 313 function uploadTrack() {
 314   var dia = document.getElementById("dialogArea");
 315   var areas = dia.children;
 316   for (var i = 0; i <= areas.length - 1; i++) {
 317     areas[i].style.display = "none";
 318   }
 319   document.getElementById("uploadStatus").style.display = "block";
 320
 321   // See http://wiki.openstreetmap.org/wiki/Api06#Uploading_traces
 322   var trackBlob = new Blob([convertTrack("gpx")],
 323                            { "type" : "application/gpx+xml" });
 324   var formData = new FormData();
 325   formData.append("file", trackBlob);
 326   var desc = document.getElementById("uploadDesc").value;
 327   formData.append("description",
 328                   desc.length ? desc : "Track recorded via Lantea Maps");
 329   //formData.append("tags", "");
 330   formData.append("visibility",
 331                   document.getElementById("uploadVisibility").value);
 332   var XHR = new XMLHttpRequest();
 333   XHR.onreadystatechange = function() {
 334     if (XHR.readyState == 4 && XHR.status == 200) {
 335       // so far so good
 336       reportUploadStatus(true);
 337     } else if (XHR.readyState == 4 && XHR.status != 200) {
 338       // fetched the wrong page or network error...
 339       reportUploadStatus(false);
 340     }
 341   };
 342   XHR.open("POST", gOSMAPIURL + "api/0.6/gpx/create", true);
 343   // Cross-Origin XHR doesn't allow username/password (HTTP Auth).
 344   // So, we'll ask the user for entering credentials with rather ugly UI.
 345   XHR.withCredentials = true;
 346   try {
 347     XHR.send(formData);
 348   }
 349   catch (e) {
 350     reportUploadStatus(false, e);
 351   }
 352 }
 353
 354 function reportUploadStatus(aSuccess, aMessage) {
 355   document.getElementById("uploadStatusCloseButton").disabled = false;
 356   document.getElementById("uploadInProgress").style.display = "none";
 357   if (aSuccess) {
 358     document.getElementById("uploadSuccess").style.display = "block";
 359   }
 360   else if (aMessage) {
 361     document.getElementById("uploadErrorMsg").textContent = aMessage;
 362     document.getElementById("uploadError").style.display = "block";
 363   }
 364   else {
 365     document.getElementById("uploadFailed").style.display = "block";
 366   }
 367 }
 368
 369 var gPrefs = {
 370   objStore: "prefs",
 371
 372   get: function(aKey, aCallback) {
 373     if (!mainDB)
 374       return;
 375     var transaction = mainDB.transaction([this.objStore]);
 376     var request = transaction.objectStore(this.objStore).get(aKey);
 377     request.onsuccess = function(event) {
 378       aCallback(request.result, event);
 379     };
 380     request.onerror = function(event) {
 381       // Errors can be handled here.
 382       aCallback(undefined, event);
 383     };
 384   },
 385
 386   set: function(aKey, aValue, aCallback) {
 387     if (!mainDB)
 388       return;
 389     var success = false;
 390     var transaction = mainDB.transaction([this.objStore], "readwrite");
 391     var objStore = transaction.objectStore(this.objStore);
 392     var request = objStore.put(aValue, aKey);
 393     request.onsuccess = function(event) {
 394       success = true;
 395       if (aCallback)
 396         aCallback(success, event);
 397     };
 398     request.onerror = function(event) {
 399       // Errors can be handled here.
 400       if (aCallback)
 401         aCallback(success, event);
 402     };
 403   },
 404
 405   unset: function(aKey, aCallback) {
 406     if (!mainDB)
 407       return;
 408     var success = false;
 409     var transaction = mainDB.transaction([this.objStore], "readwrite");
 410     var request = transaction.objectStore(this.objStore).delete(aKey);
 411     request.onsuccess = function(event) {
 412       success = true;
 413       if (aCallback)
 414         aCallback(success, event);
 415     };
 416     request.onerror = function(event) {
 417       // Errors can be handled here.
 418       if (aCallback)
 419         aCallback(success, event);
 420     }
 421   }
 422 };
 423
 424 var gTrackStore = {
 425   objStore: "track",
 426
 427   getList: function(aCallback) {
 428     if (!mainDB)
 429       return;
 430     var transaction = mainDB.transaction([this.objStore]);
 431     var objStore = transaction.objectStore(this.objStore);
 432     if (objStore.getAll) { // currently Mozilla-specific
 433       objStore.getAll().onsuccess = function(event) {
 434         aCallback(event.target.result);
 435       };
 436     }
 437     else { // Use cursor (standard method).
 438       var tPoints = [];
 439       objStore.openCursor().onsuccess = function(event) {
 440         var cursor = event.target.result;
 441         if (cursor) {
 442           tPoints.push(cursor.value);
 443           cursor.continue();
 444         }
 445         else {
 446           aCallback(tPoints);
 447         }
 448       };
 449     }
 450   },
 451
 452   push: function(aValue, aCallback) {
 453     if (!mainDB)
 454       return;
 455     var transaction = mainDB.transaction([this.objStore], "readwrite");
 456     var objStore = transaction.objectStore(this.objStore);
 457     var request = objStore.add(aValue);
 458     request.onsuccess = function(event) {
 459       if (aCallback)
 460         aCallback(request.result, event);
 461     };
 462     request.onerror = function(event) {
 463       // Errors can be handled here.
 464       if (aCallback)
 465         aCallback(false, event);
 466     };
 467   },
 468
 469   clear: function(aCallback) {
 470     if (!mainDB)
 471       return;
 472     var success = false;
 473     var transaction = mainDB.transaction([this.objStore], "readwrite");
 474     var request = transaction.objectStore(this.objStore).clear();
 475     request.onsuccess = function(event) {
 476       success = true;
 477       if (aCallback)
 478         aCallback(success, event);
 479     };
 480     request.onerror = function(event) {
 481       // Errors can be handled here.
 482       if (aCallback)
 483         aCallback(success, event);
 484     }
 485   }
 486 };