New UI for selected distance unit
authorplehegar
Wed, 24 Aug 2011 10:46:57 -0400
changeset 42 77712d7c86a3
parent 41 042b2de8699e
child 43 da7a015efd52
New UI for selected distance unit
New constants for distance units
Added et-min.js (Element Traversal support)
src/main/resources/manifest/tracker.manifest
src/main/resources/scripts/et-min.js
src/main/resources/scripts/tracker.js
src/main/resources/templates/geolocation.ssp
--- a/src/main/resources/manifest/tracker.manifest	Tue Aug 23 18:12:40 2011 -0400
+++ b/src/main/resources/manifest/tracker.manifest	Wed Aug 24 10:46:57 2011 -0400
@@ -5,4 +5,4 @@
 /scripts/tracker.js
 /scripts/json2.js
 /scripts/Utils.js
-
+/scripts/et-min.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/resources/scripts/et-min.js	Wed Aug 24 10:46:57 2011 -0400
@@ -0,0 +1,8 @@
+var firstElementChild=null;var lastElementChild=null;var previousElementSibling=null;var nextElementSibling=null;var childElementCount=null;(function(){var d=document.createElement("H1");firstElementChild=function(){if(typeof d.firstElementChild=="undefined"){return function(e){var c=e.childNodes;for(var i=0;i<c.length;i++){var n=c.item(i);if(n.nodeType==1){return n;}}
+return null;}}else{return function(e){return e.firstElementChild;}}}();lastElementChild=function(){if(typeof d.lastElementChild=="undefined"){return function(e){var c=e.childNodes;for(var i=c.length-1;i>=0;i--){var n=c.item(i);if(n.nodeType==1){return n;}}
+return null;}}else{return function(e){return e.lastElementChild;}}}();previousElementSibling=function(){if(typeof d.previousElementSibling=="undefined"){return function(e){if(e.parentNode==null)return null;var c=e.parentNode.childNodes;var p=null;for(var i=0;i<c.length;i++){var n=c.item(i);if(n==e){return p;}
+if(n.nodeType==1){p=n;}}
+return null;}}else{return function(e){return e.previousElementSibling;}}}();nextElementSibling=function(){if(typeof d.nextElementSibling=="undefined"){return function(e){if(e.parentNode==null)return null;var c=e.parentNode.childNodes;var s=null;for(var i=c.length-1;i>=0;i--){var n=c.item(i);if(n==e){return s;}
+if(n.nodeType==1){s=n;}}
+return null;}}else{return function(e){return e.nextElementSibling;}}}();childElementCount=function(){if(typeof d.childElementCount=="undefined"){return function(e){var c=e.childNodes;var r=0;for(var i=0;i<c.length;i++){if(c.item(i).nodeType==1){r++;}}
+return r;}}else{return function(e){return e.childElementCount;}}}();})();
\ No newline at end of file
--- a/src/main/resources/scripts/tracker.js	Tue Aug 23 18:12:40 2011 -0400
+++ b/src/main/resources/scripts/tracker.js	Wed Aug 24 10:46:57 2011 -0400
@@ -1,40 +1,42 @@
 
 var Const = {
-  KM : "km",
-  KM_UNIT : 1,
-  MILE_UNIT : 0.621371192,
-  MILE : "mile",
-
+  distance : { km : 1,
+               mile : 0.621371192,
+               toString : function(propertyValue) {
+                  var arr = Object.getOwnPropertyNames(this);
+                  for (var i = 0; i < arr.length; i++) {
+                     if (this[arr[i]] === propertyValue) return arr[i]; 
+                  }
+                  return "";
+                }
+             },
+  
   // wait for at least 2 consecutive GPS data before declaring the GPS ready
-  GPS_MAX_ERRORS : 2,
+  gps_max_errors : 2,
 };
 
