From f2e8e7ac70ee4da25c606d8a3bebcdfef95bdca2 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Thu, 10 Apr 2025 12:54:20 +0300
Subject: [PATCH] Use different divs for directions error and route outputs

---
 app/assets/javascripts/index/directions.js | 19 +++++++++++--------
 app/views/directions/search.html.erb       |  4 +++-
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js
index 354387268..8864d3e47 100644
--- a/app/assets/javascripts/index/directions.js
+++ b/app/assets/javascripts/index/directions.js
@@ -101,29 +101,32 @@ OSM.Directions = function (map) {
     }));
 
     $("#directions_loader").prop("hidden", false);
-    $("#directions_content").prop("hidden", true);
+    $("#directions_error").prop("hidden", true).empty();
+    $("#directions_route").prop("hidden", true);
     map.setSidebarOverlaid(false);
     controller = new AbortController();
     chosenEngine.getRoute(points, controller.signal).then(function (route) {
-      routeOutput.write($("#directions_content"), route);
+      $("#directions_route").prop("hidden", false);
+      routeOutput.write($("#directions_route"), route);
       if (fitRoute) {
         routeOutput.fit();
       }
     }).catch(function () {
-      routeOutput.remove($("#directions_content"));
+      routeOutput.remove($("#directions_route"));
       if (reportErrors) {
-        $("#directions_content").html("<div class=\"alert alert-danger\">" + OSM.i18n.t("javascripts.directions.errors.no_route") + "</div>");
+        $("#directions_error")
+          .prop("hidden", false)
+          .html("<div class=\"alert alert-danger\">" + OSM.i18n.t("javascripts.directions.errors.no_route") + "</div>");
       }
     }).finally(function () {
       $("#directions_loader").prop("hidden", true);
-      $("#directions_content").prop("hidden", false);
       controller = null;
     });
   }
 
   function closeButtonListener(e) {
     e.stopPropagation();
-    routeOutput.remove($("#directions_content"));
+    routeOutput.remove($("#directions_route"));
     map.setSidebarOverlaid(true);
     // TODO: collapse width of sidebar back to previous
   }
@@ -212,7 +215,7 @@ OSM.Directions = function (map) {
   const page = {};
 
   page.pushstate = page.popstate = function () {
-    if ($("#directions_content").length) {
+    if ($("#directions_route").length) {
       page.load();
     } else {
       initializeFromParams();
@@ -251,7 +254,7 @@ OSM.Directions = function (map) {
     endpoints[0].clearValue();
     endpoints[1].clearValue();
 
-    routeOutput.remove($("#directions_content"));
+    routeOutput.remove($("#directions_route"));
   };
 
   return page;
diff --git a/app/views/directions/search.html.erb b/app/views/directions/search.html.erb
index b7c75fee6..e08e9e257 100644
--- a/app/views/directions/search.html.erb
+++ b/app/views/directions/search.html.erb
@@ -86,4 +86,6 @@
   </div>
 </div>
 
-<div id="directions_content"></div>
+<div id="directions_error" hidden></div>
+
+<div id="directions_route" hidden></div>
-- 
2.39.5