feat: Tạo trang bản đồ chỉ đường độc lập TourNavigationPage

- Thêm trang TourNavigationPage.tsx hiển thị full màn hình với top-bar, bản đồ fullscreen và nút la bàn nổi ở góc dưới bên phải - Cập nhật ItineraryTimeline.tsx: thay thế LocationNavigationModal bằng callback onOpenNavigationPage để chuyển đến trang mới - Đăng ký trang tourNavigation trong App.tsx với navigationPayload - Cập nhật TourDetailPage.tsx truyền onOpenNavigationPage xuống - Thêm INSTALL_MAP.md hướng dẫn thực hiện tính năng
2026-06-25 10:17:23 +07:00
parent a135196cb5
commit f74587376e
6 changed files with 502 additions and 26 deletions
@@ -9,6 +9,7 @@ import { JoinTourPage } from './pages/JoinTourPage';
 import { MemberDashboard } from './pages/MemberDashboard';
 import { AdminDashboard } from './pages/AdminDashboard';
 import { ShareJourneyPage } from './pages/ShareJourneyPage';
+import { TourNavigationPage } from './pages/TourNavigationPage';
 import { ConfirmProvider } from './hooks/useConfirm';
 import { NotificationProvider } from './hooks/useNotification';

@@ -21,12 +22,13 @@ function App() {

  const [user, setUser] = useState<any>(null);
  const [shareJourneyToken, setShareJourneyToken] = useState<string | null>(journeyTokenVal);
-  const [currentPage, setCurrentPage] = useState<'landing' | 'dashboard' | 'admin' | 'explore' | 'tourDetail' | 'signup' | 'myPhotos' | 'notes' | 'joinTour' | 'shareJourney'>(
+  const [currentPage, setCurrentPage] = useState<'landing' | 'dashboard' | 'admin' | 'explore' | 'tourDetail' | 'signup' | 'myPhotos' | 'notes' | 'joinTour' | 'shareJourney' | 'tourNavigation'>(
    journeyTokenVal ? 'shareJourney' : (viewTourId ? 'tourDetail' : (window.location.pathname === '/join-tour' || params.has('token') ? 'joinTour' : 'landing'))
  );
  const [currentTourId, setCurrentTourId] = useState<string | null>(viewTourId);
  const [isPublicTourView, setIsPublicTourView] = useState(!!viewTourId);
  const [previousPage, setPreviousPage] = useState<'explore' | 'dashboard' | 'landing'>('explore');
+  const [navigationPayload, setNavigationPayload] = useState<{ tourId: string; origin: { lat: number; lng: number }; destination: { lat: number; lng: number; name: string }; tourTitle: string } | null>(null);

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
@@ -122,26 +124,30 @@ function App() {
  };

  const handleBackFromTourDetail = () => {
-    // Check if this was a public view BEFORE clearing the flag
    const wasPublicView = isPublicTourView;
    
    setCurrentTourId(null);
    setIsPublicTourView(false);
    
-    // If user was viewing a public tour, redirect to index/landing page
-    // Otherwise redirect based on authentication and previous page
    if (wasPublicView) {
-      // Public tour view - always redirect to index/landing
      setCurrentPage('landing');
    } else if (user) {
-      // Authenticated user viewing their own tour - go back to previous page
      setCurrentPage(previousPage);
    } else {
-      // Not authenticated and not public view - go to landing
      setCurrentPage('landing');
    }
  };

+  const handleOpenNavigationPage = (payload: { tourId: string; origin: { lat: number; lng: number }; destination: { lat: number; lng: number; name: string }; tourTitle: string }) => {
+    setNavigationPayload(payload);
+    setCurrentPage('tourNavigation');
+  };
+
+  const handleBackFromNavigation = () => {
+    setNavigationPayload(null);
+    setCurrentPage('tourDetail');
+  };
+
  const handleBackFromSignup = () => {
    const pendingInviteToken = localStorage.getItem('pendingInviteToken');
    if (pendingInviteToken) {
@@ -259,6 +265,7 @@ function App() {
              onBack={handleBackFromTourDetail}
              isPublicView={isPublicTourView}
              onOpenNotes={() => setCurrentPage('notes')}
+              onOpenNavigationPage={handleOpenNavigationPage}
            />
          );
        }
@@ -267,6 +274,19 @@ function App() {
          return <MyNotePage tourId={currentTourId!} onBack={() => setCurrentPage('tourDetail')} />;
        }

+        if (currentPage === 'tourNavigation' && navigationPayload) {
+          return (
+            <TourNavigationPage
+              tourId={navigationPayload.tourId}
+              routeData={{
+                origin: navigationPayload.origin,
+                destination: navigationPayload.destination
+              }}
+              onBack={handleBackFromNavigation}
+            />
+          );
+        }
+
        if (currentPage === 'explore') {
          return (
            <ExploreMap 
@@ -5,7 +5,6 @@ import { useTourStore } from '@/store/useTourStore';
 import { useConfirm } from '@/hooks/useConfirm';
 import { useNotification } from '@/hooks/useNotification';
 import { CommentModal } from '@/components/CommentModal';
-import { LocationNavigationModal } from '@/components/LocationNavigationModal';

 const TimeVariance = ({ planned, actual }: { planned: string, actual: string | null }) => {
  if (!actual) return null;
@@ -51,6 +50,7 @@ export const ItineraryTimeline = ({
  onEditLocation?: (location: any) => void, 
  onQuickNote?: (data: { legId: string; location: any; leg: any }) => void,
  onNavigate?: (location: any) => void,
+  onOpenNavigationPage?: (routeData: { origin: { lat: number; lng: number }; destination: { lat: number; lng: number; name: string }; tourTitle: string }) => void,
  onSuccess?: () => void,
  isPublicView?: boolean 
 }) => {
@@ -78,11 +78,6 @@ export const ItineraryTimeline = ({
  
  // State to track single expanded stage (exclusive single-expansion mode)
  const [expandedStageId, setExpandedStageId] = useState<string | null>(legs.length > 0 ? legs[0]?.id : null);
-  const [navRouteData, setNavRouteData] = useState<{
-    origin: { lat: number; lng: number } | null;
-    destination: { lat: number; lng: number; name: string } | null;
-  }>({ origin: null, destination: null });
-  const [isNavModalOpen, setIsNavModalOpen] = useState(false);

  const toggleStageExpanded = (legId: string) => {
    // Exclusive mode: if clicking the same stage, close it. Otherwise, open only the clicked one.
@@ -146,7 +141,7 @@ export const ItineraryTimeline = ({

    navigator.geolocation.getCurrentPosition(
      (position) => {
-        setNavRouteData({
+        onOpenNavigationPage?.({
          origin: {
            lat: position.coords.latitude,
            lng: position.coords.longitude
@@ -155,9 +150,9 @@ export const ItineraryTimeline = ({
            lat: parseFloat(location.latitude),
            lng: parseFloat(location.longitude),
            name: location.name || "Điểm đến chọn sẵn"
-          }
+          },
+          tourTitle: currentTour?.title || "Chi tiết hành trình"
        });
-        setIsNavModalOpen(true);
      },
      (error) => {
        console.error("Error fetching native geolocation metrics:", error);
@@ -763,11 +758,6 @@ export const ItineraryTimeline = ({
            onCommentAdded={() => handleCommentIncrement(commentLocationId)}
            onCommentDeleted={() => handleCommentDecrement(commentLocationId)}
           />
-          <LocationNavigationModal
-            isOpen={isNavModalOpen}
-            onClose={() => setIsNavModalOpen(false)}
-            routeData={navRouteData}
-          />
        </div>
  );
 };
@@ -348,12 +348,14 @@ export const TourDetailPage = ({
  onBack, 
  tourId, 
  isPublicView = false, 
-  onOpenNotes 
+  onOpenNotes,
+  onOpenNavigationPage
 }: { 
  onBack: () => void, 
  tourId: string, 
  isPublicView?: boolean, 
-  onOpenNotes?: () => void 
+  onOpenNotes?: () => void,
+  onOpenNavigationPage?: (routeData: { origin: { lat: number; lng: number }; destination: { lat: number; lng: number; name: string }; tourTitle: string }) => void 
 }) => {
  // Tách biệt các state và actions để tối ưu performance - Chuyển lên đầu để tránh lỗi initialization
  const { t } = useTranslation();
@@ -2232,19 +2234,17 @@ export const TourDetailPage = ({
                  setEditingLocation(loc);
                  setTargetLegId(loc.legId);
                  setMapCenter([loc.latitude, loc.longitude]);
-                  
-                  // Kiểm tra xem địa điểm đang sửa có phải là điểm mốc đặc biệt không (dựa trên timestamp 1970)
                  const isStart = loc.plannedStart && new Date(loc.plannedStart).getTime() === 0;
                  const isEnd = loc.plannedEnd && new Date(loc.plannedEnd).getTime() === 0;
                  setIsStartPointAction(!!isStart);
                  setIsEndPointAction(!!isEnd);
-                  
                  setIsAddLocationOpen(true);
                }} 
                onQuickNote={(data) => handleQuickNote(data)}
                onSuccess={() => fetchTour(tourId)}
                isPublicView={isPublicView} 
                onNavigate={handleNavigateToLocation}
+                onOpenNavigationPage={onOpenNavigationPage}
              />
              ) : (
                <div className="h-[60vh] w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white relative animate-in fade-in duration-500">
@@ -0,0 +1,268 @@
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { MapContainer, TileLayer, Marker, Polyline, Popup, useMap, useMapEvents } from 'react-leaflet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { ChevronLeft, Compass } from 'lucide-react';
+
+interface NavigationRouteData {
+  origin: { lat: number; lng: number };
+  destination: { lat: number; lng: number; name: string };
+  tourTitle?: string;
+}
+
+interface TourNavigationPageProps {
+  tourId: string;
+  routeData: NavigationRouteData | null;
+  onBack: () => void;
+}
+
+const FitBounds = ({ coords }: { coords: [number, number][] }) => {
+  const map = useMap();
+  useEffect(() => {
+    if (coords.length > 0) {
+      map.fitBounds(coords, { padding: [60, 60], maxZoom: 15 });
+    }
+  }, [map, coords]);
+  return null;
+};
+
+const MapRotationHandler = ({ rotation }: { rotation: number }) => {
+  const map = useMap();
+  const cumulativeRotationRef = useRef(0);
+  const prevRotationRef = useRef(0);
+
+  useEffect(() => {
+    const container = map.getContainer();
+    container.style.transformOrigin = 'center center';
+    container.style.willChange = 'transform';
+
+    if (rotation === 0) {
+      cumulativeRotationRef.current = 0;
+      prevRotationRef.current = 0;
+      container.style.transform = 'rotate(0deg) scale(1)';
+      return;
+    }
+
+    let delta = rotation - prevRotationRef.current;
+    if (delta > 180) delta -= 360;
+    else if (delta < -180) delta += 360;
+
+    cumulativeRotationRef.current += delta;
+    prevRotationRef.current = rotation;
+
+    container.style.transform = `rotate(${cumulativeRotationRef.current}deg) scale(2.2) translateZ(0)`;
+    container.style.transition = 'transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1)';
+  }, [rotation, map]);
+  return null;
+};
+
+const CompassInteractionDetector = ({
+  onUserInteraction
+}: {
+  onUserInteraction: () => void;
+}) => {
+  useMapEvents({
+    movestart: onUserInteraction,
+    zoomstart: onUserInteraction,
+    dragstart: onUserInteraction,
+  });
+  return null;
+};
+
+const MapRefSetter = ({ mapRef }: { mapRef: React.MutableRefObject<L.Map | null> }) => {
+  const map = useMap();
+  useEffect(() => {
+    mapRef.current = map;
+  }, [map, mapRef]);
+  return null;
+};
+
+export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId, routeData, onBack }) => {
+  const [isCompassActive, setIsCompassActive] = useState(false);
+  const [currentHeading, setCurrentHeading] = useState(0);
+  const [routeGeometry, setRouteGeometry] = useState<[number, number][] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const mapRef = useRef<L.Map | null>(null);
+  const watchIdRef = useRef<number | null>(null);
+  const fetchLockRef = useRef(false);
+
+  const originLat = routeData?.origin?.lat;
+  const originLng = routeData?.origin?.lng;
+  const destLat = routeData?.destination?.lat;
+  const destLng = routeData?.destination?.lng;
+
+  useEffect(() => {
+    if (!routeData || !originLat || !originLng || !destLat || !destLng) {
+      setRouteGeometry(null);
+      setError(null);
+      return;
+    }
+
+    if (fetchLockRef.current) return;
+
+    const calculateOptimalRoute = async () => {
+      try {
+        fetchLockRef.current = true;
+        const url = `https://router.project-osrm.org/route/v1/driving/${originLng},${originLat};${destLng},${destLat}?overview=full&geometries=geojson`;
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`OSRM error: ${res.status}`);
+        const data: { code: string; routes: Array<{ geometry: { coordinates: number[][] } }> } = await res.json();
+        if (data.code !== 'Ok' || !data.routes?.length) throw new Error('Không tìm thấy lộ trình phù hợp');
+
+        const coords = data.routes[0].geometry.coordinates.map((c: number[]) => [c[1], c[0]] as [number, number]);
+        setRouteGeometry(coords);
+      } catch (err: any) {
+        setError(err.message);
+      } finally {
+        fetchLockRef.current = false;
+      }
+    };
+
+    calculateOptimalRoute();
+
+    return () => {
+      fetchLockRef.current = false;
+    };
+  }, [routeData, originLat, originLng, destLat, destLng]);
+
+  const handleUserInteraction = useCallback(() => {
+    if (isCompassActive) {
+      setIsCompassActive(false);
+    }
+  }, [isCompassActive]);
+
+  useEffect(() => {
+    if (!isCompassActive) {
+      setCurrentHeading(0);
+      return;
+    }
+
+    if (navigator.geolocation) {
+      watchIdRef.current = navigator.geolocation.watchPosition(
+        (position) => {
+          if (mapRef.current) {
+            mapRef.current.setView([position.coords.latitude, position.coords.longitude], undefined, { animate: true });
+          }
+          if (position.coords.heading !== null) {
+            setCurrentHeading(position.coords.heading);
+          }
+        },
+        (err) => console.error("Compass tracking acquisition error:", err),
+        { enableHighAccuracy: true }
+      );
+    }
+
+    const handleOrientation = (event: any) => {
+      let heading: number | null = null;
+      if (event.webkitCompassHeading !== undefined && event.webkitCompassHeading !== null) {
+        heading = event.webkitCompassHeading;
+      } else if (event.alpha !== null && event.alpha !== undefined) {
+        if (event.absolute === true || event.type === 'deviceorientationabsolute') {
+          heading = (360 - event.alpha) % 360;
+        }
+      }
+      if (heading !== null) {
+        setCurrentHeading(heading);
+      }
+    };
+
+    window.addEventListener('deviceorientation', handleOrientation, true);
+    window.addEventListener('deviceorientationabsolute', handleOrientation, true);
+
+    return () => {
+      if (watchIdRef.current !== null) {
+        navigator.geolocation.clearWatch(watchIdRef.current);
+      }
+      window.removeEventListener('deviceorientation', handleOrientation, true);
+      window.removeEventListener('deviceorientationabsolute', handleOrientation, true);
+    };
+  }, [isCompassActive]);
+
+  const userIcon = useMemo(() => L.divIcon({
+    className: '!bg-transparent !border-none',
+    html: `<div class="w-8 h-8 bg-blue-600 rounded-full border-2 border-white shadow-xl flex items-center justify-center"><div class="w-2 h-2 bg-white rounded-full"></div></div>`,
+    iconSize: [32, 32],
+    iconAnchor: [16, 16]
+  }), []);
+
+  const destIcon = useMemo(() => L.divIcon({
+    className: '!bg-transparent !border-none',
+    html: `<div class="w-8 h-8 bg-red-600 rounded-full border-2 border-white shadow-xl flex items-center justify-center text-white text-xs font-black">Đ</div>`,
+    iconSize: [32, 32],
+    iconAnchor: [16, 16]
+  }), []);
+
+  if (!routeData) return null;
+
+  const center: [number, number] = routeData.origin && routeData.destination
+    ? [(routeData.origin.lat + routeData.destination.lat) / 2, (routeData.origin.lng + routeData.destination.lng) / 2]
+    : [0, 0];
+
+  return (
+    <div className="fixed inset-0 bg-slate-950 flex flex-col overflow-hidden select-none text-white antialiased">
+      <div className="w-full bg-[#1e293b]/95 backdrop-blur-md border-b border-slate-800 px-4 py-3.5 flex items-center gap-3 z-50">
+        <button
+          onClick={onBack}
+          className="text-slate-300 hover:text-white p-1 rounded-lg hover:bg-slate-800 transition-colors"
+          title="Quay lại danh sách lộ trình"
+        >
+          <ChevronLeft className="w-6 h-6" />
+        </button>
+        <h2 className="text-sm font-bold truncate tracking-wide text-slate-100">
+          {routeData.tourTitle || "Bản đồ chỉ đường"}
+        </h2>
+      </div>
+
+      <div className="flex-1 relative h-[calc(100vh-56px)]">
+        <MapContainer
+          center={center}
+          zoom={14}
+          className="absolute inset-0 h-full w-full"
+          zoomControl={true}
+          attributionControl={false}
+        >
+          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="" />
+          <MapRefSetter mapRef={mapRef} />
+          {routeData.origin && (
+            <Marker position={[routeData.origin.lat, routeData.origin.lng]} icon={userIcon}>
+              <Popup>
+                <div className="text-xs font-bold text-blue-600">Bạn đang ở đây</div>
+              </Popup>
+            </Marker>
+          )}
+          {routeData.destination && (
+            <Marker position={[routeData.destination.lat, routeData.destination.lng]} icon={destIcon}>
+              <Popup>
+                <div className="text-xs font-bold text-red-600">{routeData.destination.name}</div>
+              </Popup>
+            </Marker>
+          )}
+          {routeGeometry && <FitBounds coords={routeGeometry} />}
+          {routeGeometry && (
+            <Polyline positions={routeGeometry} color="#2563eb" weight={6} opacity={0.9} smoothFactor={1} />
+          )}
+          <MapRotationHandler rotation={currentHeading} />
+          <CompassInteractionDetector onUserInteraction={handleUserInteraction} />
+        </MapContainer>
+
+        <button
+          onClick={() => setIsCompassActive(!isCompassActive)}
+          className={`absolute bottom-8 right-6 z-[999] w-14 h-14 rounded-full border-2 flex items-center justify-center shadow-2xl transition-all active:scale-95 ${
+            isCompassActive
+              ? 'bg-blue-600 border-blue-400 text-white animate-pulse'
+              : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-blue-400'
+          }`}
+        >
+          <Compass className="w-7 h-7" />
+        </button>
+
+        {error && (
+          <div className="absolute top-4 left-1/2 -translate-x-1/2 bg-red-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg z-[1000]">
+            {error}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};