Simplify components, add sha256() for later

This commit is contained in:
Tanner Collin 2024-07-16 02:02:55 +00:00
parent e5dbb0af39
commit 7b15b39d5f

View File

@ -11,8 +11,6 @@ import 'leaflet/dist/leaflet.css';
import 'react-range-slider-input/dist/style.css';
let tzcache = {};
// num: number of steps per duration
// secs: number of seconds per step
const durations = [
@ -38,6 +36,13 @@ const parseSlider = (end, duration, slider) => {
return [lowStr, highStr];
};
//async function sha256(source) {
// const sourceBytes = new TextEncoder().encode(source);
// const digest = await crypto.subtle.digest('SHA-256', sourceBytes);
// const resultBytes = [...new Uint8Array(digest)];
// return resultBytes.map(x => x.toString(16).padStart(2, '0')).join('');
//}
function useSensor(measurement, name, end, duration) {
const [data, setData] = useState(false);
const [loading, setLoading] = useState(false);
@ -67,7 +72,7 @@ function useSensor(measurement, name, end, duration) {
function Owntracks({end, duration, slider}) {
function Map({end, duration, slider}) {
const [data, loading] = useSensor('owntracks', 'OwnTracks', end, duration);
const range = parseSlider(end, duration, slider);
@ -80,38 +85,29 @@ function Owntracks({end, duration, slider}) {
localStorage.setItem('api_key', api_key);
}
return (
<>
{loading ?
<p>Loading...</p>
:
coords.length ?
<MapContainer center={coords[coords.length-1]} zoom={13} scrollWheelZoom={true} style={{ width: '100%', height: 'calc(100vh - 2.5rem)' }}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'
/>
<Polyline pathOptions={{color: 'blue'}} positions={coords} />
</MapContainer>
:
<>
<p>No data</p>
<form onSubmit={handleSubmit}>
<p>
<input placeholder='API key' />
</p>
</form>
</>
}
</>
);
}
function Graphs({end, duration, slider}) {
return (
<div className='container'>
<Owntracks end={end} duration={duration} slider={slider} />
{loading ?
<p>Loading...</p>
:
coords.length ?
<MapContainer center={coords[coords.length-1]} zoom={13} scrollWheelZoom={true} style={{ width: '100%', height: 'calc(100vh - 2.5rem)' }}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'
/>
<Polyline pathOptions={{color: 'blue'}} positions={coords} />
</MapContainer>
:
<>
<p>No data</p>
<form onSubmit={handleSubmit}>
<p>
<input placeholder='API key' />
</p>
</form>
</>
}
</div>
);
}
@ -267,7 +263,7 @@ function App() {
setSlider={setSlider}
/>
<Graphs
<Map
end={end}
duration={duration}
slider={slider}