e7aa582572
- Implemented CuttingIndex component for listing and managing cuttings. - Added routes for cutting management in web.php. - Created CuttingTest for testing cutting-related features including authorization, validation, and stock management. - Updated roles create and edit pages to include necessary imports. - Refactored settings and profile pages to streamline imports. - Enhanced permissions checks for cutting management actions.
65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import L from 'leaflet';
|
|
import { useEffect, useRef } from 'react';
|
|
import 'leaflet/dist/leaflet.css';
|
|
|
|
interface LocationMapProps {
|
|
latitude: number;
|
|
longitude: number;
|
|
height?: string;
|
|
zoom?: number;
|
|
}
|
|
|
|
export function LocationMap({
|
|
latitude,
|
|
longitude,
|
|
height = '250px',
|
|
zoom = 15,
|
|
}: LocationMapProps) {
|
|
const mapRef = useRef<HTMLDivElement>(null);
|
|
const mapInstanceRef = useRef<L.Map | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!mapRef.current || mapInstanceRef.current) {
|
|
return;
|
|
}
|
|
|
|
const map = L.map(mapRef.current, {
|
|
center: [latitude, longitude],
|
|
zoom,
|
|
zoomControl: false,
|
|
attributionControl: true,
|
|
});
|
|
|
|
L.control.zoom({ position: 'topright' }).addTo(map);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution:
|
|
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
|
}).addTo(map);
|
|
|
|
const icon = L.divIcon({
|
|
html: `<div style="background: #ef4444; width: 24px; height: 24px; border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.3);"></div>`,
|
|
className: '',
|
|
iconSize: [24, 24],
|
|
iconAnchor: [12, 12],
|
|
});
|
|
|
|
L.marker([latitude, longitude], { icon }).addTo(map);
|
|
|
|
mapInstanceRef.current = map;
|
|
|
|
return () => {
|
|
map.remove();
|
|
mapInstanceRef.current = null;
|
|
};
|
|
}, [latitude, longitude, zoom]);
|
|
|
|
return (
|
|
<div
|
|
ref={mapRef}
|
|
style={{ height, width: '100%' }}
|
|
className="rounded-lg"
|
|
/>
|
|
);
|
|
}
|