fix: sửa lại hiển thị của các nút trên bản đồ
This commit is contained in:
@@ -362,6 +362,7 @@ export const TourDetailPage = ({
|
||||
const [searchResults, setSearchResults] = useState<any[]>([]);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const [locateTrigger, setLocateTrigger] = useState(0);
|
||||
const [isMapControlsOpen, setIsMapControlsOpen] = useState(false);
|
||||
const [isHeadingMode, setIsHeadingMode] = useState(false);
|
||||
const [mapRotation, setMapRotation] = useState(0);
|
||||
const [isRoutingLoading, setIsRoutingLoading] = useState(false);
|
||||
@@ -1437,55 +1438,92 @@ export const TourDetailPage = ({
|
||||
|
||||
{/* Overlay điều khiển trên bản đồ */}
|
||||
<div className="absolute top-4 left-4 z-[1001] flex flex-col gap-2">
|
||||
<div className="bg-white/90 backdrop-blur-md p-1.5 rounded-2xl shadow-xl border border-white flex flex-col gap-1.5 animate-in slide-in-from-left-2 duration-300">
|
||||
<button
|
||||
onClick={() => setTravelMode('driving')}
|
||||
className={`p-2.5 rounded-xl transition-all ${travelMode === 'driving' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
|
||||
title="Ô tô"
|
||||
>
|
||||
<Car className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTravelMode('bike')}
|
||||
className={`p-2.5 rounded-xl transition-all ${travelMode === 'bike' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
|
||||
title="Xe máy / Xe đạp"
|
||||
>
|
||||
<Bike className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTravelMode('foot')}
|
||||
className={`p-2.5 rounded-xl transition-all ${travelMode === 'foot' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
|
||||
title="Đi bộ"
|
||||
>
|
||||
<Footprints className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsMapControlsOpen(!isMapControlsOpen)}
|
||||
className="bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-xl border border-white text-blue-600 hover:bg-blue-50 transition-all active:scale-95 flex items-center justify-center"
|
||||
>
|
||||
{isMapControlsOpen ? (
|
||||
<X className="w-5 h-5 text-gray-400" />
|
||||
) : (
|
||||
travelMode === 'driving' ? <Car className="w-5 h-5" /> :
|
||||
travelMode === 'bike' ? <Bike className="w-5 h-5" /> :
|
||||
<Footprints className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Nút La bàn / Xoay bản đồ */}
|
||||
<button
|
||||
onClick={() => {
|
||||
if (mapRotation !== 0) {
|
||||
setMapRotation(0);
|
||||
setIsHeadingMode(false);
|
||||
} else {
|
||||
setIsHeadingMode(!isHeadingMode);
|
||||
}
|
||||
}}
|
||||
className={`p-2.5 rounded-xl transition-all border-t border-gray-100 mt-1 ${isHeadingMode ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
|
||||
title={isHeadingMode ? "Dừng xoay (Khóa hướng Bắc)" : "Tự động xoay theo hướng di chuyển"}
|
||||
>
|
||||
<Compass className="w-4 h-4 transition-transform duration-500" style={{ transform: `rotate(${mapRotation}deg)` }} />
|
||||
</button>
|
||||
{isMapControlsOpen && (
|
||||
<div className="bg-white/90 backdrop-blur-md p-1.5 rounded-2xl shadow-xl border border-white flex flex-col gap-1.5 animate-in slide-in-from-top-2 duration-300">
|
||||
<button
|
||||
onClick={() => setTravelMode('driving')}
|
||||
className={`p-2.5 rounded-xl transition-all ${travelMode === 'driving' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
|
||||
title="Ô tô"
|
||||
>
|
||||
<Car className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTravelMode('bike')}
|
||||
className={`p-2.5 rounded-xl transition-all ${travelMode === 'bike' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
|
||||
title="Xe máy / Xe đạp"
|
||||
>
|
||||
<Bike className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTravelMode('foot')}
|
||||
className={`p-2.5 rounded-xl transition-all ${travelMode === 'foot' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
|
||||
title="Đi bộ"
|
||||
>
|
||||
<Footprints className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* Nút Tìm tôi */}
|
||||
<button
|
||||
onClick={() => setLocateTrigger(prev => prev + 1)}
|
||||
disabled={!userLocation}
|
||||
className={`p-2.5 rounded-xl transition-all border-t border-gray-100 mt-1 ${!userLocation ? 'opacity-30 cursor-not-allowed' : 'text-blue-600 hover:bg-blue-50'}`}
|
||||
title="Vị trí của tôi"
|
||||
>
|
||||
<LocateFixed className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
{/* Nút La bàn / Xoay bản đồ */}
|
||||
<button
|
||||
onClick={() => {
|
||||
if (mapRotation !== 0) {
|
||||
setMapRotation(0);
|
||||
setIsHeadingMode(false);
|
||||
} else {
|
||||
setIsHeadingMode(!isHeadingMode);
|
||||
}
|
||||
}}
|
||||
className={`p-2.5 rounded-xl transition-all border-t border-gray-100 mt-1 ${isHeadingMode ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
|
||||
title={isHeadingMode ? "Dừng xoay (Khóa hướng Bắc)" : "Tự động xoay theo hướng di chuyển"}
|
||||
>
|
||||
<Compass className="w-4 h-4 transition-transform duration-500" style={{ transform: `rotate(${mapRotation}deg)` }} />
|
||||
</button>
|
||||
|
||||
{/* Nút Tìm tôi */}
|
||||
<button
|
||||
onClick={() => setLocateTrigger(prev => prev + 1)}
|
||||
disabled={!userLocation}
|
||||
className={`p-2.5 rounded-xl transition-all border-t border-gray-100 mt-1 ${!userLocation ? 'opacity-30 cursor-not-allowed' : 'text-blue-600 hover:bg-blue-50'}`}
|
||||
title="Vị trí của tôi"
|
||||
>
|
||||
<LocateFixed className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* Danh sách lộ trình rút gọn */}
|
||||
{routes.length > 0 && (
|
||||
<div className="pt-2 border-t border-gray-100 flex flex-col gap-1 min-w-[120px]">
|
||||
<div className="text-[9px] font-black text-gray-400 uppercase tracking-tighter px-1 mb-1">Lộ trình</div>
|
||||
<div className="flex flex-col gap-1 max-h-[160px] overflow-y-auto pr-1 custom-scrollbar">
|
||||
{routes.map((route, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setSelectedRouteIndex(idx)}
|
||||
className={`p-2 rounded-xl text-left transition-all border ${
|
||||
selectedRouteIndex === idx
|
||||
? 'bg-blue-600 text-white border-blue-600 shadow-sm'
|
||||
: 'bg-gray-50 text-gray-600 border-gray-100'
|
||||
}`}
|
||||
>
|
||||
<div className="text-[10px] font-bold">#{idx + 1} - {(route.distance / 1000).toFixed(1)} km</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Chỉ báo đang tìm đường */}
|
||||
{isRoutingLoading && (
|
||||
@@ -1495,37 +1533,6 @@ export const TourDetailPage = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Danh sách lựa chọn lộ trình đề xuất */}
|
||||
{routes.length > 0 && (
|
||||
<div className="bg-white/90 backdrop-blur-md p-2 rounded-2xl shadow-xl border border-white flex flex-col gap-1.5 animate-in slide-in-from-left-2 duration-300 min-w-[150px] max-w-[180px]">
|
||||
<div className="text-[10px] font-black text-gray-400 uppercase tracking-tighter px-1 mb-1">Lộ trình đề xuất</div>
|
||||
{routes.length === 1 && allLocations.length > 2 && (
|
||||
<div className="px-2 py-1 text-[9px] text-amber-600 bg-amber-50 rounded-lg font-medium leading-tight mb-1 border border-amber-100">
|
||||
Lưu ý: Dịch vụ bản đồ chỉ gợi ý đường đi khác khi lộ trình có đúng 2 điểm (Điểm đầu & Điểm cuối).
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-1.5 max-h-[160px] overflow-y-auto pr-1 custom-scrollbar">
|
||||
{routes.map((route, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setSelectedRouteIndex(idx)}
|
||||
className={`p-2 rounded-xl text-left transition-all border ${
|
||||
selectedRouteIndex === idx
|
||||
? 'bg-blue-600 text-white border-blue-600 shadow-md'
|
||||
: 'bg-gray-50 text-gray-600 border-gray-100 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
<div className="text-[10px] font-bold">Lựa chọn {idx + 1}</div>
|
||||
<div className={`text-[9px] font-medium leading-tight ${selectedRouteIndex === idx ? 'text-blue-100' : 'text-gray-400'}`}>
|
||||
{(route.distance / 1000).toFixed(1)} km • {Math.round(route.duration / 60)}p
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user