import type { FeatureMeta, FeatureFilters, ViewState } from '../types'; import { TRANSPORT_MODES, type TransportMode, type TravelTimeEntry, type TravelTimeInitial, } from '../hooks/useTravelTime'; function parseFilters(params: URLSearchParams): FeatureFilters | undefined { const filterParams = params.getAll('filter'); if (filterParams.length === 0) return undefined; const filters: FeatureFilters = {}; for (const entry of filterParams) { const colonIdx = entry.indexOf(':'); if (colonIdx === -1) continue; const name = entry.substring(0, colonIdx); const rest = entry.substring(colonIdx + 1); if (rest.includes(':')) { const [minStr, maxStr] = rest.split(':'); const min = Number(minStr); const max = Number(maxStr); if (!isNaN(min) && !isNaN(max)) { filters[name] = [min, max]; } } else if (rest.includes('|')) { filters[name] = rest.split('|'); } else { filters[name] = [rest]; } } return Object.keys(filters).length > 0 ? filters : undefined; } export function parseUrlState(): { viewState?: ViewState; filters?: FeatureFilters; poiCategories?: Set; tab?: 'properties' | 'area'; travelTime?: TravelTimeInitial; } { const params = new URLSearchParams(window.location.search); const result: ReturnType = {}; // View state: separate lat/lon/zoom params const lat = params.get('lat'); const lon = params.get('lon'); const zoom = params.get('zoom'); if (lat && lon && zoom) { const latN = Number(lat); const lonN = Number(lon); const zoomN = Number(zoom); if (!isNaN(latN) && !isNaN(lonN) && !isNaN(zoomN)) { result.viewState = { latitude: latN, longitude: lonN, zoom: zoomN, pitch: 0 }; } } // Filters: repeated `filter` params result.filters = parseFilters(params); // POI categories: repeated `poi` params const poiParams = params.getAll('poi'); if (poiParams.length > 0) { result.poiCategories = new Set(poiParams.filter(Boolean)); } // Tab: full name const tab = params.get('tab'); if (tab === 'properties' || tab === 'area') { result.tab = tab; } // Travel time: repeated `tt` params // Format: mode:slug:label or mode:slug:label:min:max const ttParams = params.getAll('tt'); if (ttParams.length > 0) { const entries: TravelTimeEntry[] = []; for (const tt of ttParams) { const parts = tt.split(':'); if (parts.length < 3) continue; const mode = parts[0] as TransportMode; if (!TRANSPORT_MODES.includes(mode)) continue; const slug = parts[1]; const label = decodeURIComponent(parts[2]); let timeRange: [number, number] | null = null; if (parts.length >= 5) { const min = Number(parts[3]); const max = Number(parts[4]); if (!isNaN(min) && !isNaN(max)) { timeRange = [min, max]; } } entries.push({ mode, slug, label, timeRange }); } if (entries.length > 0) { result.travelTime = { entries }; } } return result; } export function stateToParams( viewState: { latitude: number; longitude: number; zoom: number } | null, filters: FeatureFilters, features: FeatureMeta[], selectedPOICategories: Set, rightPaneTab: 'properties' | 'area', travelTimeEntries?: TravelTimeEntry[] ): URLSearchParams { const params = new URLSearchParams(); if (viewState) { params.set('lat', viewState.latitude.toFixed(4)); params.set('lon', viewState.longitude.toFixed(4)); params.set('zoom', viewState.zoom.toFixed(1)); } for (const [name, value] of Object.entries(filters)) { const meta = features.find((f) => f.name === name); if (meta?.type === 'enum') { params.append('filter', `${name}:${(value as string[]).join('|')}`); } else { const [min, max] = value as [number, number]; params.append('filter', `${name}:${min}:${max}`); } } for (const category of selectedPOICategories) { params.append('poi', category); } if (rightPaneTab === 'properties') { params.set('tab', 'properties'); } // Travel time: repeated `tt` params if (travelTimeEntries) { for (const entry of travelTimeEntries) { if (!entry.slug) continue; let val = `${entry.mode}:${entry.slug}:${encodeURIComponent(entry.label)}`; if (entry.timeRange) { val += `:${entry.timeRange[0]}:${entry.timeRange[1]}`; } params.append('tt', val); } } return params; } export function summarizeParams(queryString: string): string { const params = new URLSearchParams(queryString); const parts: string[] = []; const filterParams = params.getAll('filter'); if (filterParams.length > 0) { const filterNames = filterParams .map((entry) => { const colonIdx = entry.indexOf(':'); return colonIdx > 0 ? entry.substring(0, colonIdx) : entry; }) .filter(Boolean); if (filterNames.length > 0) { parts.push( filterNames.length <= 2 ? filterNames.join(', ') : `${filterNames.length} filters` ); } } const poiParams = params.getAll('poi'); if (poiParams.length > 0) { const count = poiParams.filter(Boolean).length; if (count > 0) { parts.push(`${count} POI ${count === 1 ? 'category' : 'categories'}`); } } return parts.length > 0 ? parts.join(' + ') : 'No filters'; }