473 lines
21 KiB
TypeScript
473 lines
21 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents, Tooltip } from 'react-leaflet';
|
|
import _MarkerClusterGroup from 'react-leaflet-cluster';
|
|
const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerClusterGroup;
|
|
import L from 'leaflet';
|
|
import 'leaflet/dist/leaflet.css';
|
|
import { useTourStore } from '@/store/useTourStore';
|
|
import { X, Navigation, Image as ImageIcon, LogOut, Settings, Edit2, Trash2, Share2, Filter, Tag as TagIcon, MapPin, Loader2 } from 'lucide-react';
|
|
import { UserManagementModal } from '@/components/UserManagementModal';
|
|
import { useNotification } from '@/hooks/useNotification';
|
|
import { CreateTourModal } from '../components/CreateTourModal';
|
|
|
|
// Fix lỗi icon mặc định của Leaflet
|
|
const DefaultIcon = L.icon({
|
|
iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
|
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
});
|
|
L.Marker.prototype.options.icon = DefaultIcon;
|
|
|
|
// Component Helper để cập nhật tâm bản đồ khi vị trí người dùng thay đổi
|
|
function RecenterMap({ position }: { position: [number, number] }) {
|
|
const map = useMap();
|
|
useEffect(() => {
|
|
map.setView(position, map.getZoom());
|
|
}, [position, map]);
|
|
return null;
|
|
}
|
|
|
|
// Component Helper để đóng menu khi tương tác với bản đồ
|
|
function MapEvents({ onMapAction }: { onMapAction: () => void }) {
|
|
useMapEvents({
|
|
click: () => onMapAction(),
|
|
movestart: onMapAction,
|
|
dragstart: onMapAction,
|
|
});
|
|
return null;
|
|
}
|
|
|
|
// Component Helper để theo dõi sự di chuyển của người dùng trên bản đồ
|
|
function MapTracker() {
|
|
const setMapCenter = useTourStore(state => state.setMapCenter);
|
|
useMapEvents({
|
|
moveend: (e) => {
|
|
const map = e.target;
|
|
const center = map.getCenter();
|
|
const zoom = map.getZoom();
|
|
const coords: [number, number] = [center.lat, center.lng];
|
|
|
|
setMapCenter(coords);
|
|
// Lưu vị trí và mức zoom vào localStorage để sử dụng cho lần sau
|
|
localStorage.setItem('map_view_state', JSON.stringify({ center: coords, zoom }));
|
|
},
|
|
});
|
|
return null;
|
|
}
|
|
|
|
export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: () => void, onLogout?: () => void, user?: any, onViewTour: (id: string) => void }) => {
|
|
// Tối ưu hóa việc lấy dữ liệu từ store bằng selectors để tránh re-render thừa
|
|
const publicTours = useTourStore(state => state.publicTours);
|
|
const fetchPublicTours = useTourStore(state => state.fetchPublicTours);
|
|
const fetchTour = useTourStore(state => state.fetchTour);
|
|
const setMapCenter = useTourStore(state => state.setMapCenter);
|
|
|
|
const notify = useNotification();
|
|
|
|
// Khởi tạo vị trí từ localStorage nếu có, nếu không dùng mặc định (TP.HCM)
|
|
const [initialViewState] = useState(() => {
|
|
const saved = localStorage.getItem('map_view_state');
|
|
if (saved) {
|
|
try { return JSON.parse(saved); } catch (e) { return null; }
|
|
}
|
|
return null;
|
|
});
|
|
|
|
const [userPos, setUserPos] = useState<[number, number]>(initialViewState?.center || [10.7769, 106.7009]);
|
|
const [mapZoom] = useState(initialViewState?.zoom || 13);
|
|
const [isAdminModalOpen, setIsAdminModalOpen] = useState(false);
|
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
|
const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false); // State để điều khiển hiển thị dropdown lọc
|
|
const [searchQuery, setSearchQuery] = useState(''); // State cho giá trị tìm kiếm
|
|
const [suggestions, setSuggestions] = useState<{ type: 'tour' | 'location', id: string, name: string, lat?: number, lon?: number }[]>([]);
|
|
const [isSearchingSuggestions, setIsSearchingSuggestions] = useState(false);
|
|
|
|
// Logic xử lý gợi ý tự động khi người dùng gõ
|
|
useEffect(() => {
|
|
const timer = setTimeout(async () => {
|
|
if (searchQuery.trim().length < 2) {
|
|
setSuggestions([]);
|
|
return;
|
|
}
|
|
|
|
setIsSearchingSuggestions(true);
|
|
try {
|
|
// 1. Lọc các Tour hiện có khớp với từ khóa
|
|
const tourMatches = publicTours
|
|
.filter(t => t.title.toLowerCase().includes(searchQuery.toLowerCase()))
|
|
.map(t => ({ type: 'tour' as const, id: t.id, name: t.title }));
|
|
|
|
// 2. Tìm kiếm địa điểm thực tế trên bản đồ qua OpenStreetMap
|
|
const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchQuery)}&limit=5&addressdetails=1&accept-language=vi`);
|
|
const data = await res.json();
|
|
|
|
const locationMatches = data.map((item: any) => ({
|
|
type: 'location' as const,
|
|
id: item.place_id,
|
|
name: item.display_name,
|
|
lat: parseFloat(item.lat),
|
|
lon: parseFloat(item.lon)
|
|
}));
|
|
|
|
// Hợp nhất kết quả: Tour ưu tiên lên đầu
|
|
setSuggestions([...tourMatches, ...locationMatches]);
|
|
} catch (err) {
|
|
console.error("Lỗi tìm kiếm gợi ý:", err);
|
|
} finally {
|
|
setIsSearchingSuggestions(false);
|
|
}
|
|
}, 500); // Debounce 500ms để tránh gọi API quá nhiều
|
|
return () => clearTimeout(timer);
|
|
}, [searchQuery, publicTours]);
|
|
|
|
const [selectedFilterTag, setSelectedFilterTag] = useState<string | null>(null);
|
|
const availableTags = ['Văn hóa', 'Mạo hiểm', 'Nghỉ dưỡng', 'Thư giãn', 'Ẩm thực', 'Khám phá', 'Gia đình'];
|
|
|
|
// Tổng hợp nhãn từ danh sách Tour đang có để hiển thị bộ lọc đầy đủ (bao gồm cả nhãn tùy chỉnh)
|
|
const allFilterTags = React.useMemo(() => {
|
|
const tagsSet = new Set(availableTags);
|
|
publicTours.forEach(tour => {
|
|
tour.tags?.forEach((tag: string) => tagsSet.add(tag));
|
|
});
|
|
return Array.from(tagsSet);
|
|
}, [publicTours]);
|
|
|
|
// State cho menu chuột phải chia sẻ
|
|
const [shareMenu, setShareMenu] = useState<{ x: number, y: number, id: string, title: string, canShare: boolean } | null>(null);
|
|
|
|
const handleShare = (id: string, title: string) => {
|
|
const shareUrl = `${window.location.origin}?viewTour=${id}`;
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: title,
|
|
text: `Khám phá hành trình du lịch: ${title}`,
|
|
url: shareUrl,
|
|
}).catch(() => {});
|
|
} else if (navigator.clipboard && window.isSecureContext) {
|
|
navigator.clipboard.writeText(shareUrl).then(() => {
|
|
notify({
|
|
title: 'Thành công',
|
|
message: 'Đã sao chép liên kết chuyến đi vào bộ nhớ tạm. Bạn có thể gửi cho bạn bè ngay!',
|
|
type: 'success'
|
|
});
|
|
});
|
|
} else {
|
|
// Giải pháp dự phòng cho môi trường không có HTTPS
|
|
const textArea = document.createElement("textarea");
|
|
textArea.value = shareUrl;
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
try {
|
|
document.execCommand('copy');
|
|
notify({
|
|
title: 'Thành công',
|
|
message: 'Đã sao chép liên kết chuyến đi vào bộ nhớ tạm. Bạn có thể gửi cho bạn bè ngay!',
|
|
type: 'success'
|
|
});
|
|
} catch (err) {}
|
|
document.body.removeChild(textArea);
|
|
}
|
|
setShareMenu(null);
|
|
};
|
|
|
|
const handleSelectSuggestion = (s: any) => {
|
|
if (s.type === 'tour') {
|
|
onViewTour(s.id);
|
|
} else if (s.lat && s.lon) {
|
|
const pos: [number, number] = [s.lat, s.lon];
|
|
setUserPos(pos);
|
|
setMapCenter(pos);
|
|
notify({
|
|
title: 'Tìm thấy địa điểm',
|
|
message: `Đã di chuyển bản đồ tới: ${s.name.split(',')[0]}`,
|
|
type: 'success'
|
|
});
|
|
}
|
|
setSuggestions([]);
|
|
setSearchQuery('');
|
|
};
|
|
|
|
const filteredTours = React.useMemo(() => {
|
|
if (!selectedFilterTag) return publicTours;
|
|
return publicTours.filter(tour => tour.tags?.includes(selectedFilterTag));
|
|
}, [publicTours, selectedFilterTag]);
|
|
|
|
useEffect(() => {
|
|
// Chỉ fetch dữ liệu khi người dùng đã đăng nhập và có token
|
|
if (user || localStorage.getItem('token')) {
|
|
fetchPublicTours();
|
|
}
|
|
|
|
// Nếu không có vị trí lưu từ trước, mới yêu cầu lấy vị trí hiện tại của thiết bị
|
|
if (!initialViewState) {
|
|
navigator.geolocation.getCurrentPosition(
|
|
(pos) => {
|
|
const posArray: [number, number] = [pos.coords.latitude, pos.coords.longitude];
|
|
setUserPos(posArray);
|
|
setMapCenter(posArray);
|
|
},
|
|
() => console.log("Không thể lấy vị trí người dùng")
|
|
);
|
|
} else {
|
|
// Cập nhật store để đồng bộ với vị trí khởi tạo từ cache
|
|
setMapCenter(initialViewState.center);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div className="h-screen w-full relative">
|
|
{/* Top Bar Container - Chứa tất cả các nút điều hướng phía trên */}
|
|
<div className="absolute top-4 left-4 right-4 z-[1002] flex items-center justify-between pointer-events-none">
|
|
{/* Nhóm bên trái: Quay lại và Thông tin vị trí */}
|
|
<div className="flex items-center gap-3 pointer-events-auto">
|
|
<button
|
|
onClick={onBack}
|
|
className="bg-white p-3 rounded-full shadow-xl hover:bg-gray-50 transition-all border border-gray-100"
|
|
title="Quay lại"
|
|
>
|
|
<X className="w-6 h-6 text-gray-800" />
|
|
</button>
|
|
|
|
{/* Nút lọc Tag và Dropdown */}
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsFilterDropdownOpen(prev => !prev)}
|
|
className="bg-white p-3 rounded-full shadow-xl hover:bg-gray-50 transition-all border border-gray-100 flex items-center justify-center"
|
|
title="Lọc theo loại"
|
|
>
|
|
<Filter className="w-6 h-6 text-gray-800" />
|
|
</button>
|
|
|
|
{/* Filter Dropdown Content */}
|
|
{isFilterDropdownOpen && (
|
|
<div className="absolute top-full left-0 mt-3 bg-white/90 backdrop-blur-md p-2 rounded-2xl shadow-xl border border-white/20 flex flex-col gap-2 max-w-[200px] z-[1003] animate-in slide-in-from-left-2 duration-200">
|
|
<div className="flex items-center gap-2 px-2 py-1 border-b border-gray-100 mb-1">
|
|
<Filter className="w-3.5 h-3.5 text-blue-600" />
|
|
<span className="text-[11px] font-black uppercase text-gray-500 tracking-wider">Lọc theo loại</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5"> {/* Hiển thị tag theo chiều dọc */}
|
|
<button
|
|
onClick={() => { setSelectedFilterTag(null); setIsFilterDropdownOpen(false); }}
|
|
className={`px-2.5 py-1 rounded-lg text-[10px] font-bold transition-all ${!selectedFilterTag ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'}`}
|
|
>
|
|
Tất cả
|
|
</button>
|
|
{allFilterTags.map(tag => (
|
|
<button
|
|
key={tag}
|
|
onClick={() => { setSelectedFilterTag(tag === selectedFilterTag ? null : tag); setIsFilterDropdownOpen(false); }}
|
|
className={`px-2.5 py-1 rounded-lg text-[10px] font-bold transition-all ${selectedFilterTag === tag ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'}`}
|
|
>
|
|
{tag}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Search Box - Thay thế div "Khám phá khu vực" */}
|
|
<div className="relative flex items-center bg-white/90 backdrop-blur-md rounded-2xl shadow-xl border border-white/20 flex-1 max-w-xs sm:max-w-md pointer-events-auto hidden sm:flex px-4 py-3">
|
|
<Navigation className="w-4 h-4 text-blue-600 mr-2 flex-shrink-0" />
|
|
<input
|
|
type="text"
|
|
placeholder="Tìm kiếm địa điểm, tour..."
|
|
className="flex-1 bg-transparent outline-none text-gray-800 text-sm font-medium"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
{isSearchingSuggestions && <Loader2 className="w-4 h-4 animate-spin text-blue-500 mr-2" />}
|
|
{searchQuery && (
|
|
<button onClick={() => { setSearchQuery(''); setSuggestions([]); }} className="p-1 text-gray-400 hover:text-gray-600 rounded-full">
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
|
|
{/* Dropdown danh sách gợi ý */}
|
|
{suggestions.length > 0 && (
|
|
<div className="absolute top-full left-0 right-0 mt-3 bg-white/95 backdrop-blur-md rounded-2xl shadow-2xl border border-white/20 overflow-hidden z-[1003] animate-in slide-in-from-top-2 duration-200">
|
|
{suggestions.map((s, idx) => (
|
|
<button
|
|
key={`${s.type}-${s.id}-${idx}`}
|
|
onClick={() => handleSelectSuggestion(s)}
|
|
className="w-full text-left px-4 py-3 hover:bg-blue-50 flex items-center gap-3 transition-colors border-b border-gray-50 last:border-0"
|
|
>
|
|
<div className={`p-2 rounded-xl flex-shrink-0 ${s.type === 'tour' ? 'bg-blue-50 text-blue-600' : 'bg-green-50 text-green-600'}`}>
|
|
{s.type === 'tour' ? <ImageIcon className="w-4 h-4" /> : <MapPin className="w-4 h-4" />}
|
|
</div>
|
|
<div className="flex flex-col min-w-0">
|
|
<span className="text-sm font-bold text-gray-800 truncate">{s.name}</span>
|
|
<span className="text-[10px] font-black uppercase text-gray-400 tracking-wider">
|
|
{s.type === 'tour' ? 'Chuyến đi của bạn' : 'Địa điểm trên bản đồ'}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nhóm bên phải: Các thao tác người dùng */}
|
|
<div className="flex items-center gap-2 pointer-events-auto">
|
|
{/* Nút tạo Tour mới */}
|
|
{user && (
|
|
<button
|
|
onClick={() => setIsCreateModalOpen(true)}
|
|
className="bg-green-600 p-3 md:px-4 md:py-3 rounded-2xl shadow-xl hover:bg-green-700 text-white transition-all flex items-center gap-2 font-bold"
|
|
title="Tạo Tour mới"
|
|
>
|
|
<Navigation className="w-5 h-5" />
|
|
<span className="hidden md:inline text-sm">Tạo Tour</span>
|
|
</button>
|
|
)}
|
|
|
|
{/* Nút quản lý người dùng cho Admin */}
|
|
{user?.isAdmin && (
|
|
<button
|
|
onClick={() => setIsAdminModalOpen(true)}
|
|
className="bg-blue-600 p-3 md:px-4 md:py-3 rounded-2xl shadow-xl hover:bg-blue-700 text-white transition-all flex items-center gap-2 font-bold"
|
|
title="Quản lý hệ thống"
|
|
>
|
|
<Settings className="w-5 h-5" />
|
|
<span className="hidden md:inline text-sm">Hệ thống</span>
|
|
</button>
|
|
)}
|
|
|
|
{/* Nút đăng xuất */}
|
|
{onLogout && (
|
|
<button
|
|
onClick={onLogout}
|
|
className="bg-white p-3 md:px-4 md:py-3 rounded-2xl shadow-xl hover:bg-red-50 hover:text-red-600 transition-all flex items-center gap-2 font-bold text-gray-700 border border-gray-100"
|
|
title="Đăng xuất"
|
|
>
|
|
<LogOut className="w-5 h-5" />
|
|
<span className="hidden md:inline text-sm">Rời đi</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<MapContainer
|
|
center={userPos}
|
|
zoom={mapZoom}
|
|
className="h-full w-full"
|
|
preferCanvas={true}
|
|
>
|
|
<TileLayer
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
attribution='© OpenStreetMap contributors'
|
|
/>
|
|
|
|
{/* Theo dõi di chuyển bản đồ */}
|
|
<MapTracker />
|
|
{/* Đóng menu và dropdown khi tương tác bản đồ */}
|
|
<MapEvents onMapAction={() => { setShareMenu(null); setSuggestions([]); setIsFilterDropdownOpen(false); }} />
|
|
|
|
{/* Tự động di chuyển bản đồ đến vị trí người dùng khi tìm thấy tọa độ */}
|
|
<RecenterMap position={userPos} />
|
|
|
|
<MarkerClusterGroup chunkedLoading>
|
|
{filteredTours.map((tour) => {
|
|
const startLoc = tour.legs?.[0]?.locations?.[0];
|
|
const tourImage = tour.photos?.[0]?.imageUrl || `https://picsum.photos/seed/${tour.id}/200/200`;
|
|
const markerPos = startLoc
|
|
? [startLoc.latitude, startLoc.longitude] as [number, number]
|
|
: userPos;
|
|
|
|
return (
|
|
<Marker
|
|
key={tour.id}
|
|
position={markerPos}
|
|
eventHandlers={{
|
|
click: () => onViewTour(tour.id),
|
|
contextmenu: (e) => {
|
|
// Kiểm tra quyền chia sẻ (OWNER, MANAGER, MEMBER)
|
|
const role = tour.participants?.[0]?.role;
|
|
const canShare = ['OWNER', 'MANAGER', 'MEMBER'].includes(role);
|
|
|
|
// Hiển thị menu tại vị trí chuột
|
|
setShareMenu({
|
|
x: e.containerPoint.x,
|
|
y: e.containerPoint.y,
|
|
id: tour.id,
|
|
title: tour.title,
|
|
canShare
|
|
});
|
|
}
|
|
}}
|
|
icon={L.divIcon({
|
|
className: 'custom-bubble',
|
|
html: `
|
|
<div class="relative group">
|
|
<div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
|
|
<img src="${tourImage}" class="w-full h-full object-cover" onerror="this.src='https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=100'"/>
|
|
</div>
|
|
<div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
|
|
S
|
|
</div>
|
|
</div>
|
|
`,
|
|
iconSize: [48, 48],
|
|
iconAnchor: [24, 24]
|
|
})}
|
|
>
|
|
<Tooltip direction="top" offset={[0, -20]} opacity={1}>
|
|
<div className="p-1 max-w-[180px]">
|
|
<div className="font-black text-blue-600 text-[11px] mb-0.5 uppercase tracking-tight truncate">{tour.title}</div>
|
|
{tour.tags && tour.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-1 mb-1">
|
|
{tour.tags.map((tag: string) => (
|
|
<span key={tag} className="px-1.5 py-0.5 bg-blue-50 text-blue-500 rounded text-[8px] font-bold border border-blue-100">{tag}</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
{tour.description && (
|
|
<div className="text-[10px] text-gray-500 line-clamp-2 leading-tight italic">
|
|
{tour.description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Tooltip>
|
|
</Marker>
|
|
);
|
|
})}
|
|
</MarkerClusterGroup>
|
|
</MapContainer>
|
|
|
|
{/* Context Menu Chia sẻ */}
|
|
{shareMenu && (
|
|
<div
|
|
className="absolute z-[2000] bg-white rounded-2xl shadow-2xl border border-gray-100 py-2 w-48 animate-in zoom-in-95 duration-200"
|
|
style={{ top: shareMenu.y, left: shareMenu.x }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{shareMenu.canShare ? (
|
|
<button
|
|
onClick={() => handleShare(shareMenu.id, shareMenu.title)}
|
|
className="w-full text-left px-4 py-2 hover:bg-blue-50 text-sm font-bold text-gray-700 flex items-center gap-2 transition-colors"
|
|
>
|
|
<Share2 className="w-4 h-4 text-blue-600" /> Sao chép liên kết
|
|
</button>
|
|
) : (
|
|
<div className="px-4 py-2 text-xs text-gray-400 italic">Bạn không có quyền chia sẻ tour này</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Admin Modal */}
|
|
<UserManagementModal isOpen={isAdminModalOpen} onClose={() => setIsAdminModalOpen(false)} />
|
|
|
|
{/* Create Tour Modal */}
|
|
<CreateTourModal
|
|
isOpen={isCreateModalOpen}
|
|
onClose={() => setIsCreateModalOpen(false)}
|
|
onSuccess={(tour) => {
|
|
fetchTour(tour.id);
|
|
onViewTour(tour.id);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}; |