Take API key, adjust ranges
This commit is contained in:
		| @@ -8,9 +8,8 @@ body { | ||||
|  | ||||
| .container { | ||||
| 	display: flex; | ||||
| 	flex-wrap: wrap; | ||||
| 	justify-content: center; | ||||
| 	margin-bottom: 3rem; | ||||
| 	flex-direction: column; | ||||
| 	align-items: center; | ||||
| } | ||||
|  | ||||
| .chart { | ||||
|   | ||||
| @@ -11,14 +11,13 @@ 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: 0, len: 'Day', win: '1m', full: '1 min', delta: [1, 'days'], format: 'HH'}, | ||||
| 	{id: 1, len: 'Week', win: '3m', full: '3 min', delta: [7, 'days'], format: 'HH'}, | ||||
| 	{id: 2, len: 'Week', win: '10m', full: '10 min', delta: [7, 'days'], format: 'HH'}, | ||||
| 	{id: 3, len: 'Month', win: '10m', full: '10 min', delta: [1, 'months'], format: 'D'}, | ||||
| 	{id: 4, len: 'Month', win: '1h', full: '1 hour', delta: [1, 'months'], format: 'D'}, | ||||
| 	{id: 5, len: 'Year', win: '2h', full: '2 hours', delta: [1, 'years'], format: 'M/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 = { | ||||
| @@ -69,6 +68,12 @@ function Owntracks({end, duration}) { | ||||
|  | ||||
| 	const coords = data.length ? data.map(({ lat, lon }) => [lat, lon]).filter(([lat, lon]) => lat !== null || lon !== null) : []; | ||||
|  | ||||
| 	const handleSubmit = (e) => { | ||||
| 		e.preventDefault(); | ||||
| 		const api_key = e.target[0].value; | ||||
| 		localStorage.setItem('api_key', api_key); | ||||
| 	} | ||||
|  | ||||
| 	return ( | ||||
| 		<> | ||||
| 		{loading ? | ||||
| @@ -78,12 +83,19 @@ function Owntracks({end, duration}) { | ||||
| 				<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://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" | ||||
| 						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 coords</p> | ||||
| 				<> | ||||
| 					<p>No data</p> | ||||
| 					<form onSubmit={handleSubmit}> | ||||
| 						<p> | ||||
| 							<input placeholder='API key' /> | ||||
| 						</p> | ||||
| 					</form> | ||||
| 				</> | ||||
| 		} | ||||
| 		</> | ||||
| 	); | ||||
|   | ||||
		Reference in New Issue
	
	Block a user