Meik/Pickup-Config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

maps route link

Browse Source
This commit is contained in:
Meik
2025-11-11 00:02:23 +01:00
parent 076717972d
commit 815b95e6d8
1 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/StoreWatchPage.js
View File

@@ -478,41 +478,41 @@ const StoreWatchPage = ({
</div>
),
cell: ({ row }) => (
<div>
<p className="text-gray-800 text-sm">{row.original.city || 'unbekannt'}</p>
<div className="flex items-center gap-1">
<div className="flex items-start justify-between gap-2">
<div>
<p className="text-gray-800 text-sm">{row.original.city || 'unbekannt'}</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 24 24" fill="currentColor" className="h-4 w-4">
<path d="M12 2a6 6 0 00-6 6c0 4.2 6 12 6 12s6-7.8 6-12a6 6 0 00-6-6zm0 8a2 2 0 110-4 2 2 0 010 4z" />
<path d="M5 20.5a1 1 0 001.447.894l4.946-2.355a1 1 0 01.894 0l4.946 2.355A1 1 0 0019.68 20l-5.078-10.156" stroke="currentColor" strokeWidth="1.2" fill="none"/>
</svg>
</a>
);
})()}
</div>
{(() => {
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-6 w-6 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 24 24" fill="currentColor" className="h-4 w-4">
<path d="M12 2a6 6 0 00-6 6c0 4.2 6 12 6 12s6-7.8 6-12a6 6 0 00-6-6zm0 8a2 2 0 110-4 2 2 0 010 4z" />
<path d="M5 20.5a1 1 0 001.447.894l4.946-2.355a1 1 0 01.894 0l4.946 2.355A1 1 0 0019.68 20l-5.078-10.156" stroke="currentColor" strokeWidth="1.2" fill="none"/>
</svg>
</a>
);
})()}
</div>
),
sortingFn: 'alphanumeric',