maps route link
This commit is contained in:
@@ -480,7 +480,42 @@ const StoreWatchPage = ({
|
|||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<div>
|
<div>
|
||||||
<p className="text-gray-800 text-sm">{row.original.city || 'unbekannt'}</p>
|
<p className="text-gray-800 text-sm">{row.original.city || 'unbekannt'}</p>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
<p className="text-xs text-gray-500">{row.original.street || ''}</p>
|
<p className="text-xs text-gray-500">{row.original.street || ''}</p>
|
||||||
|
{(() => {
|
||||||
|
const hasUserLocation =
|
||||||
|
userLocation &&
|
||||||
|
Number.isFinite(userLocation.lat) &&
|
||||||
|
Number.isFinite(userLocation.lon);
|
||||||
|
const storeLat = Number(row.original.location?.lat);
|
||||||
|
const storeLon = Number(row.original.location?.lon);
|
||||||
|
const hasStoreLocation = Number.isFinite(storeLat) && Number.isFinite(storeLon);
|
||||||
|
if (!hasUserLocation || !hasStoreLocation) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const origin = encodeURIComponent(`${userLocation.lat},${userLocation.lon}`);
|
||||||
|
const destination = encodeURIComponent(`${storeLat},${storeLon}`);
|
||||||
|
const mapsUrl = `https://www.google.com/maps/dir/?api=1&origin=${origin}&destination=${destination}&travelmode=driving`;
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={mapsUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex h-5 w-5 items-center justify-center rounded text-gray-400 hover:text-blue-600"
|
||||||
|
title="Route zu diesem Betrieb in Google Maps öffnen"
|
||||||
|
>
|
||||||
|
<span className="sr-only">Route in Google Maps</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M10.293 2.293a1 1 0 0 1 1.414 0l5.5 5.5a1 1 0 0 1-1.414 1.414L11 4.414V17a1 1 0 1 1-2 0V4.414L4.207 9.207a1 1 0 0 1-1.414-1.414l5.5-5.5Z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
sortingFn: 'alphanumeric',
|
sortingFn: 'alphanumeric',
|
||||||
|
|||||||
Reference in New Issue
Block a user