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 08:06:39 +02:00
parent a89fa61005
commit 2b21b8380e
1 changed files with 63 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -303,38 +303,65 @@ const MapView = () => {
); );
})} })}
{/* Drone Detection Markers */} {/* RSSI-based Detection Rings around Detectors */}
{showDroneDetections && droneDetectionHistory {showDroneDetections && droneDetectionHistory
.filter(detection => detection.geo_lat && detection.geo_lon) .filter(detection => detection.geo_lat && detection.geo_lon)
.map(detection => { .map(detection => {
const opacity = getDetectionOpacity(detection); const opacity = getDetectionOpacity(detection);
const age = getDetectionAge(detection); const age = getDetectionAge(detection);
// Calculate ring radius based on RSSI (rough distance estimation)
const getRssiRadius = (rssi) => {
if (rssi > -40) return 100; // <100m - very close
if (rssi > -60) return 500; // ~500m - close
if (rssi > -70) return 1500; // ~1.5km - medium
if (rssi > -80) return 4000; // ~4km - far
if (rssi > -90) return 8000; // ~8km - very far
return 15000; // ~15km - maximum range
};
const radius = getRssiRadius(detection.rssi);
// Color based on threat level and RSSI strength
const getRingColor = (rssi, droneType) => {
// Orlan drones (type 1) always red
if (droneType === 1) return '#dc2626'; // red-600
// Other drones based on RSSI
if (rssi > -60) return '#dc2626'; // red-600 - close
if (rssi > -70) return '#ea580c'; // orange-600 - medium
return '#16a34a'; // green-600 - far
};
const ringColor = getRingColor(detection.rssi, detection.drone_type);
return ( return (
<React.Fragment key={detection.id}> <React.Fragment key={detection.id}>
<Marker {/* Detection Ring around Detector (NOT drone position) */}
position={[detection.geo_lat, detection.geo_lon]} <Circle
icon={createDroneIcon(detection.rssi, detection.drone_type)} center={[detection.geo_lat, detection.geo_lon]} // Detector position
opacity={opacity} radius={radius}
> pathOptions={{
<Popup> color: ringColor,
<DroneDetectionPopup detection={detection} age={age} droneTypes={droneTypes} /> fillColor: ringColor,
</Popup> fillOpacity: 0.05 * opacity,
</Marker> weight: detection.drone_type === 1 ? 3 : 2, // Thicker for Orlan
opacity: opacity * 0.8,
dashArray: detection.drone_type === 1 ? null : '5, 5' // Solid for Orlan, dashed for others
}}
/>
{/* Detection range circle for recent detections */} {/* Optional: Small info marker at detector showing detection details */}
{age < 2 && ( {age < 1 && ( // Only show for very recent detections (< 1 minute)
<Circle <Marker
center={[detection.geo_lat, detection.geo_lon]} position={[detection.geo_lat, detection.geo_lon]}
radius={200} // 200m detection radius icon={createDroneIcon(detection.rssi, detection.drone_type)}
pathOptions={{ opacity={opacity * 0.7}
color: detection.rssi > -60 ? '#ff4757' : '#ffa726', >
fillColor: detection.rssi > -60 ? '#ff4757' : '#ffa726', <Popup>
fillOpacity: 0.1 * opacity, <DroneDetectionPopup detection={detection} age={age} droneTypes={droneTypes} />
weight: 2, </Popup>
opacity: opacity * 0.5 </Marker>
}}
/>
)} )}
</React.Fragment> </React.Fragment>
); );
@@ -360,23 +387,27 @@ const MapView = () => {
{showDroneDetections && ( {showDroneDetections && (
<> <>
<div className="border-t border-gray-200 mt-2 pt-2"> <div className="border-t border-gray-200 mt-2 pt-2">
<div className="font-medium text-gray-800 mb-1">Drone Detections:</div> <div className="font-medium text-gray-800 mb-1">Drone Detection Rings:</div>
<div className="text-xs text-gray-600 mb-2">Rings show estimated detection range based on RSSI</div>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-red-500 rounded-full border border-red-600 opacity-100"></div> <div className="w-3 h-3 border-2 border-red-600 rounded-full bg-red-600 bg-opacity-10"></div>
<span className="text-gray-700">Strong Signal (&gt;-60dBm)</span> <span className="text-gray-700">Orlan/Military (Always Critical)</span>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-orange-500 rounded-full border border-orange-600 opacity-90"></div> <div className="w-3 h-3 border-2 border-red-500 rounded-full bg-red-500 bg-opacity-10"></div>
<span className="text-gray-700">Medium Signal (-60 to -70dBm)</span> <span className="text-gray-700">Close Range (&gt;-60dBm)</span>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-green-500 rounded-full border border-green-600 opacity-80"></div> <div className="w-3 h-3 border-2 border-orange-500 rounded-full bg-orange-500 bg-opacity-10"></div>
<span className="text-gray-700">Weak Signal (&lt;-70dBm)</span> <span className="text-gray-700">Medium Range (-60 to -70dBm)</span>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div className="w-3 h-3 border-2 border-red-400 rounded-full bg-transparent"></div> <div className="w-3 h-3 border-2 border-green-500 rounded-full bg-green-500 bg-opacity-10"></div>
<span className="text-gray-700">Detection Range</span> <span className="text-gray-700">Far Range (&lt;-70dBm)</span>
</div>
<div className="text-xs text-gray-500 mt-2">
Ring size = estimated distance from detector
</div> </div>
</> </>
)} )}