-
-var getUser = function () {
+var user = (function () {
     function dummyuser() {
-      this.name     =   "dummy";
-      this.weight   = "73";
-      this.height   = "180";
-      this.distance = "1";
-      this.prefs = { weight : "kg", height : "cm", distance : Const.KM };
+      this.name     = "dummy";
+      this.weight   = 73;
+      this.height   = 180;
+      this.distance = Const.distance.km;
+      this.prefs = { weight : "kg", height : "cm", distance : Const.distance.toString(Const.distance.km) };
     }
     var n = Util.store.get("track_gps_user");
     if (n === null) n = new dummyuser();
     n.getPostRunURI = function() { return "/user/" + this.name + "/run"; }
     n.getProfileURI = function() { return "/user/" + this.name + "/profile"; }
-    n.setKm = function() { this.distance = Const.KM_UNIT;  this.prefs.distance = Const.KM; }
-    n.setMile = function() { this.distance = Const.MILE_UNIT;  this.prefs.distance = Const.MILE; }
+    n.setDistance = function(propertyString) { this.distance = Const.distance[propertyString];  this.prefs.distance = propertyString; }
     n.save = function() {
       Util.store.set("track_gps_user", this);
     };
         
     return n; 
-};
+})();
 
 var app = {
 
- user : getUser(),
-
  // identifier for geolocation watch operation
  watchId : 0,
 
@@ -50,7 +52,7 @@
  intervalId : 0,
 
  // got_errors counts how many we've got
- got_error : Const.GPS_MAX_ERRORS,
+ got_error : Const.gps_max_errors,
  
  // total of geolocation data discarded
  discarded : 0,
@@ -79,7 +81,7 @@
 app.repaint = function () {
   if (document.visibilityState && app.inActivity) {
     document.getElementById("locations").textContent = String(app.locations);
-    var d = Util.geo.calculateDistanceCoordinates(app.currentActivity.events) * app.user.distance;
+    var d = Util.geo.calculateDistanceCoordinates(app.currentActivity.events) * user.distance;
     var t = app.duration + (Date.now() - app.start_time);
     document.getElementById("distance").textContent = String(Math.round(d*100)/100);
     if (t != 0 && d != 0) {
@@ -125,7 +127,7 @@
 
      if (position.coords.altitude == null) {
        app.got_error++;
-       if (app.got_error > Util.GPS_MAX_ERRORS) app.got_error = Util.GPS_MAX_ERRORS;
+       if (app.got_error > Const.gps_max_errors) app.got_error = Const.gps_max_errors;
            app.logGPS(position, "[ERROR] GPS: ");
      } else {
        app.got_error--;
@@ -162,7 +164,7 @@
   } else {
     document.getElementById("gps_text").textContent = code; 
     // wait for MAX_ERRORS non-consecutive errors
-    app.got_error = Util.GPS_MAX_ERRORS;
+    app.got_error = Const.gps_max_errors;
   }
 }
 
@@ -207,7 +209,7 @@
   document.getElementById("start").textContent = "Start";
   document.getElementById("stop").disabled = true;
   Util.log("");
-  if (!Util.postNewResourceAsJSON(app.user.getPostRunURI(),app.currentActivity)) {      
+  if (!Util.postNewResourceAsJSON(user.getPostRunURI(),app.currentActivity)) {      
     if (!Util.store.set("track_gps_app", app.currentActivity)) {
       Util.log("[ERROR] Can't store the value " + e.code);
     }
@@ -241,24 +243,26 @@
 
 window.addEventListener("load", app.init, false);
 
-app.km = function () {
-  app.user.setKm();
-  app.user.save();
+app.changeDistanceUnit = function () {
+  var node = firstElementChild(document.getElementById("select_distance"));
+  do {
+    if (node.selected) {
+       user.setDistance(node.getAttribute("value"));
+    }
+  } while ((node=nextElementSibling(node)) != null);
   app.setUnit();
   app.repaint();
-}
-
-app.mile = function () {
-  app.user.setMile();
-  app.user.save();
-  app.setUnit();
-  app.repaint();
+  user.save();
 }
 
 app.setUnit = function () {  
   var nodes = document.getElementsByClassName("distance_unit");
   i = 0;
   do {
-    nodes[i].textContent = app.user.prefs.distance;
+    nodes[i].textContent = user.prefs.distance;
   } while (++i < nodes.length);
+  var node = firstElementChild(document.getElementById("select_distance"));
+  do {
+    if (node.getAttribute("value")===user.prefs.distance) node.selected = true;
+  } while ((node=nextElementSibling(node)) != null);
 }
--- a/src/main/resources/templates/geolocation.ssp	Tue Aug 23 18:12:40 2011 -0400
+++ b/src/main/resources/templates/geolocation.ssp	Wed Aug 24 10:46:57 2011 -0400
@@ -5,10 +5,11 @@
  <meta charset='utf-8' />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
- <link rel='icon' type='image/png' href='geolocation-icon.png'/>
+ <link rel='icon' type='image/png' href='tracker-icon.png'/>
  <title>HTML5 Track</title>
  <script src='/scripts/json2.js'>
  </script>
+ <script src="http://www.w3.org/2008/12/et-min.js"></script>
  <script src='/scripts/Utils.js'>
  </script>
  <script src='/scripts/tracker.js'>
@@ -87,12 +88,14 @@
 
 <section id='tab1'>
 
-<p class='text'>Current unit: <span class='dst_unit'>km</span></p>
-
 <p>
-<button type='button' id='start' onclick='app.km()'>KM</button>
+<label for='select_distance'>Current unit:</label>
+<select id='select_distance' onchange='app.changeDistanceUnit()'>
 
-<button type='button' id='stop' onclick='app.mile()'>MILE</button>
+<option value='km'>KM</option>
+
+<option value='mile'>MILE</option>
+</select>
 </p>
 
 </section>