52 lines
1.9 KiB
JavaScript
52 lines
1.9 KiB
JavaScript
import { fetchLocations } from './api.js';
|
|
|
|
let element_locations_search = document.querySelector("#locations-search");
|
|
let element_query = document.querySelector("#locations-search-query");
|
|
let element_response = document.querySelector("#locations-search-response");
|
|
|
|
export function setupLocationsSearch() {
|
|
element_query.addEventListener("change", (event) => {
|
|
element_response.innerText = "Loading…";
|
|
fetchLocations(event.target.value).then(result => {
|
|
window.dataStore.locations.rememberAll(result);
|
|
element_response.innerText = "";
|
|
result.forEach(location => {
|
|
let location_element = createLocationElement(location);
|
|
element_response.appendChild(location_element);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function createLocationElement(location) {
|
|
let location_element = document.createElement("div");
|
|
location_element.innerText = location.name;
|
|
location_element.dataset.locationId = location.id;
|
|
|
|
location_element.addEventListener("click", event => {
|
|
window.dataStore.recent_locations.remember(event.target.dataset.locationId);
|
|
element_locations_search.locationSelectedCallback(event.target.innerText, event.target.dataset.locationId);
|
|
element_locations_search.style.display = "none";
|
|
});
|
|
|
|
return location_element;
|
|
}
|
|
|
|
export function attachLocationsSearch(search_element) {
|
|
search_element.addEventListener("click", event => {
|
|
element_locations_search.locationSelectedCallback = (location_name, location_id) => {
|
|
search_element.value = location_name;
|
|
search_element.dataset.locationId = location_id;
|
|
};
|
|
element_query.value = "";
|
|
element_response.innerText = "";
|
|
let locations = window.dataStore.locations.data;
|
|
for (let location_id of window.dataStore.recent_locations.data) {
|
|
let location = locations[location_id];
|
|
let el = createLocationElement(location);
|
|
element_response.appendChild(el);
|
|
}
|
|
element_locations_search.style.display = "block";
|
|
});
|
|
}
|