Save

salony/widget.js

@@ -88,8 +88,10 @@
 				console.log('Initial city:', initialCity)
 
 				if (initialCity) {
+					const type = detectFilterType(initialCity)
+
 					document.getElementById('tinp').value = initialCity
-					filterList(initialCity)
+					filterList(initialCity, type)
 					activateFirstResult()
 				}
 			}, 200)
@@ -228,29 +230,68 @@
 	}
 
 	// ---------------- SEARCH ----------------
+	// function buildSuggestList() {
+	// 	const ul = document.querySelector('.suggestList')
+
+	// 	places.forEach((p) => {
+	// 		const li = document.createElement('li')
+	// 		li.textContent = p.name
+	// 		li.onclick = () => {
+	// 			document.getElementById('tinp').value = p.name
+	// 			filterList(p.name)
+	// 		}
+	// 		ul.appendChild(li)
+	// 	})
+	// }
 	function buildSuggestList() {
 		const ul = document.querySelector('.suggestList')
+		ul.innerHTML = '<li class="firstSuggest"></li>'
 
+		// 1️⃣ WOJEWÓDZTWA
+		getUniqueWojewodztwa().forEach((woj) => {
+			const li = document.createElement('li')
+			li.textContent = woj
+			li.dataset.type = 'woj'
+			li.onclick = () => {
+				document.getElementById('tinp').value = woj
+				filterList(woj, 'woj')
+			}
+			ul.appendChild(li)
+		})
+
+		// 2️⃣ MIASTA
 		places.forEach((p) => {
 			const li = document.createElement('li')
 			li.textContent = p.name
+			li.dataset.type = 'city'
 			li.onclick = () => {
 				document.getElementById('tinp').value = p.name
-				filterList(p.name)
+				filterList(p.name, 'city')
 			}
 			ul.appendChild(li)
 		})
 	}
 
-	function filterList(val) {
+	function filterList(val, type = 'city') {
 		const query = prepareToCompare(val)
+		let result = []
 
-		let result = places.filter((p) => prepareToCompare(p.name) === query)
-		if (!result.length) {
-			result = places.filter((p) => prepareToCompare(p.name).includes(query))
+		if (type === 'woj') {
+			result = places.filter((p) => prepareToCompare(p.woj) === query)
+		} else {
+			// exact city
+			result = places.filter((p) => prepareToCompare(p.name) === query)
+
+			// fallback (np. wpisywanie)
+			if (!result.length) {
+				result = places.filter((p) => prepareToCompare(p.name).includes(query))
+			}
 		}
 
 		renderList(result)
+
+		// 🗺️ CENTRUJ MAPĘ (WOJ + MIASTO)
+		fitMapToPlaces(result)
 	}
 
 	function filterAvailablePlaces(actualVal) {
@@ -308,6 +349,47 @@
 		if (marker) highlightMarker(marker)
 	}
 
+	function getUniqueWojewodztwa() {
+		const set = new Set()
+		places.forEach((p) => {
+			if (p.woj) set.add(p.woj)
+		})
+		return Array.from(set).sort()
+	}
+
+	function detectFilterType(val) {
+		const q = prepareToCompare(val)
+		const isWoj = places.some((p) => prepareToCompare(p.woj) === q)
+		return isWoj ? 'woj' : 'city'
+	}
+
+	function fitMapToPlaces(placesArr) {
+		if (!placesArr || !placesArr.length) return
+
+		const bounds = new google.maps.LatLngBounds()
+		let hasPoints = false
+
+		placesArr.forEach((place) => {
+			place.shops.forEach((shop) => {
+				if (shop.lat && shop.lng) {
+					bounds.extend({
+						lat: +shop.lat,
+						lng: +shop.lng,
+					})
+					hasPoints = true
+				}
+			})
+		})
+
+		if (hasPoints) {
+			map.fitBounds(bounds)
+
+			setTimeout(() => {
+				if (map.getZoom() > 12) map.setZoom(12)
+			}, 0)
+		}
+	}
+
 	// ---------------- STYLES ----------------
 
 	function injectStyles() {
@@ -508,6 +590,19 @@
                 font-weight: 300;
                 font-size: 14px;
             }
+
+            @media(max-width: 978px) {
+                #salony-widget{
+                    flex-direction: column;
+                    row-gap: 20px;
+                }
+                #salony-widget .mapResults{
+                    padding-left: 16px;
+                }
+                #salony-widget .mapFull #map{
+                    min-height: 40vw;
+                }
+            }
         `
 		document.head.appendChild(style)
 	}