From 9f9debdb1d1f874f81f49f604b66d15accd6cc99 Mon Sep 17 00:00:00 2001
From: Eugene Burmakin <iamfrey@gmail.com>
Date: Thu, 29 Aug 2024 00:09:04 +0200
Subject: [PATCH] Update js files to support miles

---
 app/javascript/controllers/maps_controller.js | 10 ++++-
 app/javascript/maps/helpers.js                | 39 +++++++++++++++----
 docker-compose.yml                            |  2 +
 3 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js
index 4a1e82cc..d8e60825 100644
--- a/app/javascript/controllers/maps_controller.js
+++ b/app/javascript/controllers/maps_controller.js
@@ -25,6 +25,7 @@ export default class extends Controller {
     this.userSettings = JSON.parse(this.element.dataset.user_settings);
     this.clearFogRadius = parseInt(this.userSettings.fog_of_war_meters) || 50;
     this.routeOpacity = parseFloat(this.userSettings.route_opacity) || 0.6;
+    this.distanceUnit = this.userSettings.distance_unit || "km";
 
     this.center = this.markers[this.markers.length - 1] || [52.514568, 13.350111];
 
@@ -134,6 +135,13 @@ export default class extends Controller {
 
   createPopupContent(marker) {
     const timezone = this.element.dataset.timezone;
+    if (this.distanceUnit === "mi") {
+      // convert marker[5] from km/h to mph
+      marker[5] = marker[5] * 0.621371;
+      // convert marker[3] from meters to feet
+      marker[3] = marker[3] * 3.28084;
+    }
+
     return `
       <b>Timestamp:</b> ${formatDate(marker[4], timezone)}<br>
       <b>Latitude:</b> ${marker[0]}<br>
@@ -268,7 +276,7 @@ export default class extends Controller {
       <b>Start:</b> ${firstTimestamp}<br>
       <b>End:</b> ${lastTimestamp}<br>
       <b>Duration:</b> ${timeOnRoute}<br>
-      <b>Total Distance:</b> ${formatDistance(totalDistance)}<br>
+      <b>Total Distance:</b> ${formatDistance(totalDistance, this.distanceUnit)}<br>
     `;
 
     if (isDebugMode) {
diff --git a/app/javascript/maps/helpers.js b/app/javascript/maps/helpers.js
index 4a7d6817..3eb21899 100644
--- a/app/javascript/maps/helpers.js
+++ b/app/javascript/maps/helpers.js
@@ -1,9 +1,28 @@
 // javascript/maps/helpers.js
-export function formatDistance(distance) {
-  if (distance < 1000) {
-    return `${distance.toFixed(2)} meters`;
+export function formatDistance(distance, unit = 'km') {
+  if (unit === 'mi') {
+    distance *= 0.621371; // Convert to miles
+    var smallUnit = 'ft';
+    var bigUnit = 'mi';
+
+    // If the distance is less than 1 mi, return it in feet
+    // else return it in miles
+    if (distance < 621) {
+      distance *= 5280;
+
+      return `${distance.toFixed(2)} ${smallUnit}`;
+    }
   } else {
-    return `${(distance / 1000).toFixed(2)} km`;
+    var smallUnit = 'm';
+    var bigUnit = 'km';
+  }
+
+  // If the distance is less than 1 km/mi, return it in meters/feet
+
+  if (distance < 1000) {
+    return `${distance.toFixed(2)} ${smallUnit}`;
+  } else {
+    return `${(distance / 1000).toFixed(2)} ${bigUnit}`;
   }
 }
 
@@ -37,9 +56,10 @@ export function formatDate(timestamp, timezone) {
   return date.toLocaleString("en-GB", { timeZone: timezone });
 }
 
-export function haversineDistance(lat1, lon1, lat2, lon2) {
+export function haversineDistance(lat1, lon1, lat2, lon2, unit = 'km') {
   const toRad = (x) => (x * Math.PI) / 180;
-  const R = 6371; // Radius of the Earth in kilometers
+  const R_km = 6371; // Radius of the Earth in kilometers
+  const R_miles = 3959; // Radius of the Earth in miles
   const dLat = toRad(lat2 - lat1);
   const dLon = toRad(lon2 - lon1);
   const a =
@@ -47,5 +67,10 @@ export function haversineDistance(lat1, lon1, lat2, lon2) {
     Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
     Math.sin(dLon / 2) * Math.sin(dLon / 2);
   const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-  return R * c * 1000; // Distance in meters
+
+  if (unit === 'miles') {
+    return R_miles * c; // Distance in miles
+  } else {
+    return R_km * c; // Distance in kilometers
+  }
 }
diff --git a/docker-compose.yml b/docker-compose.yml
index 895c0c9f..31f416c6 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -49,6 +49,7 @@ services:
       APPLICATION_HOSTS: localhost
       TIME_ZONE: Europe/London
       APPLICATION_PROTOCOL: http
+      DISTANCE_UNIT: km
     logging:
       driver: "json-file"
       options:
@@ -81,6 +82,7 @@ services:
       APPLICATION_HOSTS: localhost
       BACKGROUND_PROCESSING_CONCURRENCY: 10
       APPLICATION_PROTOCOL: http
+      DISTANCE_UNIT: km
     logging:
       driver: "json-file"
       options: