Added configuration option to choose between metric and imperial units.

docs/config.md

@@ -30,6 +30,7 @@ window.owntracks.config = {};
   - [`minAccuracy`](#filtersminaccuracy)
 - [`ignorePingLocation`](#ignorepinglocation)
 - [`locale`](#locale)
+- [`units`](#units)
 - `map`
   - [`attribution`](#mapattribution)
   - [`circle`](#mapcircle)
@@ -189,6 +190,21 @@ use `en-US` for translations.
 - Type: [`String`]
 - Default: `"en-US"`
 
+### `units`
+
+Allows the configuration of the units of measurement to use for the user interface.
+
+Available options:
+
+- `metric`
+- `imperial`
+
+Choosing anything other than one of these options will fall back to metric.
+
+- Type: [`String`]
+- Default: `"metric"`
+
+
 ### `map.attribution`
 
 Attribution for map tiles.

src/components/LDeviceLocationPopup.vue

@@ -26,7 +26,8 @@
           <br />
           {{ lon }}
           <br />
-          {{ alt }}m
+          {{ $config.units == "imperial" ? Math.round(alt*3.28084) : alt }}
+	  {{ $config.units == "imperial" ? " ft" : " m" }}
         </li>
         <li v-if="address" :title="$t('Address')">
           <HomeIcon size="1x" aria-hidden="true" role="img" />
@@ -38,7 +39,8 @@
         </li>
         <li v-if="typeof speed === 'number'" :title="$t('Speed')">
           <ZapIcon size="1x" aria-hidden="true" role="img" />
-          {{ speed }} km/h
+          {{ $config.units == "imperial" ? Math.round(speed/1.609*10)/10 : speed }} 
+	  {{ $config.units == "imperial" ? " mph" : " km/h" }}
         </li>
         <li v-if="wifi.ssid" :title="$t('WiFi')">
           <WifiIcon size="1x" aria-hidden="true" role="img" />

src/config.js

@@ -18,6 +18,7 @@ const DEFAULT_CONFIG = {
   },
   ignorePingLocation: true,
   locale: "en-US",
+  units: "metric",
   map: {
     attribution:
       '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',

src/util.js

@@ -67,21 +67,34 @@ export const distanceBetweenCoordinates = (c1, c2) => {
 /**
  * Format a distance in meters into a human-readable string with unit.
  *
- * This only supports m / km for now, but could read a config option and return
- * ft / mi.
- *
  * @param {Number} distance Distance in meters
  * @returns {String} Formatted string including unit
  */
 export const humanReadableDistance = (distance) => {
-  let unit = "m";
-  if (Math.abs(distance) >= 1000) {
-    distance = distance / 1000;
-    unit = "km";
+  let unit = 'm';
+  let digits = 1;
+
+  if(config.units == "imperial") {
+    unit = "ft";
+    digits = 0; // We don't need anything after the decimal when working with feet.
+    distance = distance * 3.28084;  // convert meters to feet.
+    if(Math.abs(distance) >= 1500) { // Most mapping apps switch to fractions of a mile above 1,500 ft
+      distance = distance / 5280;
+      unit = "mi";
+      digits = 2;
+    }
+  }
+  else
+  {
+    if (Math.abs(distance) >= 1000) {
+      distance = distance / 1000;
+      unit = "km";
+    }
   }
   return `${distance.toLocaleString(config.locale, {
-    maximumFractionDigits: 1,
+    maximumFractionDigits: digits,
   })} ${unit}`;
+
 };
 
 /**