Spaces:
Sleeping
Sleeping
File size: 2,686 Bytes
53c9876 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 'use client';
import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import { SensorWithLatestReading } from '@/lib/types';
// Dynamically import map to avoid SSR issues
const MapView = dynamic(() => import('./MapView'), { ssr: false });
export default function SensorMap() {
const [sensors, setSensors] = useState<SensorWithLatestReading[]>([]);
const [selectedSensor, setSelectedSensor] = useState<SensorWithLatestReading | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchSensors();
// Refresh data every 30 seconds
const interval = setInterval(fetchSensors, 30000);
return () => clearInterval(interval);
}, []);
const fetchSensors = async () => {
try {
const response = await fetch('/api/sensors');
const data = await response.json();
setSensors(data);
} catch (error) {
console.error('Error fetching sensors:', error);
} finally {
setLoading(false);
}
};
if (loading) {
return (
<div className="flex items-center justify-center h-screen bg-gray-50">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
<p className="text-gray-600">Loading sensors...</p>
</div>
</div>
);
}
return (
<div className="h-screen flex flex-col">
{/* Header */}
<header className="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-gray-900">Water Quality Monitoring</h1>
<p className="text-sm text-gray-500 mt-1">
{sensors.length} active sensor{sensors.length !== 1 ? 's' : ''} worldwide
</p>
</div>
<button
onClick={fetchSensors}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
Refresh
</button>
</div>
</header>
{/* Map Container */}
<div className="flex-1 relative">
<MapView
sensors={sensors}
selectedSensor={selectedSensor}
onSelectSensor={setSelectedSensor}
/>
</div>
</div>
);
}
|