From c1ab57d952d0fedb2c2a5aeab8337c9614e9ccd8 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Mon, 10 Jun 2024 11:22:19 +0200
Subject: [PATCH] wip: add quick help for overpass importer expressions syntax

---
 umap/static/umap/js/modules/help.js              | 16 ++++++++++++++++
 .../static/umap/js/modules/importers/overpass.js |  4 +++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/umap/static/umap/js/modules/help.js b/umap/static/umap/js/modules/help.js
index 682bb013..fc46ef0b 100644
--- a/umap/static/umap/js/modules/help.js
+++ b/umap/static/umap/js/modules/help.js
@@ -144,6 +144,22 @@ const ENTRIES = {
     </ul>
   </div>
   `,
+
+  overpassImporter: `
+  <div>
+    <h4>${translate('Overpass supported expressions')}</h4>
+    <ul>
+      <li>${translate('key (eg. building)')}</li>
+      <li>${translate('!key (eg. !name)')}</li>
+      <li>${translate('key=value (eg. building=yes')}</li>
+      <li>${translate('key!=value (eg. building!=yes')}</li>
+      <li>${translate('key~value (eg. name~Grisy')}</li>
+      <li>${translate('key="value|value2" (eg. name="Paris|Berlin")')}</li>
+    </ul>
+    <div>${translate('More info about Overpass syntax')}: <a href="https://wiki.openstreetmap.org/wiki/Overpass_API/Language_Guide">https://wiki.openstreetmap.org/wiki/Overpass_API/Language_Guide</a></div>
+    <div>${translate('For more complex needs, see')} <a href="https://overpass-turbo.eu/">https://overpass-turbo.eu/</a></div>
+  </div>
+  `,
 }
 
 export default class Help {
diff --git a/umap/static/umap/js/modules/importers/overpass.js b/umap/static/umap/js/modules/importers/overpass.js
index 2f14cde7..67b1e130 100644
--- a/umap/static/umap/js/modules/importers/overpass.js
+++ b/umap/static/umap/js/modules/importers/overpass.js
@@ -5,7 +5,7 @@ import { translate } from '../i18n.js'
 const TEMPLATE = `
   <h3>Overpass</h3>
   <label>
-    ${translate('Selector')}
+    <span data-help="overpassImporter">${translate('Expression')}</span>
     <input type="text" placeholder="amenity=drinking_water" name="tags" />
   </label>
   <label>
@@ -34,6 +34,7 @@ class Autocomplete extends SingleMixin(BaseAjax) {
 
 export class Importer {
   constructor(map, options) {
+    this.map = map
     this.name = 'Overpass'
     this.baseUrl = options?.url || 'https://overpass-api.de/api/interpreter'
   }
@@ -53,6 +54,7 @@ export class Importer {
         boundaryName = choice.item.label
       },
     })
+    this.map.help.parse(container)
 
     const confirm = () => {
       const outMode = container.querySelector('[name=out-mode]').value