From: Robert Kaiser <robert@notebook.box.kairo.at>
Date: Tue, 27 Dec 2011 21:08:05 +0000 (+0100)
Subject: add support for persistent data via indexedDB, persist tracks across sessions using... 
X-Git-Tag: legacy-preGL~84
X-Git-Url: https://git-public.kairo.at/?p=lantea.git;a=commitdiff_plain;h=993fd08173d1f8a30b17d6e1e805b7e5034116d8

add support for persistent data via indexedDB, persist tracks across sessions using that, add functionality for clearing tracks
---

diff --git a/index.html b/index.html
index 2b4dd13..e0af394 100644
--- a/index.html
+++ b/index.html
@@ -54,11 +54,17 @@
 <span id="zoomLevel">Z</span>
 <input type="button" id="zoomOutButton" value="-"
        onclick="zoomOut();"><br/>
-<input type="button" id="saveButton" value="Save Track"
-       onclick="saveTrack();"><br/>
+<input type="button" id="trackButton" value="Track"
+       onclick="toggleTrackArea();"><br/>
+<fieldset id="trackArea"><legend>Track</legend>
+<input type="button" id="saveTrackButton" value="Save"
+       onclick="saveTrack();">
+<input type="button" id="clearTrackButton" value="Clear"
+       onclick="clearTrack();"><br/>
+</fieldset>
 <input type="button" id="settingsButton" value="Settings"
-       onclick="toggleSettings();">
-<fieldset id="settings"><legend>Settings</legend>
+       onclick="toggleSettings();"><br/>
+<fieldset id="settingsArea"><legend>Settings</legend>
 Map style:
 <select id="mapSelector" onclick="setMapStyle();">
 <!-- option value="osm_mapnik">OpenStreetMap (Mapnik)</option -->
diff --git a/js/map.js b/js/map.js
index 4cd4ea7..7d2cd54 100644
--- a/js/map.js
+++ b/js/map.js
@@ -388,7 +388,7 @@ var mapEvHandler = {
   }
 };
 
