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 [searchResults, setSearchResults] = useState<any[]>([]);
|
||||||
const [isSearching, setIsSearching] = useState(false);
|
const [isSearching, setIsSearching] = useState(false);
|
||||||
const [locateTrigger, setLocateTrigger] = useState(0);
|
const [locateTrigger, setLocateTrigger] = useState(0);
|
||||||
|
const [isMapControlsOpen, setIsMapControlsOpen] = useState(false);
|
||||||
const [isHeadingMode, setIsHeadingMode] = useState(false);
|
const [isHeadingMode, setIsHeadingMode] = useState(false);
|
||||||
const [mapRotation, setMapRotation] = useState(0);
|
const [mapRotation, setMapRotation] = useState(0);
|
||||||
const [isRoutingLoading, setIsRoutingLoading] = useState(false);
|
const [isRoutingLoading, setIsRoutingLoading] = useState(false);
|
||||||
@@ -1437,55 +1438,92 @@ export const TourDetailPage = ({
|
|||||||
|
|
||||||
{/* Overlay điều khiển trên bản đồ */}
|
{/* 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="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
|
||||||
<button
|
onClick={() => setIsMapControlsOpen(!isMapControlsOpen)}
|
||||||
onClick={() => setTravelMode('driving')}
|
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"
|
||||||
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ô"
|
{isMapControlsOpen ? (
|
||||||
>
|
<X className="w-5 h-5 text-gray-400" />
|
||||||
<Car className="w-4 h-4" />
|
) : (
|
||||||
</button>
|
travelMode === 'driving' ? <Car className="w-5 h-5" /> :
|
||||||
<button
|
travelMode === 'bike' ? <Bike className="w-5 h-5" /> :
|
||||||
onClick={() => setTravelMode('bike')}
|
<Footprints className="w-5 h-5" />
|
||||||
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"
|
</button>
|
||||||
>
|
|
||||||
<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 La bàn / Xoay bản đồ */}
|
{isMapControlsOpen && (
|
||||||
<button
|
<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">
|
||||||
onClick={() => {
|
<button
|
||||||
if (mapRotation !== 0) {
|
onClick={() => setTravelMode('driving')}
|
||||||
setMapRotation(0);
|
className={`p-2.5 rounded-xl transition-all ${travelMode === 'driving' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
|
||||||
setIsHeadingMode(false);
|
title="Ô tô"
|
||||||
} else {
|
>
|
||||||
setIsHeadingMode(!isHeadingMode);
|
<Car className="w-4 h-4" />
|
||||||
}
|
</button>
|
||||||
}}
|
<button
|
||||||
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'}`}
|
onClick={() => setTravelMode('bike')}
|
||||||
title={isHeadingMode ? "Dừng xoay (Khóa hướng Bắc)" : "Tự động xoay theo hướng di chuyển"}
|
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"
|
||||||
<Compass className="w-4 h-4 transition-transform duration-500" style={{ transform: `rotate(${mapRotation}deg)` }} />
|
>
|
||||||
</button>
|
<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 */}
|
{/* Nút La bàn / Xoay bản đồ */}
|
||||||
<button
|
<button
|
||||||
onClick={() => setLocateTrigger(prev => prev + 1)}
|
onClick={() => {
|
||||||
disabled={!userLocation}
|
if (mapRotation !== 0) {
|
||||||
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'}`}
|
setMapRotation(0);
|
||||||
title="Vị trí của tôi"
|
setIsHeadingMode(false);
|
||||||
>
|
} else {
|
||||||
<LocateFixed className="w-4 h-4" />
|
setIsHeadingMode(!isHeadingMode);
|
||||||
</button>
|
}
|
||||||
</div>
|
}}
|
||||||
|
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 */}
|
{/* Chỉ báo đang tìm đường */}
|
||||||
{isRoutingLoading && (
|
{isRoutingLoading && (
|
||||||
@@ -1495,37 +1533,6 @@ export const TourDetailPage = ({
|
|||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user