Add markers action to search results

2026-05-24 12:28:50 +02:00
parent f9daaefbdd
commit 487995366e
5 changed files with 141 additions and 93 deletions
--- a/webgis/js/controllers/search_controller.js
+++ b/webgis/js/controllers/search_controller.js
@@ -0,0 +1,122 @@
+import { Controller } from "@hotwired/stimulus";
+import { GisState } from "../state.js";
+import UI from "../ui.js";
+
+const html = String.raw;
+
+export default class extends Controller {
+    static targets = [
+        'search',
+        'results',
+        'clear',
+        'container',
+    ];
+    
+    /**
+     * 
+     * @param {Event} event 
+     */
+    async submitSearch(event) {
+        event.preventDefault();
+        const data = new FormData(event.target);
+        const body = {};
+
+        for (const entry of data.entries()) {
+            body[entry[0]] = entry[1];
+        }
+
+        const response = await fetch(`${GisState.apiUrl}/search?` + new URLSearchParams(body));
+        const results = await response.json(); 
+
+        this.containerTarget.classList.remove('is-hidden');
+        this.#injectResults(results);
+        if (results.length) this.#filterMap(results);
+    }
+
+    clearSearch() {
+        const map = GisState.map;
+
+        // Restore layer groups in map
+        for (const key of Object.keys(GisState.layers)) {
+            map.addLayer(GisState.layers[key]);
+        }
+
+        // Empty result set
+        this.resultsTarget.innerHTML = '';
+        this.containerTarget.classList.add('is-hidden');
+    }
+
+    #injectResults(results) {
+        /**
+         * @type {HTMLOutputElement} output
+         */
+        const output = this.resultsTarget;
+        output.innerHTML = '';
+
+        if (results.length === 0) {
+            output.innerHTML = html`
+                <p class="has-background-white-bis p-4 mt-0 has-text-centered">
+                    Nessun risultato trovato per i parametri di ricerca
+                </p>
+            `;
+        }
+
+        const sites = GisState.markers.sites;
+
+        for (const result of results) {
+            let coordinates = ''
+            for (let key of Object.keys(sites)) {
+                if (sites[key].options.data.label === result.label) {
+                    coordinates = key;
+                }
+            }
+
+            // TODO The group value should be dynamic!!
+            const item = html`
+                <tr>
+                    <td class="pt-4">${result.label}</td>
+                    <td>
+                        <button class="button is-link"
+                            data-controller="marker"
+                            data-action="marker#go"
+                            data-marker-coords-value="${coordinates}"
+                            data-marker-group-value="sites">
+                            Vai al sito
+                            <span class="ml-1 icon">
+                                <i class="fa fa-chevron-right"></i>
+                            </span>
+                        </button>
+                    </td>
+                </tr>
+            `;
+
+            output.innerHTML += item;
+        }
+    }
+    /**
+     * 
+     * @param {Array<Object>} results 
+     */
+    #filterMap(results) {
+        const map = GisState.map;
+        const labels = [];
+        results.forEach(r => labels.push(r.label));
+
+        // Remove all layer groups first
+        for (const key of Object.keys(GisState.layers)) {
+            map.removeLayer(GisState.layers[key]);
+        }
+
+        const sites = GisState.markers.sites;
+
+        for (let key of Object.keys(sites)) {
+            // If map has layers from previous search results...
+            map.removeLayer(sites[key]);
+            for (const label of labels) {
+                if (sites[key].options.data.label === label) {
+                    map.addLayer(sites[key]);
+                }
+            }
+        }
+    }
+}