js/ui.js

   1 /* ***** BEGIN LICENSE BLOCK *****
   2  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
   3  *
   4  * The contents of this file are subject to the Mozilla Public License Version
   5  * 1.1 (the "License"); you may not use this file except in compliance with
   6  * the License. You may obtain a copy of the License at
   7  * http://www.mozilla.org/MPL/
   8  *
   9  * Software distributed under the License is distributed on an "AS IS" basis,
  10  * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
  11  * for the specific language governing rights and limitations under the
  12  * License.
  13  *
  14  * The Original Code is Lantea mapping/tracking web app.
  15  *
  16  * The Initial Developer of the Original Code is
  17  * Robert Kaiser <kairo@kairo.at>.
  18  * Portions created by the Initial Developer are Copyright (C) 2011
  19  * the Initial Developer. All Rights Reserved.
  20  *
  21  * Contributor(s):
  22  *   Robert Kaiser <kairo@kairo.at>
  23  *
  24  * Alternatively, the contents of this file may be used under the terms of
  25  * either the GNU General Public License Version 2 or later (the "GPL"), or
  26  * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
  27  * in which case the provisions of the GPL or the LGPL are applicable instead
  28  * of those above. If you wish to allow use of your version of this file only
  29  * under the terms of either the GPL or the LGPL, and not to allow others to
  30  * use your version of this file under the terms of the MPL, indicate your
  31  * decision by deleting the provisions above and replace them with the notice
  32  * and other provisions required by the GPL or the LGPL. If you do not delete
  33  * the provisions above, a recipient may use your version of this file under
  34  * the terms of any one of the MPL, the GPL or the LGPL.
  35  *
  36  * ***** END LICENSE BLOCK ***** */
  37
  38 // Get the best-available indexedDB object.
  39 var iDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
  40 var mainDB;
  41
  42 window.onload = function() {
  43   var mSel = document.getElementById("mapSelector");
  44   for (var mapStyle in gMapStyles) {
  45     var opt = document.createElement("option");
  46     opt.value = mapStyle;
  47     opt.text = gMapStyles[mapStyle].name;
  48     mSel.add(opt, null);
  49   }
  50
  51   initDB();
  52   initMap();
  53   resizeAndDraw();
  54 }
  55
  56 window.onresize = function() {
  57   resizeAndDraw();
  58 }
  59
  60 function initDB() {
  61   // Open DB.
  62   var request = iDB.open("MainDB", 1);
  63   request.onerror = function(event) {
  64     // Errors can be handled here. Error codes explain in:
  65     // https://developer.mozilla.org/en/IndexedDB/IDBDatabaseException#Constants
  66     //document.getElementById("debug").textContent =
  67     //  "error opening mainDB: " + event.target.errorCode;
  68   };
  69   request.onsuccess = function(event) {
  70     //document.getElementById("debug").textContent = "mainDB opened.";
  71     mainDB = request.result;
  72   };
  73   request.onupgradeneeded = function(event) {
  74     mainDB = request.result;
  75     //document.getElementById("debug").textContent = "mainDB upgraded.";
  76     // Create a "prefs" objectStore.
  77     var prefsStore = mainDB.createObjectStore("prefs");
  78     // Create a "track" objectStore.
  79     var trackStore = mainDB.createObjectStore("track", {autoIncrement: true});
  80     mainDB.onversionchange = function(event) {
  81       mainDB.close();
  82       mainDB = undefined;
  83       initDB();
  84     };
  85   };
  86 }
  87
  88 function toggleTrackArea() {
  89   var fs = document.getElementById("trackArea");
  90   if (fs.style.display != "block") {
  91     fs.style.display = "block";
  92   }
  93   else {
  94     fs.style.display = "none";
  95   }
  96 }
  97
  98 function toggleSettings() {
  99   var fs = document.getElementById("settingsArea");
 100   if (fs.style.display != "block") {
 101     fs.style.display = "block";
 102   }
 103   else {
 104     fs.style.display = "none";
 105   }
 106 }
 107
 108 function makeISOString(aTimestamp) {
 109   // ISO time format is YYYY-MM-DDTHH:mm:ssZ
 110   var tsDate = new Date(aTimestamp);
 111   return tsDate.getUTCFullYear() + "-" +
 112          (tsDate.getUTCMonth() < 10 ? "0" : "") + tsDate.getUTCMonth() + "-" +
 113          (tsDate.getUTCDate() < 10 ? "0" : "") + tsDate.getUTCDate() + "T" +
 114          (tsDate.getUTCHours() < 10 ? "0" : "") + tsDate.getUTCHours() + ":" +
 115          (tsDate.getUTCMinutes() < 10 ? "0" : "") + tsDate.getUTCMinutes() + ":" +
 116          (tsDate.getUTCSeconds() < 10 ? "0" : "") + tsDate.getUTCSeconds() + "Z";
 117 }
 118
 119 function saveTrack() {
 120   if (gTrack.length) {
 121     var out = '<?xml version="1.0" encoding="UTF-8" ?>' + "\n\n";
 122     out += '<gpx version="1.0" creator="Lantea" xmlns="http://www.topografix.com/GPX/1/0">' + "\n";
 123     out += '  <trk>' + "\n";
 124     out += '    <trkseg>' + "\n";
 125     for (var i = 0; i < gTrack.length; i++) {
 126       if (gTrack[i].beginSegment && i > 0) {
 127         out += '    </trkseg>' + "\n";
 128         out += '    <trkseg>' + "\n";
 129       }
 130       out += '      <trkpt lat="' + gTrack[i].coords.latitude + '" lon="' +
 131                                     gTrack[i].coords.longitude + '">' + "\n";
 132       if (gTrack[i].coords.altitude) {
 133         out += '        <ele>' + gTrack[i].coords.altitude + '</ele>' + "\n";
 134       }
 135       out += '        <time>' + makeISOString(gTrack[i].time) + '</time>' + "\n";
 136       out += '      </trkpt>' + "\n";
 137     }
 138     out += '    </trkseg>' + "\n";
 139     out += '  </trk>' + "\n";
 140     out += '</gpx>' + "\n";
 141     var outDataURI = "data:application/octet-stream," + encodeURIComponent(out);
 142     window.open(outDataURI, 'GPX Track');
 143   }
 144 }
 145
 146 var gPrefs = {
 147   objStore: "prefs",
 148
 149   get: function(aKey, aCallback) {
 150     if (!mainDB)
 151       return;
 152     var transaction = mainDB.transaction([this.objStore]);
 153     var request = transaction.objectStore(this.objStore).get(aKey);
 154     request.onsuccess = function(event) {
 155       aCallback(request.result, event);
 156     };
 157     request.onerror = function(event) {
 158       // Errors can be handled here.
 159       aCallback(undefined, event);
 160     };
 161   },
 162
 163   set: function(aKey, aValue, aCallback) {
 164     if (!mainDB)
 165       return;
 166     var success = false;
 167     var transaction = mainDB.transaction([this.objStore],
 168                                          IDBTransaction.READ_WRITE);
 169     var objStore = transaction.objectStore(this.objStore);
 170     var request = objStore.put(aValue, aKey);
 171     request.onsuccess = function(event) {
 172       success = true;
 173       if (aCallback)
 174         aCallback(success, event);
 175     };
 176     request.onerror = function(event) {
 177       // Errors can be handled here.
 178       if (aCallback)
 179         aCallback(success, event);
 180     };
 181   },
 182
 183   unset: function(aKey, aCallback) {
 184     if (!mainDB)
 185       return;
 186     var success = false;
 187     var transaction = mainDB.transaction([this.objStore],
 188                                          IDBTransaction.READ_WRITE);
 189     var request = transaction.objectStore(this.objStore).delete(aKey);
 190     request.onsuccess = function(event) {
 191       success = true;
 192       if (aCallback)
 193         aCallback(success, event);
 194     };
 195     request.onerror = function(event) {
 196       // Errors can be handled here.
 197       if (aCallback)
 198         aCallback(success, event);
 199     }
 200   }
 201 };
 202
 203 var gTrackStore = {
 204   objStore: "track",
 205
 206   getList: function(aCallback) {
 207     if (!mainDB)
 208       return;
 209     var transaction = mainDB.transaction([this.objStore]);
 210     var objStore = transaction.objectStore(this.objStore);
 211     if (objStore.getAll) { // currently Mozilla-specific
 212       objStore.getAll().onsuccess = function(event) {
 213         aCallback(event.target.result);
 214       };
 215     }
 216     else { // Use cursor (standard method).
 217       var tPoints = [];
 218       objStore.openCursor().onsuccess = function(event) {
 219         var cursor = event.target.result;
 220         if (cursor) {
 221           tPoints.push(cursor.value);
 222           cursor.continue();
 223         }
 224         else {
 225           aCallback(tPoints);
 226         }
 227       };
 228     }
 229   },
 230
 231   push: function(aValue, aCallback) {
 232     if (!mainDB)
 233       return;
 234     var transaction = mainDB.transaction([this.objStore],
 235                                          IDBTransaction.READ_WRITE);
 236     var objStore = transaction.objectStore(this.objStore);
 237     var request = objStore.add(aValue);
 238     request.onsuccess = function(event) {
 239       if (aCallback)
 240         aCallback(request.result, event);
 241     };
 242     request.onerror = function(event) {
 243       // Errors can be handled here.
 244       if (aCallback)
 245         aCallback(false, event);
 246     };
 247   },
 248
 249   clear: function(aCallback) {
 250     if (!mainDB)
 251       return;
 252     var success = false;
 253     var transaction = mainDB.transaction([this.objStore],
 254                                          IDBTransaction.READ_WRITE);
 255     var request = transaction.objectStore(this.objStore).clear();
 256     request.onsuccess = function(event) {
 257       success = true;
 258       if (aCallback)
 259         aCallback(success, event);
 260     };
 261     request.onerror = function(event) {
 262       // Errors can be handled here.
 263       if (aCallback)
 264         aCallback(success, event);
 265     }
 266   }
 267 };