Improve map

2026-01-31 12:49:56 +00:00 · 2026-01-31 12:49:56 +00:00 · 51967fa880
commit 51967fa880
parent 400f733956
7 changed files with 794 additions and 353 deletions
--- a/frontend/src/components/POIPane.tsx
+++ b/frontend/src/components/POIPane.tsx
@ -0,0 +1,140 @@
+import { useState, useRef, useEffect } from 'react';
+import { Label } from './ui/label';
+
+interface POIPaneProps {
+  categories: string[];
+  selectedCategories: Set<string>;
+  onCategoriesChange: (categories: Set<string>) => void;
+  poiCount: number;
+}
+
+export default function POIPane({
+  categories,
+  selectedCategories,
+  onCategoriesChange,
+  poiCount,
+}: POIPaneProps) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setDropdownOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  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(categories));
+  };
+
+  const selectNone = () => {
+    onCategoriesChange(new Set());
+  };
+
+  const filteredCategories = categories.filter((cat) =>
+    cat.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const selectedCount = selectedCategories.size;
+
+  return (
+    <div className="w-72 p-4 bg-white shadow-lg space-y-4 overflow-y-auto max-h-screen">
+      <h2 className="text-xl font-bold">Points of Interest</h2>
+
+      <div className="space-y-2" ref={dropdownRef}>
+        <Label>Categories</Label>
+        <button
+          onClick={() => setDropdownOpen(!dropdownOpen)}
+          className="w-full flex items-center justify-between px-3 py-2 text-sm border border-slate-300 rounded hover:border-slate-400 bg-white"
+        >
+          <span className="truncate text-left">
+            {selectedCount === 0
+              ? 'Select categories...'
+              : selectedCount === categories.length
+                ? 'All categories'
+                : `${selectedCount} selected`}
+          </span>
+          <svg
+            className={`w-4 h-4 ml-2 flex-shrink-0 transition-transform ${dropdownOpen ? 'rotate-180' : ''}`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+
+        {dropdownOpen && (
+          <div className="border border-slate-300 rounded shadow-lg bg-white">
+            <div className="flex gap-2 px-3 py-2 border-b border-slate-200">
+              <button onClick={selectAll} className="text-xs text-blue-600 hover:text-blue-800">
+                All
+              </button>
+              <span className="text-xs text-slate-300">|</span>
+              <button onClick={selectNone} className="text-xs text-blue-600 hover:text-blue-800">
+                None
+              </button>
+            </div>
+            <div className="px-3 py-2 border-b border-slate-200">
+              <input
+                type="text"
+                placeholder="Search categories..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full px-2 py-1 text-sm border border-slate-300 rounded"
+              />
+            </div>
+            <div className="max-h-96 overflow-y-auto py-1">
+              {filteredCategories.map((category) => (
+                <label
+                  key={category}
+                  className="flex items-center gap-2 px-3 py-1.5 hover:bg-slate-50 cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    checked={selectedCategories.has(category)}
+                    onChange={() => toggleCategory(category)}
+                    className="rounded"
+                  />
+                  <span className="text-sm flex-1">{category}</span>
+                </label>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {selectedCount > 0 && (
+        <div className="p-3 bg-blue-50 rounded text-sm">
+          <div className="font-medium text-blue-900">
+            {poiCount.toLocaleString()} POI{poiCount !== 1 ? 's' : ''} visible
+          </div>
+          <div className="text-xs text-blue-700 mt-1">
+            {selectedCount} categor{selectedCount !== 1 ? 'ies' : 'y'} selected
+          </div>
+        </div>
+      )}
+
+      <div className="p-3 bg-slate-100 rounded text-xs text-slate-600">
+        <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>
+  );
+}