From 18eb8300ff843861c8e3146a54a46b2dea0f5854 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Sun, 15 Jun 2025 13:07:16 +0300
Subject: [PATCH] Revert "Refactor directions output rendering and unit
 handling"

This reverts commit 699aefa5239d9de79574a907c26b856360809346.
---
 .../index/directions-route-output.js          | 109 ++++++++++--------
 app/views/directions/show.html.erb            |   4 +-
 config/locales/en.yml                         |  10 +-
 3 files changed, 70 insertions(+), 53 deletions(-)

diff --git a/app/assets/javascripts/index/directions-route-output.js b/app/assets/javascripts/index/directions-route-output.js
index 2f8b89247..3d3773331 100644
--- a/app/assets/javascripts/index/directions-route-output.js
+++ b/app/assets/javascripts/index/directions-route-output.js
@@ -15,16 +15,17 @@ OSM.DirectionsRouteOutput = function (map) {
 
   let distanceUnits = "km";
   let downloadURL = null;
-  let route = {};
 
   function translateDistanceUnits(m) {
-    const scope = "javascripts.directions.distance_in_units.";
-    if (distanceUnits === "mi") return [scope + "miles", m / 0.3048, "ft", m / 1609.344, "mi"];
-    return [scope + "meters", m, "m", m / 1000, "km"];
+    if (distanceUnits === "km") {
+      return [m, "m", m / 1000, "km"];
+    } else {
+      return [m / 0.3048, "ft", m / 1609.344, "mi"];
+    }
   }
 
-  function formatTotalDistance(m) {
-    const [scope, minorValue, minorName, majorValue, majorName] = translateDistanceUnits(m);
+  function formatTotalDistance(minorValue, minorName, majorValue, majorName) {
+    const scope = "javascripts.directions.distance_in_units";
 
     if (minorValue < 1000 || majorValue < 0.25) {
       return OSM.i18n.t(minorName, { scope, distance: Math.round(minorValue) });
@@ -35,8 +36,8 @@ OSM.DirectionsRouteOutput = function (map) {
     }
   }
 
-  function formatStepDistance(m) {
-    const [scope, minorValue, minorName, majorValue, majorName] = translateDistanceUnits(m);
+  function formatStepDistance(minorValue, minorName, majorValue, majorName) {
+    const scope = "javascripts.directions.distance_in_units";
 
     if (minorValue < 5) {
       return "";
@@ -51,10 +52,10 @@ OSM.DirectionsRouteOutput = function (map) {
     }
   }
 
-  function formatHeight(m) {
-    const [scope, value, name] = translateDistanceUnits(m);
+  function formatHeight(minorValue, minorName) {
+    const scope = "javascripts.directions.distance_in_units";
 
-    return OSM.i18n.t(name, { scope, distance: Math.round(value) });
+    return OSM.i18n.t(minorName, { scope, distance: Math.round(minorValue) });
   }
 
   function formatTime(s) {
@@ -64,56 +65,73 @@ OSM.DirectionsRouteOutput = function (map) {
     return h + ":" + (m < 10 ? "0" : "") + m;
   }
 
-  function writeContent() {
-    if (this?.dataset?.unit) distanceUnits = this.dataset.unit;
-
-    $("#directions_route_distance").val(formatTotalDistance(route.distance));
+  function writeSummary(route) {
+    $("#directions_route_distance").val(formatTotalDistance(...translateDistanceUnits(route.distance)));
     $("#directions_route_time").val(formatTime(route.time));
-    $("#directions_route_ascend_descend").prop("hidden", typeof route.ascend === "undefined" || typeof route.descend === "undefined");
-    $("#directions_route_ascend").val(formatHeight(route.ascend ?? 0));
-    $("#directions_route_descend").val(formatHeight(route.descend ?? 0));
-    $("#directions_route_steps").empty();
-
-    for (const [i, step] of route.steps.entries()) {
-      writeStep(step, i).appendTo("#directions_route_steps");
+    if (typeof route.ascend !== "undefined" && typeof route.descend !== "undefined") {
+      $("#directions_route_ascend_descend").prop("hidden", false);
+      $("#directions_route_ascend").val(formatHeight(...translateDistanceUnits(route.ascend)));
+      $("#directions_route_descend").val(formatHeight(...translateDistanceUnits(route.descend)));
+    } else {
+      $("#directions_route_ascend_descend").prop("hidden", true);
+      $("#directions_route_ascend").val("");
+      $("#directions_route_descend").val("");
     }
   }
 
-  function writeStep([direction, instruction, dist, lineseg], i) {
-    const popupText = `<b>${i + 1}.</b> ${instruction}`;
-    let icon = "";
-    if (direction) icon = `<svg width="20" height="20" class="d-block"><use href="#routing-sprite-${direction}" /></svg>`;
+  function writeSteps(route) {
+    $("#directions_route_steps").empty();
+
+    for (const [i, [direction, instruction, dist, lineseg]] of route.steps.entries()) {
+      const row = $("<tr class='turn'/>").appendTo($("#directions_route_steps"));
+
+      if (direction) {
+        row.append("<td class='ps-3'><svg width='20' height='20' class='d-block'><use href='#routing-sprite-" + direction + "' /></svg></td>");
+      } else {
+        row.append("<td class='ps-3'>");
+      }
+      row.append(`<td><b>${i + 1}.</b> ${instruction}`);
+      row.append("<td class='pe-3 distance text-body-secondary text-end'>" + formatStepDistance(...translateDistanceUnits(dist)));
 
-    return $("<tr class='turn'/>")
-      .append(`<td class="ps-3">${icon}</td>`)
-      .append(`<td>${popupText}</td>`)
-      .append(`<td class="pe-3 distance text-body-secondary text-end">${formatStepDistance(dist)}</td>`)
-      .on("click", function () {
+      row.on("click", function () {
         popup
           .setLatLng(lineseg[0])
-          .setContent(`<p>${popupText}</p>`)
+          .setContent(`<p><b>${i + 1}.</b> ${instruction}</p>`)
           .openOn(map);
-      })
-      .on("mouseenter", function () {
-        highlight
-          .setLatLngs(lineseg)
-          .addTo(map);
-      })
-      .on("mouseleave", function () {
-        map.removeLayer(highlight);
       });
+
+      row
+        .on("mouseenter", function () {
+          highlight
+            .setLatLngs(lineseg)
+            .addTo(map);
+        })
+        .on("mouseleave", function () {
+          map.removeLayer(highlight);
+        });
+    }
   }
 
   const routeOutput = {};
 
-  routeOutput.write = function (r) {
-    route = r;
+  routeOutput.write = function (route) {
     polyline
       .setLatLngs(route.line)
       .addTo(map);
 
-    writeContent();
-    $("#directions_route input[data-unit]").off().on("change", writeContent);
+    writeSummary(route);
+    writeSteps(route);
+
+    $("#directions_distance_units_km").off().on("change", () => {
+      distanceUnits = "km";
+      writeSummary(route);
+      writeSteps(route);
+    });
+    $("#directions_distance_units_mi").off().on("change", () => {
+      distanceUnits = "mi";
+      writeSummary(route);
+      writeSteps(route);
+    });
 
     const blob = new Blob([JSON.stringify(polyline.toGeoJSON())], { type: "application/json" });
     URL.revokeObjectURL(downloadURL);
@@ -138,7 +156,8 @@ OSM.DirectionsRouteOutput = function (map) {
       .removeLayer(popup)
       .removeLayer(polyline);
 
-    $("#directions_route input[data-unit]").off();
+    $("#directions_distance_units_km").off();
+    $("#directions_distance_units_mi").off();
 
     $("#directions_route_steps").empty();
 
diff --git a/app/views/directions/show.html.erb b/app/views/directions/show.html.erb
index ac1db5e88..0baa0accf 100644
--- a/app/views/directions/show.html.erb
+++ b/app/views/directions/show.html.erb
@@ -103,10 +103,10 @@
     </div>
 
     <div class="btn-group btn-group-sm">
-      <input type="radio" class="btn-check" name="directions_distance_units" id="directions_distance_units_km" autocomplete="off" data-unit="km" checked>
+      <input type="radio" class="btn-check" name="directions_distance_units" id="directions_distance_units_km" autocomplete="off" checked>
       <label class="btn btn-outline-secondary p-0 px-1" for="directions_distance_units_km"><%= t ".button_km" %></label>
 
-      <input type="radio" class="btn-check" name="directions_distance_units" id="directions_distance_units_mi" autocomplete="off" data-unit="mi">
+      <input type="radio" class="btn-check" name="directions_distance_units" id="directions_distance_units_mi" autocomplete="off">
       <label class="btn btn-outline-secondary p-0 px-1" for="directions_distance_units_mi"><%= t ".button_mi" %></label>
     </div>
   </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 70b5f317e..267837291 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -3364,12 +3364,10 @@ en:
     edit_help: Move the map and zoom in on a location you want to edit, then click here.
     directions:
       distance_in_units:
-        meters:
-          m: "%{distance}m"
-          km: "%{distance}km"
-        miles:
-          ft: "%{distance}ft"
-          mi: "%{distance}mi"
+        m: "%{distance}m"
+        km: "%{distance}km"
+        ft: "%{distance}ft"
+        mi: "%{distance}mi"
       errors:
         no_route: "Couldn't find a route between those two places."
         no_place: "Sorry - couldn't locate '%{place}'."
-- 
2.39.5