149 lines
4.4 KiB
JavaScript
149 lines
4.4 KiB
JavaScript
import { Controller } from "@hotwired/stimulus";
|
|
import { GisState } from "../state.js";
|
|
import UI from "../ui.js";
|
|
import { INIT_ZOOM } from "../gis.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 = {};
|
|
const map = GisState.map;
|
|
const techs = GisState.layers.buildingTechs;
|
|
const techsMarkers = GisState.markers.buildingTechs;
|
|
|
|
// Reset search for building techs...
|
|
for (const key of Object.keys(techsMarkers)) {
|
|
map.removeLayer(techsMarkers[key]);
|
|
}
|
|
|
|
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) {
|
|
// Reset zoom level after successful search
|
|
map.setZoom(INIT_ZOOM);
|
|
this.#filterMap(results);
|
|
|
|
console.debug(results);
|
|
|
|
// Should technique always be shown after a search?
|
|
for (const key of Object.keys(techsMarkers)) {
|
|
for (const record of results) {
|
|
// Adjust for non-site records!!
|
|
if (techsMarkers[key].options.site === record.label)
|
|
map.addLayer(techsMarkers[key]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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');
|
|
// Reset map zoom
|
|
map.setZoom(INIT_ZOOM);
|
|
}
|
|
|
|
#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
|
|
<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]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|