import React, { useState, useEffect } from 'react'; import * as leaflet from 'leaflet'; import { MapContainer, Polyline, TileLayer, useMap } from 'react-leaflet'; import Datetime from 'react-datetime'; import 'react-datetime/css/react-datetime.css'; import axios from 'axios'; import moment from 'moment-timezone'; import './App.css'; import 'leaflet/dist/leaflet.css'; let tzcache = {}; const durations = [ {id: 0, len: 'Day', win: '10m', full: '10 min', delta: [1, 'days'], format: 'HH'}, {id: 1, len: 'Day', win: '1h', full: '1 hour', delta: [1, 'days'], format: 'HH'}, {id: 2, len: 'Week', win: '1h', full: '1 hour', delta: [7, 'days'], format: 'HH'}, {id: 3, len: 'Week', win: '1d', full: '1 day', delta: [7, 'days'], format: 'D'}, {id: 4, len: 'Month', win: '1d', full: '1 day', delta: [1, 'months'], format: 'D'}, {id: 5, len: 'Month', win: '7d', full: '7 day', delta: [1, 'months'], format: 'D'}, {id: 6, len: 'Year', win: '1d', full: '1 day', delta: [1, 'years'], format: 'M/D'}, {id: 7, len: 'Year', win: '30d', full: '30 day', delta: [1, 'years'], format: 'M'}, ]; const units = { 'PM10': ' ug/m³', 'PM2.5': ' ug/m³', 'VOC': ' / 500', 'CO2': ' ppm', 'Energy': ' kWh', 'Power': ' W', 'Temperature': ' °C', 'Humidity': '%', 'Setpoint': ' °C', 'State': '', 'Lux': ' lx', }; function useSensor(measurement, name, end, duration) { const [data, setData] = useState(false); const [loading, setLoading] = useState(false); useEffect(() => { const get = async() => { setLoading(true); try { const api_key = localStorage.getItem('api_key', 'null'); const params = { end: end.unix(), duration: duration.len.toLowerCase(), window: duration.win, api_key: api_key }; const res = await axios.get( 'https://sensors-api.dns.t0.vc/history/'+measurement+'/'+name, { params: params }, ); setData((d) => (res.data)); setLoading(false); } catch (error) { console.log(error); } }; get(); }, [end, duration]); return [data, loading]; }; function Owntracks({end, duration}) { const [data, loading] = useSensor('owntracks', 'OwnTracks', end, duration); const coords = data.length ? data.map(({ lat, lon }) => [lat, lon]).filter(([lat, lon]) => lat !== null || lon !== null) : []; return ( <> {loading ?
Loading...
: coords.length ?No coords
} > ); } function Graphs({end, duration}) { return (