From 94cf122e93b2ce1079071a66e61849cb3490eec5 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Thu, 10 Apr 2025 14:49:38 +0300 Subject: [PATCH] Write most of route html using erb template --- .../index/directions-route-output.js | 72 +++++++++---------- app/assets/javascripts/index/directions.js | 8 +-- app/views/directions/search.html.erb | 26 ++++++- config/locales/en.yml | 2 +- 4 files changed, 65 insertions(+), 43 deletions(-) diff --git a/app/assets/javascripts/index/directions-route-output.js b/app/assets/javascripts/index/directions-route-output.js index 84bcc87a8..706eb4dd8 100644 --- a/app/assets/javascripts/index/directions-route-output.js +++ b/app/assets/javascripts/index/directions-route-output.js @@ -50,35 +50,25 @@ OSM.DirectionsRouteOutput = function (map) { return h + ":" + (m < 10 ? "0" : "") + m; } - const routeOutput = {}; - - routeOutput.write = function (content, route) { - polyline - .setLatLngs(route.line) - .addTo(map); - - const distanceText = $("

").append( - OSM.i18n.t("javascripts.directions.distance") + ": " + formatTotalDistance(route.distance) + ". " + - OSM.i18n.t("javascripts.directions.time") + ": " + formatTime(route.time) + "."); + function writeSummary(route) { + $("#directions_route_distance").val(formatTotalDistance(route.distance)); + $("#directions_route_time").val(formatTime(route.time)); if (typeof route.ascend !== "undefined" && typeof route.descend !== "undefined") { - distanceText.append( - $("
"), - OSM.i18n.t("javascripts.directions.ascend") + ": " + formatHeight(route.ascend) + ". " + - OSM.i18n.t("javascripts.directions.descend") + ": " + formatHeight(route.descend) + "."); + $("#directions_route_ascend_descend").prop("hidden", false); + $("#directions_route_ascend").val(formatHeight(route.ascend)); + $("#directions_route_descend").val(formatHeight(route.descend)); + } else { + $("#directions_route_ascend_descend").prop("hidden", true); + $("#directions_route_ascend").val(""); + $("#directions_route_descend").val(""); } + } - const turnByTurnTable = $("") - .append($("")); - - content - .empty() - .append( - distanceText, - turnByTurnTable - ); + function writeSteps(route) { + $("#directions_route_steps").empty(); for (const [i, [direction, instruction, dist, lineseg]] of route.steps.entries()) { - const row = $("").appendTo(turnByTurnTable); + const row = $("").appendTo($("#directions_route_steps")); if (direction) { row.append(""); @@ -105,22 +95,26 @@ OSM.DirectionsRouteOutput = function (map) { map.removeLayer(highlight); }); } + } + + const routeOutput = {}; + + routeOutput.write = function (route) { + polyline + .setLatLngs(route.line) + .addTo(map); + + writeSummary(route); + writeSteps(route); const blob = new Blob([JSON.stringify(polyline.toGeoJSON())], { type: "application/json" }); URL.revokeObjectURL(downloadURL); downloadURL = URL.createObjectURL(blob); + $("#directions_route_download").prop("href", downloadURL); - content.append(`

${ - OSM.i18n.t("javascripts.directions.download") - }

`); - - content.append("

" + - OSM.i18n.t("javascripts.directions.instructions.courtesy", { - link: `${route.credit}` - }) + - "

"); + $("#directions_route_credit") + .text(route.credit) + .prop("href", route.creditlink); }; routeOutput.fit = function () { @@ -131,11 +125,15 @@ OSM.DirectionsRouteOutput = function (map) { return map.hasLayer(polyline); }; - routeOutput.remove = function (content) { - content.empty(); + routeOutput.remove = function () { map .removeLayer(popup) .removeLayer(polyline); + + $("#directions_route_steps").empty(); + + URL.revokeObjectURL(downloadURL); + $("#directions_route_download").prop("href", ""); }; return routeOutput; diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js index 8864d3e47..358652b37 100644 --- a/app/assets/javascripts/index/directions.js +++ b/app/assets/javascripts/index/directions.js @@ -107,12 +107,12 @@ OSM.Directions = function (map) { controller = new AbortController(); chosenEngine.getRoute(points, controller.signal).then(function (route) { $("#directions_route").prop("hidden", false); - routeOutput.write($("#directions_route"), route); + routeOutput.write(route); if (fitRoute) { routeOutput.fit(); } }).catch(function () { - routeOutput.remove($("#directions_route")); + routeOutput.remove(); if (reportErrors) { $("#directions_error") .prop("hidden", false) @@ -126,7 +126,7 @@ OSM.Directions = function (map) { function closeButtonListener(e) { e.stopPropagation(); - routeOutput.remove($("#directions_route")); + routeOutput.remove(); map.setSidebarOverlaid(true); // TODO: collapse width of sidebar back to previous } @@ -254,7 +254,7 @@ OSM.Directions = function (map) { endpoints[0].clearValue(); endpoints[1].clearValue(); - routeOutput.remove($("#directions_route")); + routeOutput.remove(); }; return page; diff --git a/app/views/directions/search.html.erb b/app/views/directions/search.html.erb index e08e9e257..c69a9dc3b 100644 --- a/app/views/directions/search.html.erb +++ b/app/views/directions/search.html.erb @@ -88,4 +88,28 @@ - +
+ +
+ +

+ <%= tag.a t("javascripts.directions.download"), :id => "directions_route_download", :download => t("javascripts.directions.filename") %> +

+ +

+ <%= t "javascripts.directions.instructions.courtesy_html", :link => tag.a("", :id => "directions_route_credit", :target => "_blank") %> +

+ diff --git a/config/locales/en.yml b/config/locales/en.yml index 16b967ead..b3dbf7201 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -3349,7 +3349,7 @@ en: roundabout_with_exit_ordinal: At the roundabout take the %{exit} exit onto %{name} exit_roundabout: Exit the roundabout onto %{name} unnamed: "unnamed road" - courtesy: "Directions courtesy of %{link}" + courtesy_html: "Directions courtesy of %{link}" exit_counts: first: "1st" second: "2nd" -- 2.39.5