Antoni Nuñez Romeu
e3e7d2f60b
Run Tests on Branches / Detect Changes (push) Successful in 17s
Run Tests on Branches / Backend Tests (push) Successful in 2m44s
Run Tests on Branches / Frontend Tests (push) Successful in 1m59s
Run Tests on Branches / Frontend Mobile Tests (push) Has been skipped
Run Tests on Branches / Parapharmacy API Tests (push) Has been skipped
Run Tests on Branches / PIP Platform Tests (push) Has been skipped
- Add is_open_now and is_always_open helpers in backend - Add backend endpoint enrichment with is_open and is_24h fields - Add client-side getOpenStatus with 24h, opens-at, opens-tomorrow support - Add open-now filter toggle in PublicView and SearchView - Add pharmacy no-hours fallback display - Add sticky pharmacy controls on scroll - Add admin hours editor with 24h toggle - Add translations (es/ca) for all hour-related strings - Add backend tests for hours logic and pharmacy endpoint - Remove unused backup test files
55 lines
2.2 KiB
React
55 lines
2.2 KiB
React
import React from 'react';
|
|
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
|
|
import 'leaflet/dist/leaflet.css';
|
|
import L from 'leaflet';
|
|
|
|
// Fix default marker icon broken by webpack/vite asset bundling
|
|
delete L.Icon.Default.prototype._getIconUrl;
|
|
L.Icon.Default.mergeOptions({
|
|
iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
|
|
iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
|
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
|
});
|
|
|
|
function PharmacyMap({ pharmacies }) {
|
|
const located = pharmacies.filter(p => p.latitude != null && p.longitude != null);
|
|
|
|
if (located.length === 0) return null;
|
|
|
|
const center = [
|
|
located.reduce((s, p) => s + p.latitude, 0) / located.length,
|
|
located.reduce((s, p) => s + p.longitude, 0) / located.length,
|
|
];
|
|
|
|
return (
|
|
<div className="pharmacy-map-wrapper" style={{ height: '350px', width: '100%', marginTop: '1rem', borderRadius: '8px', overflow: 'hidden' }}>
|
|
<MapContainer center={center} zoom={13} style={{ height: '100%', width: '100%' }} scrollWheelZoom={false}>
|
|
<TileLayer
|
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
{located.map(pharmacy => (
|
|
<Marker key={pharmacy.id} position={[pharmacy.latitude, pharmacy.longitude]}>
|
|
<Popup>
|
|
<strong>{pharmacy.name} {pharmacy.is_24h && <span className="map-badge-24h">24h</span>}</strong><br />
|
|
{pharmacy.address}
|
|
{pharmacy.phone && <><br />{pharmacy.phone}</>}
|
|
<br />
|
|
<a
|
|
href={`https://www.google.com/maps/dir/?api=1&destination=${pharmacy.latitude},${pharmacy.longitude}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={{ color: '#2563eb', marginTop: '8px', display: 'inline-block' }}
|
|
>
|
|
📍 Cómo llegar
|
|
</a>
|
|
</Popup>
|
|
</Marker>
|
|
))}
|
|
</MapContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PharmacyMap;
|