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-08-18 05:14:30 +02:00
parent f2b433b8a4
commit a05665ce3e
3 changed files with 87 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,8 +73,8 @@ 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 [mapCenter, setMapCenter] = useState([59.4, 18.1]); // Stockholm area center
const [mapZoom, setMapZoom] = useState(11); // Closer zoom for Stockholm area
const [showDroneDetections, setShowDroneDetections] = useState(true);
const [droneDetectionHistory, setDroneDetectionHistory] = useState([]);
const { recentDetections, deviceStatus } = useSocket();
@@ -131,10 +131,15 @@ const MapView = () => {
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]);
// Set map bounds to Stockholm area with all three detectors
if (deviceData.length > 0 && devices.length === 0) {
// Stockholm area bounds that include Arlanda, Naval Base, and Royal Castle
const stockholmBounds = [
[59.2, 17.8], // Southwest
[59.7, 18.4] // Northeast
];
setMapCenter([59.4, 18.1]); // Center of Stockholm area
setMapZoom(11);
}
} catch (error) {
console.error('Error fetching devices:', error);
@@ -216,12 +221,12 @@ const MapView = () => {
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] });
}
// Set bounds to Stockholm area to show all three detectors
const stockholmBounds = [
[59.2, 17.8], // Southwest
[59.7, 18.4] // Northeast
];
map.fitBounds(stockholmBounds, { padding: [20, 20] });
}}
>
<TileLayer
@@ -294,38 +299,42 @@ const MapView = () => {
})}
</MapContainer>
{/* Map Legend */}
<div className="absolute bottom-4 left-4 bg-white bg-opacity-90 backdrop-blur-sm rounded-lg p-3 shadow-lg text-xs">
<div className="font-semibold mb-2">Legend</div>
<div className="space-y-1">
{/* Map Legend - Fixed positioning and visibility */}
<div className="absolute bottom-4 left-4 bg-white rounded-lg p-3 shadow-lg text-xs border border-gray-200 z-[1000] max-w-xs">
<div className="font-semibold mb-2 text-gray-800">Map Legend</div>
<div className="space-y-1.5">
<div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
<span>Device Online</span>
<div className="w-3 h-3 bg-green-500 rounded-full border border-green-600"></div>
<span className="text-gray-700">Device Online</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-red-500 rounded-full"></div>
<span>Device Detecting</span>
<div className="w-3 h-3 bg-red-500 rounded-full border border-red-600"></div>
<span className="text-gray-700">Device Detecting</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-gray-500 rounded-full"></div>
<span>Device Offline</span>
<div className="w-3 h-3 bg-gray-500 rounded-full border border-gray-600"></div>
<span className="text-gray-700">Device Offline</span>
</div>
{showDroneDetections && (
<>
<div className="border-t border-gray-200 mt-2 pt-1">
<div className="font-medium">Drone Detections:</div>
<div className="border-t border-gray-200 mt-2 pt-2">
<div className="font-medium text-gray-800 mb-1">Drone Detections:</div>
</div>
<div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-red-500 rounded-full opacity-100"></div>
<span>Strong Signal (&gt;-60dBm)</span>
<div className="w-3 h-3 bg-red-500 rounded-full border border-red-600 opacity-100"></div>
<span className="text-gray-700">Strong Signal (&gt;-60dBm)</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-orange-500 rounded-full opacity-80"></div>
<span>Medium Signal (-60 to -70dBm)</span>
<div className="w-3 h-3 bg-orange-500 rounded-full border border-orange-600 opacity-90"></div>
<span className="text-gray-700">Medium Signal (-60 to -70dBm)</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-green-500 rounded-full opacity-60"></div>
<span>Weak Signal (&lt;-70dBm)</span>
<div className="w-3 h-3 bg-green-500 rounded-full border border-green-600 opacity-80"></div>
<span className="text-gray-700">Weak Signal (&lt;-70dBm)</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-3 h-3 border-2 border-red-400 rounded-full bg-transparent"></div>
<span className="text-gray-700">Detection Range</span>
</div>
</>
)}