${meta.label}${s.value == null ? '—' : s.value} ${s.unit || meta.unit}
`;
}).join('');
return `${st.name}${st.eco ? 'EcoEsperanza' : ''}
`
+ ``
+ `${rows || 'Sin sensores'}
`;
}
/* =========================================================================
Sidebar
========================================================================= */
function Sidebar({ stations, total, active, filters, setFilters, selectedId, onSelect, open }) {
const countries = useMemo(() => [...new Set(SEED.concat([]).map(s => s.country))], []);
const liveCountries = useMemo(() => [...new Set(stations.map(s => s.country))].sort(), [stations]);
return (
);
}
/* =========================================================================
App
========================================================================= */
function App() {
const [all, setAll] = useState(SEED);
const [source, setSource] = useState('muestra'); // 'muestra' | 'vivo'
const [loading, setLoading] = useState(false);
const [updatedAt, setUpdatedAt] = useState(Date.now());
const [selectedId, setSelectedId] = useState(null);
const [sideOpen, setSideOpen] = useState(false);
const [dark, setDark] = useState(false);
const [filters, setFilters] = useState({ q: '', types: [], country: '', status: 'all' });
const focusRef = useRef(() => {});
const loadLive = useCallback(async (force) => {
const cached = readCache();
if (!force && cached && Date.now() - cached.ts < CACHE_TTL) {
setAll(cached.data); setSource('vivo'); setUpdatedAt(cached.ts); return;
}
setLoading(true);
try {
const data = await fetchLive();
writeCache(data); setAll(data); setSource('vivo'); setUpdatedAt(Date.now());
} catch (e) {
setAll(SEED); setSource('muestra'); setUpdatedAt(Date.now());
} finally { setLoading(false); }
}, []);
// On mount: use fresh cache, else attempt live in the background (seed shows instantly).
useEffect(() => {
const cached = readCache();
if (cached && Date.now() - cached.ts < CACHE_TTL) { setAll(cached.data); setSource('vivo'); setUpdatedAt(cached.ts); }
else { loadLive(false); }
}, [loadLive]);
useEffect(() => { document.documentElement.dataset.theme = dark ? 'dark' : ''; }, [dark]);
useEffect(() => { drawIcons(); });
const total = all.length;
const active = useMemo(() => all.filter(isActive).length, [all]);
const filtered = useMemo(() => {
const q = filters.q.trim().toLowerCase();
return all.filter(st => {
if (q && !st.name.toLowerCase().includes(q) && !st.country.toLowerCase().includes(q)) return false;
if (filters.country && st.country !== filters.country) return false;
if (filters.status === 'active' && !isActive(st)) return false;
if (filters.status === 'inactive' && isActive(st)) return false;
if (filters.types.length && !filters.types.every(t => st.sensors.some(s => s.type === t))) return false;
return true;
});
}, [all, filters]);
const onSelect = useCallback((id) => { setSelectedId(id); focusRef.current(id); if (window.innerWidth <= 860) setSideOpen(false); }, []);
const registerFocus = useCallback((fn) => { focusRef.current = fn; }, []);
return (
Mapa de Sensores Ambientales
Red global de monitoreo · datos abiertos · EcoEsperanza
{source === 'vivo' ? 'En vivo' : 'Muestra'} · {timeAgo(updatedAt)}
Calidad del aire (PM2.5)
{loading && Buena ≤ 12
Moderada ≤ 35
Dañina > 55
EcoEsperanza