Initial commit
This commit is contained in:
283
client/src/pages/MapView.jsx
Normal file
283
client/src/pages/MapView.jsx
Normal file
@@ -0,0 +1,283 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
|
||||
import { Icon } from 'leaflet';
|
||||
import { useSocket } from '../contexts/SocketContext';
|
||||
import api from '../services/api';
|
||||
import { format } from 'date-fns';
|
||||
import {
|
||||
ServerIcon,
|
||||
ExclamationTriangleIcon,
|
||||
SignalIcon,
|
||||
EyeIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
// Fix for default markers in React Leaflet
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
|
||||
import iconUrl from 'leaflet/dist/images/marker-icon.png';
|
||||
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
|
||||
|
||||
delete Icon.Default.prototype._getIconUrl;
|
||||
Icon.Default.mergeOptions({
|
||||
iconRetinaUrl,
|
||||
iconUrl,
|
||||
shadowUrl,
|
||||
});
|
||||
|
||||
// Custom icons
|
||||
const createDeviceIcon = (status, hasDetections) => {
|
||||
let color = '#6b7280'; // gray for offline/inactive
|
||||
|
||||
if (status === 'online') {
|
||||
color = hasDetections ? '#ef4444' : '#22c55e'; // red if detecting, green if online
|
||||
}
|
||||
|
||||
return new Icon({
|
||||
iconUrl: `data:image/svg+xml;base64,${btoa(`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32">
|
||||
<circle cx="12" cy="12" r="10" fill="${color}" stroke="#fff" stroke-width="2"/>
|
||||
<path d="M12 8v4l3 3" stroke="#fff" stroke-width="2" fill="none"/>
|
||||
</svg>
|
||||
`)}`,
|
||||
iconSize: [32, 32],
|
||||
iconAnchor: [16, 16],
|
||||
popupAnchor: [0, -16],
|
||||
});
|
||||
};
|
||||
|
||||
const MapView = () => {
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [selectedDevice, setSelectedDevice] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [mapCenter, setMapCenter] = useState([59.3293, 18.0686]); // Stockholm default
|
||||
const [mapZoom, setMapZoom] = useState(10);
|
||||
const { recentDetections, deviceStatus } = useSocket();
|
||||
|
||||
useEffect(() => {
|
||||
fetchDevices();
|
||||
const interval = setInterval(fetchDevices, 30000); // Refresh every 30 seconds
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const fetchDevices = async () => {
|
||||
try {
|
||||
const response = await api.get('/devices/map');
|
||||
const deviceData = response.data.data;
|
||||
|
||||
setDevices(deviceData);
|
||||
|
||||
// Set map center to first device with valid coordinates
|
||||
const deviceWithCoords = deviceData.find(d => d.geo_lat && d.geo_lon);
|
||||
if (deviceWithCoords && devices.length === 0) {
|
||||
setMapCenter([deviceWithCoords.geo_lat, deviceWithCoords.geo_lon]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching devices:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getDeviceStatus = (device) => {
|
||||
const realtimeStatus = deviceStatus[device.id];
|
||||
if (realtimeStatus) {
|
||||
return realtimeStatus.status;
|
||||
}
|
||||
return device.status || 'offline';
|
||||
};
|
||||
|
||||
const getDeviceDetections = (deviceId) => {
|
||||
return recentDetections.filter(d => d.device_id === deviceId);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-96">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Device Map
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Real-time view of all devices and their detection status
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Map */}
|
||||
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
|
||||
<div className="h-96 lg:h-[600px]">
|
||||
<MapContainer
|
||||
center={mapCenter}
|
||||
zoom={mapZoom}
|
||||
className="h-full w-full"
|
||||
whenCreated={(map) => {
|
||||
// Auto-fit to device locations if available
|
||||
const validDevices = devices.filter(d => d.geo_lat && d.geo_lon);
|
||||
if (validDevices.length > 1) {
|
||||
const bounds = validDevices.map(d => [d.geo_lat, d.geo_lon]);
|
||||
map.fitBounds(bounds, { padding: [20, 20] });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
|
||||
{devices
|
||||
.filter(device => device.geo_lat && device.geo_lon)
|
||||
.map(device => {
|
||||
const status = getDeviceStatus(device);
|
||||
const detections = getDeviceDetections(device.id);
|
||||
const hasRecentDetections = detections.length > 0;
|
||||
|
||||
return (
|
||||
<Marker
|
||||
key={device.id}
|
||||
position={[device.geo_lat, device.geo_lon]}
|
||||
icon={createDeviceIcon(status, hasRecentDetections)}
|
||||
eventHandlers={{
|
||||
click: () => setSelectedDevice(device),
|
||||
}}
|
||||
>
|
||||
<Popup>
|
||||
<DevicePopup
|
||||
device={device}
|
||||
status={status}
|
||||
detections={detections}
|
||||
/>
|
||||
</Popup>
|
||||
</Marker>
|
||||
);
|
||||
})}
|
||||
</MapContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Device List */}
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
<div className="px-6 py-4 border-b border-gray-200">
|
||||
<h3 className="text-lg font-medium text-gray-900">Device Status</h3>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-200">
|
||||
{devices.map(device => {
|
||||
const status = getDeviceStatus(device);
|
||||
const detections = getDeviceDetections(device.id);
|
||||
|
||||
return (
|
||||
<DeviceListItem
|
||||
key={device.id}
|
||||
device={device}
|
||||
status={status}
|
||||
detections={detections}
|
||||
onClick={() => setSelectedDevice(device)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{devices.length === 0 && (
|
||||
<div className="px-6 py-8 text-center text-gray-500">
|
||||
No devices found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const DevicePopup = ({ device, status, detections }) => (
|
||||
<div className="p-2 min-w-[200px]">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="font-semibold text-gray-900">
|
||||
{device.name || `Device ${device.id}`}
|
||||
</h4>
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
status === 'online'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-red-100 text-red-800'
|
||||
}`}>
|
||||
{status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{device.location_description && (
|
||||
<p className="text-sm text-gray-600 mb-2">
|
||||
{device.location_description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="text-xs text-gray-500 space-y-1">
|
||||
<div>ID: {device.id}</div>
|
||||
<div>Coordinates: {device.geo_lat}, {device.geo_lon}</div>
|
||||
{device.last_heartbeat && (
|
||||
<div>
|
||||
Last seen: {format(new Date(device.last_heartbeat), 'MMM dd, HH:mm')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{detections.length > 0 && (
|
||||
<div className="mt-3 pt-2 border-t border-gray-200">
|
||||
<div className="flex items-center space-x-1 text-red-600 text-sm font-medium mb-1">
|
||||
<ExclamationTriangleIcon className="h-4 w-4" />
|
||||
<span>{detections.length} recent detection{detections.length > 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
{detections.slice(0, 3).map((detection, index) => (
|
||||
<div key={index} className="text-xs text-gray-600">
|
||||
Drone {detection.drone_id} • {detection.freq}MHz • {detection.rssi}dBm
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const DeviceListItem = ({ device, status, detections, onClick }) => (
|
||||
<div
|
||||
className="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors"
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className={`w-3 h-3 rounded-full ${
|
||||
status === 'online'
|
||||
? detections.length > 0 ? 'bg-red-400 animate-pulse' : 'bg-green-400'
|
||||
: 'bg-gray-400'
|
||||
}`} />
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{device.name || `Device ${device.id}`}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{device.location_description || `${device.geo_lat}, ${device.geo_lon}`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
{detections.length > 0 && (
|
||||
<div className="flex items-center space-x-1 text-red-600">
|
||||
<ExclamationTriangleIcon className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">{detections.length}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
status === 'online'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-red-100 text-red-800'
|
||||
}`}>
|
||||
{status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default MapView;
|
||||
Reference in New Issue
Block a user