-geofake = {
+var geofake = {
   tracking: false,
   watchPosition: function(aSuccessCallback, aErrorCallback, aPrefObject) {
     this.tracking = true;
@@ -409,12 +409,32 @@ geofake = {
 }
 
 function startTracking() {
+  var loopCnt = 0;
+  var getStoredTrack = function() {
+    if (mainDB)
+      gTrackStore.getList(function(aTPoints) {
+        document.getElementById("debug").textContent = aTPoints.length + " points loaded.";
+        if (aTPoints.length) {
+          gTrack = aTPoints;
+        }
+      });
+    else
+      setTimeout(getStoredTrack, 100);
+    loopCnt++;
+    if (loopCnt > 20)
+      return;
+  };
+  getStoredTrack();
   if (navigator.geolocation) {
     //gGeoWatchID = geofake.watchPosition(
     gGeoWatchID = navigator.geolocation.watchPosition(
       function(position) {
         // Coords spec: https://developer.mozilla.org/en/XPCOM_Interface_Reference/NsIDOMGeoPositionCoords
-        gTrack.push({time: position.timestamp, coords: position.coords});
+        var tPoint = {time: position.timestamp,
+                      coords: position.coords,
+                      beginSegment: !gLastTrackPoint};
+        gTrack.push(tPoint);
+        gTrackStore.push(tPoint);
         drawTrackPoint(position.coords.latitude, position.coords.longitude);
         if (gCenterPosition) {
           var posCoord = gps2xy(position.coords.latitude, position.coords.longitude);
@@ -441,3 +461,9 @@ function endTracking() {
     navigator.geolocation.clearWatch(gGeoWatchID);
   }
 }
+
+function clearTrack() {
+  gTrack = [];
+  gTrackStore.clear();
+  drawMap();
+}
diff --git a/js/ui.js b/js/ui.js
index 187a84d..9f2f1fe 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -35,6 +35,10 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
+// Get the best-available indexedDB object.
+var iDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
+var mainDB;
+
 window.onload = function() {
   var mSel = document.getElementById("mapSelector");
   for (var mapStyle in gMapStyles) {
@@ -44,6 +48,7 @@ window.onload = function() {
     mSel.add(opt, null);
   }
 
+  initDB();
   initMap();
   resizeAndDraw();
   startTracking();
@@ -53,8 +58,46 @@ window.onresize = function() {
   resizeAndDraw();
 }
 
+function initDB() {
+  // Open DB.
+  var request = iDB.open("MainDB", 1);
+  request.onerror = function(event) {
+    // Errors can be handled here. Error codes explain in:
+    // https://developer.mozilla.org/en/IndexedDB/IDBDatabaseException#Constants
+    //document.getElementById("debug").textContent =
+    //  "error opening mainDB: " + event.target.errorCode;
+  };
+  request.onsuccess = function(event) {
+    //document.getElementById("debug").textContent = "mainDB opened.";
+    mainDB = request.result;
+  };
+  request.onupgradeneeded = function(event) {
+    mainDB = request.result;
+    //document.getElementById("debug").textContent = "mainDB upgraded.";
+    // Create a "prefs" objectStore.
+    var prefsStore = mainDB.createObjectStore("prefs");
+    // Create a "track" objectStore.
+    var trackStore = mainDB.createObjectStore("track", {autoIncrement: true});
+    mainDB.onversionchange = function(event) {
+      mainDB.close();
+      mainDB = undefined;
+      initDB();
+    };
+  };
+}
+
+function toggleTrackArea() {
+  var fs = document.getElementById("trackArea");
+  if (fs.style.display != "block") {
+    fs.style.display = "block";
+  }
+  else {
+    fs.style.display = "none";
+  }
+}
+
 function toggleSettings() {
-  var fs = document.getElementById("settings");
+  var fs = document.getElementById("settingsArea");
   if (fs.style.display != "block") {
     fs.style.display = "block";
   }
@@ -81,6 +124,10 @@ function saveTrack() {
     out += '  <trk>' + "\n";
     out += '    <trkseg>' + "\n";
     for (var i = 0; i < gTrack.length; i++) {
+      if (gTrack[i].beginSegment && i > 0) {
+        out += '    </trkseg>' + "\n";
+        out += '    <trkseg>' + "\n";
+      }
       out += '      <trkpt lat="' + gTrack[i].coords.latitude + '" lon="' +
                                     gTrack[i].coords.longitude + '">' + "\n";
       if (gTrack[i].coords.altitude) {
@@ -88,7 +135,6 @@ function saveTrack() {
       }
       out += '        <time>' + makeISOString(gTrack[i].time) + '</time>' + "\n";
       out += '      </trkpt>' + "\n";
-      gTrack[i].coords.latitude, gTrack[i].coords.longitude;
     }
     out += '    </trkseg>' + "\n";
     out += '  </trk>' + "\n";
@@ -97,3 +143,126 @@ function saveTrack() {
     window.open(outDataURI, 'GPX Track');
   }
 }
+
+var gPrefs = {
+  objStore: "prefs",
+
+  get: function(aKey, aCallback) {
+    if (!mainDB)
+      return;
+    var transaction = mainDB.transaction([this.objStore]);
+    var request = transaction.objectStore(this.objStore).get(aKey);
+    request.onsuccess = function(event) {
+      aCallback(request.result, event);
+    };
+    request.onerror = function(event) {
+      // Errors can be handled here.
+      aCallback(undefined, event);
+    };
+  },
+
+  set: function(aKey, aValue, aCallback) {
+    if (!mainDB)
+      return;
+    var success = false;
+    var transaction = mainDB.transaction([this.objStore],
+                                         IDBTransaction.READ_WRITE);
+    var objStore = transaction.objectStore(this.objStore);
+    var request = objStore.add(aValue, aKey);
+    request.onsuccess = function(event) {
+      success = true;
+      if (aCallback)
+        aCallback(success, event);
+    };
+    request.onerror = function(event) {
+      // Errors can be handled here.
+      if (aCallback)
+        aCallback(success, event);
+    };
+  },
+
+  unset: function(aKey, aCallback) {
+    if (!mainDB)
+      return;
+    var success = false;
+    var transaction = mainDB.transaction([this.objStore],
+                                         IDBTransaction.READ_WRITE);
+    var request = transaction.objectStore(this.objStore).delete(aKey);
+    request.onsuccess = function(event) {
+      success = true;
+      if (aCallback)
+        aCallback(success, event);
+    };
+    request.onerror = function(event) {
+      // Errors can be handled here.
+      if (aCallback)
+        aCallback(success, event);
+    }
+  }
+};
+
+var gTrackStore = {
+  objStore: "track",
+
+  getList: function(aCallback) {
+    if (!mainDB)
+      return;
+    var transaction = mainDB.transaction([this.objStore]);
+    var objStore = transaction.objectStore(this.objStore);
+    if (objStore.getAll) { // currently Mozilla-specific
+      objStore.getAll().onsuccess = function(event) {
+        aCallback(event.target.result);
+      };
+    }
+    else { // Use cursor (standard method).
+      var tPoints = [];
+      objStore.openCursor().onsuccess = function(event) {
+        var cursor = event.target.result;
+        if (cursor) {
+          tPoints.push(cursor.value);
+          cursor.continue();
+        }
+        else {
+          aCallback(tPoints);
+        }
+      };
+    }
+  },
+
+  push: function(aValue, aCallback) {
+    if (!mainDB)
+      return;
+    var transaction = mainDB.transaction([this.objStore],
+                                         IDBTransaction.READ_WRITE);
+    var objStore = transaction.objectStore(this.objStore);
+    var request = objStore.add(aValue);
+    request.onsuccess = function(event) {
+      if (aCallback)
+        aCallback(request.result, event);
+    };
+    request.onerror = function(event) {
+      // Errors can be handled here.
+      if (aCallback)
+        aCallback(false, event);
+    };
+  },
+
+  clear: function(aCallback) {
+    if (!mainDB)
+      return;
+    var success = false;
+    var transaction = mainDB.transaction([this.objStore],
+                                         IDBTransaction.READ_WRITE);
+    var request = transaction.objectStore(this.objStore).clear();
+    request.onsuccess = function(event) {
+      success = true;
+      if (aCallback)
+        aCallback(success, event);
+    };
+    request.onerror = function(event) {
+      // Errors can be handled here.
+      if (aCallback)
+        aCallback(success, event);
+    }
+  }
+};
diff --git a/style/lantea.css b/style/lantea.css
index 8338a29..6a64385 100644
--- a/style/lantea.css
+++ b/style/lantea.css
@@ -59,14 +59,16 @@ h1 {
 }
 
 
-#settings {
+#settingsArea,
+#trackArea {
   display: none;
   background-color: rgba(255, 255, 255, .8);
   border: 0;
   border-radius: 5px;
 }
 
-#settings > legend {
+#settingsArea > legend,
+#trackArea > legend {
   display: none;
   background-color: rgba(255, 255, 255, .8);
   border-radius: 3px;