From ffcd237a6f4ffdba2244c9d4fd4dbaed4d0aa2f1 Mon Sep 17 00:00:00 2001 From: jeremyakers Date: Wed, 1 Jan 2025 23:00:29 -0600 Subject: [PATCH 1/6] Modified humanReadableDistance function to use imperial units instead of metric when locale is set to en-US --- src/util.js | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/src/util.js b/src/util.js index c92af42..bfbfeed 100644 --- a/src/util.js +++ b/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.locale == "en-US") { + 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}`; + }; /** From ae2a28c0c29eb9a834f3dc60f015933dba95140b Mon Sep 17 00:00:00 2001 From: jeremyakers Date: Thu, 2 Jan 2025 00:16:20 -0600 Subject: [PATCH 2/6] Added new configuration option for metric vs imperial and modified the map popups to use the chosen unit types. --- docs/config.md | 14 ++++++++++++++ src/components/LDeviceLocationPopup.vue | 6 ++++-- src/config.js | 1 + src/util.js | 2 +- 4 files changed, 20 insertions(+), 3 deletions(-) diff --git a/docs/config.md b/docs/config.md index a3bc757..92d6810 100644 --- a/docs/config.md +++ b/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,19 @@ 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` + +- Type: [`String`] +- Default: `"metric"` + + ### `map.attribution` Attribution for map tiles. diff --git a/src/components/LDeviceLocationPopup.vue b/src/components/LDeviceLocationPopup.vue index cf113fa..d2e4a0e 100644 --- a/src/components/LDeviceLocationPopup.vue +++ b/src/components/LDeviceLocationPopup.vue @@ -26,7 +26,8 @@
{{ lon }}
- {{ alt }}m + {{ $config.units == "imperial" ? Math.round(alt*3.28084) : alt }} + {{ $config.units == "imperial" ? " ft" : " m" }}