Change widget

salony/widget.js

@@ -3,6 +3,8 @@
 
 	const API_URL = 'https://serwer1852487.home.pl/Geo/api/salony/'
 	const root = document.getElementById('salony-widget')
+	const initialCity = root.dataset.city || null
+
 	if (!root) return
 
 	root.innerHTML = `
@@ -70,13 +72,26 @@
 		.then((r) => r.json())
 		.then((data) => {
 			places = data
-			console.log(places)
+
+			// setTimeout(() => {
+			// 	initMap()
+			// 	buildSuggestList()
+			// 	// renderList(data)
+			// 	renderMarkers(data)
+			// }, 200)
 
 			setTimeout(() => {
 				initMap()
 				buildSuggestList()
-				// renderList(data)
 				renderMarkers(data)
+
+				console.log('Initial city:', initialCity)
+
+				if (initialCity) {
+					document.getElementById('tinp').value = initialCity
+					filterList(initialCity)
+					activateFirstResult()
+				}
 			}, 200)
 		})
 
@@ -228,9 +243,14 @@
 	}
 
 	function filterList(val) {
-		renderList(
-			places.filter((p) => p.name.toLowerCase().includes(val.toLowerCase()))
-		)
+		const query = prepareToCompare(val)
+
+		let result = places.filter((p) => prepareToCompare(p.name) === query)
+		if (!result.length) {
+			result = places.filter((p) => prepareToCompare(p.name).includes(query))
+		}
+
+		renderList(result)
 	}
 
 	function filterAvailablePlaces(actualVal) {
@@ -270,6 +290,24 @@
 		filterList(document.getElementById('tinp').value)
 	}
 
+	// ---------------- HELPERS ----------------
+	function activateFirstResult() {
+		const first = document.querySelector('#shopList .place:not(.forCloning)')
+		if (!first) return
+
+		first.classList.add('active')
+		first.querySelector('input').checked = true
+
+		const lat = +first.querySelector('.lat').textContent
+		const lng = +first.querySelector('.lng').textContent
+
+		map.setZoom(16)
+		map.panTo({ lat, lng })
+
+		const marker = markers.find((m) => m.shopLat === lat && m.shopLng === lng)
+		if (marker) highlightMarker(marker)
+	}
+
 	// ---------------- STYLES ----------------
 
 	function injectStyles() {