From 8c539d5d403d221120196ef258c8b49337ecd0c0 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Thu, 10 Apr 2025 15:33:22 +0300
Subject: [PATCH] Add km/mi buttons to directions

---
 app/views/directions/search.html.erb | 32 ++++++++++++++++++----------
 config/locales/en.yml                |  2 ++
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/app/views/directions/search.html.erb b/app/views/directions/search.html.erb
index 0669a75ce..e64d3c23b 100644
--- a/app/views/directions/search.html.erb
+++ b/app/views/directions/search.html.erb
@@ -89,17 +89,27 @@
 <div id="directions_error" hidden></div>
 
 <div id="directions_route" hidden>
-  <p>
-    <span>
-      <%= t ".distance" %>: <output id="directions_route_distance"></output>.
-      <%= t ".time" %>: <output id="directions_route_time"></output>.
-    </span>
-    <br>
-    <span id="directions_route_ascend_descend">
-      <%= t ".ascend" %>: <output id="directions_route_ascend"></output>.
-      <%= t ".descend" %>: <output id="directions_route_descend"></output>.
-    </span>
-  </p>
+  <div class="d-flex align-items-end mb-3">
+    <div class="flex-grow-1 text-truncate">
+      <span>
+        <%= t ".distance" %>: <output id="directions_route_distance"></output>.
+        <%= t ".time" %>: <output id="directions_route_time"></output>.
+      </span>
+      <br>
+      <span id="directions_route_ascend_descend">
+        <%= t ".ascend" %>: <output id="directions_route_ascend"></output>.
+        <%= t ".descend" %>: <output id="directions_route_descend"></output>.
+      </span>
+    </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" 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">
+      <label class="btn btn-outline-secondary p-0 px-1" for="directions_distance_units_mi"><%= t ".button_mi" %></label>
+    </div>
+  </div>
 
   <table class='table table-hover table-sm mb-3'>
     <tbody id="directions_route_steps"></tbody>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 93d5ea0a4..02f72dd41 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1545,6 +1545,8 @@ en:
       time: "Time"
       ascend: "Ascend"
       descend: "Descend"
+      button_km: "km"
+      button_mi: "mi"
       download: "Download route as GeoJSON"
       filename: "route"
       directions_courtesy_html: "Directions courtesy of %{link}"
-- 
2.39.5