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
.filter(detection => detection.geo_lat && detection.geo_lon)
.map(detection => {
const opacity = getDetectionOpacity(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 (
<React.Fragment key={detection.id}>
<Marker
position={[detection.geo_lat, detection.geo_lon]}
icon={createDroneIcon(detection.rssi, detection.drone_type)}
opacity={opacity}
>
<Popup>
<DroneDetectionPopup detection={detection} age={age} droneTypes={droneTypes} />
</Popup>
</Marker>
{/* Detection Ring around Detector (NOT drone position) */}
<Circle
center={[detection.geo_lat, detection.geo_lon]} // Detector position
radius={radius}
pathOptions={{
color: ringColor,
fillColor: ringColor,
fillOpacity: 0.05 * opacity,
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 */}
{age < 2 && (
<Circle
center={[detection.geo_lat, detection.geo_lon]}
radius={200} // 200m detection radius
pathOptions={{
color: detection.rssi > -60 ? '#ff4757' : '#ffa726',
fillColor: detection.rssi > -60 ? '#ff4757' : '#ffa726',
fillOpacity: 0.1 * opacity,
weight: 2,
opacity: opacity * 0.5
}}
/>
{/* Optional: Small info marker at detector showing detection details */}
{age < 1 && ( // Only show for very recent detections (< 1 minute)
<Marker
position={[detection.geo_lat, detection.geo_lon]}
icon={createDroneIcon(detection.rssi, detection.drone_type)}
opacity={opacity * 0.7}
>
<Popup>
<DroneDetectionPopup detection={detection} age={age} droneTypes={droneTypes} />
</Popup>
</Marker>
)}
</React.Fragment>
);
@@ -360,23 +387,27 @@ const MapView = () => {
{showDroneDetections && (
<>
<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 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>
<span className="text-gray-700">Strong Signal (&gt;-60dBm)</span>
<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">Orlan/Military (Always Critical)</span>
</div>
<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>
<span className="text-gray-700">Medium Signal (-60 to -70dBm)</span>
<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">Close Range (&gt;-60dBm)</span>
</div>
<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>
<span className="text-gray-700">Weak Signal (&lt;-70dBm)</span>
<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">Medium Range (-60 to -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 className="w-3 h-3 border-2 border-green-500 rounded-full bg-green-500 bg-opacity-10"></div>
<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>
</>
)}