Search results handling (WIP)

webgis/index.html

@@ -139,6 +139,7 @@
                     </div>
                 </div>
             </form>
+            <output data-form-target="results"></output>
         </div>
         <div class="menu-overlay column is-hidden is-4 is-4-desktop is-5-mobile is-pulled-right is-overlay has-background-white-ter"
             data-menu-target="menu" data-controller="layer">

webgis/js/controllers/form_controller.js

@@ -2,6 +2,8 @@ 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 values = {
         'coords': String,
@@ -9,7 +11,7 @@ export default class extends Controller {
         'id': String,
     };
 
-    static targets = ['search'];
+    static targets = ['search', 'results'];
     
     /**
      * 
@@ -25,7 +27,53 @@ export default class extends Controller {
         }
 
         const response = await fetch("https://caprigis-api.ddev.site:33001/search?" + new URLSearchParams(body));
+        const results = await response.json(); 
 
-        console.debug(await response.json(), body);
+        console.debug(results);
+
+        this.#injectResults(results);
+        this.#filterMap(results);
+    }
+
+    #injectResults(results) {
+        /**
+         * @type {HTMLOutputElement} output
+         */
+        const output = this.resultsTarget;
+        output.innerHTML = '';
+
+        for (const result of results) {
+            const item = html`
+                <p class="p-1">${result.label}</p>
+            `;
+
+            output.innerHTML += item;
+        }
+    }
+
+    /**
+     * 
+     * @param {Array<Object>} results 
+     */
+    #filterMap(results) {
+        const map = GisState.map;
+        const labels = [];
+        results.forEach(r => labels.push(r.label));
+
+        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]);
+                }
+            }
+        }
     }
 }

webgis/js/index.js

@@ -32,9 +32,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     // TEMP!!
     const sites = GisState.markers.sites;
     for (let key of Object.keys(sites)) {
-        if (sites[key].options.data.id === 16) {
+        //console.debug(sites[key].options.data);
-            console.debug('I found it!', key);
-        }
     }
 });