Allow user to choose units (m/km or ft/mi), close #9

www/assets/js/list.js

@@ -60,7 +60,7 @@ function updateDistances(latitude, longitude) {
         var distance = getDistance(latitude, longitude, packages[i].coords[0], packages[i].coords[1]).toFixed(0);
         packages[i].distance = distance;
         $("#addresslist .package-list-item[data-packageid=\"" + i + "\"] .item-content").data("distance", distance);
-        $("#addresslist .package-list-item[data-packageid=\"" + i + "\"] .item-content .distance").text(distance + " m");
+        $("#addresslist .package-list-item[data-packageid=\"" + i + "\"] .item-content .distance").text(getDisplayDistance(distance));
     }
 }
 
@@ -140,7 +140,7 @@ function loadPackageList(sortType) {
                 + '       ' + sortedPackages[i].value.address
                 + '    </div>'
                 + '    <div class="item-footer">'
-                + '      <span class="distance">' + (typeof sortedPackages[i].value.distance != 'undefined' ? sortedPackages[i].value.distance : '...') + ' m</span>'
+                + '      <span class="distance">' + (typeof sortedPackages[i].value.distance != 'undefined' ? getDisplayDistance(sortedPackages[i].value.distance) : '...') + '</span>'
                 + '    </div>'
                 + '  </div>'
                 + '</div>'

www/assets/js/location.js

@@ -140,4 +140,55 @@ function getDistance(lat1, lon1, lat2, lon2) {
     var deltaSigma = B * sinSigma * (cos2SigmaM + B / 4 * (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) - B / 6 * cos2SigmaM * (-3 + 4 * sinSigma * sinSigma) * (-3 + 4 * cos2SigmaM * cos2SigmaM)));
     var s = b * A * (sigma - deltaSigma);
     return s;
+}
+
+/**
+ * Return a formatted string with units corresponding to a number of meters.
+ * Respects user "units" setting ("metric" or "imperial").
+ * @param number meters
+ * @param bool space Add a space between number and units.  Default true.
+ * @returns string "1000 ft", "2 mi", "3 km", 
+ */
+function getDisplayDistance(meters, space) {
+    if (typeof space == 'undefined') {
+        space = true;
+    }
+    var units = localStorage.getItem("units");
+    
+    if (units == null) {
+        units = "metric";
+    }
+    
+    var number = Math.round(meters);
+    var label = "m";
+    
+    if (units == "imperial") {
+        // Convert to feet
+        number = Math.round(number * 3.28084);
+        label = "ft";
+        if (number >= 1320) { // 0.25 miles
+            number = (number / 5280);
+            if (number < 10) {
+                number = number.toFixed(2);
+            } else {
+                number = Math.round(number);
+            }
+            label = "mi";
+        }
+    } else {
+        if (number >= 1000) {
+            number = (number / 1000);
+            if (number < 16) {
+                number = number.toFixed(1);
+            } else {
+                number = Math.round(number);
+            }
+            label = "km";
+        }
+    }
+    
+    if (space) {
+        return number + " " + label;
+    }
+    return number + "" + label;
 }

www/assets/js/settings.js

@@ -17,6 +17,12 @@ $('.item-content[data-setting=darktheme] .toggle input').on("change", function (
     }
 });
 
+$('.item-content[data-setting=units] .toggle input').on("change", function () {
+    var checked = $(this).prop('checked');
+    console.log(checked);
+    localStorage.setItem("units", (checked ? "imperial" : "metric"));
+});
+
 $('.item-content[data-setting=wakelock] .toggle input').on("change", function () {
     var checked = $(this).prop('checked');
     console.log(checked);

www/routes.js

@@ -111,6 +111,14 @@ var routes = [
                             checked: localStorage.getItem("darktheme") == "true",
                             onclick: ""
                         },
+                        {
+                            setting: "units",
+                            title: "Distance Units",
+                            text: "Use feet and miles for showing distance",
+                            toggle: true,
+                            checked: localStorage.getItem("units") == "imperial",
+                            onclick: ""
+                        },
                         {
                             setting: "mapsource",
                             title: "Map",