From 810ec21eb79c822f7aa3b4cf600a28f0072c6708 Mon Sep 17 00:00:00 2001
From: Edward Betts <edward@4angle.com>
Date: Fri, 14 May 2021 17:25:42 +0200
Subject: [PATCH] Switch to a table for showing possible OSM matches

---
 static/js/map.js | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/static/js/map.js b/static/js/map.js
index 1bfd83e..0a8cf34 100644
--- a/static/js/map.js
+++ b/static/js/map.js
@@ -438,33 +438,36 @@ function mouse_events(marker, qid) {
           var nearby = response.data.nearby;
           if (!nearby.length) return;
           var osm_html = "<strong>Possible OSM matches</strong><br>";
+          osm_html += '<table class="table table-sm table-hover">'
+          osm_html += '<tbody>'
           for (const osm of nearby) {
-            var span_id = osm.identifier.replace("/", "_");
-            nearby_lookup[span_id] = osm;
-            osm_html += `<span class="osm-candidate" id="${span_id}"> ${osm.distance.toFixed(0)}m `
+            var candidate_id = osm.identifier.replace("/", "_");
+            osm_html += `<tr class="osm-candidate" id="${candidate_id}"><td class="text-end text-nowrap">${osm.distance.toFixed(0)}m `;
+            osm_html += `<a href="https://www.openstreetmap.org/${osm.identifier}" target="_blank">`;
+            osm_html += '<i class="fa fa-map-o"></i></a>';
+            osm_html += "</td><td>";
+            nearby_lookup[candidate_id] = osm;
+            // osm_html += `<span class="osm-candidate" id="${span_id}"> ${osm.distance.toFixed(0)}m `
+            if (osm.name) {
+              osm_html += osm.name + " ";
+            }
+            if (!osm.presets.length && !osm.name) {
+              osm_html += "no name ";
+            }
             osm_html += osm.presets.map(function(p) {
               var wiki_url = `http://wiki.openstreetmap.org/wiki/${p.tag_or_key}`;
               return `<a href="${wiki_url}" class="osm-wiki-link" target="_blank">${p.name} <i class="fa fa-external-link"></i></a>`;
             }).join(", ");
-            if (osm.presets.length && osm.name) {
-              osm_html += ": ";
-            }
-            if (osm.name) {
-              osm_html += osm.name;
-            }
-            if (!osm.presets.length && !osm.name) {
-              osm_html += " no name";
-            }
             if (osm.address_list && osm.address_list.length) {
               if (osm.address_list.length == 1) {
-                osm_html += " address node: " + osm.address_list[0];
+                osm_html += "<br>address node: " + osm.address_list[0];
               } else {
-                osm_html += " address nodes: " + osm.address_list.join("; ")
+                osm_html += "<br>address nodes: " + osm.address_list.join("; ")
               }
             }
-            osm_html += ` <a href="https://www.openstreetmap.org/${osm.identifier}" target="_blank">`
-            osm_html += '<i class="fa fa-map-o"></i></a></span><br>';
+            osm_html += "</td></tr>";
           }
+          osm_html += "</tbody></table>"
           candidates.innerHTML = osm_html;
           var span_list = document.getElementsByClassName("osm-candidate");