264 lines
9.8 KiB
TypeScript
264 lines
9.8 KiB
TypeScript
|
|
import React, { useRef, useState, useEffect } from 'react';
|
|
import { TripData } from '../types';
|
|
import { Download, Map as MapIcon, AlertTriangle, ImageOff, Loader2, Navigation, RefreshCw } from 'lucide-react';
|
|
import html2canvas from 'html2canvas';
|
|
import { getEnvVar } from '../utils/envUtils';
|
|
|
|
interface TripMapProps {
|
|
tripData: TripData;
|
|
}
|
|
|
|
const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
|
|
const mapContainerRef = useRef<HTMLDivElement>(null);
|
|
const [imgError, setImgError] = useState(false);
|
|
const [encodedPolyline, setEncodedPolyline] = useState<string | null>(null);
|
|
const [isRouting, setIsRouting] = useState(false);
|
|
const [scriptLoaded, setScriptLoaded] = useState(false);
|
|
const [routingError, setRoutingError] = useState<string | null>(null);
|
|
const [retryCount, setRetryCount] = useState(0);
|
|
|
|
// STRICT MODE: Use VITE_GOOGLE_MAPS_KEY
|
|
const getEffectiveKey = () => {
|
|
// 1. Check manual override from user input
|
|
if (tripData.googleMapsKey) return tripData.googleMapsKey;
|
|
// 2. Check Vite env
|
|
return getEnvVar('VITE_GOOGLE_MAPS_KEY');
|
|
};
|
|
|
|
const apiKey = getEffectiveKey();
|
|
|
|
// Load script if not present
|
|
useEffect(() => {
|
|
if ((window as any).google?.maps) {
|
|
setScriptLoaded(true);
|
|
return;
|
|
}
|
|
|
|
if (!apiKey) return;
|
|
|
|
if (document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`)) {
|
|
const check = setInterval(() => {
|
|
if ((window as any).google?.maps) {
|
|
setScriptLoaded(true);
|
|
clearInterval(check);
|
|
}
|
|
}, 500);
|
|
return;
|
|
}
|
|
|
|
const script = document.createElement('script');
|
|
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,geometry&loading=async&v=weekly`;
|
|
script.async = true;
|
|
script.onload = () => setScriptLoaded(true);
|
|
document.head.appendChild(script);
|
|
}, [apiKey]);
|
|
|
|
|
|
// Calculate Route
|
|
useEffect(() => {
|
|
if (!scriptLoaded || !tripData.startPoint.place || !tripData.endPoint.place) return;
|
|
if (!(window as any).google) return;
|
|
|
|
const fetchRoute = async () => {
|
|
setIsRouting(true);
|
|
setRoutingError(null);
|
|
|
|
try {
|
|
const directionsService = new (window as any).google.maps.DirectionsService();
|
|
const waypoints = tripData.stops
|
|
.filter(s => s.place && s.place.trim().length > 2)
|
|
.map(s => ({ location: s.place, stopover: true }));
|
|
|
|
const gMaps = (window as any).google.maps;
|
|
const mode = tripData.travelMode === 'WALKING' ? gMaps.TravelMode.WALKING : gMaps.TravelMode.DRIVING;
|
|
|
|
const result = await new Promise<any>((resolve, reject) => {
|
|
directionsService.route({
|
|
origin: tripData.startPoint.place,
|
|
destination: tripData.endPoint.place,
|
|
waypoints: waypoints,
|
|
travelMode: mode,
|
|
}, (response: any, status: any) => {
|
|
if (status === 'OK') {
|
|
resolve(response);
|
|
} else {
|
|
reject(status);
|
|
}
|
|
});
|
|
});
|
|
|
|
setEncodedPolyline(result.routes[0].overview_polyline);
|
|
setImgError(false);
|
|
} catch (error: any) {
|
|
console.error("Directions Service Failed:", error);
|
|
if (error === 'REQUEST_DENIED') {
|
|
setRoutingError("API 'Directions API' nie jest włączone.");
|
|
} else if (error === 'ZERO_RESULTS') {
|
|
setRoutingError(`Nie znaleziono drogi pomiędzy punktami.`);
|
|
} else {
|
|
setRoutingError(`Błąd wyznaczania trasy: ${error}`);
|
|
}
|
|
setEncodedPolyline(null);
|
|
} finally {
|
|
setIsRouting(false);
|
|
}
|
|
};
|
|
|
|
fetchRoute();
|
|
}, [scriptLoaded, tripData.startPoint.place, tripData.endPoint.place, tripData.stops, tripData.travelMode, retryCount]);
|
|
|
|
|
|
const getMapUrl = () => {
|
|
if (!apiKey) return null;
|
|
|
|
const baseUrl = 'https://maps.googleapis.com/maps/api/staticmap';
|
|
const size = '600x400';
|
|
const scale = '2';
|
|
const format = 'png';
|
|
const maptype = 'roadmap';
|
|
|
|
const startPlace = tripData.startPoint.place;
|
|
const endPlace = tripData.endPoint.place;
|
|
|
|
if (!startPlace || !endPlace) return null;
|
|
|
|
const startMarker = `markers=color:green|label:S|${encodeURIComponent(startPlace)}`;
|
|
const endMarker = `markers=color:red|label:F|${encodeURIComponent(endPlace)}`;
|
|
|
|
const stopMarkers = tripData.stops
|
|
.filter(s => s.place.trim() !== '')
|
|
.map((s, i) => `markers=color:blue|label:${i+1}|${encodeURIComponent(s.place)}`)
|
|
.join('&');
|
|
|
|
let path = '';
|
|
|
|
if (encodedPolyline && encodedPolyline.length < 8000) {
|
|
path = `path=color:0xEA4420ff|weight:5|enc:${encodedPolyline}`;
|
|
} else {
|
|
const pathPoints = [
|
|
startPlace,
|
|
...tripData.stops.filter(s => s.place.trim() !== '').map(s => s.place),
|
|
endPlace
|
|
].map(p => encodeURIComponent(p)).join('|');
|
|
path = `path=color:0xEA4420ff|weight:5|${pathPoints}`;
|
|
}
|
|
|
|
let url = `${baseUrl}?size=${size}&scale=${scale}&format=${format}&maptype=${maptype}&${startMarker}&${endMarker}&${path}&key=${apiKey}`;
|
|
if (stopMarkers) url += `&${stopMarkers}`;
|
|
|
|
return url;
|
|
};
|
|
|
|
const mapUrl = getMapUrl();
|
|
|
|
const handleDownload = async () => {
|
|
if (!mapContainerRef.current) return;
|
|
try {
|
|
const canvas = await html2canvas(mapContainerRef.current, {
|
|
useCORS: true,
|
|
allowTaint: true,
|
|
backgroundColor: '#ffffff'
|
|
});
|
|
const link = document.createElement('a');
|
|
link.download = 'trasa-wycieczki.png';
|
|
link.href = canvas.toDataURL('image/png');
|
|
link.click();
|
|
} catch (e) {
|
|
alert("Nie udało się pobrać mapy.");
|
|
}
|
|
};
|
|
|
|
if (!apiKey) {
|
|
return (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-6 flex flex-col items-center text-center">
|
|
<AlertTriangle className="text-red-500 mb-2" size={32} />
|
|
<h3 className="text-red-800 font-bold mb-1">Brak Klucza API</h3>
|
|
<p className="text-sm text-red-700 max-w-sm">
|
|
Skonfiguruj zmienną VITE_GOOGLE_MAPS_KEY w panelu.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-xl font-bold text-gray-900 flex items-center gap-2">
|
|
<MapIcon size={24} className="text-[#EA4420]" />
|
|
Mapa Trasy
|
|
</h3>
|
|
<div className="flex gap-2">
|
|
{routingError && (
|
|
<button
|
|
onClick={() => setRetryCount(c => c + 1)}
|
|
className="text-sm flex items-center gap-2 bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-3 py-2 rounded-md font-bold transition-colors"
|
|
title="Spróbuj ponownie wyznaczyć trasę"
|
|
>
|
|
<RefreshCw size={14} /> Ponów trasę
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={handleDownload}
|
|
className="text-sm flex items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-md font-bold transition-colors"
|
|
>
|
|
<Download size={16} />
|
|
Pobierz Obrazek
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{routingError && (
|
|
<div className="bg-yellow-50 border border-yellow-200 p-3 rounded-md flex items-start gap-3">
|
|
<Navigation className="text-yellow-600 flex-shrink-0 mt-0.5" size={18} />
|
|
<div className="text-xs text-yellow-800">
|
|
<p className="font-bold">Info Trasy:</p>
|
|
<p>{routingError}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
ref={mapContainerRef}
|
|
className="bg-white p-2 border border-gray-200 rounded-xl shadow-sm overflow-hidden relative group min-h-[250px] flex items-center justify-center"
|
|
>
|
|
{mapUrl && !imgError && !isRouting ? (
|
|
<img
|
|
src={mapUrl}
|
|
alt="Mapa trasy"
|
|
className="w-full h-auto rounded-lg object-cover"
|
|
crossOrigin="anonymous"
|
|
onError={() => setImgError(true)}
|
|
/>
|
|
) : (
|
|
<div className="h-64 w-full bg-gray-50 flex flex-col items-center justify-center text-gray-400 p-6 text-center">
|
|
{isRouting ? (
|
|
<>
|
|
<Loader2 size={32} className="text-[#EA4420] animate-spin mb-2" />
|
|
<p className="text-xs font-bold text-gray-500">Rysowanie trasy...</p>
|
|
</>
|
|
) : imgError ? (
|
|
<div className="max-w-md">
|
|
<div className="flex justify-center mb-2">
|
|
<ImageOff size={32} className="text-red-400" />
|
|
</div>
|
|
<p className="text-sm text-red-600 font-bold mb-1">Błąd ładowania mapy</p>
|
|
</div>
|
|
) : (
|
|
<p>{tripData.startPoint.place ? 'Czekam na dane...' : 'Uzupełnij punkty trasy...'}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{!imgError && mapUrl && !isRouting && (
|
|
<div className="absolute bottom-4 right-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-md text-[10px] font-bold text-gray-500 shadow-sm">
|
|
Generated by PromptStory
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TripMap;
|