From 2b21b8380e38f9cec6f44f8ac8d6d02321915cc0 Mon Sep 17 00:00:00 2001
From: Alexander Borg <borg@servernet.se>
Date: Mon, 18 Aug 2025 08:06:39 +0200
Subject: [PATCH] Fix jwt-token

---
 client/src/pages/MapView.jsx | 95 ++++++++++++++++++++++++------------
 1 file changed, 63 insertions(+), 32 deletions(-)

diff --git a/client/src/pages/MapView.jsx b/client/src/pages/MapView.jsx
index a0f0819..c4ad9b5 100644
--- a/client/src/pages/MapView.jsx
+++ b/client/src/pages/MapView.jsx
@@ -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>
                 </>
               )}