Added configuration option to choose between metric and imperial units.

docs/config.md

@@ -71,6 +71,7 @@ window.owntracks.config = {};
 - [`selectedUser`](#selecteduser)
 - [`showDistanceTravelled`](#showdistancetravelled)
 - [`startDateTime`](#startdatetime)
+- [`units`](#units)
 - [`verbose`](#verbose)
 
 ### `api.baseUrl`
@@ -565,6 +566,20 @@ Initial start date and time (browser timezone) for fetched data.
   };
   ```
 
+### `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"`
+
 ### `verbose`
 
 Whether to enable verbose mode or not.

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,12 @@
         </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

@@ -87,6 +87,7 @@ const DEFAULT_CONFIG = {
   selectedUser: null,
   showDistanceTravelled: true,
   startDateTime,
+  units: "metric",
   verbose: false,
 };
 

src/util.js

@@ -67,20 +67,31 @@ 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 digits = 1;
+
+  if (config.units == "imperial") {
+    unit = "ft";
+    digits = 0; // We don't need anything after 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}`;
 };
 

tests/util.test.js

@@ -129,5 +129,21 @@ describe("humanReadableDistance", () => {
     expect(humanReadableDistance(9999.9999)).toBe("10 km");
     expect(humanReadableDistance(100000)).toBe("100 km");
     expect(humanReadableDistance(-42)).toBe("-42 m");
+
+    config.units = "imperial";
+    expect(humanReadableDistance(0)).toBe("0 ft");
+    expect(humanReadableDistance(1)).toBe("3 ft");
+    expect(humanReadableDistance(123)).toBe("404 ft");
+    expect(humanReadableDistance(123.4567)).toBe("405 ft");
+    expect(humanReadableDistance(999)).toBe("0.62 mi");
+    expect(humanReadableDistance(1000)).toBe("0.62 mi");
+    expect(humanReadableDistance(9000)).toBe("5.59 mi");
+    expect(humanReadableDistance(9900)).toBe("6.15 mi");
+    expect(humanReadableDistance(9990)).toBe("6.21 mi");
+    expect(humanReadableDistance(9999)).toBe("6.21 mi");
+    expect(humanReadableDistance(9999.0)).toBe("6.21 mi");
+    expect(humanReadableDistance(9999.9999)).toBe("6.21 mi");
+    expect(humanReadableDistance(100000)).toBe("62.14 mi");
+    expect(humanReadableDistance(-42)).toBe("-137.80 ft");
   });
 });