Init project

web/locations-search.js

@@ -0,0 +1,36 @@
+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 => {
+			element_response.innerText = "";
+			result.forEach(lr => {
+				let location_element = document.createElement("div");
+				location_element.innerText = lr.name;
+				location_element.dataset.locationId = lr.id;
+
+				location_element.addEventListener("click", event => {
+					console.log(event.target.dataset.locationId);
+					element_locations_search.locationSelectedCallback(event.target.innerText, event.target.dataset.locationId);
+					element_locations_search.style.display = "none";
+				});
+				element_response.appendChild(location_element);
+			});
+		});
+	});
+}
+
+export function attachLocationsSearch(search_element) {
+	search_element.addEventListener("click", event => {
+		element_locations_search.locationSelectedCallback = (location_name, location_id) => {
+			search_element.innerText = location_name;
+			search_element.dataset.locationId = location_id;
+		};
+		element_locations_search.style.display = "block";
+	});
+}