80 lines
1.9 KiB
JavaScript
80 lines
1.9 KiB
JavaScript
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,
|
|
'group': String,
|
|
'id': String,
|
|
};
|
|
|
|
static targets = ['search', 'results'];
|
|
|
|
/**
|
|
*
|
|
* @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("https://caprigis-api.ddev.site:33001/search?" + new URLSearchParams(body));
|
|
const results = await response.json();
|
|
|
|
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]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|