From 88de60517e289ee86d80a3979e78d390ec13dcc0 Mon Sep 17 00:00:00 2001
From: Eugene Burmakin <iamfrey@gmail.com>
Date: Thu, 29 Aug 2024 00:17:51 +0200
Subject: [PATCH] Update route popup with the correct distance unit

---
 CHANGELOG.md                                  |  2 ++
 app/javascript/controllers/maps_controller.js |  4 +--
 app/javascript/maps/helpers.js                | 36 ++++++++++---------
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f59c7409..dbc9cd05 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 It's recommended to update your stats manually after changing the `DISTANCE_UNIT` environment variable. You can do this by clicking the "Update stats" button on the Stats page.
 
+⚠️IMPORTANT⚠️: All settings are still should be provided in meters. All calculations though will be converted to feets and miles if `DISTANCE_UNIT` is set to `mi`.
+
 ## [0.12.2] — 2024-08-28
 
 ### Added
diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js
index d8e60825..96bb9b92 100644
--- a/app/javascript/controllers/maps_controller.js
+++ b/app/javascript/controllers/maps_controller.js
@@ -25,7 +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.distanceUnit = this.element.dataset.distance_unit || "km";
 
     this.center = this.markers[this.markers.length - 1] || [52.514568, 13.350111];
 
@@ -278,7 +278,7 @@ export default class extends Controller {
       <b>Duration:</b> ${timeOnRoute}<br>
       <b>Total Distance:</b> ${formatDistance(totalDistance, this.distanceUnit)}<br>
     `;
-
+console.log(this.distanceUnit);
     if (isDebugMode) {
       const prevPoint = polylineCoordinates[0];
       const nextPoint = polylineCoordinates[polylineCoordinates.length - 1];
diff --git a/app/javascript/maps/helpers.js b/app/javascript/maps/helpers.js
index 3eb21899..7aef91c3 100644
--- a/app/javascript/maps/helpers.js
+++ b/app/javascript/maps/helpers.js
@@ -1,28 +1,30 @@
 // javascript/maps/helpers.js
 export function formatDistance(distance, unit = 'km') {
+  let smallUnit, bigUnit;
+
   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;
+    distance *= 0.621371; // Convert km to miles
+    smallUnit = 'ft';
+    bigUnit = 'mi';
 
+    // If the distance is less than 1 mile, return it in feet
+    if (distance < 1) {
+      distance *= 5280; // Convert miles to feet
       return `${distance.toFixed(2)} ${smallUnit}`;
+    } else {
+      return `${distance.toFixed(2)} ${bigUnit}`;
     }
   } else {
-    var smallUnit = 'm';
-    var bigUnit = 'km';
-  }
+    smallUnit = 'm';
+    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}`;
+    // If the distance is less than 1 km, return it in meters
+    if (distance < 1) {
+      distance *= 1000; // Convert km to meters
+      return `${distance.toFixed(2)} ${smallUnit}`;
+    } else {
+      return `${distance.toFixed(2)} ${bigUnit}`;
+    }
   }
 }