Use for loop to write directions table

[rails.git] / app / assets / javascripts / index / layers / data.js

diff --git a/app/assets/javascripts/index/layers/data.js b/app/assets/javascripts/index/layers/data.js
index 8925cc48001341a2bfd44adf2dc248d513f11010..6c8bdc02591fc9d03a322aeb564232f17a39289a 100644 (file)
--- a/app/assets/javascripts/index/layers/data.js
+++ b/app/assets/javascripts/index/layers/data.js
@@ -2,21 +2,6 @@ OSM.initializeDataLayer = function (map) {
   let dataLoader, loadedBounds;
   const dataLayer = map.dataLayer;
 
-  dataLayer.setStyle({
-    way: {
-      weight: 3,
-      color: "#000000",
-      opacity: 0.4
-    },
-    area: {
-      weight: 3,
-      color: "#ff0000"
-    },
-    node: {
-      color: "#00ff00"
-    }
-  });
-
   dataLayer.isWayArea = function () {
     return false;
   };
@@ -51,15 +36,15 @@ OSM.initializeDataLayer = function (map) {
       $("<div class='p-3'>").append(
         $("<div class='d-flex'>").append(
           $("<h2 class='flex-grow-1 text-break'>")
-            .text(I18n.t("browse.start_rjs.load_data")),
+            .text(OSM.i18n.t("browse.start_rjs.load_data")),
           $("<div>").append(
             $("<button type='button' class='btn-close'>")
-              .attr("aria-label", I18n.t("javascripts.close"))
+              .attr("aria-label", OSM.i18n.t("javascripts.close"))
               .click(cancel))),
         $("<p class='alert alert-warning'>")
-          .text(I18n.t("browse.start_rjs.feature_warning", { num_features })),
+          .text(OSM.i18n.t("browse.start_rjs.feature_warning", { num_features })),
         $("<input type='submit' class='btn btn-primary d-block mx-auto'>")
-          .val(I18n.t("browse.start_rjs.load_data"))
+          .val(OSM.i18n.t("browse.start_rjs.load_data"))
           .click(add)));
   }
 
@@ -68,13 +53,13 @@ OSM.initializeDataLayer = function (map) {
       $("<div class='p-3'>").append(
         $("<div class='d-flex'>").append(
           $("<h2 class='flex-grow-1 text-break'>")
-            .text(I18n.t("browse.start_rjs.load_data")),
+            .text(OSM.i18n.t("browse.start_rjs.load_data")),
           $("<div>").append(
             $("<button type='button' class='btn-close'>")
-              .attr("aria-label", I18n.t("javascripts.close"))
+              .attr("aria-label", OSM.i18n.t("javascripts.close"))
               .click(close))),
         $("<p class='alert alert-warning'>")
-          .text(I18n.t("browse.start_rjs.feature_error", { message: message }))));
+          .text(OSM.i18n.t("browse.start_rjs.feature_error", { message: message }))));
   }
 
   function getData() {
@@ -89,6 +74,15 @@ OSM.initializeDataLayer = function (map) {
 
     if (dataLoader) dataLoader.abort();
 
+    $("#layers-data-loading").remove();
+
+    const spanLoading = $("<span>")
+      .attr("id", "layers-data-loading")
+      .attr("class", "spinner-border spinner-border-sm ms-1")
+      .attr("role", "status")
+      .html("<span class='visually-hidden'>" + OSM.i18n.t("browse.start_rjs.loading") + "</span>")
+      .appendTo($("#label-layers-data"));
+
     dataLoader = new AbortController();
     fetch(url, { signal: dataLoader.signal })
       .then(response => {
@@ -123,6 +117,8 @@ OSM.initializeDataLayer = function (map) {
         if (map._objectLayer) {
           map._objectLayer.bringToFront();
         }
+
+        dataLoader = null;
       })
       .catch(function (error) {
         if (error.name === "AbortError") return;
@@ -130,8 +126,12 @@ OSM.initializeDataLayer = function (map) {
         displayLoadError(error?.message, () => {
           $("#browse_status").empty();
         });
+
+        dataLoader = null;
       })
-      .finally(() => dataLoader = null);
+      .finally(() => {
+        spanLoading.remove();
+      });
   }
 
   function onSelect(layer) {