Simplify components, add sha256() for later
This commit is contained in:
		@@ -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='© <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='© <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}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user