From 2c9623aff6163f168982539da55a7091dbbe30ff Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Tue, 11 Jun 2024 10:40:25 +0200
Subject: [PATCH] wip: refine geodatamine importer

---
 umap/static/umap/base.css                     |  3 +++
 .../umap/js/modules/importers/geodatamine.js  | 26 ++++++++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css
index 4c4ab17f..eaffaa11 100644
--- a/umap/static/umap/base.css
+++ b/umap/static/umap/base.css
@@ -315,6 +315,9 @@ label {
     line-height: 21px;
     width: 100%;
 }
+label + label {
+    margin-top: var(--box-space);
+}
 .content label {
     font-weight: bold;
 }
diff --git a/umap/static/umap/js/modules/importers/geodatamine.js b/umap/static/umap/js/modules/importers/geodatamine.js
index bf5a2552..1706698e 100644
--- a/umap/static/umap/js/modules/importers/geodatamine.js
+++ b/umap/static/umap/js/modules/importers/geodatamine.js
@@ -1,4 +1,4 @@
-import { DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { DomUtil, DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { BaseAjax, SingleMixin } from '../autocomplete.js'
 import { translate } from '../i18n.js'
 
@@ -13,11 +13,17 @@ const BOUNDARY_TYPES = {
 
 const TEMPLATE = `
   <h3>GeoDataMine</h3>
-  <select name="theme"></select>
+  <p>${translate('GeoDataMine: thematic data from OpenStreetMap')}.</p>
+  <select name="theme">
+    <option value="">${translate('Choose a theme')}</option>
+  </select>
   <label>
     <input type="checkbox" name="aspoint" />
-    ${translate('Convert all geometries to points')}
+    ${translate('Symplify all geometries to points')}
   </label>
+  <label id="boundary">
+  </label>
+  <button class="button">${translate('Choose this data')}</button>
 `
 
 class Autocomplete extends SingleMixin(BaseAjax) {
@@ -30,8 +36,9 @@ class Autocomplete extends SingleMixin(BaseAjax) {
 }
 
 export class Importer {
-  constructor(map, options) {
-    this.name = 'GeoDataMine'
+  constructor(map, options = {}) {
+    this.map = map
+    this.name = options.name || 'GeoDataMine'
     this.baseUrl = options?.url || 'https://geodatamine.fr'
   }
 
@@ -56,7 +63,8 @@ export class Importer {
       console.error(response)
     }
     const asPoint = container.querySelector('[name=aspoint]')
-    this.autocomplete = new Autocomplete(container, {
+    this.autocomplete = new Autocomplete(container.querySelector('#boundary'), {
+      placeholder: translate('Search admin boundary'),
       url: `${this.baseUrl}/boundaries/search?text={q}`,
       on_select: (choice) => {
         boundary = choice.item.value
@@ -64,12 +72,16 @@ export class Importer {
       },
     })
     const confirm = () => {
+      if (!boundary || !select.value) {
+        this.map.alert.open({content: translate('Please choose a theme and a boundary first.')})
+        return
+      }
       importer.url = `${this.baseUrl}/data/${select.value}/${boundary}?format=geojson&aspoint=${asPoint.checked}`
       importer.format = 'geojson'
       importer.layerName = `${boundaryName} — ${select.options[select.selectedIndex].textContent}`
       importer.dialog.close()
     }
-    L.DomUtil.createButton('', container, 'OK', confirm)
+    DomEvent.on(container.querySelector('button'), 'click', confirm)
 
     importer.dialog.open({
       content: container,