Update route popup with the correct distance unit

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

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];

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}`;
+    }
   }
 }