Fix jwt-token

This commit is contained in:
2025-08-18 05:14:30 +02:00
parent f2b433b8a4
commit a05665ce3e
3 changed files with 87 additions and 53 deletions

View File

@@ -73,8 +73,8 @@ const MapView = () => {
const [devices, setDevices] = useState([]); const [devices, setDevices] = useState([]);
const [selectedDevice, setSelectedDevice] = useState(null); const [selectedDevice, setSelectedDevice] = useState(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [mapCenter, setMapCenter] = useState([59.3293, 18.0686]); // Stockholm default const [mapCenter, setMapCenter] = useState([59.4, 18.1]); // Stockholm area center
const [mapZoom, setMapZoom] = useState(10); const [mapZoom, setMapZoom] = useState(11); // Closer zoom for Stockholm area
const [showDroneDetections, setShowDroneDetections] = useState(true); const [showDroneDetections, setShowDroneDetections] = useState(true);
const [droneDetectionHistory, setDroneDetectionHistory] = useState([]); const [droneDetectionHistory, setDroneDetectionHistory] = useState([]);
const { recentDetections, deviceStatus } = useSocket(); const { recentDetections, deviceStatus } = useSocket();
@@ -131,10 +131,15 @@ const MapView = () => {
setDevices(deviceData); setDevices(deviceData);
// Set map center to first device with valid coordinates // Set map bounds to Stockholm area with all three detectors
const deviceWithCoords = deviceData.find(d => d.geo_lat && d.geo_lon); if (deviceData.length > 0 && devices.length === 0) {
if (deviceWithCoords && devices.length === 0) { // Stockholm area bounds that include Arlanda, Naval Base, and Royal Castle
setMapCenter([deviceWithCoords.geo_lat, deviceWithCoords.geo_lon]); 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) { } catch (error) {
console.error('Error fetching devices:', error); console.error('Error fetching devices:', error);
@@ -216,12 +221,12 @@ const MapView = () => {
zoom={mapZoom} zoom={mapZoom}
className="h-full w-full" className="h-full w-full"
whenCreated={(map) => { whenCreated={(map) => {
// Auto-fit to device locations if available // Set bounds to Stockholm area to show all three detectors
const validDevices = devices.filter(d => d.geo_lat && d.geo_lon); const stockholmBounds = [
if (validDevices.length > 1) { [59.2, 17.8], // Southwest
const bounds = validDevices.map(d => [d.geo_lat, d.geo_lon]); [59.7, 18.4] // Northeast
map.fitBounds(bounds, { padding: [20, 20] }); ];
} map.fitBounds(stockholmBounds, { padding: [20, 20] });
}} }}
> >
<TileLayer <TileLayer
@@ -294,38 +299,42 @@ const MapView = () => {
})} })}
</MapContainer> </MapContainer>
{/* Map Legend */} {/* Map Legend - Fixed positioning and visibility */}
<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="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">Legend</div> <div className="font-semibold mb-2 text-gray-800">Map Legend</div>
<div className="space-y-1"> <div className="space-y-1.5">
<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"></div> <div className="w-3 h-3 bg-green-500 rounded-full border border-green-600"></div>
<span>Device Online</span> <span className="text-gray-700">Device Online</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-red-500 rounded-full"></div> <div className="w-3 h-3 bg-red-500 rounded-full border border-red-600"></div>
<span>Device Detecting</span> <span className="text-gray-700">Device Detecting</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-gray-500 rounded-full"></div> <div className="w-3 h-3 bg-gray-500 rounded-full border border-gray-600"></div>
<span>Device Offline</span> <span className="text-gray-700">Device Offline</span>
</div> </div>
{showDroneDetections && ( {showDroneDetections && (
<> <>
<div className="border-t border-gray-200 mt-2 pt-1"> <div className="border-t border-gray-200 mt-2 pt-2">
<div className="font-medium">Drone Detections:</div> <div className="font-medium text-gray-800 mb-1">Drone Detections:</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 opacity-100"></div> <div className="w-3 h-3 bg-red-500 rounded-full border border-red-600 opacity-100"></div>
<span>Strong Signal (&gt;-60dBm)</span> <span className="text-gray-700">Strong Signal (&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-orange-500 rounded-full opacity-80"></div> <div className="w-3 h-3 bg-orange-500 rounded-full border border-orange-600 opacity-90"></div>
<span>Medium Signal (-60 to -70dBm)</span> <span className="text-gray-700">Medium Signal (-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 bg-green-500 rounded-full opacity-60"></div> <div className="w-3 h-3 bg-green-500 rounded-full border border-green-600 opacity-80"></div>
<span>Weak Signal (&lt;-70dBm)</span> <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> </div>
</> </>
)} )}

View File

@@ -30,21 +30,46 @@ async function seedDatabase() {
console.log('✅ Admin user already exists'); console.log('✅ Admin user already exists');
} }
// Create a sample device if none exist // Create sample devices if none exist
const deviceCount = await Device.count(); const deviceCount = await Device.count();
if (deviceCount === 0) { if (deviceCount === 0) {
await Device.create({ await Device.bulkCreate([
name: 'Drone Detector Alpha', {
geo_lat: 59.3293, id: 1,
geo_lon: 18.0686, name: 'Arlanda Airport Detector',
location_description: 'Stockholm Central', geo_lat: 59.6519,
geo_lon: 17.9186,
location_description: 'Arlanda Airport Security Zone',
is_active: true, is_active: true,
last_heartbeat: new Date(), last_heartbeat: new Date(),
heartbeat_interval: 300, heartbeat_interval: 300,
firmware_version: '1.0.0' firmware_version: '1.0.0'
}); },
{
id: 2,
name: 'Musk Naval Base Detector',
geo_lat: 59.2753,
geo_lon: 18.2649,
location_description: 'Musk Naval Base Perimeter',
is_active: true,
last_heartbeat: new Date(),
heartbeat_interval: 300,
firmware_version: '1.0.0'
},
{
id: 3,
name: 'Royal Castle Detector',
geo_lat: 59.3268,
geo_lon: 18.0717,
location_description: 'Royal Castle Security Zone',
is_active: true,
last_heartbeat: new Date(),
heartbeat_interval: 300,
firmware_version: '1.0.0'
}
]);
console.log('✅ Sample device created'); console.log('✅ Three detector devices created (Arlanda, Naval Base, Royal Castle)');
} else { } else {
console.log('✅ Devices already exist'); console.log('✅ Devices already exist');
} }

View File

@@ -19,24 +19,24 @@ API_BASE_URL = "http://selfservice.cqers.com/drones/api"
DEVICES = [ DEVICES = [
{ {
"id": 1, "id": 1,
"name": "Stockholm Central Detector",
"lat": 59.3293,
"lon": 18.0686,
"coverage_radius": 5.0 # km
},
{
"id": 2,
"name": "Arlanda Airport Detector", "name": "Arlanda Airport Detector",
"lat": 59.6519, "lat": 59.6519,
"lon": 17.9186, "lon": 17.9186,
"coverage_radius": 8.0 # km "coverage_radius": 8.0 # km
}, },
{ {
"id": 3, "id": 2,
"name": "Göteborg Harbor Detector", "name": "Musk Naval Base Detector",
"lat": 57.7089, "lat": 59.2753,
"lon": 11.9746, "lon": 18.2649,
"coverage_radius": 6.0 # km "coverage_radius": 6.0 # km
},
{
"id": 3,
"name": "Royal Castle Detector",
"lat": 59.3268,
"lon": 18.0717,
"coverage_radius": 4.0 # km
} }
] ]