232 lines
8.8 KiB
TypeScript
232 lines
8.8 KiB
TypeScript
import { useState, useRef, useCallback } from 'react';
|
|
import type { POICategoryGroup } from '../../types';
|
|
import { useClickOutside } from '../../hooks/useClickOutside';
|
|
import InfoPopup from '../ui/InfoPopup';
|
|
import { SearchInput } from '../ui/SearchInput';
|
|
import { InfoIcon, ChevronIcon } from '../ui/icons';
|
|
import { IconButton } from '../ui/IconButton';
|
|
|
|
interface POIPaneProps {
|
|
groups: POICategoryGroup[];
|
|
selectedCategories: Set<string>;
|
|
onCategoriesChange: (categories: Set<string>) => void;
|
|
poiCount: number;
|
|
onNavigateToSource?: (slug: string) => void;
|
|
}
|
|
|
|
export default function POIPane({
|
|
groups,
|
|
selectedCategories,
|
|
onCategoriesChange,
|
|
poiCount,
|
|
onNavigateToSource,
|
|
}: POIPaneProps) {
|
|
const [dropdownOpen, setDropdownOpen] = useState(false);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
|
|
const [showInfo, setShowInfo] = useState(false);
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
|
|
useClickOutside(dropdownRef, () => setDropdownOpen(false));
|
|
|
|
const allCategories = groups.flatMap((g) => g.categories);
|
|
|
|
const toggleCategory = (category: string) => {
|
|
const newSet = new Set(selectedCategories);
|
|
if (newSet.has(category)) {
|
|
newSet.delete(category);
|
|
} else {
|
|
newSet.add(category);
|
|
}
|
|
onCategoriesChange(newSet);
|
|
};
|
|
|
|
const selectAll = () => {
|
|
onCategoriesChange(new Set(allCategories));
|
|
};
|
|
|
|
const selectNone = () => {
|
|
onCategoriesChange(new Set());
|
|
};
|
|
|
|
const toggleGroup = useCallback(
|
|
(groupName: string) => {
|
|
const group = groups.find((g) => g.name === groupName);
|
|
if (!group) return;
|
|
const allSelected = group.categories.every((c) => selectedCategories.has(c));
|
|
const newSet = new Set(selectedCategories);
|
|
if (allSelected) {
|
|
group.categories.forEach((c) => newSet.delete(c));
|
|
} else {
|
|
group.categories.forEach((c) => newSet.add(c));
|
|
}
|
|
onCategoriesChange(newSet);
|
|
},
|
|
[groups, selectedCategories, onCategoriesChange]
|
|
);
|
|
|
|
const toggleCollapse = (groupName: string) => {
|
|
setCollapsedGroups((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(groupName)) {
|
|
next.delete(groupName);
|
|
} else {
|
|
next.add(groupName);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const lowerSearch = searchTerm.toLowerCase();
|
|
|
|
const filteredGroups = groups
|
|
.map((group) => {
|
|
if (!searchTerm) return group;
|
|
const matchingCats = group.categories.filter((c) => c.toLowerCase().includes(lowerSearch));
|
|
const groupMatches = group.name.toLowerCase().includes(lowerSearch);
|
|
if (groupMatches) return group;
|
|
if (matchingCats.length === 0) return null;
|
|
return { ...group, categories: matchingCats };
|
|
})
|
|
.filter(Boolean) as POICategoryGroup[];
|
|
|
|
const selectedCount = selectedCategories.size;
|
|
|
|
return (
|
|
<div className="w-72 p-4 bg-white dark:bg-navy-950 shadow-lg space-y-4 overflow-y-auto max-h-screen">
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="text-xl font-bold dark:text-warm-100">Points of Interest</h2>
|
|
<IconButton onClick={() => setShowInfo(true)} title="Data source info">
|
|
<InfoIcon />
|
|
</IconButton>
|
|
</div>
|
|
|
|
{showInfo && (
|
|
<InfoPopup
|
|
title="Points of Interest"
|
|
onClose={() => setShowInfo(false)}
|
|
sourceLink={
|
|
onNavigateToSource
|
|
? {
|
|
label: 'View data source',
|
|
onClick: () => {
|
|
onNavigateToSource('osm-pois');
|
|
setShowInfo(false);
|
|
},
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
<p className="text-sm text-warm-700 dark:text-warm-300 mb-4 leading-relaxed">
|
|
Points of interest are sourced from OpenStreetMap via Geofabrik extracts. Categories
|
|
include public transport stops, shops, restaurants, healthcare facilities, leisure
|
|
venues, and more. Data is filtered and mapped to friendly names with exhaustive category
|
|
coverage.
|
|
</p>
|
|
</InfoPopup>
|
|
)}
|
|
|
|
<div className="space-y-2" ref={dropdownRef}>
|
|
<button
|
|
onClick={() => setDropdownOpen(!dropdownOpen)}
|
|
className="w-full flex items-center justify-between px-3 py-2 text-sm border border-warm-300 dark:border-navy-700 rounded hover:border-warm-400 bg-white dark:bg-navy-800 dark:text-warm-200"
|
|
>
|
|
<span className="truncate text-left">
|
|
{selectedCount === 0
|
|
? 'Select categories...'
|
|
: selectedCount === allCategories.length
|
|
? 'All categories'
|
|
: `${selectedCount} selected`}
|
|
</span>
|
|
<ChevronIcon
|
|
direction={dropdownOpen ? 'up' : 'down'}
|
|
className="w-4 h-4 ml-2 flex-shrink-0"
|
|
/>
|
|
</button>
|
|
|
|
{dropdownOpen && (
|
|
<div className="border border-warm-300 dark:border-navy-700 rounded shadow-lg bg-white dark:bg-navy-800">
|
|
<div className="px-3 py-2 border-b border-warm-200 dark:border-navy-700">
|
|
<SearchInput
|
|
value={searchTerm}
|
|
onChange={setSearchTerm}
|
|
placeholder="Search categories..."
|
|
/>
|
|
</div>
|
|
<div className="max-h-96 overflow-y-auto py-1">
|
|
{filteredGroups.map((group) => {
|
|
const groupSelected = group.categories.filter((c) =>
|
|
selectedCategories.has(c)
|
|
).length;
|
|
const allInGroupSelected = groupSelected === group.categories.length;
|
|
const someInGroupSelected = groupSelected > 0 && !allInGroupSelected;
|
|
const isCollapsed = collapsedGroups.has(group.name) && !searchTerm;
|
|
|
|
return (
|
|
<div key={group.name}>
|
|
<div className="flex items-center gap-1 px-3 py-1.5 bg-warm-50 dark:bg-navy-950 border-y border-warm-100 dark:border-navy-700">
|
|
<button
|
|
onClick={() => toggleCollapse(group.name)}
|
|
className={`p-0.5 text-warm-400 hover:text-warm-600 transition-transform ${isCollapsed ? '' : 'rotate-90'}`}
|
|
>
|
|
<ChevronIcon direction="right" className="w-3 h-3" />
|
|
</button>
|
|
<label className="flex items-center gap-2 flex-1 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={allInGroupSelected}
|
|
ref={(el) => {
|
|
if (el) el.indeterminate = someInGroupSelected;
|
|
}}
|
|
onChange={() => toggleGroup(group.name)}
|
|
className="rounded accent-teal-600"
|
|
/>
|
|
<span className="text-xs font-semibold text-warm-700 dark:text-warm-300">
|
|
{group.name}
|
|
</span>
|
|
</label>
|
|
<span className="text-xs text-warm-400">
|
|
{groupSelected}/{group.categories.length}
|
|
</span>
|
|
</div>
|
|
{!isCollapsed &&
|
|
group.categories.map((category) => (
|
|
<label
|
|
key={category}
|
|
className="flex items-center gap-2 px-3 pl-8 py-1.5 hover:bg-warm-50 dark:hover:bg-navy-700 cursor-pointer dark:text-warm-300"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedCategories.has(category)}
|
|
onChange={() => toggleCategory(category)}
|
|
className="rounded accent-teal-600"
|
|
/>
|
|
<span className="text-sm flex-1">{category}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{selectedCount > 0 && (
|
|
<div className="p-3 bg-teal-50 dark:bg-teal-900/30 rounded text-sm">
|
|
<div className="font-medium text-teal-900 dark:text-teal-300">
|
|
{poiCount.toLocaleString()} POI{poiCount !== 1 ? 's' : ''} visible
|
|
</div>
|
|
<div className="text-xs text-teal-700 dark:text-teal-400 mt-1">
|
|
{selectedCount} categor{selectedCount !== 1 ? 'ies' : 'y'} selected
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="p-3 bg-warm-100 dark:bg-navy-800 rounded text-xs text-warm-600 dark:text-warm-400">
|
|
<p>Select categories to display POIs on the map.</p>
|
|
<p className="mt-2">Zoom in for better visibility of individual locations.</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|