borg/drone-detector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix jwt-token

Browse Source
This commit is contained in:
Alexander Borg
2025-09-07 16:51:38 +02:00
parent e2ab2782d2
commit 312a769cdb
2 changed files with 98 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
client/src/pages/MapView.jsx
View File

@@ -233,37 +233,44 @@ const MapView = () => {
// Set initial bounds and center ONLY on first load
if (deviceData.length > 0 && isInitialLoad) {
const lats = deviceData.map(device => device.geo_lat);
const lons = deviceData.map(device => device.geo_lon);
// Filter devices that have coordinates
const devicesWithCoords = deviceData.filter(device =>
device.geo_lat !== null && device.geo_lon !== null
);
const minLat = Math.min(...lats);
const maxLat = Math.max(...lats);
const minLon = Math.min(...lons);
const maxLon = Math.max(...lons);
// Add padding around the bounds (15% on each side for better visibility)
const latPadding = (maxLat - minLat) * 0.15;
const lonPadding = (maxLon - minLon) * 0.15;
const bounds = [
[minLat - latPadding, minLon - lonPadding], // Southwest
[maxLat + latPadding, maxLon + lonPadding] // Northeast
];
console.log('MapView: Setting initial bounds and center for devices');
setMapBounds(bounds);
setShouldFitBounds(true);
// Calculate center
const centerLat = (minLat + maxLat) / 2;
const centerLon = (minLon + maxLon) / 2;
setMapCenter([centerLat, centerLon]);
// Disable automatic fitting after initial setup (with longer delay)
setTimeout(() => {
console.log('MapView: Disabling automatic bounds fitting - manual navigation now preserved');
setShouldFitBounds(false);
}, 2000);
if (devicesWithCoords.length > 0) {
const lats = devicesWithCoords.map(device => device.geo_lat);
const lons = devicesWithCoords.map(device => device.geo_lon);
const minLat = Math.min(...lats);
const maxLat = Math.max(...lats);
const minLon = Math.min(...lons);
const maxLon = Math.max(...lons);
// Add padding around the bounds (15% on each side for better visibility)
const latPadding = (maxLat - minLat) * 0.15;
const lonPadding = (maxLon - minLon) * 0.15;
const bounds = [
[minLat - latPadding, minLon - lonPadding], // Southwest
[maxLat + latPadding, maxLon + lonPadding] // Northeast
];
console.log('MapView: Setting initial bounds and center for devices with coordinates');
setMapBounds(bounds);
setShouldFitBounds(true);
// Calculate center
const centerLat = (minLat + maxLat) / 2;
const centerLon = (minLon + maxLon) / 2;
setMapCenter([centerLat, centerLon]);
// Disable automatic fitting after initial setup (with longer delay)
setTimeout(() => {
console.log('MapView: Disabling automatic bounds fitting - manual navigation now preserved');
setShouldFitBounds(false);
}, 2000);
}
}
// Always mark initial load as complete after first fetch
@@ -999,46 +1006,64 @@ const DroneDetectionPopup = ({ detection, age, droneTypes, droneDetectionHistory
);
};
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}`}
const DeviceListItem = ({ device, status, detections, onClick }) => {
const hasCoordinates = device.geo_lat !== null && device.geo_lon !== null;
return (
<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">
{hasCoordinates
? (device.location_description || `${device.geo_lat}, ${device.geo_lon}`)
: (
<span className="text-amber-600 font-medium">
⚠️ Coordinates missing - please add location
</span>
)
}
</div>
</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 className="flex items-center space-x-4">
{!hasCoordinates && (
<div className="flex items-center space-x-1 text-amber-600">
<ExclamationTriangleIcon className="h-4 w-4" />
<span className="text-xs font-medium">Incomplete</span>
</div>
)}
{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>
</div>
);
);
};
export default MapView;