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-28 12:29:37 +02:00
parent c86cfe72a6
commit 51b54227e2
1 changed files with 40 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -121,19 +121,39 @@ const MapView = () => {
const [isInitialLoad, setIsInitialLoad] = useState(true); // Track if this is the first load const [isInitialLoad, setIsInitialLoad] = useState(true); // Track if this is the first load
const [showDroneDetections, setShowDroneDetections] = useState(true); const [showDroneDetections, setShowDroneDetections] = useState(true);
const [droneDetectionHistory, setDroneDetectionHistory] = useState([]); const [droneDetectionHistory, setDroneDetectionHistory] = useState([]);
const [droneTypes, setDroneTypes] = useState({});
const { recentDetections, deviceStatus } = useSocket(); const { recentDetections, deviceStatus } = useSocket();
// Drone types mapping // Fetch drone types from API
const droneTypes = { const fetchDroneTypes = async () => {
1: "DJI Mavic", try {
2: "Racing Drone", const response = await api.get('/drone-types');
3: "DJI Phantom", if (response.data.success) {
4: "Fixed Wing", // Convert array to object for easy lookup
5: "Surveillance", const typesMap = {};
0: "Unknown" response.data.data.forEach(type => {
typesMap[type.id] = type.name;
});
setDroneTypes(typesMap);
}
} catch (error) {
console.error('Error fetching drone types:', error);
// Fallback to basic mapping
setDroneTypes({
0: "Russian Orlan",
1: "Bayraktar TB2",
2: "MQ-9 Reaper",
3: "Iranian Shahed",
10: "DJI Mavic",
11: "DJI Phantom",
20: "DJI Mini",
99: "Unknown"
});
}
}; };
useEffect(() => { useEffect(() => {
fetchDroneTypes();
fetchDevices(); fetchDevices();
const interval = setInterval(fetchDevices, 30000); // Refresh every 30 seconds const interval = setInterval(fetchDevices, 30000); // Refresh every 30 seconds
return () => clearInterval(interval); return () => clearInterval(interval);
@@ -149,13 +169,15 @@ const MapView = () => {
const newDetection = { const newDetection = {
...latestDetection, ...latestDetection,
timestamp: Date.now(), timestamp: Date.now(),
id: `${latestDetection.device_id}-${latestDetection.drone_id || 'unknown'}-${latestDetection.device_timestamp || Date.now()}` id: `drone-${latestDetection.drone_id || 'unknown'}-${latestDetection.device_id}` // Group by drone_id, not timestamp
}; };
console.log('MapView: Adding to history:', newDetection); console.log('MapView: Adding to history:', newDetection);
setDroneDetectionHistory(prev => { setDroneDetectionHistory(prev => {
const newHistory = [newDetection, ...prev.slice(0, 19)]; // Remove any existing detection for this same drone_id to avoid duplicates
const filtered = prev.filter(d => d.drone_id !== latestDetection.drone_id);
const newHistory = [newDetection, ...filtered.slice(0, 19)];
console.log('MapView: Detection history updated, length:', newHistory.length); console.log('MapView: Detection history updated, length:', newHistory.length);
return newHistory; return newHistory;
}); });
@@ -755,7 +777,14 @@ const DroneDetectionPopup = ({ detection, age, droneTypes, droneDetectionHistory
</div> </div>
<div> <div>
<span className="font-medium text-gray-700">Type:</span> <span className="font-medium text-gray-700">Type:</span>
<div className="text-gray-900">{droneTypes[detection.drone_type] || 'Unknown'}</div> <div className="text-gray-900">
{droneTypes[detection.drone_type] || `Type ${detection.drone_type}`}
</div>
{droneTypes[detection.drone_type] && (
<div className="text-xs text-gray-500 mt-1">
ID: {detection.drone_type}
</div>
)}
</div> </div>
</div> </div>